/* =============================================================================
   IDENTIDAD VISUAL — CONTROL DE PRODUCCIÓN (el hub)
   =============================================================================
   Manual: docs/identidad-visual.md. Propuestas y decisiones:
   docs/produccion/01-hub-dos-propuestas.html (ronda 1, se eligió la A) y
   docs/produccion/02-control-produccion-panel.html (ronda 2, la que se
   construyó). La forma está aprobada y no se rediscute.

   LA REGLA QUE ORDENA ESTE ARCHIVO. El módulo se llama Control de Producción
   porque no es la planta en vivo —ésa es Producción del Día— sino LA SERIE:
   los cierres, las semanas, el plan y los insumos. Y desde que el Parte Diario
   dejó de calcular producción para ser el CONTEO DE CIERRE DEL DÍA, lo que el
   panel tiene que contestar primero no es «cuánto se produjo» (eso lo informa
   PdD) sino «¿el stock cerró, y se contó?».

   Tratamiento PLANO, la vara de Facturación y de Producción del Día:
   superficie blanca sobre `--canvas`, separación por trazo y una sola sombra.
   La única superficie navy rellena de la pantalla es el botón primario de la
   barra del armazón, que pone shell-ui.css. Acá el navy es TEXTO (el día en el
   calendario) y TRAZO (el subrayado de la sección, el filete del KPI).

   La paleta NO está acá: sale entera de core/tokens.css. Ningún token nuevo.

   ── EL APARTAMIENTO DECLARADO: LA BASE TIPOGRÁFICA NO VA EN LA RAÍZ ─────────
   El §6 del manual pide declarar la base (fuente, 13.5px, --ink) sobre la clase
   raíz del módulo. Acá NO se puede todavía, y el motivo es concreto: de la
   misma raíz `.prod-ui` cuelgan las CUATRO pantallas que siguen en Tailwind
   —Parte Diario, Semanas, Plan e Insumos—, que se migran cada una con su
   etapa. Heredarles la base sería repintarlas sin haberlas mirado. Por eso la
   base va sobre `.prod-secnav` y `.prod-panel`, que son lo único que este
   archivo dibuja, y se sube a la raíz cuando la última de las cuatro entre.
   Lo mismo con `.prod-ui` en las reglas agrupadas de tokens.css: entra en
   `.hidden` y en `.tnum`, que son defensivas, no tipográficas.
   ========================================================================== */

/* El `box-sizing` es PROPIO, no heredado del preflight de Tailwind: apoyarse
   en el reset de otro framework es una dependencia invisible, y el día que
   Tailwind se vaya —que es a donde va esta migración— se rompen todos los
   módulos a la vez. Se limita a lo que este archivo dibuja, por lo mismo que
   la base tipográfica. */
.prod-ui .prod-secnav, .prod-ui .prod-secnav *,
.prod-ui .prod-panel,  .prod-ui .prod-panel  * { box-sizing: border-box; }

/* Obligación §5.2 del manual: quien navega con Tab tiene que ver dónde está. */
.prod-ui .prod-secnav :focus-visible,
.prod-ui .prod-panel  :focus-visible {
    outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 5px;
}

/* =============================================================================
   1. EL ARMAZÓN
   -----------------------------------------------------------------------------
   SIN ESPACIO entre las dos clases: el div es `class="prod-ui prod-shell"`, UN
   elemento con las dos. Con espacio no matchea y el bloque se cae en silencio:
   sin `display:flex` ni `height:100%` el módulo crece con su contenido adentro
   de un contenedor `overflow:hidden` y se queda sin scroll.
   ========================================================================== */
.prod-ui.prod-shell {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;
    background: var(--canvas);
}

/* TRAMPA §7 DEL MANUAL, el caso del ROOT. La regla agrupada de tokens.css es
   `.prod-ui .hidden` (descendiente) y no alcanza a este elemento, que lleva
   `.prod-ui` ÉL MISMO: el router oculta las páginas con `.hidden` de Tailwind
   (0,1,0) y el `display:flex` de arriba (0,2,0) le gana. Sin esta línea el
   módulo se sigue viendo encima del que se abrió después. */
