/* Diagnóstico Jornada40 — pantalla.
   Los tokens de AIvena viven en _ds/. Esta paleta es la del papel cálido que
   usa el diagnóstico; se declara aquí porque es propia de la vista, no del
   sistema. Todo lo demás (escala tipográfica, radios, curva de movimiento)
   sigue al sistema. */

:root {
  --papel: #FAF8F5;
  --superficie: #FFFFFF;   /* el .dc.html lo traía como --tarjeta; el nombre del sistema es este */
  --carbon: #0A0A0C;
  --borde-oscuro: #26262B;
  --tinta: #1A1815;
  --tinta-2: #6E6A63;
  --borde: #E6E1D9;
  --pista: #F1EEE8;
  --relleno: #4A443B;
  --terracota: #B8442E;
  --ambar: #F5A623;
  --ambar-hondo: #8F5504;
  --ambar-tenue: #FDF0DA;
  --claro: #ECECF0;
  --claro-2: #8A857C;
  --descanso: #C9C3B7;

  --curva: cubic-bezier(.2, 0, .2, 1);
}

/* Alias en desuso. El .dc.html importado declaraba --tarjeta para la superficie
   elevada; el sistema de diseño de Jornada40 la llama --superficie. Se mantiene
   el alias para no romper nada que todavía lo use, y se quita cuando
   /design-sync confirme que el diseño ya no lo emite. */
:root { --tarjeta: var(--superficie) }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ambar-hondo); text-decoration: none; border: 0 }
a:hover { color: var(--tinta) }

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace }

/* Etiqueta técnica del sistema, con el tracking de esta vista. */
.etiqueta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-2);
}

.cifra { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15 }
.tenue { color: var(--tinta-2) }
.alerta { color: var(--terracota) }

/* ---------- barra superior ---------- */

/* La medida de la aplicación: los 232px del nav más los 1180 de la hoja. Todo se
   alinea a ella y se centra, para que en una pantalla ancha el contenido no quede
   pegado a la izquierda y la ruta no se pierda en el borde del navegador. Con esto la
   ruta cae exactamente sobre el borde derecho del contenido, que es lo que la vuelve
   a atar a la pantalla. El carbón de la barra sí sangra de lado a lado, porque es la
   firma de marca persistente. */
:root {
  --medida: 1412px;
  /* La medida del cuerpo. El sistema de diseño fija 65ch como máximo —el español
     corre 20% más largo que el inglés y a más de eso el ojo pierde el renglón al
     volver—, pero contra tarjetas que ocupan la columna entera un párrafo a 65ch se
     ve corto y sin terminar. `none` lo deja llenar la columna, que a 1440 son 131
     caracteres. Para volver a la regla, poner `65ch`; para un punto intermedio
     legible, `90ch`. Es el único lugar donde se cambia. */
  --medida-cuerpo: none;
}

.topbar { height: 56px; background: var(--carbon) }
.barra-interior {
  max-width: var(--medida); margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 16px; padding: 0 40px;
}
.topbar .marca { width: 26px; height: 26px; display: block; flex: none }
.topbar .lockup { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--claro) }
.topbar .lockup em { font-style: normal; color: var(--ambar) }
.topbar .divisor { width: 1px; height: 20px; background: var(--borde-oscuro) }
.topbar .aivena { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--claro) }
.topbar .aivena em { font-style: normal; color: var(--ambar) }
.topbar .ruta { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--claro) }
.topbar .ruta .sep, .topbar .ruta .cadena { color: var(--claro-2) }

/* ---------- estructura ---------- */

.armazon {
  display: flex; align-items: stretch; min-height: calc(100vh - 56px);
  max-width: var(--medida); margin: 0 auto;
}

.lateral {
  width: 232px; flex: none; align-self: stretch;
  border-right: 1px solid var(--borde);
  padding: 24px 12px; display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0;
}
.lateral button {
  appearance: none; border: 0; text-align: left; font-family: inherit; font-size: 16px;
  color: var(--tinta-2); background: transparent;
  border-bottom: 1px solid var(--borde); border-radius: 10px;
  height: 48px; padding: 0 14px;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: background 120ms var(--curva), color 120ms var(--curva);
}
.lateral button:hover { color: var(--tinta) }
.lateral button img { width: 20px; height: 20px; flex: none; filter: grayscale(1) opacity(.45) }
/* La selección va en --pista, no en ámbar: el ámbar es señalador y su
   presupuesto está gastado en el tope, los estados de límite y el máximo de
   días. Un color de selección sería un cuarto lugar. */
