/* =====================================================================================
   Identidad visual SPINEX aplicada al registro de consignación.
   Referencia: CLAUDE.md, Sub-hito 4.13 (paleta oficial y criterios de las tarjetas).

   Criterio que manda: azul y grises dominan; el color es alerta, no decoración.
   Look corporativo B2B médico, denso, sin emojis en los títulos.

   Inter va servida desde servidor/web/fuentes/, no desde el CDN de Google:
   el servidor de la oficina puede estar sin internet.
   ===================================================================================== */

@font-face { font-family: Inter; font-weight: 400; font-display: swap;
             src: url('fuentes/inter-400.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap;
             src: url('fuentes/inter-500.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap;
             src: url('fuentes/inter-600.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap;
             src: url('fuentes/inter-700.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap;
             src: url('fuentes/inter-800.woff2') format('woff2'); }

:root {
  /* --- paleta oficial SPINEX --- */
  --fondo:       #F3F6FA;
  --panel:       #FFFFFF;
  --texto:       #172033;   /* operacional */
  --tenue:       #667085;   /* gris */
  --borde:       #DDE3EC;
  --azul:        #071C8C;   /* azul marino corporativo */
  --azul-suave:  #EEF1FB;
  --azul-borde:  #C9D2F2;

  /* Estados. Reservados: nunca se usan como color de una serie de datos. */
  --alta:        #DC2626;
  --media:       #F97316;
  --baja:        #16A34A;
  --alerta:      #F59E0B;
  --alta-suave:  #FDECEC;
  --baja-suave:  #E8F6EC;
  --alerta-suave:#FEF6E7;

  --sombra: 0 1px 2px rgba(23, 32, 51, .06);
  --sombra-alta: 0 4px 16px rgba(23, 32, 51, .10);
  --radio: 8px;

  /* --- colores de los gráficos ---
     El navy #071C8C no sirve como relleno de barra: queda fuera de la banda de
     luminosidad (L 0,32 contra 0,43–0,77). --viz-entra es su paso claro.
     El par entra/sale se validó sobre el blanco de los paneles: ΔE 27,4 con
     protanopia y 36,4 en visión normal, ambos muy sobre el umbral.
     --viz-ajuste es el punto medio neutro del par divergente: tiene que leerse
     gris, así que su croma bajo es intencional y no hay que "corregirlo". */
  --viz-entra:  #3348C9;
  --viz-sale:   #DC2626;
  --viz-ajuste: #667085;
  --viz-pista:  #D9DEF6;
  --viz-reja:   #E7EBF2;
  --viz-eje:    #C6CEDC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 13px/1.5 Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 15px; }
h2 { font-size: 14px; }
h3 { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
a { color: var(--azul); }

/* ================================================================ estructura */

header.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; height: 52px;
  background: var(--panel); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
header.barra .marca {
  font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--azul);
}
header.barra .divisor { width: 1px; height: 20px; background: var(--borde); }
header.barra h1 { font-size: 14px; font-weight: 600; color: var(--texto); }
header.barra .crece { flex: 1; }
header.barra .quien { font-size: 12px; color: var(--tenue); }

nav.pestanas {
  display: flex; gap: 2px; padding: 0 14px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--borde);
  position: sticky; top: 52px; z-index: 19;
}
nav.pestanas button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 12px; font: inherit; font-weight: 500; color: var(--tenue); cursor: pointer;
}
nav.pestanas button:hover { color: var(--texto); }
nav.pestanas button.activa { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
nav.pestanas button .pastilla {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px;
  background: var(--alta); color: #fff; font-size: 10px; font-weight: 600;
}

main { padding: 16px; max-width: 1560px; margin: 0 auto; }
section.vista { display: none; }
section.vista.activa { display: block; }

.panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 13px; margin-bottom: 14px; box-shadow: var(--sombra);
}
.panel > .cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.panel > .cabecera h2 { margin: 0; }
.panel > .cabecera .crece { flex: 1; }

.seccion {
  font-size: 11px; font-weight: 600; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 9px;
}
.nota { font-size: 11px; color: var(--tenue); margin: 7px 0 0; }

/* ================================================================ buscador */

.buscador { position: relative; }
.buscador input[type=search] { min-width: 300px; }

.resultados {
  position: absolute; top: calc(100% + 6px); left: 0; width: min(620px, 88vw);
  max-height: 70vh; overflow: auto; z-index: 40;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.resultados h4 {
  margin: 0; padding: 7px 13px 5px; font-size: 10px; font-weight: 600;
  color: var(--tenue); text-transform: uppercase; letter-spacing: .06em;
  background: #F7F9FC; border-bottom: 1px solid var(--borde); position: sticky; top: 0;
}
.resultados button.fila {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--borde); padding: 8px 13px; font: inherit; cursor: pointer;
}
.resultados button.fila:hover, .resultados button.fila:focus {
  background: var(--azul-suave); outline: none;
}
.resultados .titulo { font-weight: 600; font-size: 12px; }
.resultados .sub { font-size: 11px; color: var(--tenue); }
.resultados .nada { padding: 20px; text-align: center; color: var(--tenue); font-size: 12px; }

/* ================================================================ encabezado del panel */

.hero {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sombra);
  border-top: 3px solid var(--azul);
}
.hero .cifra { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.hero .etiqueta {
  font-size: 10px; color: var(--tenue); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; margin-bottom: 4px;
}
.hero .detalle { font-size: 11px; color: var(--tenue); margin-top: 6px; }
.hero .separador { width: 1px; align-self: stretch; background: var(--borde); }
.hero .mini { display: flex; flex-wrap: wrap; gap: 20px; }
.hero .mini > div { min-width: 88px; }
.hero .mini .valor { font-size: 20px; font-weight: 700; line-height: 1.1; }
.hero .mini .valor.critico { color: var(--alta); }
.hero .mini .valor.aviso { color: var(--media); }

/* ================================================================ tarjetas de centro */

.centros { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; }

.centro {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  border-left: 5px solid var(--borde);
  padding: 10px 12px 11px; text-align: left; font: inherit; color: inherit;
  cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.centro:hover, .centro:focus { box-shadow: var(--sombra); border-color: var(--azul-borde); outline: none; }
.centro.apagado { opacity: .5; }
/* El borde izquierdo es la única señal de color de la tarjeta: severidad, no decoración. */
.centro.critico { border-left-color: var(--alta); }
.centro.atencion { border-left-color: var(--alerta); }
.centro.ok { border-left-color: var(--baja); }
.centro.critico:hover { border-left-color: var(--alta); }
.centro.atencion:hover { border-left-color: var(--alerta); }
.centro.ok:hover { border-left-color: var(--baja); }

.centro .arriba { display: flex; align-items: baseline; gap: 7px; }
.centro .codigo { font-weight: 700; font-size: 13px; }
.centro .nombre {
  font-size: 11px; color: var(--tenue); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.centro .unidades { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.centro .unidades small { font-size: 11px; font-weight: 400; color: var(--tenue); margin-left: 5px; }

/* Medidor: pista = paso claro del mismo azul; el largo es lo que compara. */
.centro .medidor { height: 5px; border-radius: 3px; background: var(--viz-pista); overflow: hidden; }
.centro .medidor > span { display: block; height: 100%; border-radius: 3px; background: var(--viz-entra); }

.centro .meta { font-size: 11px; color: var(--tenue); display: flex; gap: 9px; flex-wrap: wrap; }
.centro .chips { display: flex; gap: 4px; flex-wrap: wrap; min-height: 18px; }

/* Los estados siempre llevan punto + texto: el color nunca va solo. */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 1px 7px 1px 5px; border-radius: 10px;
  background: #EEF1F5; color: var(--tenue);
}
.chip .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.critico { background: var(--alta-suave); color: var(--alta); }
.chip.serio { background: #FEF0E7; color: #B24A12; }
.chip.aviso { background: var(--alerta-suave); color: #96650A; }
.chip.bueno { background: var(--baja-suave); color: #12803B; }

/* ================================================================ controles */

.filtros { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 10px; }
input, select, button.boton {
  font: inherit; padding: 5px 9px; border: 1px solid var(--borde);
  border-radius: 6px; background: #fff; color: var(--texto);
}
input:focus, select:focus { outline: 2px solid var(--azul-suave); border-color: var(--azul); }
input[type=search] { min-width: 190px; }
button.boton { cursor: pointer; font-weight: 500; }
button.boton:hover { background: #F7F9FC; }
button.boton.primario { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
button.boton.primario:hover { background: #05156B; }
button.boton.peligro { background: var(--alta); border-color: var(--alta); color: #fff; font-weight: 600; }
button.boton:disabled { opacity: .5; cursor: not-allowed; }
label.check { display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); }

/* ================================================================ tablas */

.tabla-contenedor { overflow: auto; max-height: 68vh; border: 1px solid var(--borde); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { padding: 5px 9px; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
thead th {
  position: sticky; top: 0; background: #F7F9FC; z-index: 2;
  font-weight: 600; font-size: 10px; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .05em;
}
tbody tr:hover { background: #F7F9FC; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.neg { color: var(--alta); font-weight: 600; }
td.ancho { white-space: normal; min-width: 250px; }
.vacio { padding: 24px; text-align: center; color: var(--tenue); }

.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 600; border: 1px solid transparent;
}
.badge.gris { background: #EEF1F5; color: var(--tenue); }
.badge.verde { background: var(--baja-suave); color: #12803B; }
.badge.ambar { background: var(--alerta-suave); color: #96650A; }
.badge.rojo { background: var(--alta-suave); color: var(--alta); }
.badge.azul { background: var(--azul-suave); color: var(--azul); }

/* ================================================================ gráficos */

.viz { background: var(--panel); }
.viz svg { display: block; width: 100%; }
.viz .reja { stroke: var(--viz-reja); stroke-width: 1; }
.viz .eje { stroke: var(--viz-eje); stroke-width: 1; }
.viz text { font-size: 10px; fill: var(--tenue); }
.viz text.valor { fill: var(--tenue); font-variant-numeric: tabular-nums; }
.viz text.destacado { fill: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.viz .entra { fill: var(--viz-entra); }
.viz .sale { fill: var(--viz-sale); }
.viz .ambos { fill: var(--viz-ajuste); }
.viz .zona { fill: transparent; cursor: default; }
.viz g.punto:hover .marca { opacity: .82; }
.viz g.punto:focus { outline: none; }
.viz g.punto:focus .marca { opacity: .82; stroke: var(--texto); stroke-width: 1.5; }

.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--tenue); margin: 0 0 8px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.leyenda i.entra { background: var(--viz-entra); }
.leyenda i.sale { background: var(--viz-sale); }
.leyenda i.ambos { background: var(--viz-ajuste); }

.globo {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .08s;
  background: var(--texto); color: #fff; border-radius: 6px; padding: 7px 10px;
  font-size: 11px; line-height: 1.45; box-shadow: var(--sombra-alta); max-width: 260px;
}
.globo.visible { opacity: 1; }
.globo .g-valor { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.globo .g-sub { color: #A9B3C4; }
.globo .g-linea { display: flex; align-items: center; gap: 6px; }
.globo .g-linea i { width: 10px; height: 2px; border-radius: 1px; flex: none; }

.dosviz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .dosviz { grid-template-columns: 1fr; } }

/* ================================================================ tarjetas sueltas */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  border-left: 5px solid var(--borde); padding: 11px 13px; box-shadow: var(--sombra);
}
.tarjeta .etiqueta {
  font-size: 10px; color: var(--tenue); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
.tarjeta .cifra { font-size: 23px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
.tarjeta .detalle { font-size: 11px; color: var(--tenue); }
.tarjeta.alerta { border-left-color: var(--alta); }
.tarjeta.alerta .cifra { color: var(--alta); }
.tarjeta.aviso { border-left-color: var(--alerta); }
.tarjeta.aviso .cifra { color: #96650A; }
.tarjeta.pulsable { cursor: pointer; }
.tarjeta.pulsable:hover { border-color: var(--azul-borde); }

/* ================================================================ login */

.login {
  max-width: 340px; margin: 12vh auto; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px;
  box-shadow: var(--sombra-alta); border-top: 3px solid var(--azul);
}
.login .marca { font-size: 22px; font-weight: 800; color: var(--azul); letter-spacing: .02em; }
.login h1 { font-size: 15px; margin-top: 3px; }
.login p.sub { color: var(--tenue); margin: 4px 0 18px; font-size: 12px; }
.login label { display: block; font-size: 12px; margin: 10px 0 4px; color: var(--tenue); }
.login input { width: 100%; padding: 7px 9px; }
.login button { width: 100%; margin-top: 16px; padding: 9px; }

/* ================================================================ carga */

.zona-archivo {
  border: 2px dashed var(--borde); border-radius: var(--radio); padding: 28px;
  text-align: center; color: var(--tenue); background: #FBFCFE;
}
.zona-archivo.encima { border-color: var(--azul); background: var(--azul-suave); color: var(--azul); }
.zona-archivo strong { color: var(--texto); }

.mensaje { padding: 9px 12px; border-radius: 6px; margin-bottom: 11px; font-size: 12px; }
.mensaje.error { background: var(--alta-suave); color: var(--alta); border: 1px solid #F5C9C9; }
.mensaje.ok { background: var(--baja-suave); color: #12803B; border: 1px solid #BFE5CB; }
.mensaje.info { background: var(--azul-suave); color: var(--azul); border: 1px solid var(--azul-borde); }
/* Pendiente de una decisión del operador: no es un error, pero tampoco está resuelto. */
.mensaje.aviso { background: var(--alerta-suave); color: #96650A; border: 1px solid #F0DCA8; }

.cargando { color: var(--tenue); padding: 18px; text-align: center; }

@media (max-width: 700px) {
  th, td { white-space: normal; }
  header.barra .quien { display: none; }
  .buscador input[type=search] { min-width: 150px; }
}

/* ================================================================ áreas (COMEX / consignación) */

.areas { display: flex; gap: 2px; background: #EFF2F7; border-radius: 7px; padding: 2px; }
/* Quien tiene un solo módulo no ve el selector. Sin esto la barra quedaría vacía pero
   visible: `display: flex` le gana al atributo `hidden`. */
.areas[hidden] { display: none; }
.areas button {
  background: none; border: 0; padding: 5px 13px; border-radius: 5px;
  font: inherit; font-weight: 500; font-size: 12px; color: var(--tenue); cursor: pointer;
}
.areas button:hover { color: var(--texto); }
.areas button.activa { background: var(--panel); color: var(--azul); font-weight: 600; box-shadow: var(--sombra); }

/* ================================================================ tablero kanban */

.kanban {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
  align-items: flex-start;
}
.columna {
  flex: 0 0 250px; background: #EEF1F6; border-radius: var(--radio); padding: 9px;
  max-height: 66vh; display: flex; flex-direction: column;
}
.columna > h3 {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; text-transform: none;
  font-size: 12px; letter-spacing: 0; color: var(--texto); font-weight: 600;
}
.columna > h3 .numero {
  width: 18px; height: 18px; border-radius: 50%; background: var(--azul); color: #fff;
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.columna > h3 .duenio { font-weight: 400; font-size: 10px; color: var(--tenue);
                        text-transform: uppercase; letter-spacing: .05em; margin-left: auto; }
.columna .pila { overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.columna .sla { font-size: 10px; color: var(--tenue); margin-bottom: 6px; }
.columna .ninguna { font-size: 11px; color: #98A2B3; padding: 10px 2px; }

.imp {
  background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--borde);
  border-radius: 6px; padding: 8px 10px; text-align: left; font: inherit; color: inherit;
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; width: 100%;
}
.imp:hover, .imp:focus { border-color: var(--azul-borde); box-shadow: var(--sombra); outline: none; }
.imp.atrasada { border-left-color: var(--alta); }
.imp.por_vencer { border-left-color: var(--alerta); }
.imp.en_plazo { border-left-color: var(--baja); }
.imp.bloqueada { border-left-color: var(--media); background: #FDFBF8; }
.imp .codigo { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.imp .proveedor { font-size: 12px; color: var(--texto); overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.imp .linea { font-size: 10px; color: var(--tenue); display: flex; gap: 7px; flex-wrap: wrap; }
.imp .chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* ================================================================ ficha de importación */

.ficha-cab { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ficha-cab .titulo { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.ficha-cab .sub { font-size: 12px; color: var(--tenue); margin-top: 2px; }
.ficha-acciones { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.datos .campo .etiqueta {
  font-size: 10px; color: var(--tenue); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
.datos .campo .valor { font-size: 13px; margin-top: 1px; }
.datos .campo .valor.vacio { color: #98A2B3; }

/* Línea de tiempo horizontal de las nueve etapas */
.pasos { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.paso {
  flex: 1 1 0; min-width: 88px; border-top: 3px solid var(--borde);
  padding: 7px 6px 0; font-size: 10px; color: var(--tenue);
}
.paso.hecho { border-top-color: var(--baja); }
.paso.actual { border-top-color: var(--azul); }
.paso .n { font-weight: 700; color: var(--texto); font-size: 11px; }
.paso.actual .n { color: var(--azul); }
.paso .dias { font-variant-numeric: tabular-nums; }

.checklist { display: flex; flex-direction: column; gap: 2px; }
.checklist label {
  display: flex; align-items: flex-start; gap: 8px; padding: 5px 7px; border-radius: 5px;
  font-size: 12px; cursor: pointer;
}
.checklist label:hover { background: #F7F9FC; }
.checklist label.cumplido { color: var(--tenue); }
.checklist label.cumplido .texto { text-decoration: line-through; }
.checklist input { margin-top: 2px; }
.checklist .opcional { font-size: 10px; color: #98A2B3; }
.checklist label:has(input:disabled) { cursor: default; opacity: .75; }

.bitacora { display: flex; flex-direction: column; gap: 0; }
.bitacora .ev { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.bitacora .ev:last-child { border-bottom: 0; }
.bitacora .ev .marca-ev {
  width: 8px; height: 8px; border-radius: 50%; background: var(--borde);
  margin-top: 5px; flex: none;
}
.bitacora .ev.CAMBIO_ETAPA .marca-ev { background: var(--azul); }
.bitacora .ev.STOCK .marca-ev { background: var(--baja); }
.bitacora .ev.BLOQUEO .marca-ev { background: var(--alta); }
.bitacora .ev.PAGO .marca-ev { background: var(--viz-entra); }
.bitacora .ev .cuerpo { flex: 1; min-width: 0; }
.bitacora .ev .texto { font-size: 12px; }
.bitacora .ev .meta { font-size: 10px; color: var(--tenue); }

.lotes { font-size: 11px; color: var(--tenue); }
.lotes span { display: inline-block; margin-right: 9px; }

.dos-columnas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ================================================================ notificaciones */

.campana { position: relative; }
.campana .pastilla {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px;
  background: var(--alta); color: #fff; font-size: 10px; font-weight: 700;
}

.bandeja {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(420px, 92vw);
  max-height: 70vh; overflow: auto; z-index: 45;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.bandeja .cabeza {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--borde); background: #F7F9FC;
  position: sticky; top: 0; font-size: 11px; color: var(--tenue); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.bandeja .cabeza button { font-size: 11px; padding: 3px 8px; text-transform: none; letter-spacing: 0; }

.bandeja .aviso {
  display: flex; gap: 9px; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--borde); padding: 9px 12px; font: inherit; cursor: pointer;
}
.bandeja .aviso:hover, .bandeja .aviso:focus { background: var(--azul-suave); outline: none; }
.bandeja .aviso.leida { opacity: .55; }
.bandeja .aviso .punto-aviso {
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul);
  margin-top: 6px; flex: none;
}
.bandeja .aviso.leida .punto-aviso { background: var(--borde); }
.bandeja .aviso.SLA .punto-aviso { background: var(--alta); }
.bandeja .aviso.BLOQUEO .punto-aviso { background: var(--alta); }
.bandeja .aviso.DIFERENCIA .punto-aviso { background: var(--media); }
.bandeja .aviso.STOCK .punto-aviso { background: var(--baja); }
.bandeja .aviso .cuerpo { flex: 1; min-width: 0; }
.bandeja .aviso .texto { font-size: 12px; line-height: 1.45; }
.bandeja .aviso .meta { font-size: 10px; color: var(--tenue); margin-top: 2px; }
.bandeja .nada { padding: 26px 12px; text-align: center; color: var(--tenue); font-size: 12px; }

/* ================================================================ categorías */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.cat-nuevo { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cat-nuevo input { flex: 1; min-width: 110px; }
td.inactivo, td.inactivo + td { color: #98A2B3; }
tr.inactiva td { color: #98A2B3; }

/* ================================================================ la cadena */

.cadena {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra);
}
.cadena .tramo {
  flex: 1; padding: 11px 14px; position: relative;
  border-right: 1px solid var(--borde);
}
.cadena .tramo:last-child { border-right: 0; }
.cadena .tramo.aqui { background: var(--azul-suave); }
/* Los tramos que llevan a su propia pantalla. El subrayado al pasar por encima avisa que
   se puede pinchar sin convertir la cadena en una fila de botones. */
.cadena .tramo.clicable { cursor: pointer; }
.cadena .tramo.clicable:hover,
.cadena .tramo.clicable:focus-visible { background: var(--fondo); outline: 0; }
.cadena .tramo.clicable:hover .etiqueta,
.cadena .tramo.clicable:focus-visible .etiqueta { color: var(--azul); text-decoration: underline; }
.cadena .tramo .etiqueta {
  font-size: 10px; color: var(--tenue); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.cadena .tramo.aqui .etiqueta { color: var(--azul); }
.cadena .tramo .valor { font-size: 21px; font-weight: 700; line-height: 1.1; margin-top: 2px; }
.cadena .tramo .detalle { font-size: 11px; color: var(--tenue); }
.cadena .flecha {
  display: flex; align-items: center; padding: 0 4px;
  color: var(--tenue); font-size: 15px; flex: none;
}
@media (max-width: 780px) { .cadena { flex-direction: column; }
  .cadena .tramo { border-right: 0; border-bottom: 1px solid var(--borde); }
  .cadena .flecha { display: none; } }

/* =====================================================================================
   Formularios en capa (modal)

   Antes los formularios se insertaban en el flujo de la página: el de alta se metía
   dentro del carril del tablero y los de la ficha aparecían siempre arriba del todo,
   aunque se hubieran pedido desde una línea que estaba dos pantallas más abajo.

   En una capa aparecen donde está la mirada, no empujan nada y dejan ver el contexto.
   ===================================================================================== */

.modal-fondo {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto;
  background: rgba(23, 32, 51, .40);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 16px 32px;
}
.modal {
  background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra-alta);
  width: 100%; max-width: 620px; padding: 16px;
}
.modal.ancho { max-width: 860px; }
.modal > h2 { margin: 0; }
.modal > .nota:first-of-type { margin: 5px 0 0; }
.modal .pie {
  display: flex; gap: 7px; justify-content: flex-end; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde);
}
.modal .pie .crece { flex: 1; }

/* Rejilla de campos con la etiqueta encima: en un formulario largo, leer «DIN» sobre su
   casilla cuesta menos que deducirlo de un texto de ayuda dentro de ella. */
.campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 11px 14px; margin-top: 13px;
}
.campos > label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tenue);
}
.campos > label > input, .campos > label > select, .campos > label > textarea {
  font: inherit; text-transform: none; letter-spacing: 0; color: var(--texto);
  padding: 5px 9px; border: 1px solid var(--borde); border-radius: 6px; background: #fff;
  width: 100%; min-width: 0;
}
.campos > label > textarea { resize: vertical; min-height: 56px; }
.campos > label.ancho { grid-column: 1 / -1; }
.campos .pista { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tenue); }
.campos > .titulo-grupo {
  grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--azul); margin: 5px 0 -3px;
}

/* Casillas dentro de un formulario en capa. Van con el texto al lado —no debajo del rótulo
   como el resto de los campos—: un cuadrado con la etiqueta encima se lee como si el rótulo
   fuera el valor. */
.campos > label.casilla, .grupo-casillas label.casilla {
  flex-direction: row; align-items: center; gap: 7px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 13px; color: var(--texto);
}
.campos > label.casilla > input, .grupo-casillas input { width: auto; flex: none; margin: 0; }

.grupo-casillas {
  grid-column: 1 / -1; border: 1px solid var(--borde); border-radius: 6px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.grupo-casillas .rotulo {
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tenue); margin-bottom: 1px;
}

/* Líneas de producto del consumo.
   Una cirugía gasta varias referencias y se cargan de una vez, así que la parte central del
   formulario deja de ser una rejilla de campos y pasa a ser una lista que crece. Cada línea
   lleva su propio buscador: el maestro tiene 8.300 códigos y nadie los escribe de memoria. */
.modal > .titulo-grupo {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--azul); margin: 15px 0 7px;
}
#consumo-lineas { display: flex; flex-direction: column; gap: 8px; }
#consumo-agregar { margin-top: 8px; }
.consumo-linea { border: 1px solid var(--borde); border-radius: 6px; padding: 8px 9px; }
.cl-campos {
  display: grid; gap: 8px 10px; align-items: end;
  grid-template-columns: minmax(170px, 2.2fr) minmax(88px, 1fr) 82px 130px auto;
}
.cl-campos > label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tenue);
}
.cl-campos > label > input {
  font: inherit; text-transform: none; letter-spacing: 0; color: var(--texto);
  padding: 5px 9px; border: 1px solid var(--borde); border-radius: 6px; background: #fff;
  width: 100%; min-width: 0;
}
.cl-campos .pista { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cl-quitar { padding: 5px 11px; line-height: 1.2; }

.cl-sugerencias { margin-top: 7px; font-size: 12px; color: var(--tenue); }
.cl-sugerencias:empty { display: none; }
/* El reparto por sub-ubicación aparece dentro de la línea, cuando el lote está en varios
   sitios. Se sangra para que se lea como algo que cuelga de esa línea y no como un bloque
   nuevo del formulario. */
.cl-reparto { margin: 8px 0 2px 0; font-size: 12px; }
.cl-reparto:empty { display: none; }
.cl-reparto table { font-size: 12px; }
.cl-reparto .tabla-contenedor { margin-top: 4px; max-height: 190px; }
.cl-titulo { margin-right: 5px; }
.cl-op { margin: 3px 4px 0 0; font-size: 12px; text-align: left; }
.cl-op.cl-hay { border-color: var(--azul-borde); }
.cl-op .cl-desc { color: var(--tenue); margin: 0 5px; }
.cl-op b { color: #12803B; font-weight: 600; }
.cl-op i { color: var(--tenue); font-style: normal; }

@media (max-width: 760px) {
  .cl-campos { grid-template-columns: 1fr 1fr; }
  .cl-campos > label.cl-ref { grid-column: 1 / -1; }
}

/* Botón dentro de una celda: acompaña al dato, no compite con él. */
.boton.mini { padding: 1px 7px; font-size: 11px; line-height: 1.6; }

/* Detalle de un evento: lo que salió, lo que volvió y con qué guía volvió. */
td > .pista {
  display: block; font-size: 11px; color: var(--tenue);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.ev-falta { color: var(--alta); }
.ev-ok { color: var(--tenue); }
.ev-guias { margin: 0; padding-left: 18px; font-size: 12px; color: var(--texto); }
.ev-guias li { margin: 2px 0; }
/* Listas dentro de un aviso: productos nuevos, guías, etc. */
/* Lo que anotó quien revisó, en la cola. En ámbar porque es lo único de la fila que alguien
   escribió a mano para que otra persona lo lea: si se pierde entre los datos, no sirve. */
.cola-fila .meta.observado {
  margin-top: 4px; color: #96650A; background: #FFF8EB;
  border-left: 3px solid var(--alerta); padding: 4px 8px; border-radius: 4px;
}

.lista-aviso { margin: 6px 0 0; padding-left: 18px; }
.lista-aviso li { margin: 2px 0; }

/* Lotes de una línea: el que salió y el que volvió. Distintos es lo normal. */
.ev-lotes { font-size: 12px; }
.ev-flecha { color: var(--tenue); margin: 0 2px; }

/* ================================================== la cola de lo que hay que revisar
   Dos andenes: lo ingresado arriba, lo ya revisado abajo. El paso pendiente es la
   estructura de la pantalla y no un dato dentro de una fila, porque es lo primero que
   alguien necesita saber al abrirla: qué le toca a él.

   La tarjeta reusa el vocabulario de .tarjeta —blanca, borde izquierdo por severidad—
   pero en horizontal: acá lo que importa no es una cifra grande sino poder comparar
   varias cargas de un vistazo y actuar sobre una. */

.cola { display: flex; flex-direction: column; gap: 9px; }

.cola-fila {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--borde);
  border-left: 5px solid var(--borde); border-radius: var(--radio);
  padding: 11px 13px; box-shadow: var(--sombra);
}
/* El color marca la espera, no el tipo de carga: es alerta, no decoración. */
.cola-fila.espera-media { border-left-color: var(--alerta); }
.cola-fila.espera-alta  { border-left-color: var(--alta); }
.cola-fila.abierta { border-color: var(--azul-borde); border-radius: var(--radio) var(--radio) 0 0; }

.cola-fila .que { flex: 1; min-width: 0; }
.cola-fila .titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cola-fila .meta { font-size: 11px; color: var(--tenue); margin-top: 2px; }
.cola-fila .cifra-chica { min-width: 84px; text-align: right; }
.cola-fila .cifra-chica .etiqueta {
  font-size: 10px; color: var(--tenue); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
.cola-fila .cifra-chica .dato { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cola-fila .cifra-chica .dato.media { color: #96650A; }
.cola-fila .cifra-chica .dato.alta  { color: var(--alta); }
.cola-fila .cifra-chica .dato.nada  { color: var(--tenue); }
.cola-fila .acciones { display: flex; gap: 7px; }

/* Lo que se despliega al pulsar «Ver»: lo que va a entrar al libro si se aprueba. */
.cola-detalle {
  margin: -9px 0 0 5px; border: 1px solid var(--azul-borde); border-top: none;
  border-radius: 0 0 var(--radio) var(--radio); background: #F7F9FC; padding: 11px 13px;
}
.cola-detalle .cabecera-detalle {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .06em;
}
.cola-detalle .cabecera-detalle .crece { flex: 1; }
.cola-detalle .cabecera-detalle .suave { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cola-detalle .tabla-contenedor { max-height: 42vh; background: #fff; }
/* La fila que trae un aviso se lee antes que las demás: es a lo que hay que mirar. */
.cola-detalle tbody tr.con-aviso { background: var(--alerta-suave); }
.cola-detalle tbody tr.con-aviso:hover { background: #FDF0D8; }
.cola-detalle .motivo { display: block; font-size: 11px; color: #96650A; font-weight: 500; }
.cola-detalle .pies { display: flex; gap: 12px; margin-top: 9px; align-items: flex-start; }
.cola-detalle .pies > * { flex: 1; margin-bottom: 0; }