.prod-ui.prod-shell.hidden { display: none; }

/* El área de trabajo. `min-height: 0` no es opcional: un `flex: 1` sin él
   estira en vez de scrollear, y lo que pasa del pliegue queda sin barra en
   ningún lado. El scroll es de la VISTA y no del área, así cada sección
   recuerda dónde estaba y ninguna arrastra el scroll de la anterior. */
.prod-ui .prod-work { flex: 1; min-height: 0; min-width: 0; position: relative; }
.prod-ui .prod-view { height: 100%; overflow-y: auto; overscroll-behavior: contain; }

/* =============================================================================
   2. LA NAVEGACIÓN DE SECCIÓN — subrayado que crece desde el centro
   -----------------------------------------------------------------------------
   Un `border-bottom` no se puede animar (trampa §7 del manual): va un ::after
   con scaleX. Portado literal de `tarifario-ui.css`, que a su vez lo portó de
   `remitos-ui.css` — no reinventado acá.
   ========================================================================== */
.prod-ui .prod-secnav {
    font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif;
    font-size: 13.5px; line-height: 1.5; color: var(--ink);
    -webkit-font-smoothing: antialiased;
    background: var(--surface); border-bottom: 1px solid var(--hair);
    display: flex; gap: 2px; padding: 0 var(--gutter); flex-wrap: wrap; flex-shrink: 0;
}
.prod-ui .prod-secnav button {
    position: relative; background: none; border: 0; font: inherit;
    font-size: 12.8px; font-weight: 600; color: var(--muted);
    padding: 12px 15px 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color .15s var(--curva), background .15s var(--curva);
}
.prod-ui .prod-secnav button::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
    height: 2.5px; background: var(--navy); border-radius: 2px 2px 0 0;
    transform: scaleX(0); transition: transform .18s var(--curva);
}
.prod-ui .prod-secnav button:hover,
.prod-ui .prod-secnav button:focus-visible { color: var(--navy); background: var(--navy-050); outline: none; }
.prod-ui .prod-secnav button:hover::after,
.prod-ui .prod-secnav button:focus-visible::after { transform: scaleX(.55); }
.prod-ui .prod-secnav button[aria-current="true"] { color: var(--navy); font-weight: 700; }
.prod-ui .prod-secnav button[aria-current="true"]::after { transform: scaleX(1); }

/* El contador de la sección: acompaña, no compite. */
.prod-ui .prod-secnav button .n {
    font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600;
    color: var(--faint); opacity: .85;
}
.prod-ui .prod-secnav button[aria-current="true"] .n { color: var(--navy-500); }

/* LA SECCIÓN DORMIDA. El Plan está y no se esconde, pero tampoco finge estar
   vivo: gris, y sin contador. Decisión de Hernán del 10/08 — se rediseña de
   cero cuando le toque su etapa. */
.prod-ui .prod-secnav button.dormida { color: var(--faint); font-weight: 600; }
.prod-ui .prod-secnav button.dormida::after { background: var(--hair-strong); }

/* =============================================================================
   3. EL CUERPO DEL PANEL — una sola medida de margen lateral (--gutter)
   ========================================================================== */
.prod-ui .prod-panel {
    font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif;
    font-size: 13.5px; line-height: 1.5; color: var(--ink);
    -webkit-font-smoothing: antialiased;
    padding: 14px var(--gutter) 30px;
    max-width: 1440px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 13px;
}

/* Un dato ausente es información (§1.4): gris, itálica, y dice qué falta. */
.prod-ui .prod-vacio { color: var(--faint); font-style: italic; font-weight: 500; }

/* =============================================================================
   4. LA TIRA — donde los semánticos significan algo antes de llegar a las filas
   ========================================================================== */