.lateral button[aria-current="page"] { background: var(--pista); color: var(--tinta); font-weight: 600 }
.lateral button[aria-current="page"] img { filter: none }

.vista { flex: 1; min-width: 0 }
.hoja { max-width: 1180px; padding: 40px 40px 64px; display: flex; flex-direction: column; gap: 24px }
/* La carga y los estados declarados son más angostos que la columna: se estrechan a
   la medida de su tarjeta y se centran, en vez de quedarse pegados a la izquierda. */
.hoja-angosta { max-width: 720px; margin: 0 auto }

h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2 }

.encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap }
.encabezado .titulo { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.procedencia { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-2) }

/* ---------- controles ---------- */

.boton {
  appearance: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  height: 36px; padding: 0 16px; font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--tinta); cursor: pointer; transition: background 120ms var(--curva);
}
.boton:hover { background: var(--pista) }
.boton-primario {
  appearance: none; border: 0; background: var(--tinta); color: var(--papel);
  font-family: inherit; font-size: 14px; font-weight: 500; border-radius: 8px;
  height: 40px; padding: 0 20px; cursor: pointer;
}
.enlace {
  appearance: none; border: 0; background: none; padding: 0; font-family: inherit;
  font-size: 14px; font-weight: 500; color: var(--ambar-hondo); cursor: pointer;
}
.enlace:hover { text-decoration: underline }

.anios { display: flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; background: var(--superficie); flex: none }
.anios button {
  appearance: none; border: 0; border-left: 1px solid var(--borde); background: transparent;
  color: var(--tinta-2); font-family: inherit; font-size: 14px; padding: 8px 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  transition: background 120ms var(--curva);
}
.anios button:first-child { border-left: 0 }
.anios button:hover { background: var(--pista) }
.anios button[aria-pressed="true"] { background: var(--pista); color: var(--tinta); font-weight: 500 }
.anios button .tope { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--tinta-2) }

/* ---------- tarjetas ---------- */

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px }
.tarjeta > .cabeza { padding: 16px 24px 12px }
.tarjeta > .cabeza.con-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 16px 24px; border-bottom: 1px solid var(--borde);
}
.tarjeta > .cuerpo { padding: 0 24px 16px; display: flex; flex-direction: column; gap: 12px }
.tarjeta > .pie {
  padding: 16px 24px; border-top: 1px solid var(--borde);
  font-size: 14px; color: var(--tinta-2); text-wrap: pretty;
}

/* Resumen: tarjeta propia, tres renglones con ceja a la izquierda. La columna
   de cejas es lo que hace que la tarjeta ocupe su ancho sin dejar hueco. */
.resumen .fila {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px;
  align-items: baseline; padding: 24px;
}
.resumen .fila + .fila { border-top: 1px solid var(--borde) }
.resumen p { max-width: var(--medida-cuerpo); font-size: 14px; font-weight: 400; color: var(--tinta-2); text-wrap: pretty }

/* Tres niveles, sin ámbar: el presupuesto de la pantalla ya está gastado en la
   línea del tope, los estados de límite y la regla del máximo de días.
   El dato favorable va en tinta: cumplir no se señala. */
.resumen .dato { font-weight: 500; color: var(--tinta) }
.resumen .mal { font-weight: 500; color: var(--terracota) }

/* A menos de 960px la ceja pasa encima del párrafo. */
@media (max-width: 959px) {
  .resumen .fila { grid-template-columns: minmax(0, 1fr); gap: 8px }
}

.indicadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--borde); border: 1px solid var(--borde);
  border-radius: 12px; overflow: hidden;
}
.indicadores > div { padding: 24px; display: flex; flex-direction: column; gap: 8px; background: var(--superficie) }

/* ---------- barras ---------- */

