/* =============================================================================
   IDENTIDAD VISUAL — BALANZAS DE FRACCIONADO
   =============================================================================
   Manual: docs/identidad-visual.md. Proyecto: docs/RUNBOOK-BALANZAS.md, etapa 5.
   Mockup ganador (ronda 2, 07/08/2026): la B con el panel en vivo, disposición
   4×1 — el gráfico ABAJO del número, las cuatro balanzas en una fila.

   TODO va scopeado bajo `.frc-ui` y con prefijo `frc-`, como manda el §6 del
   manual: el resto de Producción sigue en Tailwind y una clase suelta lo
   rompería. Es el PRIMER módulo de la carpeta `produccion/` con identidad
   nueva y el primer .css que vive acá.

   Tratamiento LITE (la vara de Facturación): pantalla-tabla que se mira largo,
   superficie blanca, separación por trazo, la única superficie navy rellena es
   el botón primario de la barra del armazón.

   LA EXCEPCIÓN ESCRITA — el panel en vivo:
   · Es el único lugar de GS donde la SUPERFICIE se tiñe con el estado, y no
     rompe la regla §1.1: el color es del ESTADO (libre · pesando · válida ·
     desvío · sin señal), nunca de la balanza. La pintura la pone la línea.
   · El número grande dobla «números gigantes, no» con motivo: no es un KPI,
     es un DISPLAY que se lee desde la línea, a metros y de reojo. Los KPI del
     día siguen a tamaño ABM, arriba.

   La paleta NO está acá: sale entera de core/tokens.css. Los cinco estados del
   vivo usan la escala semántica tal cual — ningún token nuevo.
   ========================================================================== */

.frc-ui .material-symbols-outlined { font-variation-settings: 'wght' 400; vertical-align: middle; }

/* =============================================================================
   ESTRUCTURA — página `data-shell="full"`: el módulo maneja su alto y su scroll
   ========================================================================== */