.prod-ui .prod-tira {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 9px; padding: 9px 16px; flex-wrap: wrap;
}
.prod-ui .prod-tira .cap {
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--faint);
}
.prod-ui .prod-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; padding: 4px 11px;
    font-size: 12px; font-weight: 600;
    border: 1px solid var(--hair-strong); color: var(--muted); background: var(--surface);
}
.prod-ui .prod-chip b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.prod-ui .prod-chip.warn { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); }
.prod-ui .prod-chip.warn b { color: var(--warn); }
.prod-ui .prod-chip.crit { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); }
.prod-ui .prod-chip.crit b { color: var(--crit); }
.prod-ui .prod-chip.ok   { background: var(--ok-050); border-color: var(--ok-hair); color: var(--ok); }
.prod-ui .prod-chip.ok b { color: var(--ok); }

/* El chip que lleva a otro lado. Es un enlace, así que se mueve como un chip
   (§5: se elige, no se dispara) — sube 2 px y no más. */
.prod-ui button.prod-chip {
    font-family: inherit; cursor: pointer;
    transition: transform .15s var(--curva), background .15s var(--curva), border-color .15s var(--curva);
}
.prod-ui button.prod-chip:hover, .prod-ui button.prod-chip:focus-visible { transform: translateY(-2px); }
.prod-ui .prod-tira .der { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prod-ui button.prod-chip.ir { color: var(--navy-500); border-color: var(--navy-300); font-weight: 700; }
.prod-ui button.prod-chip.ir:hover, .prod-ui button.prod-chip.ir:focus-visible { background: var(--navy-050); }

/* =============================================================================
   5. LOS KPI — a tamaño de KPI de ABM (24 px), que grite el color
   -----------------------------------------------------------------------------
   «Números gigantes, no»: 24 px no es un display, es una cifra. El filete de
   la izquierda dice el ESTADO, nunca la categoría.
   ========================================================================== */
.prod-ui .prod-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .prod-ui .prod-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .prod-ui .prod-kpis { grid-template-columns: 1fr; } }

.prod-ui .prod-kpi {
    background: var(--surface); border: 1px solid var(--hair);
    border-left: 3px solid var(--hair-strong);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    padding: 12px 15px; min-width: 0;
}
.prod-ui .prod-kpi.ok   { border-left-color: var(--ok); }
.prod-ui .prod-kpi.warn { border-left-color: var(--warn); }
.prod-ui .prod-kpi.crit { border-left-color: var(--crit); }
.prod-ui .prod-kpi.nav  { border-left-color: var(--navy-300); }
.prod-ui .prod-kpi .l {
    font-size: 10px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--faint);
}
.prod-ui .prod-kpi .v {
    font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
    margin-top: 3px; font-variant-numeric: tabular-nums;
}
.prod-ui .prod-kpi .v small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.prod-ui .prod-kpi .v.ok   { color: var(--ok); }
.prod-ui .prod-kpi .v.warn { color: var(--warn); }
.prod-ui .prod-kpi .v.crit { color: var(--crit); }
/* El dato que todavía no existe NO es un cero. */
.prod-ui .prod-kpi .v.ausente {
    font-size: 13px; font-style: italic; font-weight: 600;
    color: var(--faint); letter-spacing: 0;
}
.prod-ui .prod-kpi .s { font-size: 11px; color: var(--muted); margin-top: 3px; }
.prod-ui .prod-kpi .s.ok   { color: var(--ok);   font-weight: 600; }
.prod-ui .prod-kpi .s.warn { color: var(--warn); font-weight: 600; }
.prod-ui .prod-kpi .s.crit { color: var(--crit); font-weight: 600; }

/* Una COBERTURA se lee mejor llena que dicha: «0 de 19» tarda más en entrar
   que una barra vacía. El medidor es del KPI que mide una fracción, no de
   todos — si lo llevaran los cuatro dejaría de significar nada. */
.prod-ui .prod-kpi .met {
    height: 6px; border-radius: 3px; background: var(--canvas);
    border: 1px solid var(--hair); margin-top: 8px; overflow: hidden;
}
.prod-ui .prod-kpi .met i { display: block; height: 100%; background: var(--ok); }
.prod-ui .prod-kpi .met i.warn { background: var(--warn); }
.prod-ui .prod-kpi .met i.crit { background: var(--crit); }