.pista { position: relative; display: block; height: 10px; background: var(--pista); border-radius: 99px }
.pista > .relleno { position: absolute; left: 0; top: 0; bottom: 0; background: var(--relleno); border-radius: 99px }
.pista > .relleno.excedido { background: var(--terracota) }
/* Hueco: lo que falta para llegar a la línea. Terracota, como todo lo que
   incumple. Arranca donde termina el sólido, así que sólido + hueco cierran
   exactamente en el requerimiento. */
.pista > .hueco { position: absolute; top: 0; bottom: 0; background: var(--terracota); border-radius: 99px; z-index: 2 }

/* Ociosa: horas que existen, son legales y no se pueden usar porque quien las
   tiene no está habilitado. Perfilado sin relleno: están y no cuentan, así que
   no pueden pesar lo mismo que las que sí. Va encima y puede rebasar la línea. */
/* Ociosa: horas que existen, son legales y no se pueden usar porque quien las
   tiene no está habilitado. Perfilado sin relleno: están y no cuentan, así que
   no pueden pesar lo mismo que las que sí. Lleva dato, por eso el borde es
   --tinta-2 y no --borde. */
.pista > .ociosa {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  border: 1px solid var(--tinta-2); background: none; border-radius: 99px;
}

.renglon { display: flex; align-items: center; gap: 16px; height: 24px }
.renglon .nombre { width: 224px; flex: none; font-size: 14px }
.renglon .pista { flex: 1; min-width: 0 }
.renglon .valor { flex: none; text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px }

/* Capacidad legal: tres columnas y, por año, dos carriles apilados que comparten
   origen y escala. Cada celda de año mide lo mismo en las tres columnas, así que
   el carril 1 queda alineado con su cifra y el carril 2 con la suya. */
.capacidad { padding: 0 24px 16px; display: flex; gap: 16px; align-items: stretch }
.capacidad .anios-col { width: 44px; flex: none; display: flex; flex-direction: column }
.capacidad .pistas { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column }
.capacidad .cifras { width: 220px; flex: none; display: flex; flex-direction: column }
.capacidad .hueco-superior { height: 20px; flex: none }

/* Celda de año: 24px para el carril 1 y su cifra, 20px para el carril 2 y la suya. */
/* Celda de año: los dos carriles a 4px, y 16px entre años. Sin eso la
   proximidad no dice qué va con qué, porque el hueco entre el carril de un año
   y el sólido del siguiente se ve igual que el de adentro del grupo. */
.capacidad .celda { height: 36px; flex: none; display: flex; flex-direction: column; padding: 8px 0 }
.capacidad.un-carril .celda { height: 26px; padding: 8px 0 }
.capacidad .riel { display: flex; align-items: center }
.capacidad .riel.r1 { height: 10px }
.capacidad .riel.r2 { height: 6px; margin-top: 4px }

/* El año nombra al carril 1, que es la respuesta; va alineado con él y no con el
   centro de la celda, que caería entre los dos carriles. */
/* El año nombra al carril 1, que es la respuesta; va alineado con él. */
.capacidad .anios-col .celda, .capacidad .cifras .celda { justify-content: flex-start }
.capacidad .anios-col .riel {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--tinta-2);
}
.capacidad .anios-col .celda.actual .riel { color: var(--tinta); font-weight: 500 }
.capacidad .anios-col .celda.actual { color: var(--tinta); font-weight: 500 }

.capacidad .pistas .riel .pista { width: 100% }
/* El carril 2 es la glosa, no la respuesta: más delgado. */
.capacidad .pistas .riel.r2 .pista { height: 6px }

.capacidad .rotulo-req {
  position: absolute; top: 0; height: 20px; line-height: 20px; transform: translateX(-50%);
  white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; color: var(--tinta-2);
}
.capacidad .linea-req { position: absolute; top: 20px; bottom: 0; width: 0; border-left: 1px solid var(--tinta); z-index: 4 }

/* Las cifras viven en cajas de la misma altura que su carril, así que cada una
   queda centrada sobre el suyo aunque el texto sea más alto que la caja. */