.frc-ui { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.frc-ui .frc-shell {
    flex: 1; min-height: 0;
    background: var(--canvas);
    display: flex; flex-direction: column;
}

.frc-ui .frc-cols { flex: 1; display: flex; align-items: stretch; min-height: 0; }

/* ── El rail de balanzas — mismo idioma que el segmento: activo por trazo ── */
.frc-ui .frc-rail {
    flex: 0 0 238px;
    background: var(--surface); border-right: 1px solid var(--hair);
    padding: 10px 0; overflow-y: auto;
}
.frc-ui .frc-rail .tit {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
    font-weight: 700; color: var(--faint); padding: 0 var(--gutter) 8px;
}
.frc-ui .frc-rail button {
    width: 100%; text-align: left; background: none; border: 0; font: inherit;
    padding: 9px var(--gutter); cursor: pointer;
    border-left: 3px solid transparent; display: flex; flex-direction: column; gap: 3px;
    transition: background .15s, border-color .15s;
}
.frc-ui .frc-rail button:hover, .frc-ui .frc-rail button:focus-visible { background: var(--navy-050); outline: none; }
.frc-ui .frc-rail button.on { background: var(--navy-050); border-left-color: var(--navy); }
.frc-ui .frc-rail button .l { display: flex; align-items: center; gap: 8px; width: 100%; }
.frc-ui .frc-rail button .par { font-size: 13px; font-weight: 700; color: var(--ink); }
.frc-ui .frc-rail button.on .par { color: var(--navy); }
.frc-ui .frc-rail button .d { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.frc-ui .frc-rail .apagada .par { color: var(--faint); }
/* El semáforo de señal: verde late el heartbeat, rojo muda, gris inactiva. */
.frc-ui .frc-rail .sem { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-left: auto; }
.frc-ui .frc-rail .sem.viva { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-050); }
.frc-ui .frc-rail .sem.muda { background: var(--crit); }
.frc-ui .frc-rail .sem.off  { background: var(--hair-strong); }

.frc-ui .frc-panel { flex: 1; min-width: 0; overflow-y: auto; padding: 14px var(--gutter) 20px; }

/* ── Encabezado de la vista: título + KPIs del día (a tamaño ABM, §«números
      gigantes, no» — acá grita el color, no el cuerpo) ─────────────────────── */
.frc-ui .frc-ficha { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.frc-ui .frc-ficha h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.frc-ui .frc-ficha p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.frc-ui .frc-ficha .der { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.frc-ui .frc-kpi {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: 10px; padding: 10px 14px; min-width: 108px;
    box-shadow: var(--shadow);
}
.frc-ui .frc-kpi .k {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
    font-weight: 700; color: var(--faint); display: block;
}
.frc-ui .frc-kpi .v { font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.25; font-variant-numeric: tabular-nums; }
.frc-ui .frc-kpi .v.ok  { color: var(--ok); }
.frc-ui .frc-kpi .v.wrn { color: var(--warn); }
.frc-ui .frc-kpi .v.neg { color: var(--crit); }
.frc-ui .frc-kpi.side { border-left: 3px solid var(--navy); }
.frc-ui .frc-kpi.side.ok  { border-left-color: var(--ok); }
.frc-ui .frc-kpi.side.wrn { border-left-color: var(--warn); }
.frc-ui .frc-kpi.side.neg { border-left-color: var(--crit); }

/* =============================================================================
   EL PANEL EN VIVO — 4×1: el número arriba, la tira abajo
   ========================================================================== */
.frc-ui .frc-vivo-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; }
.frc-ui .frc-vivo-grid.una { grid-template-columns: 1fr; }
@media (max-width: 1240px) { .frc-ui .frc-vivo-grid { grid-template-columns: 1fr 1fr; } .frc-ui .frc-vivo-grid.una { grid-template-columns: 1fr; } }

.frc-ui .frc-vivo {
    background: var(--surface); border: 1px solid var(--hair);
    border-left: 4px solid var(--hair-strong);
    border-radius: var(--r-card); box-shadow: var(--e1);
    padding: 13px 16px; min-width: 0;
    display: flex; flex-direction: column; gap: 10px;
    transition: background .3s var(--curva), border-color .3s var(--curva), box-shadow .3s var(--curva);
}
/* En la ficha de una balanza el número y su detalle van al lado de los chips. */
.frc-ui .frc-vivo-grid.una .frc-vivo {
    display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.35fr);
    gap: 16px; align-items: center;
}

.frc-ui .frc-vivo .cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.frc-ui .frc-vivo .cab .par { font-size: .82rem; font-weight: 700; color: var(--ink); }
.frc-ui .frc-vivo .cab .n {
    font-family: 'Consolas','SF Mono',monospace; font-size: 10.5px; color: var(--muted);
    border: 1px solid var(--hair-strong); border-radius: 5px; padding: 0 5px;
}
.frc-ui .frc-vivo .art { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }

/* El número. La única cifra de la pantalla fuera del tamaño ABM (ver tope). */
.frc-ui .frc-vivo .peso {
    font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink);
    display: flex; align-items: baseline; gap: 6px;
    transition: color .25s var(--curva);
}
.frc-ui .frc-vivo .peso .u { font-size: .95rem; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.frc-ui .frc-vivo .est {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 7px;
    font-size: 12px; font-weight: 700;
}
.frc-ui .frc-vivo .est .punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.frc-ui .frc-vivo .desv { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.frc-ui .frc-vivo .desv b { font-size: 13px; }

/* Los cinco estados — la escala semántica del manual §1.1, sin colores nuevos:
   libre = neutro · pesando = informativo (navy) · válida = ok · desvío = warn ·
   sin señal = crit · inactiva = apagada. */
.frc-ui .frc-vivo.est-mut { border-left-color: var(--hair-strong); }
.frc-ui .frc-vivo.est-mut .peso, .frc-ui .frc-vivo.est-mut .est { color: var(--faint); }

.frc-ui .frc-vivo.est-nav { border-left-color: var(--navy); background: var(--navy-050); }
.frc-ui .frc-vivo.est-nav .peso, .frc-ui .frc-vivo.est-nav .est { color: var(--navy); }

.frc-ui .frc-vivo.est-ok { border-left-color: var(--ok); background: var(--ok-050); box-shadow: var(--e2); }
.frc-ui .frc-vivo.est-ok .peso, .frc-ui .frc-vivo.est-ok .est { color: var(--ok); }

.frc-ui .frc-vivo.est-wrn { border-left-color: var(--warn); background: var(--warn-050); box-shadow: var(--e2); }
.frc-ui .frc-vivo.est-wrn .peso, .frc-ui .frc-vivo.est-wrn .est { color: var(--warn); }

.frc-ui .frc-vivo.est-neg { border-left-color: var(--crit); background: var(--crit-050); }
.frc-ui .frc-vivo.est-neg .peso { color: var(--crit); font-size: 1.5rem; }
.frc-ui .frc-vivo.est-neg .est { color: var(--crit); }

.frc-ui .frc-vivo.est-off { background: #fafbfc; }
.frc-ui .frc-vivo.est-off .peso { color: var(--faint); font-size: 1.5rem; }
.frc-ui .frc-vivo.est-off .est { color: var(--faint); }

/* El pulso: sólo mientras pesa. Un punto que late dice «esto es de ahora»
   sin escribir «en vivo» en ningún lado. */
.frc-ui .frc-vivo.est-nav .est .punto { animation: frcPulso 1.1s ease-in-out infinite; }
@keyframes frcPulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }

/* El destello del registro: medio segundo cuando la pesada queda tomada.
   Es el único movimiento que informa — el resto es quieto. */
.frc-ui .frc-vivo.registrando { animation: frcDestello .55s var(--curva); }
@keyframes frcDestello { from { transform: scale(1.012); box-shadow: var(--e3); } to { transform: scale(1); } }

/* ── Gráficos ──────────────────────────────────────────────────────────────── */
.frc-ui .frc-graf { position: relative; min-width: 0; }
.frc-ui .frc-graf .rot {
    font-size: .55rem; text-transform: uppercase; letter-spacing: .1em;
    font-weight: 700; color: var(--faint); margin-bottom: 4px;
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.frc-ui .frc-graf .rot .val { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 600; white-space: nowrap; }
.frc-ui .frc-graf svg { display: block; width: 100%; }
.frc-ui .frc-graf .sin { display: flex; align-items: center; justify-content: center; min-height: 58px; color: var(--faint); font-size: 12px; font-style: italic; }
.frc-ui .frc-graf .pie { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); padding-top: 2px; }

/* Las últimas pesadas TOMADAS (chips de la ficha): el número que quedó y su
   desvío — lo que la tira no dice y los gráficos del día no repiten. */
.frc-ui .frc-ult { display: flex; gap: 6px; flex-wrap: wrap; }
.frc-ui .frc-ult i {
    font-style: normal; font-family: 'Consolas','SF Mono',monospace; font-size: 11.5px;
    border: 1px solid var(--hair-strong); border-radius: 7px; padding: 4px 8px;
    background: var(--surface); color: var(--muted); display: inline-flex; gap: 6px; align-items: baseline;
}
.frc-ui .frc-ult i b { font-size: 12.5px; color: var(--ink); font-weight: 700; }
.frc-ui .frc-ult i.ok    { border-color: var(--ok-hair); color: var(--ok); }
.frc-ui .frc-ult i.ok b  { color: var(--ok); }
.frc-ui .frc-ult i.wrn   { border-color: var(--warn-hair); color: var(--warn); background: var(--warn-050); }
.frc-ui .frc-ult i.wrn b { color: var(--warn); }
.frc-ui .frc-ult i.mut   { color: var(--faint); }

/* Las dos cajas de la ficha: dispersión (cómo viene el día) e histograma
   (cómo está centrada) — contestan preguntas distintas, por eso son dos. */
.frc-ui .frc-caja {
    background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
    box-shadow: var(--shadow); padding: 13px 16px 10px; min-width: 0;
}
.frc-ui .frc-caja h4 {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .11em;
    font-weight: 700; color: var(--muted); margin: 0 0 2px;
}
.frc-ui .frc-caja .sub { font-size: 11.5px; color: var(--faint); margin-bottom: 10px; }
.frc-ui .frc-caja .sub b { color: var(--muted); }
.frc-ui .frc-dos { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 1100px) { .frc-ui .frc-dos { grid-template-columns: 1fr; } }

/* =============================================================================
   SEGMENTO, BARRA DE TRABAJO Y AVISOS — el vocabulario lite de siempre
   ========================================================================== */
.frc-ui .frc-bar {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: 10px; box-shadow: var(--shadow);
    padding: 10px 14px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px; margin-bottom: 12px;
}
.frc-ui .frc-seg {
    display: inline-flex; background: var(--surface);
    border: 1px solid var(--hair-strong); border-radius: 9px;
    padding: 3px; gap: 2px; flex-wrap: wrap;
}
.frc-ui .frc-seg button {
    background: none; border: 0; font: inherit; font-size: 12.4px; font-weight: 600;
    color: var(--muted); padding: 7px 15px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .15s, background .15s, box-shadow .15s;
}
.frc-ui .frc-seg button:hover, .frc-ui .frc-seg button:focus-visible {
    color: var(--navy); background: var(--navy-050); outline: none;
}
/* Activo por TRAZO, no por relleno navy — manual §1.2. */
.frc-ui .frc-seg button.on {
    color: var(--navy); font-weight: 700; background: var(--navy-050);
    box-shadow: inset 0 -2.5px 0 var(--navy);
}
.frc-ui .frc-seg .n { font-size: 11px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.frc-ui .frc-seg button.on .n { color: var(--navy-500); }

.frc-ui .frc-in {
    font: inherit; font-size: 12.8px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 8px; padding: 7px 10px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.frc-ui .frc-in:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(21, 74, 148, .12); }

.frc-ui .frc-search { position: relative; flex: 1; min-width: 200px; max-width: 280px; margin-left: auto; }
.frc-ui .frc-search > .material-symbols-outlined {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--faint); font-size: 19px; pointer-events: none;
}
.frc-ui .frc-search input { width: 100%; padding-left: 35px; }

.frc-ui .frc-risk {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 13px; border-radius: 9px; font-size: 12.2px;
    border: 1px solid; border-left-width: 3px; margin-bottom: 12px; line-height: 1.5;
}
.frc-ui .frc-risk .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.frc-ui .frc-risk.info    { background: var(--navy-050); border-color: #d3e0f2;          border-left-color: var(--navy-500); color: var(--navy); }
.frc-ui .frc-risk.alerta  { background: var(--warn-050); border-color: var(--warn-hair); border-left-color: var(--warn);     color: #8a4a00; }
.frc-ui .frc-risk.critico { background: var(--crit-050); border-color: var(--crit-hair); border-left-color: var(--crit);     color: #9b1f1f; }

/* =============================================================================
   LA CORRIENTE DEL DÍA — tabla lite, encabezado blanco, franja de estado
   ========================================================================== */
.frc-ui .frc-card {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    overflow: hidden; margin-bottom: 14px;
}
.frc-ui .frc-card-f {
    padding: 12px var(--gutter); text-align: center; font-size: 12px; color: var(--faint);
    border-top: 1px solid var(--hair); background: #fafbfc;
}
.frc-ui .frc-tbl { overflow-x: auto; }
.frc-ui table.frc-g { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.frc-ui table.frc-g th {
    background: var(--surface); color: var(--muted);
    font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
    text-align: left; padding: 9px 12px;
    border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.frc-ui table.frc-g td {
    padding: 9px 12px; border-bottom: 1px solid var(--hair);
    color: var(--ink); vertical-align: middle; white-space: nowrap;
}
.frc-ui table.frc-g tbody tr { transition: background .13s; }
.frc-ui table.frc-g tbody tr:hover { background: var(--navy-050); }
.frc-ui table.frc-g .n { text-align: right; font-variant-numeric: tabular-nums; }
.frc-ui table.frc-g .c { text-align: center; }
.frc-ui table.frc-g .mono {
    font-family: 'Consolas', 'SF Mono', 'Roboto Mono', monospace;
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.frc-ui table.frc-g .vacia { padding: 34px 16px; text-align: center; color: var(--faint); font-style: italic; white-space: normal; }

/* Franja de estado a la izquierda de la fila: 3px + 19px de padding suman
   --gutter, el texto queda a plomo con el título (la regla de Facturación). */
.frc-ui table.frc-g td:first-child { border-left: 3px solid transparent; padding-left: calc(var(--gutter) - 3px); }
.frc-ui table.frc-g th:first-child { padding-left: var(--gutter); }
.frc-ui table.frc-g th:last-child,
.frc-ui table.frc-g td:last-child { padding-right: var(--gutter); }
.frc-ui table.frc-g tr.st-wrn td:first-child { border-left-color: var(--warn); }
.frc-ui table.frc-g tr.st-neg td:first-child { border-left-color: var(--crit); }
.frc-ui table.frc-g tr.st-neg { background: rgba(198, 40, 40, .035); }

.frc-ui .dim { color: var(--faint); }
/* Un dato ausente es información: se ve distinto (manual §1.4). */
.frc-ui .vacio { color: var(--faint); font-style: italic; }

/* Badges de clase */
.frc-ui .frc-b {
    display: inline-block; font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; border: 1px solid;
    white-space: nowrap;
}
.frc-ui .frc-b.ok  { background: var(--ok-050);   color: var(--ok);   border-color: var(--ok-hair); }
.frc-ui .frc-b.wrn { background: var(--warn-050); color: var(--warn); border-color: var(--warn-hair); }
.frc-ui .frc-b.neg { background: var(--crit-050); color: var(--crit); border-color: var(--crit-hair); }
.frc-ui .frc-b.mut { background: #f4f6f9; color: var(--muted); border-color: var(--hair); }

@media (prefers-reduced-motion: reduce) {
    .frc-ui .frc-vivo.est-nav .est .punto, .frc-ui .frc-vivo.registrando { animation: none; }
}