/* =============================================================================
   6. LAS TARJETAS DE CONTENIDO
   ========================================================================== */
.prod-ui .prod-cols  { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(300px, 1fr); gap: 13px; align-items: start; }
.prod-ui .prod-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; align-items: start; }
@media (max-width: 1100px) {
    .prod-ui .prod-cols, .prod-ui .prod-cols2 { grid-template-columns: 1fr; }
}
/* `min-width: 0` NO es decoración: el mínimo automático de un ítem de grid es
   su contenido, así que sin esto la columna se estira hasta que entre el
   nombre más largo y la tarjeta se sale de la pantalla. Trampa ya pagada. */
.prod-ui .prod-cols > *, .prod-ui .prod-cols2 > * { min-width: 0; }

.prod-ui .prod-card {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    padding: 14px 16px 15px; min-width: 0;
}
.prod-ui .prod-card .ch { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.prod-ui .prod-card .ch h6 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.prod-ui .prod-card .ch .sub { font-size: 11px; color: var(--muted); }
.prod-ui .prod-card .ch .der { margin-left: auto; }

/* La nota al pie de una tarjeta: lo que hay que saber para no leer mal la
   cifra de arriba. Va separada por una regla, no por un color. */
.prod-ui .prod-nota {
    font-size: 11px; color: var(--muted); line-height: 1.45;
    margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 8px;
}
.prod-ui .prod-nota b { color: var(--ink); }
.prod-ui .prod-nota.warn b { color: var(--warn); }

/* =============================================================================
   7. EL CALENDARIO DE CIERRES — la pieza que hace visible lo que falta
   -----------------------------------------------------------------------------
   Cuatro semanas, una fila cada una, con la semana y su parte semanal al
   costado. El punto de cada día dice si el conteo se REGISTRÓ: hueco es
   «se aceptó el valor teórico», lleno es «se contó», ámbar es «se encontró
   una diferencia». El color es del estado, jamás de la categoría.
   ========================================================================== */
.prod-ui .prod-cal { display: flex; flex-direction: column; gap: 6px; }
.prod-ui .prod-cal .cabe,
.prod-ui .prod-cal .fila {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 150px; gap: 6px;
}
/* A 390 px las ocho columnas no entran, así que la semana baja a un renglón de
   ancho completo debajo de sus días. Dos cosas que la foto destapó y que sin
   ellas la pieza se lee al revés:

     · El encabezado tiene OCHO celdas y la grilla pasa a tener siete: la octava
       («La semana») caía sola en una fila nueva, debajo de LUN. Se oculta.
     · Un renglón de semana entre dos filas de días no dice a cuál pertenece.
       Cada semana se cierra con una regla y un respiro, así que el bloque
       —siete días + su semana— se lee como una unidad. */
@media (max-width: 720px) {
    .prod-ui .prod-cal .cabe, .prod-ui .prod-cal .fila { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .prod-ui .prod-cal .cabe span:last-child { display: none; }
    .prod-ui .prod-cal .sem {
        grid-column: 1 / -1; border-left: 0;
        border-top: 3px solid var(--ok); padding: 7px 0 0;
    }
    .prod-ui .prod-cal .sem.abierta { border-top-color: var(--warn); }
    .prod-ui .prod-cal .sem.curso   { border-top-color: var(--navy-300); }
    .prod-ui .prod-cal .sem.vacia   { border-top-color: var(--hair-strong); }
    .prod-ui .prod-cal .fila { padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
    .prod-ui .prod-cal .fila:last-child { padding-bottom: 0; border-bottom: 0; }
    /* La celda se angosta a ~48 px: los kilos no entran al lado del día. */
    .prod-ui .prod-cal .dia { padding: 5px 5px 6px; min-height: 52px; }
    .prod-ui .prod-cal .dia .kg { font-size: 9.5px; }
}
.prod-ui .prod-cal .cabe {
    font-size: 9px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint); padding: 0 3px;
}
.prod-ui .prod-cal .cabe span:last-child { padding-left: 13px; }

.prod-ui .prod-cal .dia {
    border: 1px solid var(--hair); border-radius: 9px; background: var(--surface);
    padding: 6px 8px 7px; min-height: 58px; min-width: 0;
    display: flex; flex-direction: column; text-align: left;
    font: inherit; color: inherit; cursor: pointer;
    transition: transform .15s var(--curva), box-shadow .15s var(--curva);
}
.prod-ui .prod-cal .dia:hover, .prod-ui .prod-cal .dia:focus-visible { transform: translateY(-2px); box-shadow: var(--e2); }
.prod-ui .prod-cal .dia .n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--navy); }
.prod-ui .prod-cal .dia .kg { font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 3px; }
.prod-ui .prod-cal .dia .pt { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--hair-strong); margin-top: auto; flex: none; }
.prod-ui .prod-cal .dia.contado .pt { background: var(--ok); border-color: var(--ok); }
.prod-ui .prod-cal .dia.dif { background: var(--warn-050); border-color: var(--warn-hair); }
.prod-ui .prod-cal .dia.dif .n, .prod-ui .prod-cal .dia.dif .kg { color: var(--warn); }
.prod-ui .prod-cal .dia.dif .pt { background: var(--warn); border-color: var(--warn); }
/* Sin parte: domingo o feriado. No es una falta — el parte se hace todos los
   días que hay producción, así que un hueco es un día que no la hubo. */