.capacidad .cifras .riel {
  justify-content: flex-end; gap: 8px; white-space: nowrap; overflow: visible;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; line-height: 1;
}
.capacidad .cifras .riel.r2 { font-size: 12px; margin-top: 0 }
/* Las cifras necesitan más aire vertical que los carriles: dos líneas de texto
   no caben en los 20px del grupo sin encimarse. Llevan su propio ritmo, con el
   bloque centrado en la celda, así que cada línea sigue cayendo sobre su
   carril y los años se siguen separando por los mismos 16px. */
.capacidad .cifras .celda { padding: 3px 0; justify-content: center }
.capacidad .cifras .riel.r1, .capacidad .cifras .riel.r2 { height: 15px }
.capacidad .cifras .faltante { color: var(--terracota); width: 76px; text-align: right }

/* límite legal del reparto extraordinario */
.limite-legal { display: flex; align-items: center; gap: 16px }
.limite-legal .linea { flex: 1; min-width: 0; height: 2px; border-radius: 1px; background: var(--ambar) }
.limite-legal .texto {
  flex: none; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--ambar-hondo);
}

/* La cobertura va como segunda línea del pie, separada del texto del pico. */
.pie .cobertura { display: block; margin-top: 8px }

/* ---------- tabla de plantilla contra el tope ---------- */

.tabla-marco { overflow-x: auto }
/* 24 + 160 + 12 + 110 + 12 + 220 + 12 + 24 + 12 + 190 + 12 + 130 + 24 */
.tabla { position: relative; padding: 0 24px; min-width: 942px }
.tabla .fila {
  display: grid; width: 100%; grid-template-columns: 160px 110px 220px 24px 190px 130px;
  gap: 12px; align-items: center; border-top: 1px solid var(--borde);
}
.tabla .encabezado-tabla {
  display: grid; width: calc(100% + 48px); grid-template-columns: 160px 110px 220px 24px 190px 130px;
  gap: 12px; align-items: center; height: 32px; background: var(--papel);
  margin: 0 -24px; padding: 0 24px; white-space: nowrap;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--tinta-2);
}
.tabla .encabezado-tabla > span:nth-child(1) { position: sticky; left: 0; background: var(--papel); z-index: 3 }
.tabla .encabezado-tabla > span:nth-child(2) { position: sticky; left: 172px; background: var(--papel); z-index: 3; text-align: right; box-shadow: 1px 0 0 var(--borde) }
.tabla .grupo { height: 44px; cursor: pointer; outline-offset: -2px }
.tabla .persona { height: 36px }
.tabla .fija-1 { position: sticky; left: 0; background: var(--superficie); z-index: 3; display: flex; align-items: center; gap: 8px }
.tabla .persona .fija-1 { display: block; padding-left: 24px; font-size: 14px }
.tabla .fija-2 {
  position: sticky; left: 172px; background: var(--superficie); z-index: 3;
  box-shadow: 1px 0 0 var(--borde);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; text-align: right;
}
.tabla .flecha { flex: none; transition: transform 120ms var(--curva) }
.tabla .grupo[aria-expanded="true"] .flecha { transform: rotate(90deg) }
.tabla .estado { font-size: 14px }
.tabla .estado.marcado { font-weight: 500 }
.tabla .fuera { font-size: 14px; font-weight: 500; color: var(--descanso) }
.tabla .fuera.marcado { color: var(--terracota) }
.tabla .rotulo-tope {
  position: absolute; top: 8px; height: 16px; line-height: 16px; transform: translateX(-50%);
  white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--tinta-2); z-index: 2;
}
.tabla .linea-tope { position: absolute; top: 32px; bottom: 0; width: 2px; border-radius: 1px; background: var(--ambar); z-index: 2 }

/* ---------- hallazgos ---------- */

.hallazgos { padding: 0 24px }
.hallazgo {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  min-height: 44px; padding: 6px 0; border-top: 1px solid var(--borde);
}
.hallazgo .que { flex: 1 1 300px; min-width: 0; font-size: 14px }
.hallazgo.ilegal .que { font-weight: 500; color: var(--terracota) }
.hallazgo .alcance { flex: none; width: 210px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px }
.hallazgo .naturaleza { flex: 1 1 240px; min-width: 0; font-size: 14px; color: var(--tinta-2); text-align: right }

