/* Chrome de la aplicación — branding DOCUPRINT.
 *
 * El look sale del design system de Docuprint: tipografía primero, esquinas
 * rectas, grillas delimitadas por reglas negras con celdas separadas por
 * hairlines en vez de tarjetas con sombra, metadatos en mono. El rojo aparece
 * como puntuación —un borde, un punto, un CTA—, nunca como superficie grande.
 *
 * Los colores NO se escriben acá: salen de dp-colors.css. El único agregado
 * son los tokens propios de esta app, que son los tres estados de una celda
 * acreditada — y existen porque son la distinción que la planilla no puede
 * sostener.
 */

:root {
  /* Los tres estados de P2. Cada uno tiene que ser distinguible de un vistazo
   * y también sin color (por eso además hay un glifo en el marcador). */
  --estado-acreditado:   var(--status-success);
  --estado-nd:           var(--status-warning);
  --estado-sin-revisar:  var(--fg-3);
  --estado-validar:      var(--brand-accent);

  --alto-barra: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans, 'Poppins', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
}

/* ── barra superior ─────────────────────────────────────────────────────── */

.barra {
  display: flex; align-items: center; gap: 24px;
  height: var(--alto-barra);
  padding: 0 20px;
  background: var(--bg-1);
  border-bottom: 2px solid var(--border-strong);
  position: sticky; top: 0; z-index: 10;
}
.barra__logo img { height: 20px; display: block; }
.barra__corte {
  margin-left: auto;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: .02em;
  color: var(--fg-2);
}
.barra__corte b { color: var(--fg-1); font-weight: 500; }

/* ── navegación: espeja las solapas vivas ──────────────────────────────── */

.nav { display: flex; gap: 2px; overflow-x: auto; }
.nav a {
  padding: 6px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--fg-2); text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--fg-1); background: var(--bg-3); }
.nav a[aria-current="page"] {
  color: var(--fg-1);
  border-bottom-color: var(--brand-accent);
}

/* ── contenido ──────────────────────────────────────────────────────────── */

main { padding: 24px 20px 64px; max-width: 1600px; }

.titulo { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.titulo h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.titulo .eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px; padding: 2px 6px;
  background: var(--fg-1); color: var(--bg-1);
}
.bajada { margin: 0 0 24px; color: var(--fg-2); max-width: 70ch; }

/* ── tarjetas de KPI ────────────────────────────────────────────────────── */

.kpis { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border-2);
        border: 1px solid var(--border-strong); margin-bottom: 28px; }