.prod-ui .prod-cal .dia.sin { background: var(--canvas); border-style: dashed; cursor: default; }
.prod-ui .prod-cal .dia.sin:hover { transform: none; box-shadow: none; }
.prod-ui .prod-cal .dia.sin .n { color: var(--faint); font-weight: 600; }
.prod-ui .prod-cal .dia.sin .kg { font-size: 9.5px; font-style: italic; color: var(--faint); }
.prod-ui .prod-cal .dia.sin .pt { display: none; }
.prod-ui .prod-cal .dia.fut { border-style: dashed; border-color: var(--hair-strong); background: transparent; cursor: default; }
.prod-ui .prod-cal .dia.fut:hover { transform: none; box-shadow: none; }
.prod-ui .prod-cal .dia.fut .n { color: var(--faint); }
.prod-ui .prod-cal .dia.fut .pt { display: none; }
.prod-ui .prod-cal .dia.hoy { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy-050); }

.prod-ui .prod-cal .sem {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    border-left: 3px solid var(--ok); padding-left: 11px; min-width: 0;
}
.prod-ui .prod-cal .sem .t { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prod-ui .prod-cal .sem .s { font-size: 10px; color: var(--muted); }
.prod-ui .prod-cal .sem.abierta { border-left-color: var(--warn); }
.prod-ui .prod-cal .sem.abierta .t { color: var(--warn); }
.prod-ui .prod-cal .sem.curso { border-left-color: var(--navy-300); }
.prod-ui .prod-cal .sem.curso .t { color: var(--navy-500); }
.prod-ui .prod-cal .sem.vacia { border-left-color: var(--hair-strong); }

.prod-ui .prod-leyenda {
    display: flex; gap: 15px; flex-wrap: wrap; font-size: 11px; color: var(--muted);
    margin-top: 11px; border-top: 1px solid var(--hair); padding-top: 9px;
}
.prod-ui .prod-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.prod-ui .prod-leyenda i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--hair-strong); display: inline-block; flex: none; }
.prod-ui .prod-leyenda i.co { background: var(--ok); border-color: var(--ok); }
.prod-ui .prod-leyenda i.di { background: var(--warn); border-color: var(--warn); }
.prod-ui .prod-leyenda i.si { background: var(--canvas); border-style: dashed; }