/* Las tres columnas necesitan 782px de interior; la tarjeta mide el ancho de
   la ventana menos 360 (lateral + aire de hoja y tarjeta). Por debajo de eso
   el renglón se parte a propósito en dos: arriba qué pasó y cuánto, abajo la
   naturaleza alineada a la izquierda. Sin esto la tercera columna cae sola,
   sigue alineada a la derecha y su última línea queda suelta. */
@media (max-width: 1141px) {
  .hallazgo {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
    align-items: baseline; flex-wrap: nowrap;
  }
  .hallazgo .que, .hallazgo .alcance, .hallazgo .naturaleza { flex: none; width: auto }
  .hallazgo .naturaleza { grid-column: 1 / -1; text-align: left; font-size: 13px }
}

/* Lectura del archivo: lo que vino mal en el insumo. Peso menor que un
   hallazgo — sin terracota, en tinta tenue: hablan del archivo, no de la
   sucursal. */
.lectura { padding: 0 24px 4px }
.lectura-cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  min-height: 36px; padding: 6px 0; border-top: 1px solid var(--borde);
}
/* Dos renglones a propósito: la tarjeta de carga mide 640 y tres columnas no
   caben sin partirse. Arriba qué pasó y cuánto; abajo qué implica. */
.error-dato {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--borde); color: var(--tinta-2);
}
.error-dato .que { min-width: 0; font-size: 14px; font-weight: 500; color: var(--tinta-2) }
.error-dato .alcance { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; white-space: nowrap }
.error-dato .detalle { grid-column: 1 / -1; font-size: 13px; text-wrap: pretty }

/* Sucursal sin hallazgos: la tarjeta no se oculta, se ve que se revisó. */
.sin-hallazgos {
  padding: 16px 24px 20px; border-top: 1px solid var(--borde);
  font-size: 14px; color: var(--tinta-2); text-wrap: pretty;
}

/* ---------- estado vacío ---------- */

.carga { width: 100% }
.carga .cuerpo { padding: 24px; display: flex; flex-direction: column; gap: 16px }
/* Título a la izquierda, la salida al diagnóstico a la derecha, alineados arriba. */
.carga-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px }
.carga-cabeza .cifra { min-width: 0 }
.carga-cabeza .boton { flex: none }
.zona {
  height: 140px; border: 1px dashed var(--borde); border-radius: 12px; background: var(--papel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; outline-offset: 2px;
  transition: background 120ms var(--curva), border-color 120ms var(--curva);
}
.zona.encima { border-color: var(--ambar-hondo); background: var(--ambar-tenue) }
.zona .titulo { font-size: 14px; color: var(--tinta-2) }
.zona .formatos { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; color: var(--tinta-2) }
.manifiesto { padding: 0 24px }
.manifiesto .fila { display: flex; align-items: center; gap: 16px; min-height: 36px; padding: 4px 0; border-top: 1px solid var(--borde) }
.manifiesto .fila .que { flex: 1; min-width: 0; font-size: 14px }
.manifiesto .fila .marca { flex: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; color: var(--tinta-2) }
.manifiesto .fila .marca.opcional { color: var(--descanso) }
.carga .pie { padding: 16px 24px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px }
.carga .pie .casos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto }
.chip {
  appearance: none; background: var(--papel); border: 1px solid var(--borde); border-radius: 99px;
  height: 28px; padding: 0 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2);
  cursor: pointer; transition: background 120ms var(--curva), color 120ms var(--curva);
}
.chip:hover { background: var(--pista); color: var(--tinta) }
.error { font-size: 14px; color: var(--terracota); text-wrap: pretty }

/* Rechazo del insumo: no convive con un diagnóstico, lo impide. Por eso lleva
   terracota y bloquea la carga, en vez de acumularse en una tarjeta. */
.rechazo {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--terracota); border-radius: 8px; padding: 16px;
  background: var(--papel);
}
.rechazo .que { font-size: 14px; font-weight: 500; color: var(--terracota) }
.rechazo .porque { font-size: 14px; color: var(--tinta-2); text-wrap: pretty }
.rechazo .detalle { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px }
.rechazo .detalle span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em;
  color: var(--tinta-2); border: 1px solid var(--borde); border-radius: 99px; padding: 2px 8px;
}

:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--ambar-hondo) }

/* ---------- pantalla de optimización ---------- */