.kpi { flex: 1 1 150px; padding: 14px 16px; background: var(--bg-1); }
.kpi__rotulo {
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 6px;
}
.kpi__valor { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.kpi__nota { font-size: 11px; color: var(--fg-3); margin-top: 5px; }
.kpi--acento .kpi__valor { color: var(--brand-accent); }

/* ── tablas ─────────────────────────────────────────────────────────────── */

.tabla-caja { overflow-x: auto; border: 1px solid var(--border-strong); background: var(--bg-1); }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
thead th {
  text-align: left; padding: 8px 10px;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bg-1); background: var(--fg-1);
  font-weight: 500; white-space: nowrap; position: sticky; top: 0;
}
thead th .col {
  font-family: var(--font-mono, monospace);
  opacity: .55; margin-right: 5px;
}
tbody td { padding: 7px 10px; border-top: 1px solid var(--border-1); vertical-align: top; }
tbody tr:hover td { background: var(--bg-2); }
.mono { font-family: var(--font-mono, monospace); font-size: 11.5px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── la celda acreditada ────────────────────────────────────────────────── */

/* El componente central de la app. Cada valor A:O viene con su procedencia, y
 * el marcador dice de un vistazo en cuál de los tres estados está. El glifo
 * acompaña al color para que no dependa de distinguirlos. */
.celda { display: block; }
.celda__valor { display: block; }
.celda__fuente {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 10px; color: var(--fg-3);
}
.celda__fuente::before {
  content: "●"; font-size: 8px; line-height: 1;
}
.celda[data-estado="acreditado"]  .celda__fuente::before { color: var(--estado-acreditado); }
.celda[data-estado="nd_con_causa"] .celda__fuente::before { content: "◐"; color: var(--estado-nd); }
.celda[data-estado="sin_revisar"] .celda__fuente::before { content: "○"; color: var(--estado-sin-revisar); }
.celda[data-marca="VALIDAR"] .celda__valor {
  border-bottom: 2px solid var(--estado-validar);
}

/* ── barra de completitud: 15 segmentos, uno por campo A:O ─────────────── */

.completitud { display: inline-flex; gap: 1.5px; }
.completitud i { width: 5px; height: 14px; display: block; background: var(--estado-sin-revisar); }
.completitud i[data-e="acreditado"] { background: var(--estado-acreditado); }
.completitud i[data-e="nd_con_causa"] { background: var(--estado-nd); }

/* ── etiquetas ──────────────────────────────────────────────────────────── */

.etiqueta {
  display: inline-block; padding: 1px 6px;
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .03em; border: 1px solid var(--border-2);
}
.etiqueta--livriz { border-color: #0047bb; color: #0047bb; }
.etiqueta--ret, .etiqueta--dev { border-color: var(--fg-3); color: var(--fg-2); }
.etiqueta--ok { border-color: var(--status-success); color: var(--status-success); }
.etiqueta--falla { border-color: var(--status-danger); color: var(--status-danger); }

.vacio { padding: 40px 20px; text-align: center; color: var(--fg-2); background: var(--bg-1);
         border: 1px dashed var(--border-2); }
.vacio code { font-family: var(--font-mono, monospace); background: var(--bg-3); padding: 1px 5px; }

@media (max-width: 760px) {
  .barra { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .barra__corte { margin-left: 0; width: 100%; }
  main { padding: 16px 14px 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Las cuatro pantallas operativas: Ruteo Diario, Control Ruteo, Detalle
 * Remitos y Pendientes.
 *
 * Todo lo que sigue se apoya en lo de arriba: `.celda`, `.completitud`,
 * `.etiqueta`, `.tabla-caja` y `.vacio` ya estaban y no se redefinen. Acá sólo
 * está lo que las cuatro pantallas agregan, y sigue la misma regla: reglas
 * negras, hairlines, mono para metadatos, el rojo como puntuación.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── la celda acreditada, expandible ───────────────────────────────────── */

/* `<details>` nativo y nada de JavaScript: la celda tiene que poder abrirse en
 * un navegador sin scripts, porque lo que muestra al abrirse es la evidencia y
 * ésa no puede depender de que cargue un bundle. */
.celda > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 11px;
}
.celda > summary::-webkit-details-marker { display: none; }
/* El triángulo es un afordance mínimo: 1 px de hairline, no un ícono. */
.celda > summary::after {
  content: "";
  position: absolute; top: 4px; right: 0;
  border: 3px solid transparent;
  border-left-color: var(--fg-3);
}
.celda[open] > summary::after {
  top: 6px;
  border-left-color: transparent;
  border-top-color: var(--fg-1);
}
.celda > summary:hover::after { border-left-color: var(--fg-1); }
.celda > summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }

/* PROVISORIO se superpone al estado igual que VALIDAR, y necesita su propia
 * marca gráfica: el subrayado punteado dice "hay un valor, pero todavía no hay
 * BAS ni PDF que lo respalde". */
.celda[data-marca="PROVISORIO"] .celda__valor {
  border-bottom: 1px dotted var(--fg-3);
}
.celda__marca {
  display: inline-block; margin-left: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 9px; letter-spacing: .06em;
  padding: 0 3px; border: 1px solid currentColor;
  vertical-align: 1px;
}
.celda[data-marca="VALIDAR"] .celda__marca { color: var(--estado-validar); }
.celda[data-marca="PROVISORIO"] .celda__marca { color: var(--fg-2); }

/* La procedencia abierta. Es texto chico y dos columnas: rótulo en mono,
 * valor en sans. No es una tarjeta: es una nota al pie dentro de la celda. */
.procedencia {
  /* Rótulo arriba y valor abajo, nunca en dos columnas: la celda vive dentro
   * de una columna de la grilla, y una grilla de dos columnas ahí adentro deja
   * el valor con veinte píxeles y lo parte letra por letra. El `min-width`
   * ensancha la columna al abrirla —la tabla ya scrollea— en vez de apretar
   * la evidencia, que es justo lo que hay que poder leer. */
  display: block;
  min-width: 190px;
  margin: 6px 0 2px;
  padding: 7px 8px;
  background: var(--bg-2);
  border-left: 2px solid var(--fg-1);
  font-size: 11px;
}
.procedencia dt {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 5px;
}
.procedencia dt:first-child { margin-top: 0; }
.procedencia dd { margin: 0; color: var(--fg-2); overflow-wrap: anywhere; }
.procedencia .version { border-top: 1px solid var(--border-1); padding: 2px 0; }
.procedencia .version:first-child { border-top: 0; }

/* ── la grilla A:O ──────────────────────────────────────────────────────── */

/* Las 15 columnas no se colapsan (BRD R1), así que la tabla es ancha y
 * scrollea dentro de `.tabla-caja`. El techo de ancho por celda existe para
 * que la columna K —que lista todas las fuentes consultadas— no empuje a las
 * otras catorce fuera de la pantalla. */
.grilla td { max-width: 240px; min-width: 112px; }
.grilla td .celda__valor { overflow-wrap: anywhere; }
.grilla .celda-completitud { min-width: 128px; background: var(--bg-2); }
.grilla tbody tr:hover .celda-completitud { background: var(--bg-3); }
.celda-completitud .etiquetas { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.celda-completitud .ver-fuentes {
  display: block; margin-top: 6px; font-size: 10px; color: var(--fg-2);
}
.celda-completitud .ver-fuentes:hover { color: var(--brand-accent); }

/* La letra de columna en el encabezado ya tiene estilo (`thead th .col`); acá
 * se reusa la misma clase fuera del `thead`, donde el fondo es claro. */
td .col, .cierre .col, .subtitulo .col {
  font-family: var(--font-mono, monospace);
  background: var(--fg-1); color: var(--bg-1);
  padding: 0 4px; font-size: 10px;
}

/* ── desglose dentro de una tarjeta de KPI ─────────────────────────────── */

/* El encabezado de cohorte publica el reparto por operador y por clase. Son
 * listas de tres o cuatro líneas, no un número: van en la tarjeta pero no
 * usan el tamaño de `.kpi__valor`. */
.desglose { font-size: 11.5px; line-height: 1.6; }
.desglose b { font-weight: 600; min-width: 2.2em; display: inline-block; }

/* ── control de cierre ─────────────────────────────────────────────────── */

/* El veredicto de si la cohorte se puede declarar completa. El color es un
 * borde izquierdo y nada más: el texto ya dice qué pasa. */
.cierre {
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  padding: 14px 16px; margin: 0 0 28px;
}
.cierre--ok { border-left-color: var(--status-success); }
.cierre--falta { border-left-color: var(--brand-accent); }
.cierre__veredicto { margin: 0 0 6px; font-size: 15px; }
.cierre__nota { margin: 0; color: var(--fg-2); font-size: 12.5px; max-width: 80ch; }
.cierre__lista { margin: 6px 0 0; padding-left: 0; list-style: none; }
.cierre__lista li { padding: 3px 0; border-top: 1px solid var(--border-1); font-size: 12.5px; }

/* ── avisos: un principio del producto, o un error de búsqueda ─────────── */

.aviso {
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  padding: 14px 16px; margin: 0 0 24px; max-width: 80ch;
}
.aviso p { margin: 0 0 6px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso__nota { color: var(--fg-2); font-size: 12.5px; }
.aviso--principio { border-left-color: var(--fg-1); }
.aviso--error { border-left-color: var(--brand-accent); }
.aviso code { font-family: var(--font-mono, monospace); background: var(--bg-3); padding: 1px 4px; }

/* ── bloques de fuente en Control Ruteo ────────────────────────────────── */

/* Un bloque por fuente, con su fecha de corte en el encabezado. La regla
 * negra arriba los separa sin encerrarlos en tarjetas. */
.bloque { margin: 0 0 32px; }
.bloque__titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: 0 0 4px; padding-bottom: 5px;
  border-bottom: 2px solid var(--border-strong);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.bloque__corte {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; color: var(--fg-2); font-weight: 400;
}
.bloque__nota { margin: 0 0 10px; color: var(--fg-2); font-size: 12px; max-width: 80ch; }

/* La ausencia es información: un bloque sin registros lo dice, no se omite. */
.sin-registros {
  margin: 0; padding: 12px 14px;
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  color: var(--fg-2); font-size: 12.5px;
}
.conteo { margin: 0 0 10px; font-size: 13px; }

/* Lista de datos de un solo registro (el estado conciliado). */
.datos {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 1px 14px; margin: 0;
  border: 1px solid var(--border-strong); background: var(--bg-1);
  padding: 12px 14px; font-size: 12.5px;
}
.datos dt {
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-3); padding-top: 2px;
}
.datos dd { margin: 0; overflow-wrap: anywhere; }

/* Un evento C&E excluido sigue en la tabla —C&E es un log— pero atenuado. */
.fila--excluida td { color: var(--fg-3); }
.fila--excluida td.mono { text-decoration: line-through; }

.sutil { color: var(--fg-3); font-size: 10.5px; line-height: 1.4; }

/* ── las dos magnitudes de una reserva ─────────────────────────────────── */

/* Nunca una sola: la etiqueta de fuente va pegada al valor para que no se
 * pueda leer una magnitud sin saber quién la dice. */
.magnitud { min-width: 160px; }
.magnitud__valor { display: block; overflow-wrap: anywhere; }
.magnitud__fuente {
  display: block; margin-top: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 10px; color: var(--fg-3);
}

/* ── filtros y paginación ──────────────────────────────────────────────── */

.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 14px; margin: 0 0 24px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
}
.filtros label {
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-2);
}
.filtros label.chk {
  display: inline-flex; align-items: center; gap: 5px; text-transform: none;
  letter-spacing: 0; font-size: 11.5px;
}
.filtros input[type="text"], .filtros input:not([type]), .filtros select {
  font-family: var(--font-mono, monospace); font-size: 12px;
  padding: 5px 7px; background: var(--bg-1); color: var(--fg-1);
  border: 1px solid var(--border-2); border-radius: 0;
}
.filtros input:not([type]) { min-width: 15ch; }
.filtros input:focus-visible, .filtros select:focus-visible,
.filtros button:focus-visible {
  outline: 2px solid var(--brand-accent); outline-offset: 1px;
}
.filtros button {
  font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 14px; cursor: pointer;
  color: var(--brand-accent-on); background: var(--brand-accent);
  border: 1px solid var(--brand-accent); border-radius: 0;
}
.filtros button:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); }

.paginador {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px 2px; font-size: 12.5px;
}
.paginador a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--border-2); }
.paginador a:hover { border-bottom-color: var(--brand-accent); color: var(--brand-accent); }
.paginador__pos { margin-left: auto; color: var(--fg-2); font-size: 11px; }

/* ── subtítulo de sección (los grupos de prioridad) ────────────────────── */

.subtitulo {
  display: flex; align-items: baseline; gap: 8px;
  margin: 26px 0 8px; font-size: 13px; font-weight: 600;
}
.subtitulo__n {
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--fg-3);
}

main a { color: var(--fg-1); }
main a:hover { color: var(--brand-accent); }

@media (max-width: 760px) {
  /* A 400 px el body no scrollea en horizontal: las tablas lo hacen dentro de
   * `.tabla-caja`, y todo lo que es grilla de dos columnas se apila. */
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dt { margin-top: 6px; }
  .bloque__corte { margin-left: 0; width: 100%; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros button, .filtros select, .filtros input:not([type]) { width: 100%; }
  .paginador__pos { margin-left: 0; width: 100%; }
  .cierre, .aviso { padding: 12px 13px; }
  .grilla td { max-width: 190px; }
}