/* =============================================================================
   8. LAS DOS DIFERENCIAS — la del turno y la del conteo, que no son la misma
   ========================================================================== */
.prod-ui .prod-dif { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; }
.prod-ui .prod-dif + .prod-dif { border-top: 1px dashed var(--hair); }
.prod-ui .prod-dif .mk { width: 3px; align-self: stretch; border-radius: 2px; background: var(--navy-300); flex: none; }
.prod-ui .prod-dif .mk.ok   { background: var(--ok); }
.prod-ui .prod-dif .mk.warn { background: var(--warn); }
.prod-ui .prod-dif .mk.crit { background: var(--crit); }
.prod-ui .prod-dif .q { min-width: 0; flex: 1; }
.prod-ui .prod-dif .t { font-size: 12px; font-weight: 700; }
.prod-ui .prod-dif .f { font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.prod-ui .prod-dif .vv {
    font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; white-space: nowrap; text-align: right;
}
.prod-ui .prod-dif .vv small { font-size: 11px; font-weight: 600; color: var(--muted); display: block; letter-spacing: 0; }
.prod-ui .prod-dif .vv.ok   { color: var(--ok); }
.prod-ui .prod-dif .vv.warn { color: var(--warn); }
.prod-ui .prod-dif .vv.crit { color: var(--crit); }
.prod-ui .prod-dif .vv.ausente {
    font-size: 12.5px; font-style: italic; font-weight: 600;
    letter-spacing: 0; white-space: normal; max-width: 140px; color: var(--crit);
}

/* =============================================================================
   9. LA SERIE DEL DESVÍO
   -----------------------------------------------------------------------------
   La DIRECCIÓN dice el signo (arriba merma, abajo ganancia) y el COLOR dice el
   NIVEL. No al revés: una ganancia de 1.835 kg es tan mala como una merma, así
   que pintar de verde el lado de abajo sería mentir con la paleta.
   ========================================================================== */
.prod-ui .prod-serie { display: flex; gap: 2px; align-items: stretch; position: relative; margin-top: 4px; }
.prod-ui .prod-serie .col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; z-index: 1; }
.prod-ui .prod-serie .up { height: 30px; display: flex; align-items: flex-end; }
.prod-ui .prod-serie .dn { height: 30px; display: flex; align-items: flex-start; }
.prod-ui .prod-serie .col i { display: block; width: 100%; border-radius: 2px 2px 0 0; background: var(--navy-300); }
.prod-ui .prod-serie .dn i { border-radius: 0 0 2px 2px; }
.prod-ui .prod-serie .col i.warn { background: var(--warn); }
.prod-ui .prod-serie .col i.crit { background: var(--crit); }
.prod-ui .prod-serie .cero { height: 1px; background: var(--hair-strong); }
/* La banda de lo normal. Va detrás de las barras (z-index 0 contra 1) y es un
   tinte, no un relleno: dice «acá adentro no pasa nada». */
.prod-ui .prod-serie .banda {
    position: absolute; left: 0; right: 0; top: 17px; height: 27px;
    background: var(--navy-050);
    border-top: 1px dashed var(--hair-strong); border-bottom: 1px dashed var(--hair-strong);
    z-index: 0; pointer-events: none;
}
.prod-ui .prod-ejes {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 10px; color: var(--faint); margin-top: 5px; font-variant-numeric: tabular-nums;
}

/* =============================================================================
   10. LAS BARRAS HORIZONTALES — magnitud, una sola serie, sin leyenda
   ========================================================================== */
.prod-ui .prod-brow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 82px; gap: 10px; align-items: center; padding: 4px 0; }
.prod-ui .prod-brow .bn { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-ui .prod-brow .bt { height: 9px; border-radius: 5px; background: var(--canvas); border: 1px solid var(--hair); overflow: hidden; }
.prod-ui .prod-brow .bt i { display: block; height: 100%; background: var(--navy); border-radius: 0 4px 4px 0; }
.prod-ui .prod-brow .bt i.warn { background: var(--warn); }
.prod-ui .prod-brow .bt i.crit { background: var(--crit); }
.prod-ui .prod-brow .bv { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.prod-ui .prod-brow .bv small { font-weight: 600; color: var(--muted); font-size: 10.5px; }
.prod-ui .prod-brow .bv.warn { color: var(--warn); }
.prod-ui .prod-brow .bv.crit { color: var(--crit); }

/* La zona sin nada que mostrar. No es un error: es un estado. */
.prod-ui .prod-nada {
    text-align: center; padding: 22px 14px;
    border: 1px dashed var(--hair-strong); border-radius: 11px;
    background: var(--surface); color: var(--faint); font-size: 12.5px;
}

/* =============================================================================
   11. LO QUE TODAVÍA NO EXISTE — dice CUÁNDO, no un cero
   ========================================================================== */
.prod-ui .prod-futuro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .prod-ui .prod-futuro { grid-template-columns: 1fr; } }
.prod-ui .prod-fut {
    background: var(--surface); border: 1px dashed var(--hair-strong);
    border-radius: var(--r-card); padding: 12px 15px; min-width: 0;
}
.prod-ui .prod-fut .l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.prod-ui .prod-fut .v { font-size: 13px; font-style: italic; font-weight: 600; color: var(--faint); margin-top: 3px; }
.prod-ui .prod-fut .s { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* =============================================================================
   12. CONTROLES
   -----------------------------------------------------------------------------
   §5: se levanta lo que se puede apretar. Sube 2 px con sombra y al presionar
   baja. Sólo `transform` y `box-shadow`, que no reflowean.
   ========================================================================== */
.prod-ui .prod-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 32px; padding: 0 13px; border-radius: 10px;
    border: 1px solid transparent; font: inherit; font-size: .8rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    background: var(--navy); color: #fff;
    transition: background .15s var(--curva), transform .15s var(--curva), box-shadow .15s var(--curva);
}
.prod-ui .prod-btn:hover  { background: var(--navy-700); transform: translateY(-2px); box-shadow: var(--e2); }
.prod-ui .prod-btn:active { transform: translateY(1px); box-shadow: none; }
.prod-ui .prod-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.prod-ui .prod-btn.sec { background: var(--surface); color: var(--ink); border-color: var(--hair-strong); }
.prod-ui .prod-btn.sec:hover:not(:disabled) { background: var(--canvas); border-color: var(--muted); }
.prod-ui .prod-btn.warn { background: var(--warn); color: #fff; }
.prod-ui .prod-btn.warn:hover:not(:disabled) { background: #8e4b00; }
.prod-ui .prod-btn.chico { height: 26px; padding: 0 10px; font-size: .72rem; border-radius: 8px; }

/* El enlace de trazo fino que abre otra sección. No compite con el primario. */
.prod-ui .prod-link {
    background: none; border: 0; padding: 2px 4px; margin: -2px -4px;
    font: inherit; font-size: 11px; font-weight: 700; color: var(--navy-500);
    cursor: pointer; border-radius: 6px;
    transition: background .15s var(--curva), color .15s var(--curva);
}
.prod-ui .prod-link:hover, .prod-ui .prod-link:focus-visible { background: var(--navy-050); color: var(--navy); outline: none; }

/* =============================================================================
   13. §5 DEL MANUAL — no se apaga la información, se apaga el MOVIMIENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .prod-ui .prod-secnav button,
    .prod-ui .prod-secnav button::after,
    .prod-ui .prod-cal .dia,
    .prod-ui .prod-btn,
    .prod-ui .prod-link,
    .prod-ui button.prod-chip { transition: none; }
    /* El subrayado y el destaque SE QUEDAN: son información. Lo que se va es
       el desplazamiento. */
    .prod-ui .prod-cal .dia:hover, .prod-ui .prod-cal .dia:focus-visible,
    .prod-ui .prod-btn:hover, .prod-ui .prod-btn:active,
    .prod-ui button.prod-chip:hover, .prod-ui button.prod-chip:focus-visible { transform: none; }
}