/* El selector de escenario reusa el tratamiento del de año: segmentado en
   --pista, sin ámbar. No es una restricción, es una vista, y el ámbar de esta
   pantalla ya está gastado en la línea del tope y en los estados de límite. */
.escenarios {
  display: flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden;
  background: var(--superficie); flex: none; align-self: flex-start;
}
/* El segmentado y su glosa cuelgan del encabezado en su propio renglón: el
   selector de año ya ocupa la derecha y las glosas de escenario no caben al lado. */
.selector-escenario { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px }
.escenarios button {
  appearance: none; border: 0; border-left: 1px solid var(--borde); background: transparent;
  color: var(--tinta-2); font-family: inherit; font-size: 14px; padding: 9px 16px;
  cursor: pointer; transition: background 120ms var(--curva);
}
.escenarios button:first-child { border-left: 0 }
.escenarios button:hover { background: var(--pista) }
.escenarios button[aria-pressed="true"] { background: var(--pista); color: var(--tinta); font-weight: 500 }
/* El hilo de sugerencias no usa esta medida: una conversación se lee distinto de un
   párrafo de datos, y ahí los 65ch siguen siendo los correctos. */
.glosa { font-size: 14px; color: var(--tinta-2); max-width: var(--medida-cuerpo); margin: 0 }

/* Cifras enfrentadas. Se confrontan en vertical y no en horizontal: dos valores
   de 26px en un renglón no caben en una celda de 240px, que es lo que queda a
   1280 con el nav puesto. */
.enfrentada { display: flex; flex-direction: column; gap: 2px }
.enfrentada .hoy { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--tinta) }
.enfrentada .hoy.mal { color: var(--terracota) }
.enfrentada .prop { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--tinta) }
.enfrentada .prop .flecha { color: var(--tinta-2); font-weight: 400 }

.nota-pie { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .04em; color: var(--tinta-2); margin: 0 }

/* ---------- rejilla de horarios ---------- */

/* Anchos apretados contra los del sistema de diseño, que dan 1090px y no caben en
   los 966px que quedan a 1280 con el nav puesto. Los tres renglones del nav son el
   arco de la demo y no se pliegan, así que lo que cede es la rejilla: días 56px,
   carga 160px, horas 56px, estado 116px, gap 10px. Con eso mide 916px y cabe entera
   a 1280 y a 1440, sin desplazamiento horizontal y sin la columna de estado cortada. */
/* La columna de colaborador va a 92px y no a los 140px del sistema: aquélla está
   dimensionada para un nombre —«Ramírez Lucía»— y aquí se enseña el identificador
   de plantilla, que es lo que el CSV trae. */
.rejilla { --cols: 92px repeat(7, 56px) 160px 56px 116px }
.rejilla .desplaza { overflow-x: auto; overflow-y: auto; max-height: 616px }
.rejilla .fila {
  display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center;
  min-width: 916px; padding: 0 24px;
}
.rejilla .cabecera {
  height: 32px; background: var(--papel); position: sticky; top: 0; z-index: 3;
  border-bottom: 1px solid var(--borde);
}
.rejilla .dato { height: 44px; border-bottom: 1px solid var(--borde) }
.rejilla .dato:last-child { border-bottom: 0 }
.rejilla .quien { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; color: var(--tinta) }
.rejilla .chip {
  background: var(--pista); border-radius: 4px; text-align: center; padding: 4px 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: -.02em; color: var(--tinta);
}
.rejilla .libre { text-align: center; color: var(--descanso) }
.rejilla .horas { text-align: right; font-size: 14px }
.rejilla .marca-estado { font-size: 14px }
.rejilla .cerca, .rejilla .en-limite { color: var(--ambar-hondo); font-weight: 500 }
.rejilla .excede { color: var(--terracota); font-weight: 500 }
/* La línea del tope: uno de los dos lugares de ámbar de esta pantalla. No se
   mueve con el año —lo que se mueve es la escala—, que es la tesis del sistema. */
.rejilla .pista > .limite {
  position: absolute; top: -6px; bottom: -6px; left: 90.909%; width: 2px;
  background: var(--ambar); border-radius: 1px; z-index: 2;
}
.rejilla .totales { border-top: 1px solid var(--tinta); height: 44px }

/* ---------- pantalla de sugerencias ---------- */

/* Sin palomitas ni tarjetas de color: el sistema no usa verde y «todo palomeado» se
   lee como lámina de venta. Los turnos se separan con borde, como todo lo demás. */
.chat {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  padding: 8px 24px; max-height: 520px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.chat .turno { padding: 16px 0; border-bottom: 1px solid var(--borde); max-width: 65ch }
.chat .turno:last-child { border-bottom: 0 }
.chat .turno p { margin: 0; font-size: 14px; color: var(--tinta); text-wrap: pretty }
.chat .turno p + p, .chat .turno ul { margin-top: 12px }
.chat .turno ul { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
.chat .turno li { font-size: 14px; color: var(--tinta); text-wrap: pretty }
.chat .turno strong { font-weight: 600 }
/* El espacio de Plex Mono mide 8.4px contra 3.9 del sans, así que una cifra con unidad se
   lee como si llevara dos espacios. Se aprieta, y no se parte en salto de línea: número y
   unidad son una sola cosa. */
.chat .mono { word-spacing: -.3em; white-space: nowrap }
.chat .turno.mio { align-self: flex-end; max-width: 55ch }
.chat .turno.mio p {
  background: var(--pista); border-radius: 12px; padding: 10px 16px; color: var(--tinta); font-weight: 500;
}
.chat .turno.mio { border-bottom: 0; padding-bottom: 8px }
.chat .turno.vacio { border-bottom: 0 }
/* Estado declarado, no error de consola. Sin terracota: no es un incumplimiento de la
   sucursal, es que la consulta no salió. */
.chat .turno.estado { display: flex; flex-direction: column; gap: 8px }

.cromos { display: flex; flex-wrap: wrap; gap: 8px }
.cromo {
  appearance: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  padding: 9px 16px; font-family: inherit; font-size: 14px; color: var(--tinta-2); cursor: pointer;
  text-align: left; transition: background 120ms var(--curva), color 120ms var(--curva);
}
.cromo:hover:not(:disabled) { background: var(--pista); color: var(--tinta) }
.cromo:disabled { opacity: .5; cursor: default }

.preguntar { display: flex; gap: 12px; align-items: center }
.preguntar input {
  flex: 1; min-width: 0; height: 40px; padding: 0 16px; font-family: inherit; font-size: 14px;
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 8px;
}
.preguntar input::placeholder { color: var(--tinta-2) }
.preguntar input:focus { outline: 2px solid var(--ambar-hondo); outline-offset: 2px; border-color: var(--ambar-hondo) }
.preguntar input:disabled { background: var(--pista) }
.preguntar .boton-primario:disabled { opacity: .5; cursor: default }

/* ---------- etapas del cálculo ---------- */

/* Las etapas reales del cálculo, con la cifra que cada una produjo. Sin barra de
   progreso y sin porcentaje: un porcentaje inventado es exactamente lo que este
   producto evita. Las cumplidas se quedan visibles en tenue, la actual en tinta. */
.etapas { padding: 8px 24px; cursor: pointer }
.etapas:focus-visible { outline: 2px solid var(--ambar-hondo); outline-offset: 2px }
.etapa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--borde);
  color: var(--tinta-2); font-size: 14px;
}
.etapa:last-child { border-bottom: 0 }
.etapa.actual { color: var(--tinta) }
.etapa.actual .que { font-weight: 500 }
.etapa .cuanto { font-size: 14px; text-align: right; white-space: nowrap; color: inherit }

/* El contraste contra la planilla vigente bajo la línea de verificación. Dos renglones
   y no una tabla: son dos cifras y su desglose, y una tabla de dos filas dentro de una
   nota al pie pesa más de lo que vale. `--tinta-2` como el resto de la nota: es un dato
   de la propuesta, no una alarma. */
.nota-pie.contraste { display: flex; flex-direction: column; gap: 2px; margin-top: 6px }
.nota-pie.contraste b { font-weight: 600 }

/* La fila del selector con la descarga al otro extremo: el botón baja de renglón antes
   que apretar los cuatro escenarios, que son el arco de la demo y no se pliegan. */
.fila-escenarios { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }