/* Hoja externa y nunca estilos en línea: la CSP de producción no permite
   `unsafe-inline`, así que un <style> embebido o un style= quedaría
   bloqueado. Hay un test que lo verifica sobre las plantillas.

   Y tampoco @import ni url() a otro origen: la política es `default-src 'self'`
   SIN `font-src`, así que una tipografía de Google Fonts anda en desarrollo y
   queda bloqueada recién en producción. */

/* Geist y Geist Mono (OFL), servidas por el sistema: la CSP no admite fuentes
   de otro origen. Una variable por familia cubre todos los pesos. */
@font-face {
  font-family: "Geist";
  src: url("/fuentes/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fuentes/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Los números —importes, CUIT, comprobantes— en monoespaciada: se comparan
     contra el papel columna contra columna. */
  --fuente-numeros: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── Marca ──────────────────────────────────────────────────────────────
     El verde de Mafers. El gradiente es la única licencia decorativa, y vive
     en el cromo —barra lateral, símbolo, ítem activo—, nunca sobre un dato. */
  --marca: #1d8f5f;
  --marca-clara: #2fa874;
  --marca-tinta: #ffffff;
  --gradiente-marca: linear-gradient(135deg, #1d8f5f 0%, #1d8f5f 100%);

  /* ── Superficies, en tres capas ─────────────────────────────────────────
     Fondo, tarjeta, y elevado. La profundidad es lo que separa un tablero de
     una planilla: sin capas todo flota a la misma distancia del ojo. */
  --papel: #f6f7f8;
  --superficie: #ffffff;
  --superficie-alta: #f3f5f7;
  --superficie-lateral: #eef1f3;

  --tinta: #141a20;
  --tinta-media: #5f6974;
  --tinta-suave: #8b949e;

  --borde: #e2e6ea;
  --borde-fuerte: #cfd5dc;
  --borde-sutil: #e9edf0;

  /* ── Estados ────────────────────────────────────────────────────────────
     Estos SÍ van sobre los datos, y por eso son los únicos colores que tienen
     que significar algo. Si se encienden en todas las filas, no informan. */
  --peligro: #c53b43;
  --peligro-tinta: #fbeced;
  --atencion: #b5740a;
  --atencion-tinta: #f8f0e2;
  --exito: #1d8f5f;
  --exito-tinta: #e5f4ec;
  --neutro: #5f6974;
  --neutro-tinta: #eef1f3;
  --azul: #2c6db3;
  --azul-tinta: #eaf1f9;
  --violeta: #7048d6;
  --violeta-tinta: #f1edfb;

  --sombra-1: 0 1px 2px rgba(22, 33, 46, 0.05);
  --sombra-2: 0 1px 3px rgba(22, 33, 46, 0.06), 0 8px 24px -12px rgba(22, 33, 46, 0.18);
  --sombra-marca: 0 6px 20px -8px rgba(29, 143, 95, 0.45);

  --sobre-tono: #ffffff;
  /* Hacia dónde se ahonda el relleno del paso actual. En claro es la tinta
     (oscura); en oscuro la tinta es clara y el rojo se volvía rosa
     (07/10/2026): ahí va casi negro. */
  --hondo-paso: var(--tinta);

  --grad-atencion: linear-gradient(135deg, #b5740a 0%, #b5740a 100%);
  --grad-peligro:  linear-gradient(135deg, #c53b43 0%, #c53b43 100%);
  --grad-azul:     linear-gradient(135deg, #2c6db3 0%, #2c6db3 100%);
  --grad-violeta:  linear-gradient(135deg, #7048d6 0%, #7048d6 100%);
  --grad-exito:    linear-gradient(135deg, #1d8f5f 0%, #1d8f5f 100%);
  --grad-neutro:   linear-gradient(135deg, #5f6974 0%, #5f6974 100%);

  --radio: 10px;
  --radio-grande: 14px;
}

/* ── Los tres estados del tema ────────────────────────────────────────────
   SIN marca => CLARO. Es el defecto y es deliberado: la pantalla se mira de
   día, al lado de un papel, y el papel es blanco.

   `auto` sigue al sistema y `oscuro` lo fuerza, los dos explícitos. En
   producción la marca la pone Astro en <html data-tema> leyendo una COOKIE:
   el servidor ya sabe qué pintar y no hay parpadeo de tema equivocado. */
:root[data-tema="oscuro"] {
    --marca: #3fbf8a;
    --marca-clara: #6fd8ab;
    --marca-tinta: #06110c;
    --gradiente-marca: linear-gradient(135deg, #3fbf8a 0%, #3fbf8a 100%);

    --papel: #0c1015;
    --superficie: #111720;
    --superficie-alta: #18202a;
    --superficie-lateral: #0a0d12;

    --tinta: #e7eaee;
    --tinta-media: #8a94a2;
    --tinta-suave: #5d6672;

    --borde: #1f2731;
    --borde-fuerte: #2a3340;
    --borde-sutil: #1a212b;

    --peligro: #e5646b;
    --peligro-tinta: #2a1618;
    --atencion: #e3a83b;
    --atencion-tinta: #2a2114;
    --exito: #3fbf8a;
    --exito-tinta: #10251c;
    --neutro: #8a94a2;
    --neutro-tinta: #18202a;
    --azul: #6aa8e8;
    --azul-tinta: #13202e;
    --violeta: #a78bfa;
    --violeta-tinta: #1d1832;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 30px -14px rgba(0, 0, 0, 0.9);
    --sombra-marca: 0 6px 20px -8px rgba(63, 191, 138, 0.35);
    color-scheme: dark;
    --sobre-tono: #0c1015;
    --hondo-paso: #05070a;

    --grad-atencion: linear-gradient(135deg, #e3a83b 0%, #e3a83b 100%);
    --grad-peligro:  linear-gradient(135deg, #e5646b 0%, #e5646b 100%);
    --grad-azul:     linear-gradient(135deg, #6aa8e8 0%, #6aa8e8 100%);
    --grad-violeta:  linear-gradient(135deg, #a78bfa 0%, #a78bfa 100%);
    --grad-exito:    linear-gradient(135deg, #3fbf8a 0%, #3fbf8a 100%);
    --grad-neutro:   linear-gradient(135deg, #8a94a2 0%, #8a94a2 100%);

}

@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --marca: #3fbf8a;
    --marca-clara: #6fd8ab;
    --marca-tinta: #06110c;
    --gradiente-marca: linear-gradient(135deg, #3fbf8a 0%, #3fbf8a 100%);

    --papel: #0c1015;
    --superficie: #111720;
    --superficie-alta: #18202a;
    --superficie-lateral: #0a0d12;

    --tinta: #e7eaee;
    --tinta-media: #8a94a2;
    --tinta-suave: #5d6672;

    --borde: #1f2731;
    --borde-fuerte: #2a3340;
    --borde-sutil: #1a212b;

    --peligro: #e5646b;
    --peligro-tinta: #2a1618;
    --atencion: #e3a83b;
    --atencion-tinta: #2a2114;
    --exito: #3fbf8a;
    --exito-tinta: #10251c;
    --neutro: #8a94a2;
    --neutro-tinta: #18202a;
    --azul: #6aa8e8;
    --azul-tinta: #13202e;
    --violeta: #a78bfa;
    --violeta-tinta: #1d1832;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 30px -14px rgba(0, 0, 0, 0.9);
    --sombra-marca: 0 6px 20px -8px rgba(63, 191, 138, 0.35);
    color-scheme: dark;
    --sobre-tono: #0c1015;
    --hondo-paso: #05070a;

    --grad-atencion: linear-gradient(135deg, #e3a83b 0%, #e3a83b 100%);
    --grad-peligro:  linear-gradient(135deg, #e5646b 0%, #e5646b 100%);
    --grad-azul:     linear-gradient(135deg, #6aa8e8 0%, #6aa8e8 100%);
    --grad-violeta:  linear-gradient(135deg, #a78bfa 0%, #a78bfa 100%);
    --grad-exito:    linear-gradient(135deg, #3fbf8a 0%, #3fbf8a 100%);
    --grad-neutro:   linear-gradient(135deg, #8a94a2 0%, #8a94a2 100%);

  }
}


* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/* ══ Estructura ═══════════════════════════════════════════════════════════
   La barra lateral ocupa el ALTO COMPLETO y se lleva la marca; el encabezado
   queda sobre el contenido. Es lo que separa un tablero de una página con un
   menú: la navegación es una superficie, no una tira. */
body.con-navegacion {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  /* `auto 1fr` y NO `auto auto`: con dos filas automáticas y `min-height:100vh`
     el sobrante se reparte entre las dos y la CABECERA SE ESTIRA — así se comía
     220px de la primera pantalla, con dos palabras adentro. */
  grid-template-areas: "navegacion contenido";
  transition: grid-template-columns 0.2s var(--curva-salida);
  min-height: 100vh;
}
/* Fija y del alto de la pantalla: la sesión, al pie, queda siempre a la vista
   aunque la página sea larga. */
body.con-navegacion .navegacion {
  grid-area: navegacion;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible; /* el menú del tema sale de la barra en el riel */
  box-sizing: border-box;
}
body.con-navegacion main {
  grid-area: contenido;
  /* Ancho: la tabla tiene siete columnas y el motivo es una frase entera, así
     que el espacio horizontal se usa. El tope existe sólo para pantallas muy
     anchas, donde una línea de texto de 2000px no se lee. Centrado, que abajo
     de ese tope no se nota y arriba sí. */
  max-width: 120rem;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 4rem;
  width: 100%;
}

/* ══ Encabezado ═══════════════════════════════════════════════════════════ */
.encabezado {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.85rem 1.75rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  min-height: 4rem;
}

/* ══ Barra lateral ════════════════════════════════════════════════════════ */
.navegacion {
  background: var(--superficie-lateral);
  border-right: 1px solid var(--borde);
  padding: 1.15rem 0.85rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.2rem 0.4rem 0;
  text-decoration: none;
  color: inherit;
}
.marca .simbolo {
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  box-shadow: var(--sombra-marca);
}
.marca .simbolo svg { width: 1.3rem; height: 1.3rem; }
.marca .nombre {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.marca .nombre strong {
  font-size: 1.02rem;
  font-weight: 680;
  letter-spacing: -0.015em;
}
.marca .nombre span {
  font-size: 0.72rem;
  color: var(--tinta-suave);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.navegacion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.navegacion a,
.navegacion .proximamente {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.75rem;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta-media);
}
.navegacion svg { width: 1.15rem; height: 1.15rem; flex: none; opacity: 0.85; }
.navegacion a:hover { background: var(--superficie-alta); color: var(--tinta); }
.navegacion a.activo {
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  font-weight: 600;
  box-shadow: var(--sombra-marca);
}
.navegacion a.activo svg { opacity: 1; }
/* Deshabilitado y DICHO, no escondido: ver el mapa completo del sistema evita
   la pregunta "¿dónde está la carga?" cuando llegue. */
.navegacion .proximamente { color: var(--tinta-suave); cursor: default; }
.navegacion .proximamente svg { opacity: 0.45; }
.navegacion .proximamente::after {
  content: "pronto";
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--tinta-suave);
}

/* En pantalla angosta la barra pasa arriba, en fila. */
@media (max-width: 56rem) {
  body.con-navegacion {
    grid-template-columns: 1fr;
    grid-template-areas: "navegacion" "contenido";
  }
  body.con-navegacion .navegacion { position: static; height: auto; overflow: visible; }
  .navegacion { border-right: 0; border-bottom: 1px solid var(--borde); }
  .navegacion-pie { margin-top: 0; }
  .navegacion-pie .menu-sesion .panel-menu { top: calc(100% + 0.5rem); bottom: auto; }
  .navegacion ul { grid-auto-flow: column; overflow-x: auto; }
  .navegacion .proximamente::after { display: none; }
  body.con-navegacion main { padding: 1.25rem 1rem 3rem; }
  .encabezado { padding: 0.75rem 1rem; }
}

/* ══ Sesión, al pie de la barra lateral ═══════════════════════════════════
   Una tarjeta chica con el avatar: se abre hacia ARRIBA, porque abajo no
   queda pantalla. */
.navegacion-pie { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--borde-sutil); }
.navegacion-pie .menu-sesion > summary {
  border-radius: var(--radio-grande);
  padding: 0.45rem 0.55rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.navegacion-pie .menu-sesion > summary .identidad { flex: 1; }
.navegacion-pie .identidad .correo { max-width: 9.5rem; }
.navegacion-pie .menu-sesion .chevron { transform: rotate(180deg); transition: transform 0.2s var(--curva-salida); }
.navegacion-pie .menu-sesion[open] .chevron { transform: none; }
.navegacion-pie .menu-sesion[open] > summary { background: var(--superficie-alta); border-color: var(--borde); }
.navegacion-pie .menu-sesion .panel-menu {
  top: auto;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  min-width: 0;
  animation: entrar-desde-abajo 0.2s var(--curva-salida) both;
}
.navegacion-pie .avatar {
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca-clara);
}

/* ══ Sesión ═══════════════════════════════════════════════════════════════ */
.sesion { display: flex; align-items: center; gap: 0.75rem; }
.avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.identidad { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.identidad .correo {
  font-size: 0.86rem;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}
.identidad .rol {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
}
@media (max-width: 34rem) { .identidad { display: none; } }

/* ══ Botones ══════════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  font: inherit;
  font-weight: 580;
  text-decoration: none;
  cursor: pointer;
}
.boton:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.boton.discreto {
  background: transparent;
  color: var(--tinta-media);
  border-color: var(--borde-fuerte);
  font-size: 0.86rem;
  padding: 0.45rem 0.85rem;
  box-shadow: none;
}
.boton.discreto:hover { background: var(--superficie-alta); color: var(--tinta); }

/* ══ Título de la página ══════════════════════════════════════════════════ */
.titulo-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 690;
  letter-spacing: -0.022em;
}
.subtitulo { margin: 0.3rem 0 0; color: var(--tinta-media); font-size: 0.92rem; }
.volver {
  font-size: 0.88rem;
  color: var(--tinta-media);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.volver svg { width: 1rem; height: 1rem; }
.volver:hover { color: var(--tinta); }

/* ══ La fila de cifras ════════════════════════════════════════════════════
   Banda de color arriba con icono y etiqueta; cuerpo neutro con el número.
   El color IDENTIFICA la métrica y no compite con la cifra — que es el error
   de pintar el número: se lee peor justo lo que se vino a leer.

   Dos usos distintos del color, y conviene no mezclarlos:
     TONO       = qué métrica es. No quiere decir "urgente".
     INTENSIDAD = urgencia. La banda llena es la que pide una acción.
   Si todas fueran llenas, la marca dejaría de decir cuál mirar primero. */
.resumen {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.cifra {
  --tono: var(--neutro);
  --tono-tinta: var(--neutro-tinta);
  --grad: var(--grad-neutro);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Tonos de identidad. */
.cifra.espera     { --tono: var(--atencion); --tono-tinta: var(--atencion-tinta); --grad: var(--grad-atencion); }
.cifra.documentos { --tono: var(--azul);     --tono-tinta: var(--azul-tinta);     --grad: var(--grad-azul); }
.cifra.sin-qr     { --tono: var(--peligro);  --tono-tinta: var(--peligro-tinta);  --grad: var(--grad-peligro); }
.cifra.antiguedad { --tono: var(--violeta);  --tono-tinta: var(--violeta-tinta);  --grad: var(--grad-violeta); }
.cifra.listos     { --tono: var(--exito);    --tono-tinta: var(--exito-tinta);    --grad: var(--grad-exito); }

.cifra .tapa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  background: var(--tono-tinta);
  color: var(--tono);
  border-bottom: 1px solid var(--borde-sutil);
}
.cifra .tapa svg { width: 1.05rem; height: 1.05rem; flex: none; }
.cifra .etiqueta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 690;
  line-height: 1.25;
}

.cifra .cuerpo { padding: 0.95rem 0.95rem 1.05rem; display: grid; align-content: start; gap: 0.1rem; }
.cifra .numero {
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
/* El importe agregado es largo: sin esto se desborda o parte feo. */
.cifra.antiguedad .numero { font-size: 1.95rem; }

.cifra .contexto {
  margin-top: 0.35rem;
  font-size: 0.79rem;
  color: var(--tinta-suave);
  display: flex;
  align-items: center;
  gap: 0.32rem;
}
.cifra .contexto svg { width: 0.85rem; height: 0.85rem; flex: none; color: var(--tono); }

/* ── La que pide acción: banda LLENA ──────────────────────────────────── */
.cifra.urge { border-color: var(--tono); }
.cifra.urge .tapa {
  /* El gradiente, igual que el ítem activo de la barra lateral: si el cromo
     tiene profundidad y las tarjetas son planas, se ven de dos sistemas. */
  background: var(--grad);
  color: var(--sobre-tono);
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.cifra.urge .contexto { color: var(--tono); font-weight: 550; }

/* ══ Grupos ═══════════════════════════════════════════════════════════════ */
.grupo { margin-top: 2.25rem; }
.grupo-titulo { display: flex; align-items: center; gap: 0.6rem; }
.grupo h2 { margin: 0; font-size: 1.08rem; font-weight: 660; letter-spacing: -0.012em; }
.grupo-titulo .cuenta {
  font-size: 0.74rem;
  font-weight: 650;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  font-variant-numeric: tabular-nums;
}
.explicacion { margin: 0.35rem 0 0.95rem; font-size: 0.86rem; color: var(--tinta-media); max-width: 48rem; }

/* ══ La tabla ═════════════════════════════════════════════════════════════
   Acá se compara un importe contra un papel. La densidad y el ritmo mandan;
   el color entra sólo cuando dice algo. */
.tabla-envoltura {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
  font-weight: 680;
  padding: 0.8rem 1rem;
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.tabla td {
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--borde-sutil);
  vertical-align: top;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-alta); }
.tabla .derecha { text-align: right; }
/* Cifras tabulares: sin esto los importes no se alinean entre filas y hay que
   leerlos de a uno en vez de barrer la columna. */
.tabla .numerica { font-variant-numeric: tabular-nums; }
.tabla .importe { font-weight: 660; font-size: 0.97rem; white-space: nowrap; letter-spacing: -0.01em; }
.tabla .identificacion { display: block; font-weight: 650; font-variant-numeric: tabular-nums; }
.tabla .archivo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}
.tabla .archivo svg { width: 0.85rem; height: 0.85rem; flex: none; }
/* La fila que pide atención lleva barra lateral ADEMÁS de fondo: el color solo
   deja afuera a quien no lo percibe. */
.tabla tr.marcada td:first-child { box-shadow: inset 3px 0 0 var(--atencion); }

a.identificacion { color: inherit; text-decoration: none; }
a.identificacion:hover { color: var(--marca-clara); }

/* ══ Motivos: punto de color + texto plano ════════════════════════════════
   NO son píldoras. Un motivo de este sistema es una frase entera —"La identidad
   la leyó un modelo, sin QR que la respalde"— y encerrar tres frases en tres
   cápsulas de color deja la celda ilegible justo donde está la información que
   importa. El punto lleva el tono, el texto se lee como texto.

   El tono sale de QUÉ ES el motivo: si todos fueran del mismo color, el color
   no estaría diciendo nada. */
td.motivos { max-width: 26rem; }
td.motivos .lista { display: grid; gap: 0.45rem; }

.motivo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--tinta);
}
.motivo::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  margin-top: 0.42rem;
}
/* El punto solo no alcanza —quien no distingue colores ve tres puntos iguales—
   así que el tono va además en el TÍTULO del grupo cuando hay más de uno, y
   `bloquea` lleva el texto en su color. */
.motivo.bloquea { color: var(--peligro); }
.motivo.solo-marca { color: var(--atencion); }
.motivo.fuera-de-alcance { color: var(--tinta-media); }
.motivo .texto { color: var(--tinta); }
.motivo.bloquea .texto { color: var(--tinta); font-weight: 500; }

/* ══ Señales ══════════════════════════════════════════════════════════════
   Cualidades del comprobante, no un diagnóstico. Cada una es un icono con su
   propio significado y se leen de un barrido bajando por la columna.

   REGLA QUE NO SE NEGOCIA: la falta de respaldo es un icono PRESENTE —el QR
   tachado—, nunca un hueco. Un espacio vacío se lee como "no aplica"; acá
   quiere decir "nadie verificó quién emitió esto", y ahí viven 7 de los 12
   comprobantes reales. Sin QR no hay segunda fuente contra la cual contrastar
   lo que leyó un modelo, y esos cuatro campos —CUIT, tipo, punto de venta y
   número— son la clave de unicidad de B7, que es control de seguridad.

   Y son ICONOS con forma distinta, no puntos de colores: el color solo deja
   afuera a quien no lo percibe, y esto decide si un comprobante entra a un
   asiento contable. Cada uno lleva además su texto para lector de pantalla. */
.senales { display: flex; align-items: center; gap: 0.3rem; }

.senal {
  --tono: var(--neutro);
  --tono-tinta: var(--neutro-tinta);
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--tono-tinta);
  color: var(--tono);
  border: 1px solid var(--tono);
  cursor: help;
}
.senal svg { width: 1rem; height: 1rem; }

.senal.con-qr   { --tono: var(--exito);    --tono-tinta: var(--exito-tinta); }
.senal.ia       { --tono: var(--violeta);  --tono-tinta: var(--violeta-tinta); }
.senal.multiple { --tono: var(--azul);     --tono-tinta: var(--azul-tinta); }

/* Las dos que dicen "esto no tiene verificación" van LLENAS con gradiente: son
   las que tienen que saltar en un barrido de cien filas. */
.senal.sin-verificar {
  background: var(--grad-peligro);
  color: var(--sobre-tono);
  border-color: transparent;
  box-shadow: var(--sombra-1);
}

/* Texto para lector de pantalla: un icono sin nombre no existe para quien no
   lo ve, y `title` no es suficiente. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Referencia de las señales ────────────────────────────────────────────
   Un icono sin leyenda es un jeroglífico. Va ARRIBA de la tabla, que es donde
   se necesita: se lee antes de mirar las filas, no después de haberlas mirado
   sin entenderlas. */
.referencia {
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: 0.79rem;
  color: var(--tinta-suave);
}
.referencia li { display: flex; align-items: center; gap: 0.4rem; }
.referencia .senal { width: 1.4rem; height: 1.4rem; border-radius: 6px; cursor: default; }
.referencia .senal svg { width: 0.85rem; height: 0.85rem; }

/* ══ Avisos y vacíos ══════════════════════════════════════════════════════ */
.aviso {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  background: var(--superficie);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 0.9rem;
  color: var(--tinta-media);
}
.aviso.error { border-left-color: var(--peligro); color: var(--peligro); }

.vacio {
  margin-top: 1.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-grande);
  color: var(--tinta-media);
}
.vacio .icono {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.9rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--exito-tinta);
  color: var(--exito);
}
.vacio .icono svg { width: 1.5rem; height: 1.5rem; }

/* ══ Pantallas sin sesión ═════════════════════════════════════════════════ */
main.centrado {
  display: grid;
  place-items: center;
  max-width: 30rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.tarjeta {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  padding: 2.25rem;
  text-align: center;
}
.tarjeta .simbolo {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.25rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  box-shadow: var(--sombra-marca);
}
.tarjeta .simbolo svg { width: 1.5rem; height: 1.5rem; }
.tarjeta .nota {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.tarjeta .boton { width: 100%; }

/* ══ Menú de sesión ═══════════════════════════════════════════════════════
   `<details>` nativo: se abre y se cierra SIN JavaScript. No es elegancia —
   la CSP prohíbe `unsafe-inline`, así que un `onclick` quedaría bloqueado en
   producción, y un script aparte para desplegar un menú es superficie de más.
   Salir sigue siendo POST: con GET, cualquier imagen en una página ajena
   podría cerrarle la sesión al operador sin que lo pida. */
.menu-sesion { position: relative; }
.menu-sesion > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu-sesion > summary::-webkit-details-marker { display: none; }
.menu-sesion > summary:hover { background: var(--superficie-alta); border-color: var(--borde); }
.menu-sesion > summary:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.menu-sesion .chevron { width: 1rem; height: 1rem; color: var(--tinta-suave); }
.menu-sesion[open] .chevron { transform: rotate(180deg); }

.menu-sesion .panel-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  min-width: 16.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  padding: 0.85rem;
  display: grid;
  gap: 0.85rem;
}
.menu-sesion .quien {
  display: grid;
  gap: 0.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--borde-sutil);
}
.menu-sesion .quien .correo { font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; }
.menu-sesion .quien .rol {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
}
.menu-sesion .boton { width: 100%; }

/* ══ Selector de tema ═════════════════════════════════════════════════════
   Tres estados y no dos: `auto` sigue al sistema, que es lo que la mayoría
   quiere y lo que hace hoy la pantalla. Un interruptor de dos posiciones
   obliga a elegir y pierde esa opción.

   En producción es un form que POSTea y deja una COOKIE, y Astro pinta
   `<html data-tema>` en el servidor: sin JavaScript y sin el parpadeo de
   tema equivocado que tiene la versión con localStorage. */
.tema { display: grid; gap: 0.4rem; }
.tema .titulo-campo {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
  font-weight: 650;
}
.opciones-tema {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.opciones-tema button {
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.opciones-tema button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 570;
  color: var(--tinta-media);
  cursor: pointer;
}
.opciones-tema button svg { width: 1.05rem; height: 1.05rem; }
.opciones-tema button:hover { background: var(--superficie); color: var(--tinta); }
.opciones-tema button[aria-pressed="true"] {
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  font-weight: 640;
}
.opciones-tema button:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 1px; }

/* ══ Proveedor ════════════════════════════════════════════════════════════
   La razón social arriba y el CUIT abajo: el nombre es lo que se reconoce de
   un vistazo, el CUIT es lo que se compara contra el papel. Los dos ya venían
   de la api; el segundo se mostraba solo y el primero se tiraba. */
.proveedor { display: grid; gap: 0.1rem; min-width: 0; }
.proveedor .razon-social { font-weight: 570; overflow-wrap: anywhere; }
.proveedor .cuit { font-size: 0.78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* Sin razón social no se deja en blanco: un hueco se lee como "no aplica" y
   esto es "no lo pudimos identificar", que es justo lo que hay que mirar. */
.proveedor .sin-nombre { font-style: italic; color: var(--tinta-suave); font-weight: 500; }

.tipo-comprobante {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  background: var(--neutro-tinta);
  border: 1px solid var(--borde);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--tinta-media);
  vertical-align: 1px;
}

/* ══ Señales ══════════════════════════════════════════════════════════════
   Cualidades del comprobante, no un diagnóstico. Cada una es un icono con su
   propio significado y se leen de un barrido bajando por la columna.

   REGLA QUE NO SE NEGOCIA: la falta de respaldo es un icono PRESENTE —el QR
   tachado—, nunca un hueco. Un espacio vacío se lee como "no aplica"; acá
   quiere decir "nadie verificó quién emitió esto", y ahí viven 7 de los 12
   comprobantes reales. Sin QR no hay segunda fuente contra la cual contrastar
   lo que leyó un modelo, y esos cuatro campos —CUIT, tipo, punto de venta y
   número— son la clave de unicidad de B7, que es control de seguridad.

   Y son ICONOS con forma distinta, no puntos de colores: el color solo deja
   afuera a quien no lo percibe, y esto decide si un comprobante entra a un
   asiento contable. Cada uno lleva además su texto para lector de pantalla. */
.senales { display: flex; align-items: center; gap: 0.3rem; }

.senal {
  --tono: var(--neutro);
  --tono-tinta: var(--neutro-tinta);
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--tono-tinta);
  color: var(--tono);
  border: 1px solid var(--tono);
  cursor: help;
}
.senal svg { width: 1rem; height: 1rem; }

.senal.con-qr   { --tono: var(--exito);    --tono-tinta: var(--exito-tinta); }
.senal.ia       { --tono: var(--violeta);  --tono-tinta: var(--violeta-tinta); }
.senal.multiple { --tono: var(--azul);     --tono-tinta: var(--azul-tinta); }

/* Las dos que dicen "esto no tiene verificación" van LLENAS con gradiente: son
   las que tienen que saltar en un barrido de cien filas. */
.senal.sin-verificar {
  background: var(--grad-peligro);
  color: var(--sobre-tono);
  border-color: transparent;
  box-shadow: var(--sombra-1);
}

/* Texto para lector de pantalla: un icono sin nombre no existe para quien no
   lo ve, y `title` no es suficiente. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Referencia de las señales ────────────────────────────────────────────
   Un icono sin leyenda es un jeroglífico. Va ARRIBA de la tabla, que es donde
   se necesita: se lee antes de mirar las filas, no después de haberlas mirado
   sin entenderlas. */
.referencia {
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: 0.79rem;
  color: var(--tinta-suave);
}
.referencia li { display: flex; align-items: center; gap: 0.4rem; }
.referencia .senal { width: 1.4rem; height: 1.4rem; border-radius: 6px; cursor: default; }
.referencia .senal svg { width: 0.85rem; height: 0.85rem; }

/* ══ Avisos y vacíos ══════════════════════════════════════════════════════ */
.aviso {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  background: var(--superficie);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 0.9rem;
  color: var(--tinta-media);
}
.aviso.error { border-left-color: var(--peligro); color: var(--peligro); }
.aviso.exito { border-left-color: var(--exito); color: var(--exito); }

/* §5.1septies · «Subir la OC N»: el aviso de la OC que no llegó lleva su
   formulario abajo; lo que pasó con la subida, arriba, como un aviso más. */
.aviso.oc-subida { margin-top: 0; margin-bottom: 0.75rem; }
.oc-que-no-llego { margin-top: 0; margin-bottom: 0.75rem; display: grid; gap: 0.75rem; }
.oc-que-no-llego p { margin: 0; }
.subir-oc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; }
.subir-oc .campo { flex: 1 1 16rem; }
.subir-oc input[type="file"] { max-width: 100%; font: inherit; color: var(--tinta-media); }
.subir-oc .accion { white-space: nowrap; }

/* 06/10/2026 · «Subir la OC N» en un modal. Lo que la subida dejó en la
   factura es una línea chica, no un aviso grande; lo registrado lo dice la
   fila de la orden. */
.aviso.oc-subida { padding: 0.45rem 0.8rem; font-size: 0.84rem; }
.oc-que-no-llego .abrir-subir-oc { justify-self: start; white-space: nowrap; }
.lista-ordenes .adjuntada-a-mano { grid-column: 2; color: var(--tinta-suave); font-size: 0.8rem; }

.modal-subir-oc {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra-2);
}
.modal-subir-oc[open] { display: grid; animation: aparecer 0.15s ease both; }
.modal-subir-oc::backdrop { background: rgba(12, 18, 26, 0.55); }
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.25rem; }
.modal-cabecera h2 { margin: 0; font-size: 1.05rem; }
.modal-cerrar { min-width: 2.25rem; min-height: 2.25rem; justify-content: center; }
.modal-fase { display: grid; gap: 0.9rem; padding: 0.5rem 1.25rem 1.25rem; overflow-y: auto; }
.modal-fase .explicacion { margin: 0; }
.modal-fase .carga { margin-top: 0; }
.modal-fase .zona { padding: 1.75rem 1.25rem; box-shadow: none; }
.modal-procesando { justify-items: center; text-align: center; padding-block: 1.5rem 2rem; }
.modal-titular { margin: 0; font-weight: 600; color: var(--tinta); }
.girando {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 3px solid var(--borde);
  border-top-color: var(--marca);
  animation: girar 0.9s linear infinite;
}
.modal-veredicto {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-weight: 500;
}
.modal-veredicto.exito { border-left-color: var(--exito); color: var(--exito); }
.modal-veredicto.error { border-left-color: var(--peligro); color: var(--peligro); }
.modal-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
@media (prefers-reduced-motion: reduce) {
  .girando { animation: none; }
}

.vacio {
  margin-top: 1.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-grande);
  color: var(--tinta-media);
}
.vacio .icono {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.9rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--exito-tinta);
  color: var(--exito);
}
.vacio .icono svg { width: 1.5rem; height: 1.5rem; }

/* ══ Pantallas sin sesión ═════════════════════════════════════════════════ */
main.centrado {
  display: grid;
  place-items: center;
  max-width: 30rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.tarjeta {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  padding: 2.25rem;
  text-align: center;
}
.tarjeta .simbolo {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.25rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  box-shadow: var(--sombra-marca);
}
.tarjeta .simbolo svg { width: 1.5rem; height: 1.5rem; }
.tarjeta .nota {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.tarjeta .boton { width: 100%; }

/* ══ Menú de sesión ═══════════════════════════════════════════════════════
   `<details>` nativo: se abre y se cierra SIN JavaScript. No es elegancia —
   la CSP prohíbe `unsafe-inline`, así que un `onclick` quedaría bloqueado en
   producción, y un script aparte para desplegar un menú es superficie de más.
   Salir sigue siendo POST: con GET, cualquier imagen en una página ajena
   podría cerrarle la sesión al operador sin que lo pida. */
.menu-sesion { position: relative; }
.menu-sesion > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu-sesion > summary::-webkit-details-marker { display: none; }
.menu-sesion > summary:hover { background: var(--superficie-alta); border-color: var(--borde); }
.menu-sesion > summary:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.menu-sesion .chevron { width: 1rem; height: 1rem; color: var(--tinta-suave); }
.menu-sesion[open] .chevron { transform: rotate(180deg); }

.menu-sesion .panel-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  min-width: 16.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  padding: 0.85rem;
  display: grid;
  gap: 0.85rem;
}
.menu-sesion .quien {
  display: grid;
  gap: 0.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--borde-sutil);
}
.menu-sesion .quien .correo { font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; }
.menu-sesion .quien .rol {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
}
.menu-sesion .boton { width: 100%; }

/* ══ Selector de tema ═════════════════════════════════════════════════════
   Tres estados y no dos: `auto` sigue al sistema, que es lo que la mayoría
   quiere y lo que hace hoy la pantalla. Un interruptor de dos posiciones
   obliga a elegir y pierde esa opción.

   En producción es un form que POSTea y deja una COOKIE, y Astro pinta
   `<html data-tema>` en el servidor: sin JavaScript y sin el parpadeo de
   tema equivocado que tiene la versión con localStorage. */
.tema { display: grid; gap: 0.4rem; }
.tema .titulo-campo {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
  font-weight: 650;
}
.opciones-tema {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.opciones-tema button {
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.opciones-tema button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 570;
  color: var(--tinta-media);
  cursor: pointer;
}
.opciones-tema button svg { width: 1.05rem; height: 1.05rem; }
.opciones-tema button:hover { background: var(--superficie); color: var(--tinta); }
.opciones-tema button[aria-pressed="true"] {
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  font-weight: 640;
}
.opciones-tema button:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 1px; }

/* ══ Proveedor ════════════════════════════════════════════════════════════
   La razón social arriba y el CUIT abajo: el nombre es lo que se reconoce de
   un vistazo, el CUIT es lo que se compara contra el papel. Los dos ya venían
   de la api; el segundo se mostraba solo y el primero se tiraba. */
.proveedor { display: grid; gap: 0.1rem; min-width: 0; }
.proveedor .razon-social { font-weight: 570; overflow-wrap: anywhere; }
.proveedor .cuit { font-size: 0.78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* Sin razón social no se deja en blanco: un hueco se lee como "no aplica" y
   esto es "no lo pudimos identificar", que es justo lo que hay que mirar. */
.proveedor .sin-nombre { font-style: italic; color: var(--tinta-suave); font-weight: 500; }

.tipo-comprobante {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  background: var(--neutro-tinta);
  border: 1px solid var(--borde);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--tinta-media);
  vertical-align: 1px;
}

/* ══ Paginado ═════════════════════════════════════════════════════════════
   El histórico crece sin techo: 150 documentos por día a diez años son medio
   millón de filas. Una pantalla que las pide todas funciona el primer mes. */
.paginado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--tinta-media);
}
.paginado .paginas { display: flex; gap: 0.4rem; }
.paginado .boton.discreto svg { width: 1rem; height: 1rem; }
.paginado .boton.discreto[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ══ Columna de acciones ══════════════════════════════════════════════════
   Reservada, con UNA sola acción: abrir. La api de revisión es de sólo lectura
   a propósito —corregir un campo, adjuntar una orden o descartar es E4—, así
   que un menú de opciones deshabilitadas sería una promesa por fila, cien
   veces repetida. La columna existe para que cuando lleguen las acciones de
   verdad no haya que rediseñar la tabla. */
.tabla th.acciones,
.tabla td.acciones { width: 1%; white-space: nowrap; text-align: right; }
.accion {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-alta);
  color: var(--tinta-media);
  font-size: 0.8rem;
  font-weight: 570;
  text-decoration: none;
}
.accion svg { width: 0.95rem; height: 0.95rem; }
.accion:hover { background: var(--gradiente-marca); color: var(--marca-tinta); border-color: transparent; }
.accion:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

/* La moneda va PEGADA al número, no en columna propia: una columna diría
   "ARS" en casi todas las filas, y una señal que se enciende siempre no
   señala nada. Pegada al importe es imposible de confundir. */
.importe .simbolo { color: var(--tinta-suave); font-weight: 600; margin-right: 0.15rem; }
.importe.extranjera .simbolo { color: var(--peligro); }

/* ══ La fila que no se pudo leer ══════════════════════════════════════════
   Va en la MISMA tabla que los comprobantes y arriba de todo. Es el peor
   estado: no es que falte un campo, es que no hay comprobante. Y es el único
   que no se arregla solo — ni reprocesando, porque el archivo ya se leyó todo
   lo que se podía leer.

   Antes vivía en una lista aparte al pie de la pantalla, y eso la escondía:
   B19 decidió que el único aviso es un indicador en pantalla, así que dos
   listas separadas son el lugar donde algo se pierde. */
.tabla tr.sin-comprobante td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
.tabla tr.sin-comprobante { background: var(--peligro-tinta); }
.tabla tr.sin-comprobante:hover { background: var(--peligro-tinta); }

.identificacion.sin-identificar {
  color: var(--peligro);
  font-style: italic;
  font-weight: 620;
}

.estado.fallido { color: var(--peligro); }

/* La única acción que resuelve esta fila. Va destacada porque es la que hay
   que hacer, no una de varias. */
.accion.urgente {
  background: var(--grad-peligro);
  color: var(--sobre-tono);
  border-color: transparent;
}
.accion.urgente:hover { filter: brightness(1.08); background: var(--grad-peligro); }

/* La columna de señales es angosta y fija: es lo primero que se barre. */
.tabla th:first-child,
.tabla td.col-senales { width: 1%; white-space: nowrap; }

/* ══ El estado vacío ══════════════════════════════════════════════════════
   Si el sistema hace su trabajo, esta pantalla se ve así CASI SIEMPRE. No es
   el caso borde: es el estado principal, y merece decir algo más que "no hay
   datos" — tiene que dar la tranquilidad de que la lista está mirando. */
.vacio {
  margin-top: 2rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  color: var(--tinta-media);
}
.vacio .icono {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  box-shadow: var(--sombra-marca);
}
.vacio .icono svg { width: 1.6rem; height: 1.6rem; }
.vacio .titulo-vacio {
  /* `auto` y no 0: `.vacio p` le da un ancho máximo, y con margen 0 el
     bloque queda pegado a la izquierda con el texto centrado adentro. */
  margin: 0 auto 0.4rem;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--tinta);
}
.vacio p { max-width: 34rem; margin: 0 auto; font-size: 0.9rem; }
.vacio a { color: var(--marca); font-weight: 560; }

/* Lo que lleva `hidden` no se ve, aunque su clase le ponga `display`: sin
   esto, un botón que el script muestra recién cuando sirve —«Seleccionar
   visibles»— aparecía siempre, porque `.accion` es `inline-flex`. */
[hidden] { display: none !important; }

/* Los <input type="date"> traen alto propio y no respetan el padding igual que
   un text: sin esto quedan un par de píxeles más altos que los demás. */
.rango input {
  font-size: 0.88rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-alta);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.rango input:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 1px; }

/* ══ Carga (E2-01) ════════════════════════════════════════════════════════ */
.carga { margin-top: 1.5rem; display: grid; gap: 1rem; }
.zona {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--superficie);
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  color: var(--tinta-media);
}
.carga.con-js .zona { cursor: pointer; }
.zona.arrastrando { border-color: var(--marca-clara); background: var(--exito-tinta); }
.zona .icono {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gradiente-marca);
  color: var(--marca-tinta);
  box-shadow: var(--sombra-marca);
}
.zona .icono svg { width: 1.6rem; height: 1.6rem; }
.zona .invitacion { margin: 0; color: var(--tinta); }
.zona .limites { margin: 0; font-size: 0.82rem; color: var(--tinta-suave); }
.zona .elegir { display: inline-grid; gap: 0.5rem; justify-items: center; }
/* Con JavaScript la zona entera es clicable y el input nativo se esconde. Sin
   él, el input queda a la vista: el formulario funciona igual. */
.carga.con-js .zona input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.carga:not(.con-js) .zona .elegir .boton { display: none; }

.elegidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.elegidos:empty { display: none; }
.elegido {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.5rem 0.55rem 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 0.88rem;
}
.elegido .nombre { overflow-wrap: anywhere; }
.elegido .detalle { font-size: 0.78rem; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.elegido.rechazado { border-color: var(--peligro); background: var(--peligro-tinta); }
.elegido.rechazado .detalle { color: var(--peligro); font-weight: 600; }
.elegido .quitar {
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.elegido .quitar:hover { background: var(--peligro); color: var(--sobre-tono); }

.carga .aviso { margin-top: 0; }
.carga .acciones { display: flex; justify-content: flex-end; }
.carga .boton:disabled { opacity: 0.55; cursor: not-allowed; }

/* ══ Barra de progreso, compartida por la subida y el lote ════════════════ */
.barra {
  height: 0.6rem;
  border-radius: 999px;
  background: var(--neutro-tinta);
  border: 1px solid var(--borde);
  overflow: hidden;
}
.barra .relleno {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--gradiente-marca);
  transition: width 0.3s ease;
}
/* El ancho del lote viene del SERVIDOR, sin JavaScript ni style= en línea:
   un atributo de datos y una regla por decena. La CSP no admite style=. */
.barra .relleno[data-ancho] { width: 0%; }
.barra .relleno[data-ancho^="1"] { width: 10%; }
.barra .relleno[data-ancho^="2"] { width: 20%; }
.barra .relleno[data-ancho^="3"] { width: 30%; }
.barra .relleno[data-ancho^="4"] { width: 40%; }
.barra .relleno[data-ancho^="5"] { width: 50%; }
.barra .relleno[data-ancho^="6"] { width: 60%; }
.barra .relleno[data-ancho^="7"] { width: 70%; }
.barra .relleno[data-ancho^="8"] { width: 80%; }
.barra .relleno[data-ancho^="9"] { width: 90%; }
.barra .relleno[data-ancho="100"] { width: 100%; }
.barra .relleno[data-ancho="1"],
.barra .relleno[data-ancho="2"],
.barra .relleno[data-ancho="3"],
.barra .relleno[data-ancho="4"],
.barra .relleno[data-ancho="5"],
.barra .relleno[data-ancho="6"],
.barra .relleno[data-ancho="7"],
.barra .relleno[data-ancho="8"],
.barra .relleno[data-ancho="9"] { width: 5%; }

.progreso-lote {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--marca-clara);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  display: grid;
  gap: 0.75rem;
}
.progreso-lote .cabecera { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.estado-progreso { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 650; }
.detalle-progreso { font-size: 0.82rem; color: var(--tinta-suave); }
.latido {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--marca-clara);
  animation: latir 1.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .latido { animation: none; } }

/* ══ Avisos (toast) ═══════════════════════════════════════════════════════
   Un solo lugar para decir que algo salió bien o mal, en todas las pantallas.
   No se esconden solos: un aviso que desaparece a los tres segundos es un
   aviso que nadie leyó. Se cierran con la cruz —sin JavaScript: una casilla
   oculta y :has()— o al navegar. */
.avisos {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: grid;
  gap: 0.6rem;
  max-width: min(26rem, calc(100vw - 2.5rem));
}
.toast {
  --tono: var(--neutro);
  --tono-tinta: var(--neutro-tinta);
  --grad: var(--grad-neutro);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.7rem;
  padding: 0.85rem 0.6rem 0.85rem 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--tono);
  border-left: 4px solid var(--tono);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  font-size: 0.88rem;
  color: var(--tinta);
}
.toast.exito { --tono: var(--exito);   --tono-tinta: var(--exito-tinta);   --grad: var(--grad-exito); }
.toast.error { --tono: var(--peligro); --tono-tinta: var(--peligro-tinta); --grad: var(--grad-peligro); }
.toast.info  { --tono: var(--azul);    --tono-tinta: var(--azul-tinta);    --grad: var(--grad-azul); }
.toast .cerrar-aviso { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.toast:has(.cerrar-aviso:checked) { display: none; }
.toast .icono-toast {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: var(--sobre-tono);
  font-weight: 800;
  font-size: 0.9rem;
}
.toast .icono-toast svg { width: 0.95rem; height: 0.95rem; }
.toast .cuerpo-toast { display: grid; gap: 0.1rem; line-height: 1.4; }
.toast .cuerpo-toast strong { color: var(--tono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.toast .cerrar {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tinta-suave);
  cursor: pointer;
  font-size: 1.1rem;
}
.toast .cerrar:hover { background: var(--neutro-tinta); color: var(--tinta); }

/* ══ Histórico: filtros ═══════════════════════════════════════════════════
   GET con los filtros en la URL. Grilla y no flex: con flex los campos tienen
   anchos distintos y al envolver quedan escalonados. */
.filtros {
  margin-top: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  padding: 1.15rem 1.25rem;
}
.filtros .campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.9rem 1rem;
  align-items: end;
}
.filtros .rango { grid-column: span 2; display: grid; gap: 0.3rem; }
.filtros .rango .par { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.4rem; }
.filtros .rango .hasta { font-size: 0.8rem; color: var(--tinta-suave); }
.campo { display: grid; gap: 0.3rem; min-width: 0; }
.campo label,
.filtros .rango > .titulo-campo,
.tema .titulo-campo {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
  font-weight: 650;
}
.campo input,
.campo select,
.rango input {
  font: inherit;
  font-size: 0.88rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-alta);
  color: var(--tinta);
}
.campo input:focus-visible,
.campo select:focus-visible,
.rango input:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 1px; }
.campo.numerico input { font-variant-numeric: tabular-nums; }
.filtros .acciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--borde-sutil);
}
.filtros .boton svg { width: 1rem; height: 1rem; }

.filtros-activos {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.filtros-activos .rotulo { font-size: 0.76rem; color: var(--tinta-suave); }
/* Cada filtro activo se quita desde su propia ficha: con cinco filtros,
   "limpiar todo" para cambiar una fecha es rearmar la búsqueda entera. */
.filtro-activo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.4rem 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 550;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  color: var(--tinta-media);
}
.filtro-activo .quitar {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  color: var(--tinta-suave);
  text-decoration: none;
}
.filtro-activo .quitar svg { width: 0.8rem; height: 0.8rem; }
.filtro-activo .quitar:hover { background: var(--peligro); color: var(--sobre-tono); }

/* ══ Estado del comprobante, cuando no es evidente ════════════════════════ */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 1px;
}
.estado::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.estado.listo { color: var(--exito); }
.estado.aprobado { color: var(--marca-clara); }
.estado.generado,
.estado.descartado { color: var(--tinta-suave); }
.estado.en_proceso { color: var(--atencion); }
.sin-accion { color: var(--tinta-suave); cursor: help; }

/* ══ Paginado ═════════════════════════════════════════════════════════════ */
.paginado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--tinta-media);
}
.paginado .paginas { display: flex; gap: 0.4rem; }
.paginado .boton.discreto svg { width: 1rem; height: 1rem; }
.paginado .boton.discreto[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ══ Lista de lotes ═══════════════════════════════════════════════════════ */
.tabla-lotes .cero { color: var(--tinta-suave); }
.tabla-lotes .conteo-listo { color: var(--exito); font-weight: 650; }
.tabla-lotes .conteo-marcado { color: var(--atencion); font-weight: 650; }
.tabla-lotes .conteo-sin-leer { color: var(--peligro); font-weight: 650; }

/* ── E3-13 · el reparto por centro de costo ─────────────────────────────── */
.acciones-pagina { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.reparto {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}
.reparto.marcada { border-color: var(--peligro); }
.reparto-cabecera { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.reparto-cabecera .identificacion { display: block; font-weight: 650; }
.reparto-cabecera .proveedor { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.25rem; }
.cifras { display: flex; gap: 1.5rem; margin: 0; }
.cifras div { display: flex; flex-direction: column; align-items: flex-end; }
.cifras dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.cifras dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.reparto .orden, .reparto .clasificacion { display: flex; align-items: center; gap: 0.45rem; margin: 0.8rem 0 0; font-size: 0.92rem; }
.reparto .orden svg { width: 1rem; height: 1rem; flex: none; }
.reparto .orden.estado-conciliada { color: var(--exito); }
.reparto .orden.estado-diferencia, .reparto .orden.estado-ambigua { color: var(--peligro); }
.reparto .orden.estado-sugerida { color: var(--atencion); }
.reparto .clasificacion { color: var(--tinta-media); }
.reparto-tabla { margin-top: 0.8rem; }
.reparto-tabla .hueco { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--peligro); font-weight: 600; }
.reparto-tabla .hueco svg, .reparto-tabla .cierra svg { width: 0.95rem; height: 0.95rem; }
.reparto-tabla .cierra { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--exito); font-weight: 600; }
.reparto-tabla tr.con-hueco td { background: var(--superficie-alta); }
.reparto-tabla tr.suma td { border-top: 2px solid var(--borde-fuerte); font-weight: 650; }
.motivos-lista { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.3rem; }

/* ── El detalle de un comprobante o de un documento (E4-01) ──────────────
   Original a la izquierda, datos a la derecha. El visor es una columna de
   imágenes que se queda fija mientras la ficha se desplaza: el operador
   compara contra el papel sin perderlo de vista. Sin JavaScript. */
.detalle {
  display: grid;
  grid-template-columns: minmax(300px, 44%) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1080px) {
  .detalle { grid-template-columns: 1fr; }
  .detalle .visor { position: static; max-height: none; }
}

.visor {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
  padding: 0.9rem;
}
.visor-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--borde-sutil);
}
.visor-cabecera .archivo { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--tinta-media); font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.visor-cabecera .archivo svg { width: 1rem; height: 1rem; flex: none; }
.visor-vacio { margin: 0.5rem 0; }
.paginas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.paginas li { display: grid; gap: 0.35rem; }
.paginas img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--sombra-1);
}
.paginas .numero-pagina { font-size: 0.78rem; color: var(--tinta-suave); text-align: center; }

.ficha { display: grid; gap: 1.25rem; min-width: 0; }
.ficha-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ficha-cabecera .identificacion { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ficha-cabecera .archivo-titulo { overflow-wrap: anywhere; }
.ficha-cabecera .proveedor { display: flex; flex-direction: column; margin-top: 0.35rem; }
.ficha-cabecera .subtitulo { display: block; margin-top: 0.35rem; }

.seccion {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
  padding: 1rem 1.15rem;
}
.seccion h2 { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 660; letter-spacing: -0.01em; color: var(--tinta); }
.seccion .explicacion { margin-top: 0; }

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.6rem 1.25rem;
  margin: 0.75rem 0 0;
}
.campos > div { display: grid; gap: 0.15rem; }
.campos dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); }
.campos dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }

.lista-motivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.lista-motivos .motivo { display: flex; align-items: baseline; gap: 0.5rem; }

.origen-encabezado { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 500; }
.origen-encabezado svg { width: 1.1rem; height: 1.1rem; flex: none; }
.origen-encabezado.respaldado { color: var(--exito); }
.origen-encabezado.sin-respaldo { color: var(--peligro); }

.importes-tabla .fila-suma td, .reparto-tabla .fila-suma td { font-weight: 650; border-top: 2px solid var(--borde-fuerte); }
.reparto-tabla .cuadra { color: var(--exito); font-weight: 600; }
.reparto-tabla .no-cuadra { color: var(--peligro); font-weight: 600; }
.reparto-tabla .cuadra svg, .reparto-tabla .no-cuadra svg { width: 0.95rem; height: 0.95rem; vertical-align: -0.15em; }

.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.historial li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.historial .cuando { font-variant-numeric: tabular-nums; color: var(--tinta-suave); font-size: 0.85rem; }
.historial .que { display: grid; gap: 0.1rem; min-width: 0; }
.historial .titulo-evento { font-weight: 600; }
.historial .detalle-evento { color: var(--tinta-media); overflow-wrap: anywhere; }
.historial .quien { color: var(--tinta-suave); font-size: 0.82rem; }
@media (max-width: 560px) { .historial li { grid-template-columns: 1fr; } }

.aviso-documento { border-left: 4px solid var(--atencion); }
.aviso-documento.duplicado { border-left-color: var(--azul); }
.aviso-documento.sin-identidad { border-left-color: var(--peligro); }
.aviso-documento.rechazado { border-left-color: var(--peligro); }
.aviso-documento p { margin: 0 0 0.6rem; }
.aviso-documento .proveedor { display: flex; flex-direction: column; }

.lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.lista-enlaces li { display: flex; align-items: center; gap: 0.6rem; }

.acciones-fila { display: inline-flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
/* El botón contorneado: borde visible, el mismo alto que el primario y estados
   de hover y foco. Para las acciones secundarias que tienen que leerse como botón. */
.accion.contorno {
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--borde-fuerte);
  color: var(--tinta);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  list-style: none;
}
.accion.contorno::-webkit-details-marker { display: none; }
.accion.contorno:hover { background: var(--superficie-alta); color: var(--tinta); border-color: var(--marca); }
.accion.contorno:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.accion.contorno[hidden] { display: none; }
.accion.discreta { background: transparent; box-shadow: none; border-color: transparent; color: var(--tinta-media); }
.accion.discreta:hover { color: var(--tinta); }
.seccion .orden { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-weight: 500; }
.seccion .orden svg { width: 1.1rem; height: 1.1rem; flex: none; }
.seccion .orden.estado-conciliada { color: var(--exito); }
.seccion .orden.estado-sugerida, .seccion .orden.estado-diferencia, .seccion .orden.estado-ambigua { color: var(--atencion); }
.seccion .orden.orden-opcional, .seccion .orden.estado-sin_orden { color: var(--tinta-media); }
.seccion .clasificacion { margin: 0; color: var(--tinta-media); }
.importes-tabla td.numerica, .reparto-tabla td.numerica { white-space: nowrap; }
/* A 1280 el importe se cortaba: la columna no baja de lo que ocupa un monto. */
.reparto-tabla td.numerica, .reparto-tabla th.derecha { min-width: 9.5rem; }

/* ── Los formularios de decisión (E4) ─────────────────────────────────────
   Un <form> a la api, sin JavaScript. Los campos se ven como la ficha: la
   etiqueta arriba en versalitas, el valor abajo. */
.formulario-decision, .formulario-oferta { display: grid; gap: 0.75rem; }
.formulario-oferta { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--borde); }
.campos-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem 1.25rem;
}
.campo { display: grid; gap: 0.3rem; }
.campo .etiqueta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); }
.campo .valor { padding: 0.45rem 0; }
.campo select, .campo input {
  font: inherit;
  color: var(--tinta);
  background: var(--superficie-alta);
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  min-width: 0;
}
.campo select:focus, .campo input:focus { outline: 2px solid var(--marca-clara); outline-offset: 1px; }
.formulario-decision > .accion, .formulario-oferta > .accion { justify-self: start; }
.formulario-oferta .confirmacion { display: flex; gap: 0.5rem; align-items: flex-start; }
.formulario-oferta .confirmacion input { margin-top: 0.2rem; }
button.accion { cursor: pointer; font: inherit; }

/* ── El reparto a mano y los ítems de la orden (E4, corte 3) ─────────────── */
.reparto-editable select, .reparto-editable input, .oferta-en-celda select, .oferta-en-celda input {
  font: inherit;
  font-size: 0.9rem;
  color: var(--tinta);
  background: var(--superficie-alta);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
  max-width: 100%;
}
.reparto-editable input[type="text"] { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; }
/* Los ítems de la orden: los que hay que decidir (lista) y los que cuelgan de
   cada fila del reparto («De qué ítems sale»). */
.items-a-decidir { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.item-a-decidir { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: 0.75rem 0.9rem; display: grid; gap: 0.6rem; }
.item-cabecera { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; color: var(--tinta-media); font-size: 0.88rem; }
.item-cabecera .clave, .lista-de-items .clave { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.item-a-decidir .problema { display: grid; gap: 0.5rem; }
.item-a-decidir .hueco { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--peligro); font-weight: 600; }
.item-a-decidir .hueco svg { width: 0.95rem; height: 0.95rem; flex: none; }
.reparto-tabla tr.de-que-items td { padding-top: 0; border-top: 0; }
.items-de-la-fila > summary { display: inline-flex; cursor: pointer; }
.lista-de-items { list-style: none; margin: 0.6rem 0 0.2rem; padding: 0; display: grid; gap: 0.4rem; }
.lista-de-items li { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; align-items: baseline; font-size: 0.88rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--superficie-alta); }
.lista-de-items .observaciones { flex-basis: 100%; }
.lista-de-items .descripcion { color: var(--tinta-media); }
.lista-de-items .observaciones { color: var(--tinta-media); overflow-wrap: anywhere; min-width: 0; }
.lista-de-items .derecha { margin-left: auto; }
.oferta-en-celda { display: grid; gap: 0.4rem; min-width: 11rem; }
.oferta-en-celda label { display: grid; gap: 0.2rem; }
.oferta-en-celda .etiqueta { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); }
.oferta-en-celda .boton { justify-self: start; }
/* Una sección es ítem de la grilla de la ficha: sin esto su ancho mínimo es
   el de la tabla que contiene y la columna entera se pasa de la ventana. */
.ficha > .seccion, .ficha > .ficha-cabecera { min-width: 0; }

/* ── La orden a mano (E4, corte 4) ─────────────────────────────────────── */
.lista-ordenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.lista-ordenes li { border: 1px solid var(--borde); border-radius: 8px; padding: 0.5rem 0.7rem; background: var(--superficie-alta); }
.lista-ordenes li.vinculada { border-color: var(--exito); }
.lista-ordenes li.candidata { border-color: var(--atencion); }
.lista-ordenes label { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; align-items: baseline; cursor: pointer; }
.lista-ordenes input[type="checkbox"] { grid-row: span 2; align-self: center; }
.lista-ordenes .numero-orden { font-weight: 600; }
.lista-ordenes .detalle-orden { grid-column: 2; color: var(--tinta-media); font-size: 0.86rem; }

/* 05/10/2026: la orden la transcribió un modelo de un escaneo (leida_por L3).
   Una pastilla como las demás, en violeta: el color de lo que leyó la IA. */
.insignia-ia {
  display: inline-flex; align-items: center; margin-left: 0.45rem; vertical-align: middle;
  padding: 0.05rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  color: var(--violeta); background: var(--violeta-tinta);
}
/* «¿Quisiste decir…?»: el texto y su enlace en una línea. */
.aviso.sugerencia-cuit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0; margin-bottom: 0.75rem; }

/* ── Importes e identidad a mano (E4, corte 5) ─────────────────────────── */
.importes-editable input[type="text"] { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; }
.veredicto { margin: 0; padding: 0.5rem 0.7rem; border-radius: 8px; font-weight: 500; }
.veredicto.pendiente { background: var(--neutro-tinta); color: var(--neutro); }
.veredicto.cierra { background: var(--exito-tinta); color: var(--exito); }
.veredicto.no-cierra { background: var(--peligro-tinta); color: var(--peligro); }

/* ══ La revisión guiada (C) ══════════════════════════════════════════════
   Arriba, en la cabecera, el comprobante y los pasos en horizontal. Abajo,
   dos columnas: el paso elegido, con su propio ancho, y el original. Ninguna
   tapa a la otra: las dos arrancan a la misma altura y, si no hay lugar, el
   original pasa debajo. El original se puede esconder (la columna del paso
   toma todo el ancho) o ampliar a pantalla completa. Sin JavaScript, las dos
   columnas se ven siempre. */
.revision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 36%);
  gap: 1.25rem;
  align-items: start;
  transition: grid-template-columns 0.3s var(--curva-salida);
}
.revision[data-visor-oculto] { grid-template-columns: minmax(0, 1fr); }

/* 07/10/2026: el encabezado como tarjeta con campos rotulados. */
.revision-titulo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.9rem 1.5rem;
  align-items: start;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.revision-cabecera > .volver { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
.revision-cabecera > .revision-titulo { grid-column: 1 / -1; grid-row: 2; }
.revision-cabecera > .revision-acciones { grid-column: 2; grid-row: 1; }
.revision-cabecera > .pasos { grid-row: 3; }
.revision-titulo .campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; min-width: 0; align-content: start; }
.revision-titulo .rotulo { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.revision-titulo .valor { font-family: inherit; font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; }
.revision-titulo .detalle { font-size: 0.82rem; color: var(--tinta-media); font-variant-numeric: tabular-nums; }
.revision-titulo .numero { font-family: var(--fuente-numeros); }
.revision-titulo .total { font-family: var(--fuente-numeros); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.revision-titulo .razon-social { font-weight: 600; }
.revision-titulo .cuit { font-family: var(--fuente-numeros); }
.chip-estado { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; font-size: 0.95rem; font-weight: 700; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--superficie-alta); color: var(--tinta-media); }
.chip-estado::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: currentColor; }
.chip-estado.verificado { color: var(--exito); background: var(--exito-tinta); }
.chip-estado.supuestos { color: var(--atencion); background: var(--atencion-tinta); }
.chip-estado.revision { color: var(--peligro); background: var(--peligro-tinta); }
.chip-estado.aprobado { color: var(--marca-clara); }
.chip-estado.generado,
.chip-estado.descartado { color: var(--tinta-suave); }
.chip-estado.en_proceso { color: var(--atencion); }

.pasos {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
  padding: 0.55rem 0.75rem 0.7rem;
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  container: pasos / inline-size;
}
/* El relleno deja lugar al actual (que crece con transform) y a la sombra:
   sin él, el borde de la tarjeta los recortaría. */
.pasos-lista { list-style: none; margin: 0; padding: 0.3rem 0.3rem 0.4rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.6rem; }
.pasos-lista > li { display: grid; min-width: 0; }
.paso {
  --tono-paso: var(--exito);
  --tinta-paso: var(--superficie-alta);
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-height: 3.1rem;
  padding: 0.5rem 0.55rem;
  border: 2px solid transparent;
  border-bottom: 3px solid var(--tono-paso);
  border-radius: var(--radio);
  background: var(--tinta-paso);
  color: var(--tinta);
  text-decoration: none;
  /* Sólo color y sombra, nunca tamaño ni posición: al cambiar de paso la barra
     se reemplaza entera y una tarjeta que salta hacía parpadear la pantalla
     (07/10/2026). */
  transition: box-shadow 0.18s var(--curva-salida), background-color 0.18s ease, border-color 0.18s ease;
}
.paso.tono-falta { --tono-paso: var(--peligro); --tinta-paso: var(--peligro-tinta); }
.paso.tono-aviso { --tono-paso: var(--atencion); --tinta-paso: var(--atencion-tinta); }
.paso.tono-opcional { --tono-paso: var(--neutro); --tinta-paso: var(--neutro-tinta); }
.paso:hover {
  box-shadow: var(--sombra-2);
  background: color-mix(in srgb, var(--tinta-paso) 88%, var(--tono-paso));
}
.paso:focus-visible { outline: 3px solid var(--tono-paso); outline-offset: 2px; }
/* El actual va relleno con el color de su estado: degradé de arriba (más vivo)
   a abajo (más profundo; así el texto claro siempre se lee), y un brillo fino adentro. El texto y el ícono, claros sobre él. */
.paso[aria-current="step"] {
  border-color: var(--tono-paso);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono-paso) 92%, var(--hondo-paso)) 0%, color-mix(in srgb, var(--tono-paso) 74%, var(--hondo-paso)) 100%);
  color: var(--sobre-tono);
  box-shadow: var(--sombra-2), inset 0 1px 0 color-mix(in srgb, var(--sobre-tono) 45%, transparent);
}
.paso[aria-current="step"]:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--tono-paso) 86%, var(--hondo-paso)) 0%, color-mix(in srgb, var(--tono-paso) 68%, var(--hondo-paso)) 100%); }
.paso[aria-current="step"] .paso-signo { color: var(--tono-paso); background: var(--sobre-tono); border-color: var(--sobre-tono); }
.paso[aria-current="step"].tono-falta .paso-signo { background: var(--sobre-tono); color: var(--tono-paso); }
.paso-signo {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tono-paso);
  border: 2px solid var(--tono-paso);
  background: var(--superficie);
}
.paso.tono-ok .paso-signo { background: var(--exito-tinta); }
.paso.tono-opcional .paso-signo { background: var(--neutro-tinta); }
.paso.tono-falta .paso-signo { background: var(--peligro); color: var(--sobre-tono); }
.paso-texto { display: grid; gap: 0.05rem; min-width: 0; }
.paso-nombre { font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.paso-rotulo { font-size: 0.8rem; font-weight: 600; color: var(--tinta-media); }
.paso.tono-falta .paso-rotulo { color: color-mix(in srgb, var(--peligro) 78%, var(--tinta)); }
.paso.tono-aviso .paso-rotulo { color: color-mix(in srgb, var(--atencion) 72%, var(--tinta)); }
.paso.tono-opcional .paso-rotulo { color: color-mix(in srgb, var(--neutro) 85%, var(--tinta)); }
.paso[aria-current="step"] .paso-rotulo { color: var(--sobre-tono); }
@media (prefers-reduced-motion: reduce) {
  .paso, .paso:hover, .paso[aria-current="step"], .paso[aria-current="step"]:hover { transform: none; }
  .paso { transition: background-color 0.01ms, border-color 0.01ms; }
}
/* Angosto, el ancho que cuenta es el de la tarjeta de pasos y no el de la
   ventana (la barra lateral le quita lugar). Se parte en filas y no en una
   tira con desplazamiento: así todos los estados se ven a la vez, que es
   para lo que está la barra. */
@container pasos (max-width: 56rem) {
  .pasos-lista { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
}

.descartar > summary { cursor: pointer; list-style: none; }
.descartar > summary::-webkit-details-marker { display: none; }
.descartar > summary.accion:hover { color: var(--peligro); border-color: var(--peligro); }
.descartar[open] { padding: 0.75rem; border: 1px solid var(--peligro); border-radius: var(--radio); background: var(--peligro-tinta); }
.descartar[open] > summary.accion { padding: 0 0 0.4rem; min-height: 0; border: 0; background: none; color: var(--peligro); font-weight: 600; }
.descartar .explicacion { font-size: 0.8rem; margin: 0 0 0.6rem; }

.revision-paso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; animation: entrar-desde-abajo 0.25s var(--curva-salida) both; }
.revision-paso-cabecera { display: grid; gap: 0.15rem; }
.revision-paso-cabecera h2 { margin: 0; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.02em; }
.revision-paso-estado { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--exito); }
.revision-paso.tono-falta .revision-paso-estado { color: var(--peligro); }
.revision-paso.tono-aviso .revision-paso-estado { color: var(--atencion); }
.revision-paso.tono-opcional .revision-paso-estado { color: var(--neutro); }
.revision-paso.tono-info .revision-paso-estado { color: var(--tinta-media); }

/* Las tablas anchas (reparto, ítems de la orden) no se aprietan ni empujan
   al visor: tienen un ancho mínimo propio y su envoltura desplaza en
   horizontal. La de importes es angosta y no lo necesita. */
.revision-paso .tabla-envoltura table { min-width: 32rem; }
.revision-paso .tabla-envoltura table.importes-tabla { min-width: 0; }
.revision-paso .reparto-editable { table-layout: fixed; min-width: 36rem; }
/* Las cuatro con ancho explícito: la regla general de .tabla deja la primera
   columna al 1% (es la de señales en el lote), y con table-layout: fixed eso
   aplastaba al centro de costo hasta dejar sólo la flecha del select. */
.revision-paso .reparto-editable th:nth-child(1) { width: 32%; white-space: normal; }
.revision-paso .reparto-editable th:nth-child(2) { width: 32%; }
.revision-paso .reparto-editable th:nth-child(3) { width: 20%; }
.revision-paso .reparto-editable th:nth-child(4) { width: 16%; }
.revision-paso .reparto-editable td, .revision-paso .importes-editable td { padding-inline: 0.5rem; vertical-align: middle; }
.revision-paso .reparto-editable select,
.revision-paso .reparto-editable input { width: 100%; min-width: 0; box-sizing: border-box; }
.revision-paso .importes-tabla th:first-child { width: 46%; white-space: normal; }
.revision-paso .importes-editable td:first-child input[type="text"] { width: 100%; text-align: left; box-sizing: border-box; }
.revision-paso .seccion h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.revision-siguiente { display: flex; justify-content: flex-end; }
.revision-siguiente .boton { min-height: 2.75rem; padding-inline: 1.2rem; }
.revision-siguiente .boton svg { width: 1rem; height: 1rem; transition: transform 0.2s var(--curva-salida); }
.revision-siguiente .boton:hover svg { transform: translateX(3px); }

/* El visor oculto: la columna desaparece. «Mostrar documento» vive en la
   barra de acciones de la pantalla, no flota sobre nada. */
[data-visor-oculto] > .visor { display: none; }

/* La cabecera del visor en dos renglones: el archivo arriba, las acciones
   abajo. En una columna angosta, uno solo las apretaba contra el nombre. */
.revision .visor-cabecera { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.visor-botones { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-start; }
.pagina-enlace { display: block; border-radius: 6px; cursor: zoom-in; }
.pagina-enlace:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

/* La pantalla completa: un <dialog> con las páginas a tamaño de lectura y
   cinco niveles de zoom, uno por regla. */
.visor-ampliado {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(12, 18, 26, 0.94);
  color: #fff;
}
.visor-ampliado[open] { display: grid; grid-template-rows: auto 1fr; animation: aparecer 0.2s ease both; }
.visor-ampliado::backdrop { background: rgba(12, 18, 26, 0.6); }
.visor-ampliado-barra { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.visor-ampliado-barra .archivo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; opacity: 0.85; }
.visor-ampliado-barra .accion { min-width: 2.5rem; min-height: 2.5rem; justify-content: center; }
.visor-zoom { min-width: 5rem; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
/* La fila ocupa todo el ancho y la imagen se centra en ella. Con
   justify-items: center la fila tomaba el ancho NATURAL de la imagen y la
   imagen se achicaba desde el borde izquierdo: quedaba corrida. Con zoom, la
   imagen más ancha que la fila desborda hacia la derecha y se desplaza. */
.paginas-ampliadas { list-style: none; margin: 0; padding: 1.5rem; overflow: auto; display: grid; gap: 1.5rem; }
.paginas-ampliadas li { width: 100%; min-width: 0; }
.paginas-ampliadas img { margin-inline: auto; display: block; height: auto; background: #fff; border-radius: 3px; box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.6); transition: width 0.2s var(--curva-salida); }
.paginas-ampliadas[data-zoom="0"] img { width: min(100%, 60rem); }
.paginas-ampliadas[data-zoom="1"] img { width: 75rem; }
.paginas-ampliadas[data-zoom="2"] img { width: 90rem; }
.paginas-ampliadas[data-zoom="3"] img { width: 120rem; }
.paginas-ampliadas[data-zoom="4"] img { width: 180rem; }

@media (max-width: 1100px) {
  .revision, .revision[data-visor-oculto] { grid-template-columns: minmax(0, 1fr); }
  .revision .visor { position: static; max-height: none; }
}

/* ══ El semáforo del lote (04/10/2026) ══════════════════════════════════
   Verde, ámbar y rojo dicen cuánto decidió el sistema solo. Una orden de
   compra que llegó sola no es un error: va en azul, neutra. */
.grupo.supuestos .grupo-titulo h2 { color: var(--atencion); }
.grupo.ordenes .grupo-titulo h2 { color: var(--azul); }
.tabla tr.orden-registrada td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
.tabla tr.orden-registrada:hover { background: var(--azul-tinta); }
.semaforo { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 650; padding: 0.2rem 0.6rem; border-radius: 999px; }
.semaforo::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.semaforo.verificado { color: var(--exito); background: var(--exito-tinta); }
.semaforo.supuestos { color: var(--atencion); background: var(--atencion-tinta); }
.semaforo.revision { color: var(--peligro); background: var(--peligro-tinta); }

/* ══ Movimiento ═══════════════════════════════════════════════════════════
   Todo el movimiento de la aplicación vive acá, en un solo lugar, para que
   se pueda leer y apagar entero. Tres reglas:

   - Anima lo que CAMBIÓ por algo que hizo la persona: un archivo que entra,
     un botón que se aprieta, un aviso que aparece. Nada se mueve solo para
     llamar la atención, salvo lo que está trabajando (la barra, el latido).
   - Rápido: 120 a 350 ms. Una animación que hace esperar es un defecto.
   - Con «reducir movimiento» se apaga TODO (la regla general del final), y
     la pantalla queda igual de usable: ningún estado depende de animarse. */
:root {
  --curva-salida: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes entrar-desde-abajo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes entrar-desde-la-derecha { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes salir { to { opacity: 0; transform: translateX(-12px); } }
@keyframes negar { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes girar { to { transform: rotate(1turn); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes anillo { from { box-shadow: 0 0 0 0 rgba(47, 156, 120, 0.45); } to { box-shadow: 0 0 0 14px rgba(47, 156, 120, 0); } }
@keyframes recibir { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes barrido { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes rayas { from { background-position: 0 0; } to { background-position: 2rem 0; } }

/* Botones: se levantan al pasar, se hunden al apretar, y avisan que están
   trabajando con un giro en lugar del texto que se queda quieto. */
.boton,
.accion {
  transition:
    transform 0.15s var(--curva-salida),
    box-shadow 0.2s var(--curva-salida),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}
.boton:not(:disabled):not(.discreto):hover { transform: translateY(-1px); box-shadow: var(--sombra-marca); }
.boton:not(:disabled):active,
.accion:active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 0.06s; }
.boton.cargando { position: relative; pointer-events: none; }
.boton.cargando::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: girar 0.7s linear infinite;
}

/* La zona de carga: responde al arrastrar, festeja lo que recibe. */
.zona { transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s var(--curva-salida), box-shadow 0.25s ease; }
.zona .icono { transition: transform 0.3s var(--curva-rebote); }
.carga.con-js .zona:hover { border-color: var(--marca-clara); }
.carga.con-js .zona:hover .icono { transform: translateY(-3px); }
.zona.arrastrando { transform: scale(1.01); }
.zona.arrastrando .icono { animation: flotar 0.9s ease-in-out infinite, anillo 1.2s ease-out infinite; }
.zona.recibio { animation: recibir 0.35s var(--curva-salida); }
.carga.subiendo .zona { opacity: 0.6; pointer-events: none; }

/* Cada archivo elegido entra a la lista; el rechazado, además, niega. Sólo
   los NUEVOS: carga.js marca cuáles, para que agregar uno no haga bailar a
   los que ya estaban. */
.elegido.nuevo { animation: entrar-desde-abajo 0.28s var(--curva-salida) both; }
.elegido.rechazado.nuevo { animation: entrar-desde-abajo 0.28s var(--curva-salida) both, negar 0.4s ease 0.28s; }
.elegido.saliendo { animation: salir 0.2s ease forwards; pointer-events: none; }
.elegido .quitar { transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s var(--curva-rebote); }
.elegido .quitar:hover { transform: rotate(90deg); }

/* Lo que está trabajando se nota trabajando: rayas que avanzan en la barra
   y un brillo que recorre las filas que todavía se procesan. */
.carga.subiendo .barra .relleno,
.progreso-lote .barra .relleno {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.22) 75%, transparent 75%),
    var(--gradiente-marca);
  background-size: 2rem 2rem, 100% 100%;
  animation: rayas 0.8s linear infinite;
}
/* Lo que se está procesando lleva un spinner chico al lado de su título, y
   la fila queda quieta: un brillo recorriendo cada celda hacía ver la tabla
   rota justo cuando más filas había en proceso. */
.tabla tr.procesando .identificacion { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinta-media); }
.tabla tr.procesando .identificacion::before,
.estado.en_proceso::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  flex: none;
  border-radius: 50%;
  background: transparent;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: girar 0.8s linear infinite;
}

/* Lo que aparece por una acción: el aviso entra desde el costado, lo que se
   abre en un <details> se asienta en lugar de saltar. */
.toast { animation: entrar-desde-la-derecha 0.35s var(--curva-salida) both; }
details[open] > :not(summary) { animation: entrar-desde-abajo 0.25s var(--curva-salida) both; }
.tabla tbody tr { transition: background-color 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ─── El lote por compra y mientras se procesa (04/10/2026) ─────────────── */

/* La compra: las órdenes con las que cruzó la factura, debajo de su archivo. */
.tabla .compra { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.tabla .orden-de-la-compra {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  color: var(--azul); background: var(--azul-tinta); text-decoration: none;
}
.tabla a.orden-de-la-compra:hover { text-decoration: underline; }
.tabla .orden-de-la-compra svg { width: 0.85rem; height: 0.85rem; }
/* §5.1sexies: el remito es respaldo de la compra, no una fuente de datos. */
.tabla .remito-de-la-compra { color: var(--tinta-media); background: var(--neutro-tinta); }

/* Un duplicado no pide nada: gris, sin la franja roja de lo marcado. */
.tabla tr.duplicado td:first-child { box-shadow: inset 3px 0 0 var(--neutro); }
.tabla tr.duplicado { color: var(--tinta-media); }
.grupo.duplicados .grupo-titulo h2 { color: var(--tinta-media); }

.conteo-subidos { color: var(--tinta-suave); }

/* Mientras se procesa: sólo en qué etapa está cada archivo. */
.lista-en-proceso, .lista-repetidos, .lotes-en-proceso {
  list-style: none; margin: 1rem 0 0; padding: 0;
  border: 1px solid var(--borde-sutil); border-radius: var(--radio);
  background: var(--superficie);
}
.lista-en-proceso li, .lista-repetidos li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem; border-top: 1px solid var(--borde-sutil);
  font-size: 0.88rem; min-width: 0;
}
.lista-en-proceso li:first-child, .lista-repetidos li:first-child, .lotes-en-proceso li:first-child { border-top: 0; }
.lista-en-proceso .archivo, .lista-repetidos .archivo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-en-proceso svg, .lista-repetidos svg { width: 1rem; height: 1rem; color: var(--tinta-suave); flex: none; }
.lista-en-proceso .etapa { font-size: 0.78rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; }
.lista-en-proceso li.clasificado .etapa { color: var(--exito); }
.lista-en-proceso li.en-curso .etapa { color: var(--marca); display: inline-flex; align-items: center; gap: 0.4rem; }
.lista-en-proceso li.en-curso .etapa::before {
  content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: girar 0.7s linear infinite;
}
.lista-repetidos .igual-a { font-size: 0.8rem; color: var(--tinta-suave); white-space: nowrap; }

/* /lotes: los que se están clasificando, arriba y con su avance. */
.lotes-en-proceso li { border-top: 1px solid var(--borde-sutil); }
.lotes-en-proceso a {
  display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem;
  padding: 0.75rem 0.9rem; color: inherit; text-decoration: none;
}
.lotes-en-proceso a:hover { background: var(--superficie-alta); }
.lotes-en-proceso .cuantos { font-size: 0.82rem; color: var(--tinta-suave); }
.lotes-en-proceso .barra { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .lista-repetidos li { flex-wrap: wrap; }
  .lista-repetidos .igual-a { white-space: normal; }
}

/* El visor con varios documentos: el comprobante y sus órdenes (04/10/2026). */
/* Sin scroll horizontal (06/10/2026): las pestañas son sólo el nombre; si algún día son muchas, bajan de renglón. */
.visor-pestanas { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; margin: 0.5rem 0 0.75rem; border-radius: 1.1rem; background: var(--neutro-tinta); }
.visor-pestana {
  flex: none; border: 0; border-radius: 999px; padding: 0.35rem 0.9rem;
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  color: var(--tinta-media); background: transparent;
}
.visor-pestana[aria-selected="true"] { color: var(--tinta); background: var(--superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.visor-pestana:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.visor-fuente + .visor-fuente { margin-top: 1rem; }
.visor-fuente-titulo { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 650; color: var(--tinta-media); }
/* Con el script hay pestañas: el título de cada panel sobra. */
[data-visor-pestanas-activas] .visor-fuente-titulo { display: none; }
[data-visor-pestanas-activas] .visor-fuente + .visor-fuente { margin-top: 0; }

/* B1b: elegir la versión de una orden que llegó con datos distintos. */
.versiones-de-orden { margin-bottom: 1.25rem; }
.lista-versiones { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; border: 1px solid var(--borde-sutil); border-radius: var(--radio); }
.lista-versiones li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.8rem; border-top: 1px solid var(--borde-sutil); flex-wrap: wrap; }
.lista-versiones li:first-child { border-top: 0; }
.lista-versiones label { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; flex-wrap: wrap; }
.lista-versiones .archivo { color: var(--tinta-media); overflow-wrap: anywhere; }
.lista-versiones .cuando { color: var(--tinta-suave); font-size: 0.8rem; }

/* UX1 (04/10/2026): los números en Geist Mono, como en el diseño. */
.numerica, .cuit, .tipo-comprobante, .identificacion, .visor-zoom { font-family: var(--fuente-numeros); }

/* UX1: el pie de la barra, como en el diseño. El tema a la vista, en un
   control segmentado; debajo, quién está y salir. */
.pie-sesion { display: flex; flex-direction: column; gap: 0.75rem; }
.pie-sesion .tema { margin: 0; }
.pie-sesion .opciones-tema {
  display: flex; padding: 3px; gap: 0; border-radius: 9px;
  background: var(--superficie); border: 1px solid var(--borde);
}
.pie-sesion .opciones-tema button {
  flex: 1; height: 1.75rem; padding: 0 0.35rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--tinta-media); font: inherit; font-size: 0.78rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; cursor: pointer;
}
.pie-sesion .opciones-tema button svg { width: 0.9rem; height: 0.9rem; }
.pie-sesion .opciones-tema button[aria-pressed="true"] { background: var(--exito-tinta); color: var(--tinta); font-weight: 600; }
.pie-sesion .quien {
  display: flex; align-items: center; gap: 0.6rem; min-width: 0;
  padding: 0.75rem 0.35rem 0; border-top: 1px solid var(--borde);
}
.pie-sesion .avatar {
  width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%;
  border: 2px solid var(--marca); background: transparent; color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; box-shadow: none;
}
.pie-sesion .identidad { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pie-sesion .correo { font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pie-sesion .rol { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-media); }
.pie-sesion form { margin: 0; }
.pie-sesion .salir { padding: 0.35rem; }
.pie-sesion .salir svg { width: 1rem; height: 1rem; }

/* ══ Pendientes (UX2) ═════════════════════════════════════════════════════
   Sólo rojos y ámbar, con filtros en la URL y una vista rápida a la derecha
   que se arma en el servidor. */
.pendientes-titulo { align-items: center; gap: 1rem; }
.cuenta-visible { font-family: var(--fuente-numeros); font-size: 0.85rem; color: var(--tinta-media); }
.deshacer-aprobacion { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; margin-bottom: 1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--exito-tinta); }
.filtros-pendientes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0; }
.grupo-de-filtros { display: inline-flex; gap: 0.25rem; padding: 0.2rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.ficha-filtro { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 8px; color: var(--tinta-media); text-decoration: none; font-size: 0.85rem; }
.ficha-filtro[aria-current="true"] { background: var(--superficie-alta); color: var(--tinta); font-weight: 600; }
.ficha-filtro .numero, .opciones-motivo .numero { font-family: var(--fuente-numeros); font-size: 0.75rem; color: var(--tinta-suave); }
.ficha-filtro .punto, .motivo-rapido .punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--neutro); }
.ficha-filtro.bloqueados .punto { background: var(--peligro); }
.ficha-filtro.supuestos .punto { background: var(--atencion); }
.ficha-filtro.lote { border: 1px solid var(--marca); color: var(--tinta); }
.ficha-filtro.lote a { color: var(--tinta-media); text-decoration: none; }
.desplegable-motivo { position: relative; }
.desplegable-motivo summary { cursor: pointer; list-style: none; padding: 0.4rem 0.75rem; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); font-size: 0.85rem; }
.desplegable-motivo summary.activo { border-color: var(--marca); }
.opciones-motivo { position: absolute; z-index: 20; top: calc(100% + 0.3rem); left: 0; min-width: 15rem; display: grid; padding: 0.3rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-2); }
.opciones-motivo a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.6rem; border-radius: 6px; color: var(--tinta); text-decoration: none; font-size: 0.85rem; }
.opciones-motivo a[aria-current="true"], .opciones-motivo a:hover { background: var(--superficie-alta); }

.lista-pendientes { display: grid; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); overflow: hidden; }
.cabecera-pendientes, .fila-enlace { display: grid; grid-template-columns: minmax(14rem, 1.4fr) 7rem minmax(14rem, 2fr) 9rem; gap: 1rem; align-items: center; }
.cabecera-pendientes { grid-template-columns: 2rem minmax(14rem, 1.4fr) 7rem minmax(14rem, 2fr) 9rem; padding: 0.6rem 1rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1px solid var(--borde); }
.fila-pendiente { display: grid; grid-template-columns: 2rem 1fr; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--borde-sutil); box-shadow: inset 3px 0 0 var(--atencion); }
.fila-pendiente.bloqueado { box-shadow: inset 3px 0 0 var(--peligro); }
.fila-pendiente[aria-current="true"] { background: var(--superficie-alta); }
.fila-enlace { padding: 0.75rem 0; color: inherit; text-decoration: none; }
.fila-enlace:hover .proveedor { color: var(--marca); }
.fila-pendiente .quien { display: grid; gap: 0.15rem; min-width: 0; }
.fila-pendiente .proveedor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-pendiente .detalle, .vista-encabezado .detalle { font-family: var(--fuente-numeros); font-size: 0.78rem; color: var(--tinta-media); }
.motivos-fila { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.motivos-fila .motivo::before { display: none; }
.motivos-fila .motivo { display: inline-flex; gap: 0.35rem; align-items: center; }
.motivos-fila .punto { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.motivos-fila .mas { font-size: 0.75rem; color: var(--tinta-suave); }
.importe-fila { display: grid; justify-items: end; }
.importe-fila .numerica { font-family: var(--fuente-numeros); }
.cotizacion { font-size: 0.72rem; color: var(--tinta-suave); }

.velo { position: fixed; inset: 0; z-index: 40; background: rgba(10, 14, 20, 0.25); }
.vista-rapida { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(36rem, 100vw); display: flex; flex-direction: column; background: var(--superficie); border-left: 1px solid var(--borde); box-shadow: var(--sombra-2); animation: vista-entra 0.22s var(--curva-salida); }
@keyframes vista-entra { from { transform: translateX(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
.vista-barra { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--borde); }
.vista-barra .rotulo, .vista-total .rotulo, .cruce-titulo { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.vista-barra .posicion { font-family: var(--fuente-numeros); font-size: 0.78rem; color: var(--tinta-media); }
.vista-navegacion { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.deshabilitada { opacity: 0.45; }
kbd { font-family: var(--fuente-numeros); font-size: 0.68rem; padding: 0 0.3rem; border: 1px solid var(--borde-fuerte); border-radius: 4px; }
.vista-cuerpo { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: 1rem; align-content: start; }
.vista-encabezado { display: flex; justify-content: space-between; gap: 1rem; }
.vista-encabezado h2 { margin: 0.3rem 0 0.15rem; font-size: 1.15rem; }
.vista-total { display: grid; justify-items: end; }
.vista-total .numerica { font-family: var(--fuente-numeros); font-size: 1.15rem; font-weight: 600; }
.vista-pestanas { display: inline-flex; gap: 0.25rem; }
.vista-pestanas button { padding: 0.35rem 0.7rem; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-media); font: inherit; font-size: 0.85rem; cursor: pointer; }
.vista-pestanas button[aria-selected="true"] { background: var(--superficie-alta); color: var(--tinta); font-weight: 600; }
.cruce { display: grid; grid-template-columns: 1fr 1.6rem 1fr; gap: 0.5rem 0.75rem; align-items: center; }
.cruce-dato { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--borde-sutil); border-radius: 8px; font-size: 0.82rem; }
.cruce-dato .etiqueta { color: var(--tinta-media); }
.cruce-marca { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: var(--sobre-tono); background: var(--exito); }
.cruce-marca.atencion { background: var(--atencion); }
.cruce-marca.error { background: var(--peligro); }
.vista-motivos h3 { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.vista-motivos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.motivo-rapido { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--borde-sutil); border-radius: 8px; font-size: 0.85rem; }
.motivo-rapido.bloquea .punto { background: var(--peligro); }
.motivo-rapido.solo-marca .punto { background: var(--atencion); }
.motivo-rapido .texto { flex: 1; }
.motivo-rapido form { margin: 0; }
.enlace-paso { background: transparent; border-color: transparent; color: var(--marca); }
.vista-pie { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--borde); }
.vista-pie .pista { flex: 1; font-size: 0.8rem; color: var(--tinta-media); }
.vista-pie form { margin: 0; }
.barra-tanda { position: fixed; z-index: 30; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-grande); box-shadow: var(--sombra-2); }
.barra-tanda[hidden] { display: none; }
.cuenta-tanda { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 900px) {
  .cabecera-pendientes { display: none; }
  .fila-enlace { grid-template-columns: 1fr; gap: 0.4rem; }
  .importe-fila { justify-items: start; }
}

/* ══ Lotes (UX3) ══════════════════════════════════════════════════════════
   Indicadores, la barra de composición y la fila que se despliega en un
   resumen. Las barras son SVG con su ancho por atributo: la CSP no admite
   `style` en línea. */
.kpis-lotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.kpi { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); color: inherit; text-decoration: none; }
.kpi .rotulo { font-size: 0.78rem; color: var(--tinta-media); }
.kpi .valor { font-family: var(--fuente-numeros); font-size: 1.6rem; font-weight: 600; }
.kpi.persona .valor { color: var(--peligro); }
.kpi.listos .valor { color: var(--marca); }
.kpi.sin-archivo .valor { color: var(--azul); }
a.kpi:hover { border-color: var(--borde-fuerte); }

.segmento-aprobados { fill: var(--azul); background: var(--azul); }
.segmento-verificados { fill: var(--exito); background: var(--exito); }
.segmento-supuestos { fill: var(--atencion); background: var(--atencion); }
.segmento-marcados { fill: var(--peligro); background: var(--peligro); }
.segmento-duplicados { fill: var(--borde-fuerte); background: var(--borde-fuerte); }
.segmento-remitos { fill: var(--neutro); background: var(--neutro); }
.segmento-sinleer { fill: var(--tinta-suave); background: var(--tinta-suave); }
.segmento-rechazados { fill: var(--tinta); background: var(--tinta); }
.segmento-esperando { fill: var(--violeta); background: var(--violeta); }
.muestra { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: middle; }
.leyenda-lotes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0; margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--tinta-media); }

.lista-lotes { display: grid; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); overflow: hidden; }
.cabecera-lotes, .lote-fila > summary, .lote-fila.en-proceso { display: grid; grid-template-columns: 10rem minmax(10rem, 1fr) 4rem minmax(12rem, 2fr) 5rem 1.5rem; gap: 1rem; align-items: center; padding: 0.7rem 1rem; }
.cabecera-lotes { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1px solid var(--borde); }
.lote-fila { border-bottom: 1px solid var(--borde-sutil); }
.lote-fila.en-proceso { color: inherit; text-decoration: none; background: var(--superficie-alta); }
.lote-fila > summary { cursor: pointer; list-style: none; }
.lote-fila > summary::-webkit-details-marker { display: none; }
.lote-fila[open] > summary { background: var(--superficie-alta); }
.lote-fila .chevron svg { width: 1rem; height: 1rem; transition: transform 0.15s; }
.lote-fila[open] .chevron svg { transform: rotate(90deg); }
.lote-fila .origen { display: grid; min-width: 0; }
.lote-fila .por { font-size: 0.75rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-fila .cuando { font-size: 0.82rem; }
.composicion { width: 100%; height: 0.7rem; border-radius: 4px; overflow: hidden; background: var(--superficie-alta); }
.para-vos.hay { color: var(--peligro); font-weight: 600; }
.para-vos.cero { color: var(--tinta-suave); }
.avance { display: flex; align-items: center; gap: 0.75rem; grid-column: span 3; }
.avance .barra { flex: 1; }
.etiqueta-proceso { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--azul); }
.etiqueta-proceso .punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--azul); }
.avance .cuantos { font-size: 0.78rem; color: var(--tinta-media); white-space: nowrap; }

.lote-resumen { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; padding: 1rem 1rem 1.25rem; background: var(--superficie-alta); }
.lote-numeros { display: grid; gap: 1rem; }
.lote-numeros .conteos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; padding: 0; font-size: 0.85rem; }
.embudo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.embudo li { display: grid; grid-template-columns: 11rem 1fr 3rem; gap: 0.75rem; align-items: center; font-size: 0.82rem; }
.embudo svg { width: 100%; height: 0.45rem; }
.embudo .pista { fill: var(--borde-sutil); }
.embudo .relleno { fill: var(--marca); }
.embudo .numerica { text-align: right; font-family: var(--fuente-numeros); }
.lote-acciones { display: grid; gap: 0.6rem; align-content: start; }
.lote-acciones .rotulo { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.lote-acciones form { margin: 0; }
.lote-acciones .boton { width: 100%; justify-content: center; text-align: center; }
.ordenes-del-lote { margin: 0; font-size: 0.85rem; color: var(--tinta-media); }
@media (max-width: 900px) {
  .kpis-lotes { grid-template-columns: 1fr; }
  .cabecera-lotes { display: none; }
  .lote-fila > summary, .lote-fila.en-proceso { grid-template-columns: 1fr auto; }
  .lote-fila .composicion, .avance { grid-column: 1 / -1; }
  .lote-resumen { grid-template-columns: 1fr; }
  .embudo li { grid-template-columns: 8rem 1fr 2.5rem; }
}

/* ══ Histórico (UX4) ══════════════════════════════════════════════════════
   El gráfico de 30 días es el filtro de fecha. Barras en SVG con su alto por
   atributo: la CSP no admite `style` en línea. */
.historico-titulo { align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.buscador { display: flex; align-items: center; gap: 0.5rem; min-width: min(24rem, 100%); padding: 0.45rem 0.75rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); }
.buscador svg { width: 1rem; height: 1rem; color: var(--tinta-suave); }
.buscador input { flex: 1; border: 0; background: transparent; color: var(--tinta); font: inherit; font-size: 0.9rem; outline: none; }
.buscador:focus-within { border-color: var(--marca); }

.actividad { margin: 1rem 0; padding: 0.9rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); }
.actividad-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; font-size: 0.82rem; }
.dia-elegido { color: var(--tinta-media); }
.leyenda-actividad { margin-left: auto; display: inline-flex; gap: 1rem; color: var(--tinta-media); }
.muestra.procesado, .barras-actividad .procesado { background: var(--borde-fuerte); fill: var(--borde-fuerte); }
.muestra.generado, .barras-actividad .generado { background: var(--azul); fill: var(--azul); }
.barras-actividad { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; align-items: end; }
.barra-dia { display: grid; grid-template-rows: 5.5rem auto; gap: 0.25rem; padding: 2px; border-radius: 4px; text-decoration: none; color: var(--tinta-suave); }
.barra-dia svg { width: 100%; height: 100%; }
.barra-dia:hover, .barra-dia.elegida { background: var(--superficie-alta); }
.barra-dia.elegida { color: var(--tinta); }
.barra-dia.atenuada svg { opacity: 0.3; }
.etiqueta-dia { font-family: var(--fuente-numeros); font-size: 0.62rem; text-align: center; min-height: 0.8rem; }

.fichas-historico { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.75rem 0 1rem; }
.fichas-historico .ficha-filtro { border: 1px solid var(--borde); background: var(--superficie); }
.fichas-historico .separador { width: 1px; height: 1.2rem; margin: 0 0.4rem; background: var(--borde-fuerte); }
.fichas-historico .cuenta-visible { margin-left: auto; }
.ficha-filtro.estado-marcado .punto { background: var(--peligro); }
.ficha-filtro.estado-listo .punto { background: var(--atencion); }
.ficha-filtro.estado-aprobado .punto { background: var(--exito); }
.ficha-filtro.estado-generado .punto { background: var(--azul); }
.ficha-filtro.estado-descartado .punto { background: var(--tinta-suave); }

.lista-historico { display: grid; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); overflow: hidden; }
.cabecera-historico, .fila-historico-enlace { display: grid; grid-template-columns: minmax(14rem, 2fr) 9rem 6.5rem 6.5rem 9rem 7rem 1.25rem; gap: 0.9rem; align-items: center; padding: 0.7rem 1rem; }
.cabecera-historico { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1px solid var(--borde); }
.fila-historico { border-bottom: 1px solid var(--borde-sutil); }
.fila-historico.abierta { background: var(--superficie-alta); }
.fila-historico-enlace { color: inherit; text-decoration: none; font-size: 0.85rem; }
.fila-historico-enlace .numerica { font-family: var(--fuente-numeros); font-size: 0.8rem; }
.fila-historico .quien { display: grid; min-width: 0; }
.fila-historico .proveedor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-historico .detalle { font-family: var(--fuente-numeros); font-size: 0.75rem; color: var(--tinta-media); }
.fila-historico .chevron svg { width: 1rem; height: 1rem; transition: transform 0.15s; }
.fila-historico.abierta .chevron svg { transform: rotate(90deg); }
.estado-historico { justify-self: start; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--neutro-tinta); color: var(--tinta-media); }
.estado-historico.marcado { background: var(--peligro-tinta); color: var(--peligro); }
.estado-historico.listo { background: var(--atencion-tinta); color: var(--atencion); }
.estado-historico.aprobado { background: var(--exito-tinta); color: var(--exito); }
.estado-historico.generado { background: var(--azul-tinta); color: var(--azul); }

.recorrido-fila { display: grid; gap: 0.75rem; padding: 0.5rem 1rem 1.1rem; }
.recorrido { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.recorrido li { position: relative; display: grid; gap: 0.15rem; padding-top: 1rem; font-size: 0.8rem; }
.recorrido li::before { content: ""; position: absolute; top: 0.35rem; left: 0.6rem; right: -0.5rem; height: 2px; background: var(--borde-fuerte); }
.recorrido li:last-child::before { display: none; }
.recorrido li.hecho::before, .recorrido li.generado::before { background: var(--exito); }
.recorrido .marca-paso { position: absolute; top: 0; left: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--borde-fuerte); }
.recorrido li.hecho .marca-paso { background: var(--exito); }
.recorrido li.generado .marca-paso { background: var(--azul); }
.recorrido li.descartado .marca-paso { background: var(--tinta-suave); }
.recorrido .etiqueta { font-weight: 600; }
.recorrido .detalle { color: var(--tinta-media); }
.recorrido li.pendiente .etiqueta, .recorrido li.pendiente .detalle { color: var(--tinta-suave); }
.extras { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.extras .extra { padding: 0.2rem 0.55rem; border-radius: 6px; background: var(--neutro-tinta); font-size: 0.78rem; color: var(--tinta-media); }
@media (max-width: 900px) {
  .cabecera-historico { display: none; }
  .fila-historico-enlace { grid-template-columns: 1fr auto; }
  .barras-actividad { gap: 1px; }
  .recorrido { grid-template-columns: 1fr; }
  .recorrido li::before { display: none; }
}

/* 05/10/2026: los remitos, como los duplicados, no piden nada. */
.grupo.remitos .grupo-titulo h2 { color: var(--tinta-media); }

/* ══ El lote en tabs (05/10/2026) ═════════════════════════════════════════
   Un grupo por tab. Son enlaces: la tab va en la URL, sin JavaScript. */
.tabs-del-lote { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1.25rem 0 0.75rem; padding: 0.25rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); width: fit-content; max-width: 100%; }
.tabs-del-lote a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 8px; color: var(--tinta-media); text-decoration: none; font-size: 0.88rem; }
.tabs-del-lote a:hover { background: var(--superficie-alta); color: var(--tinta); }
.tabs-del-lote a[aria-current="page"] { background: var(--superficie-alta); color: var(--tinta); font-weight: 620; box-shadow: inset 0 -2px 0 var(--marca); }
.tabs-del-lote .numero { font-family: var(--fuente-numeros); font-size: 0.75rem; color: var(--tinta-suave); }
.tabs-del-lote a:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

/* ══ Pulido de pantallas (05/10/2026) ═════════════════════════════════════ */

/* El botón primario: marca sólida, un solo alto, el mismo en todas las
   pantallas donde se aprueba o se genera. */
.boton.primario {
  background: var(--marca);
  color: var(--marca-tinta);
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.92rem;
  box-shadow: var(--sombra-1);
}
.boton.primario svg { width: 1.05rem; height: 1.05rem; flex: none; }
.boton.primario:hover { background: var(--marca-clara); }
.boton.primario:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.boton.primario:disabled { background: var(--borde-fuerte); color: var(--sobre-tono); box-shadow: none; cursor: not-allowed; }
.boton.primario.con-supuestos { background: var(--atencion); }
.boton.primario.con-supuestos:hover { background: var(--atencion); filter: brightness(1.1); }
.boton.primario kbd { opacity: 0.8; }

/* La revisión: título a la izquierda, acciones a la derecha. */
.revision-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem 1.5rem; margin-bottom: 1.25rem; align-items: start; }
.revision-cabecera > .pasos { grid-column: 1 / -1; }
.revision-titulo { min-width: 0; }
.revision-acciones { position: relative; display: grid; gap: 0.5rem; justify-items: end; max-width: 100%; }
.revision-acciones .acciones-pagina { justify-content: flex-end; flex-wrap: nowrap; }
.revision-acciones form { margin: 0; padding: 0; border: 0; }
.revision-acciones .accion { white-space: nowrap; }

/* El interruptor del documento: el mismo botón, en el mismo lugar, con el
   mismo ancho. Los dos textos comparten celda y sólo se ve el que toca, así
   el ancho es el del más largo y la barra no se mueve al alternar. */
.alternar-documento { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.45rem; }
.alternar-documento[hidden] { display: none; }
.alternar-documento .icono-ocultar, .alternar-documento .icono-mostrar { grid-column: 1; grid-row: 1; display: inline-flex; }
.alternar-documento .texto-ocultar, .alternar-documento .texto-mostrar { grid-column: 2; grid-row: 1; text-align: left; }
.alternar-documento[aria-pressed="true"] .icono-mostrar, .alternar-documento[aria-pressed="false"] .icono-ocultar { display: none; }
.alternar-documento[aria-pressed="true"] .texto-mostrar, .alternar-documento[aria-pressed="false"] .texto-ocultar { visibility: hidden; }

/* «Más acciones»: un <details> con su lista flotante, alineada a la derecha. */
.mas-acciones { position: relative; }
.mas-acciones > summary { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.mas-acciones > summary svg { transition: transform 0.15s var(--curva-salida); }
.mas-acciones[open] > summary { background: var(--superficie-alta); border-color: var(--marca); }
.mas-acciones[open] > summary svg { transform: rotate(180deg); }
.mas-acciones[open] > .mas-acciones-lista {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 20; width: min(21rem, 90vw);
  display: grid; gap: 2px; padding: 0.35rem; border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-2);
}
.item-menu {
  display: flex; align-items: center; gap: 0.6rem; min-height: 2.4rem; padding: 0.4rem 0.65rem;
  border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: 0.88rem; cursor: pointer;
  list-style: none; box-sizing: border-box;
}
.item-menu::-webkit-details-marker { display: none; }
.item-menu svg { width: 1rem; height: 1rem; flex: none; color: var(--tinta-media); }
.item-menu:hover { background: var(--superficie-alta); }
.item-menu:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: -2px; }
.item-menu[aria-current="page"] { background: var(--superficie-alta); font-weight: 620; }
.item-menu.peligro, .item-menu.peligro svg { color: var(--peligro); }
.item-menu.peligro:hover { background: var(--peligro-tinta); }
.mas-acciones .descartar > summary { cursor: pointer; }
.mas-acciones .descartar[open] { padding: 0.25rem; margin-top: 2px; border: 1px solid var(--peligro); border-radius: 8px; background: var(--peligro-tinta); position: static; width: auto; box-shadow: none; }
.mas-acciones .descartar[open] > summary { padding-bottom: 0.4rem; font-weight: 600; }
.mas-acciones .descartar .explicacion, .mas-acciones .descartar form { margin-inline: 0.65rem; }
.mas-acciones .descartar form { margin-bottom: 0.5rem; }

@media (max-width: 860px) {
  .revision-cabecera { grid-template-columns: minmax(0, 1fr); }
  .revision-cabecera > .volver,
  .revision-cabecera > .revision-titulo,
  .revision-cabecera > .revision-acciones,
  .revision-cabecera > .pasos { grid-column: 1; grid-row: auto; }
  .revision-acciones { justify-items: stretch; }
  .revision-acciones .acciones-pagina { justify-content: flex-start; }
}
/* Editar en el lugar: el botón arriba a la derecha de lo que se edita, y
   «Guardar» / «Cancelar» al pie de la misma tabla. */
.edicion-barra { display: flex; justify-content: flex-end; }
/* El botón de la tarjeta de la orden, al final, abajo a la derecha (06/10/2026). */
.pie-de-orden { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.edicion-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.edicion-pie .accion { min-height: 2.5rem; padding-inline: 1rem; box-sizing: border-box; justify-content: center; }
.revision-paso .seccion { min-width: 0; }
.revision-paso .lista-ordenes { margin-top: 0.75rem; }
.importes-editable input, .campos-editables input {
  font: inherit;
  font-size: 0.9rem;
  color: var(--tinta);
  background: var(--superficie-alta);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
  max-width: 100%;
}
.importes-editable input:focus, .campos-editables input:focus, .reparto-editable select:focus, .reparto-editable input:focus { outline: 2px solid var(--marca-clara); outline-offset: 1px; }
.campos-editables input { width: 100%; min-width: 0; box-sizing: border-box; }
.supuestos-compactos {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem;
  padding: 0.4rem 0.7rem; border-radius: var(--radio); background: var(--atencion-tinta);
  font-size: 0.8rem; max-width: 34rem;
}
.supuestos-compactos .etiqueta { font-weight: 650; color: var(--atencion); }
.supuestos-compactos ul { display: contents; list-style: none; margin: 0; padding: 0; }
.supuestos-compactos li:not(:last-child)::after { content: " ·"; color: var(--tinta-suave); }
.supuestos-compactos .nota { flex-basis: 100%; margin: 0; color: var(--tinta-media); }

/* El tema: un ícono junto al avatar que despliega las tres opciones. */
.pie-sesion .tema { position: relative; flex: none; }
.pie-sesion .tema > summary {
  list-style: none; cursor: pointer; width: 1.9rem; height: 1.9rem; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tinta-media); border: 1px solid transparent;
}
.pie-sesion .tema > summary::-webkit-details-marker { display: none; }
.pie-sesion .tema > summary svg { width: 1rem; height: 1rem; }
.pie-sesion .tema > summary:hover { background: var(--superficie-alta); color: var(--tinta); }
.pie-sesion .tema > summary:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 1px; }
.pie-sesion .tema[open] > summary { background: var(--superficie-alta); color: var(--tinta); border-color: var(--borde); }
.pie-sesion .tema[open] > form {
  position: absolute; bottom: calc(100% + 0.5rem); left: 0; z-index: 20; width: 11.5rem;
  padding: 0.35rem; border-radius: var(--radio); background: var(--superficie);
  border: 1px solid var(--borde); box-shadow: var(--sombra-2);
}
.pie-sesion .tema .opciones-tema { display: grid; padding: 0; border: 0; background: transparent; gap: 2px; }
.pie-sesion .tema .opciones-tema button { justify-content: flex-start; padding: 0 0.6rem; height: 2rem; }
.pie-sesion .tema .opciones-tema button:hover { background: var(--superficie-alta); color: var(--tinta); }

/* El visor: las pestañas dentro de la pantalla completa. */
.visor-pestanas-ampliado { margin: 0; background: rgba(255, 255, 255, 0.1); flex: none; }
.visor-pestanas-ampliado .visor-pestana { color: rgba(255, 255, 255, 0.8); }
.visor-pestanas-ampliado .visor-pestana[aria-selected="true"] { color: var(--tinta); }
.visor-pestanas-ampliado .visor-pestana:disabled { opacity: 0.4; cursor: not-allowed; }
.pagina-enlace { cursor: zoom-in; }

/* Generar archivo. */
.tarjeta-periodo {
  margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-1);
}
.tarjeta-periodo form { display: grid; gap: 0.6rem; }
.tarjeta-periodo .campo-periodo { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; }
.tarjeta-periodo label { font-weight: 620; }
.tarjeta-periodo .control-periodo { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tarjeta-periodo input[type="month"] { width: auto; min-width: 10rem; }
.tarjeta-periodo .ayuda { margin: 0; max-width: 46rem; color: var(--tinta-media); font-size: 0.84rem; }
.resumen-generacion {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; margin: 0 0 1.25rem;
  background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden;
}
.resumen-generacion > div { background: var(--superficie); padding: 0.8rem 1.1rem; display: grid; gap: 0.15rem; }
.resumen-generacion dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-media); }
.resumen-generacion dd { margin: 0; font-size: 1.35rem; font-weight: 650; }
.formulario-generacion .grupo-titulo .accion { margin-left: auto; }
.cierre-generacion {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-grande);
}
.cierre-generacion .explicacion { margin: 0; flex: 1 1 24rem; max-width: 46rem; font-size: 0.84rem; }
.cierre-generacion .boton.primario { min-height: 2.9rem; padding-inline: 1.6rem; font-size: 1rem; }
.vacio .acciones-vacio { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 1.1rem 0 0; }

/* ══ Barra lateral plegable ═══════════════════════════════════════════════
   El botón nace `hidden` y navegacion.js lo muestra: sin JavaScript la barra
   queda abierta. El estado vive en <html data-barra="angosta">, puesto desde
   el <head> para que no parpadee. Sólo en pantallas anchas: abajo de 56rem la
   barra ya es una fila arriba y plegarla no tiene sentido. */
.navegacion-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.alternar-barra {
  display: none; flex: none; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 8px;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--tinta-media); border: 1px solid transparent;
}
.alternar-barra svg { width: 1rem; height: 1rem; transition: transform 0.2s var(--curva-salida); }
.alternar-barra:hover { background: var(--superficie-alta); color: var(--tinta); border-color: var(--borde); }
.alternar-barra:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 1px; }
.navegacion a .texto, .navegacion .proximamente .texto, .marca .nombre { white-space: nowrap; overflow: hidden; }
.pie-sesion .tema .opciones-tema { grid-template-columns: 1fr; }
.pie-sesion .tema .opciones-tema button {
  display: flex; flex-direction: row; align-items: center; gap: 0.55rem; width: 100%;
  font-size: 0.84rem; text-align: left;
}
.pie-sesion .tema .opciones-tema .tilde { margin-left: auto; display: inline-flex; color: var(--exito); }
.pie-sesion .tema .opciones-tema .tilde svg { width: 0.95rem; height: 0.95rem; }
.pie-sesion .tema .opciones-tema button[aria-current="true"] { color: var(--tinta); font-weight: 600; background: var(--exito-tinta); }
.pie-sesion .tema .titulo-menu {
  margin: 0; padding: 0.2rem 0.6rem 0.35rem; font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-media);
}

@media (min-width: 56.01rem) {
  .alternar-barra:not([hidden]) { display: inline-flex; }
  html[data-barra="angosta"] body.con-navegacion { grid-template-columns: 4.5rem minmax(0, 1fr); }
  html[data-barra="angosta"] .navegacion { padding-inline: 0.7rem; }
  html[data-barra="angosta"] .navegacion-cabecera { flex-direction: column; justify-content: center; gap: 0.6rem; }
  html[data-barra="angosta"] .marca { padding: 0.2rem 0 0; justify-content: center; }
  html[data-barra="angosta"] .marca .nombre,
  html[data-barra="angosta"] .navegacion a .texto,
  html[data-barra="angosta"] .navegacion .proximamente .texto,
  html[data-barra="angosta"] .navegacion .proximamente::after,
  html[data-barra="angosta"] .pie-sesion .identidad { display: none; }
  html[data-barra="angosta"] .navegacion a,
  html[data-barra="angosta"] .navegacion .proximamente { justify-content: center; padding-inline: 0; }
  html[data-barra="angosta"] .alternar-barra svg { transform: rotate(180deg); }
  html[data-barra="angosta"] .pie-sesion .quien { flex-direction: column; padding: 0; gap: 0.5rem; border-top: 0; }
  html[data-barra="angosta"] .pie-sesion .tema[open] > form { bottom: 0; left: calc(100% + 0.9rem); }
}

@media (prefers-reduced-motion: reduce) {
  body.con-navegacion { transition: none; }
  .alternar-barra svg { transition: none; }
}

/* Límites de la carga: la cantidad de archivos primero, en una fila corta. */
.zona ul.limites { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0; }
.zona ul.limites li:not(:last-child)::after { content: "·"; margin-inline: 0.55rem; color: var(--borde-fuerte); }
.zona .limites-nota { margin: 0; font-size: 0.82rem; color: var(--tinta-suave); }

/* El lote: el encabezado de la revisión, con el resumen en una línea bajo el
   título. Lo que se aprueba va a la derecha, sin la línea punteada del
   formulario de oferta. */
.lote-cabecera .revision-titulo { gap: 0.2rem 0.9rem; }
.lote-cabecera .subtitulo { flex-basis: 100%; margin: 0; }
.lote-cabecera h1 { font-size: 1.5rem; }
.lote-cabecera .revision-acciones { align-self: end; }

/* La referencia de íconos: cerrada, una línea. Se abre cuando hace falta. */
.referencia-senales { margin: 0 0 0.7rem; }
.referencia-senales > summary { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.82rem; color: var(--tinta-media); }
.referencia-senales > summary:hover { color: var(--tinta); }
.referencia-senales > summary:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.referencia-senales[open] > summary { margin-bottom: 0.5rem; }
.referencia-senales .referencia { margin: 0; }
.referencia-senales > summary svg { width: 0.95rem; height: 0.95rem; flex: none; }
.referencia-senales > summary::-webkit-details-marker { display: none; }

/* Navegación del lado del cliente (revisión): con «reducir movimiento», el
   cambio de pantalla es un reemplazo, sin fundido. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* «asumido»: una insignia ámbar al lado del valor que el sistema supuso. */
.insignia-asumido {
  display: inline-flex; align-items: center; margin-left: 0.5rem; vertical-align: middle;
  padding: 0.05rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  color: var(--atencion); background: var(--atencion-tinta);
  border: 1px solid color-mix(in srgb, var(--atencion) 35%, transparent);
}
/* Debajo de los datos: el default del proveedor a la izquierda, «Editar» a la derecha. */
.pie-de-clasificacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.pie-de-clasificacion > .formulario-oferta { margin: 0; padding: 0; border: 0; display: block; }
.pie-de-clasificacion > .edicion-barra { margin-left: auto; }

/* historial-por-etapa:inicio */
/* ── «Procesamiento realizado» por etapa (diseño 1A) ─────────────────────
   Sin animaciones y sólo con los tokens de arriba. Los textos de estado sobre
   su fondo tintado (el verde, el ámbar, el rojo, el violeta y el azul del
   diseño, más oscuros que el color base) salen de mezclar el color con la
   tinta: en el tema claro oscurecen y en el oscuro aclaran, siempre contra el
   fondo del tema. Son alias locales, no una paleta nueva. */
.historial-etapas {
  --texto-exito: color-mix(in srgb, var(--exito) 65%, var(--tinta));
  --texto-atencion: color-mix(in srgb, var(--atencion) 65%, var(--tinta));
  --texto-peligro: color-mix(in srgb, var(--peligro) 65%, var(--tinta));
  --texto-violeta: color-mix(in srgb, var(--violeta) 65%, var(--tinta));
  --texto-azul: color-mix(in srgb, var(--azul) 65%, var(--tinta));
  display: grid;
  gap: 12px;
  min-width: 0;
}

.historial-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.historial-subtitulo { margin: 0; font-size: 13px; color: var(--tinta-media); overflow-wrap: anywhere; }

.historial-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.historial-filtro:hover { text-decoration: underline; }
.historial-filtro:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.historial-filtro[aria-current="true"] { border-color: var(--azul); background: var(--azul-tinta); color: var(--texto-azul); }
.filtro-casilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--tinta-suave);
  border-radius: 4px;
  background: var(--superficie);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.historial-filtro[aria-current="true"] .filtro-casilla { border-color: var(--azul); background: var(--azul); color: var(--sobre-tono); }

.historial-lista { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }

.etapa-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 20px 24px 12px; border-bottom: 1px solid var(--borde); }
.etapa + .etapa .etapa-cabecera { border-top: 1px solid var(--borde); }
.etapa-numero { font-size: 12px; color: var(--tinta-suave); }
.etapa-cabecera h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--tinta); }
.etapa-estado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.etapa-glifo { font-weight: 700; }
.estado-ok { background: var(--exito-tinta); color: var(--texto-exito); }
.estado-aviso { background: var(--atencion-tinta); color: var(--texto-atencion); }
.estado-falla { background: var(--peligro-tinta); color: var(--texto-peligro); }
.estado-pendiente, .estado-opcional { background: var(--superficie-alta); color: var(--tinta-media); }
.etapa-contador { margin-left: auto; font-size: 12px; color: var(--tinta-suave); }
.etapa-nota { margin: 0; padding: 10px 24px 0; font-size: 13px; color: var(--texto-atencion); }
.etapa-vacio { margin: 0; padding: 12px 24px 16px; font-size: 13px; color: var(--tinta-suave); }

.eventos { list-style: none; margin: 0; padding: 8px 24px 24px; }
.evento {
  display: grid;
  grid-template-columns: 52px 28px minmax(0, 1fr);
  grid-template-areas: "hora riel cuerpo";
  column-gap: 14px;
}
.evento-hora { grid-area: hora; padding-top: 12px; text-align: right; font-size: 12px; color: var(--tinta-suave); font-family: var(--fuente-numeros); }
.evento-dia { display: block; line-height: 1.2; }
.evento-riel { grid-area: riel; position: relative; display: flex; justify-content: center; align-items: flex-start; }
.evento-riel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--borde); }
.evento-marcador {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--tinta-suave);
  border-radius: 50%;
  background: var(--superficie);
  box-sizing: content-box;
  font-size: 0;
}
.evento-persona .evento-marcador,
.evento-aviso .evento-marcador,
.evento-falla .evento-marcador {
  margin-top: 9px;
  width: 24px;
  height: 24px;
  border: 0;
  box-sizing: border-box;
  color: var(--sobre-tono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.evento-persona .evento-marcador { border-radius: 50%; background: var(--azul); }
.evento-aviso .evento-marcador, .evento-falla .evento-marcador { border-radius: 6px; font-size: 13px; }
.evento-aviso .evento-marcador { background: var(--atencion); }
.evento-falla .evento-marcador { background: var(--peligro); }

.evento-cuerpo { grid-area: cuerpo; min-width: 0; display: grid; gap: 4px; align-content: start; padding: 8px 12px; margin-bottom: 12px; border: 1px solid transparent; border-radius: 10px; }
.evento-cuerpo > * { margin: 0; }
.evento-persona .evento-cuerpo { background: var(--superficie-alta); border-color: var(--borde); }
.evento-aviso .evento-cuerpo { background: var(--atencion-tinta); border-color: color-mix(in srgb, var(--atencion) 28%, var(--superficie)); }
.evento-falla .evento-cuerpo { background: var(--peligro-tinta); border-color: color-mix(in srgb, var(--peligro) 28%, var(--superficie)); }

.evento-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.evento-detalle { font-size: 13px; line-height: 1.45; color: var(--tinta-media); text-wrap: pretty; overflow-wrap: anywhere; }
.evento-motivo { font-size: 13px; line-height: 1.45; color: var(--texto-peligro); overflow-wrap: anywhere; }
.evento-aviso .evento-motivo { color: var(--texto-atencion); }
.evento-motivo strong { font-weight: 600; }
.evento-autor { font-size: 12px; font-weight: 500; color: var(--tinta-suave); }
.evento-persona .evento-autor { color: var(--texto-azul); overflow-wrap: anywhere; }
.evento-aviso .evento-autor { color: var(--texto-atencion); }
.evento-falla .evento-autor { color: var(--texto-peligro); }

.evento-fuente { padding: 1px 7px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie-alta); color: var(--tinta-media); font-size: 11px; font-weight: 500; }
.evento-fuente.fuente-ia { border-color: transparent; background: var(--violeta-tinta); color: var(--texto-violeta); }

.cambios { display: grid; gap: 4px; margin: 4px 0 0; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
.cambio { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cambio dt { margin: 0; font-size: 13px; color: var(--tinta-media); }
.cambio dd { margin: 0; font-family: var(--fuente-numeros); font-size: 12.5px; overflow-wrap: anywhere; }
.cambio del { color: var(--tinta-suave); text-decoration: line-through; }
.cambio ins { color: var(--tinta); font-weight: 500; text-decoration: none; }
.cambio-flecha { margin: 0 8px; color: var(--tinta-suave); }

@media (max-width: 600px) {
  .etapa-cabecera { padding: 16px 16px 10px; }
  .etapa-contador { margin-left: 0; flex-basis: 100%; }
  .etapa-nota, .etapa-vacio { padding-right: 16px; padding-left: 16px; }
  .eventos { padding: 8px 16px 16px; }
  .evento {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas: "riel hora" "riel cuerpo";
    column-gap: 10px;
  }
  .evento-hora { text-align: left; padding-top: 8px; }
  .evento-dia { display: inline; margin-right: 6px; }
  .cambio { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* historial-por-etapa:fin */

/* «Así va a Tango» (07/10/2026): cada columna con lo que lleva y, debajo,
   de dónde salió. Lo que falta, en rojo y con su motivo. */
.tango-campo dd { display: grid; gap: 0.1rem; justify-items: start; }
.tango-campo .valor { font-weight: 600; }
.tango-campo .subtitulo { font-size: 0.85rem; color: var(--tinta-media); }
.tango-campo .origen { font-size: 0.76rem; color: var(--tinta-suave); }
.tango-campo .origen .insignia-asumido { margin-left: 0; }
.tango-campo .al-generar { font-family: inherit; color: var(--tinta-media); font-style: italic; }
.chip-falta {
  display: inline-flex; align-items: center; padding: 0.05rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 650; white-space: nowrap;
  color: var(--peligro); background: var(--peligro-tinta);
  border: 1px solid color-mix(in srgb, var(--peligro) 35%, transparent);
}
.motivo-falta { font-size: 0.82rem; color: var(--peligro); }
.tango-iva { margin-top: 1rem; }
.tango-iva caption { text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); padding-bottom: 0.4rem; }
.tango-iva td .motivo-falta { margin-left: 0.4rem; }
.fuera-de-tango { margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--tinta-suave); }
.reparto-tabla + .tango-campos, .tabla-envoltura + .tango-campos { margin-top: 1rem; }

/* «Configuración → Correo» (M-16): dos listas y un paso de confirmación.
   El panel de confirmación va arriba y con el borde de la marca: es lo único
   de la pantalla que cambia algo, y tiene que leerse antes que las listas. */
.config-correo { display: grid; gap: 1.25rem; margin-top: 1.25rem; min-width: 0; }
.config-correo .cabecera-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.config-correo .cabecera-seccion h2 { margin: 0; }
.config-correo .cuenta { font-size: 0.8rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.config-correo .explicacion { margin: 0.4rem 0 0.9rem; }
.tabla-config .valor-clave { font-family: var(--fuente-numeros); font-size: 0.84rem; overflow-wrap: break-word; }
.tabla-config td.clave { width: 45%; }
.tabla-config .valor-clave.palabra { font-weight: 650; letter-spacing: 0.02em; }
.tabla-config td.acciones .accion + .accion { margin-left: 0.25rem; }
.tabla-config tr.de-baja .valor-clave { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: var(--borde-fuerte); }
.accion.discreta.peligro { color: var(--peligro); }
.accion.discreta.peligro:hover { color: var(--peligro); background: var(--peligro-tinta); }
.chip-config {
  display: inline-flex; align-items: center; padding: 0.05rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 650; white-space: nowrap;
}
.chip-config.activo { color: var(--exito); background: var(--exito-tinta); }
.chip-config.inactivo { color: var(--tinta-media); background: var(--superficie-alta); border: 1px solid var(--borde); }
.alta-config, .edicion-en-fila { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; }
.alta-config { margin-top: 1rem; padding-top: 0.95rem; border-top: 1px dashed var(--borde); }
.alta-config .campo { flex: 1 1 14rem; max-width: 24rem; }
/* La dirección entera a la vista mientras se edita: el campo ocupa la celda y los botones bajan. */
.edicion-en-fila .campo { flex: 1 1 100%; }
.edicion-en-fila .campo input { font-family: var(--fuente-numeros); font-size: 0.84rem; }
.vacio-lista { margin: 0; font-size: 0.86rem; color: var(--tinta-media); }
.nota-solo-lectura { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; font-size: 0.86rem; color: var(--tinta-media); }
.nota-solo-lectura svg { width: 1rem; height: 1rem; flex: none; }
.confirmar-cambio {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-radius: var(--radio-grande);
  background: var(--superficie); border: 1px solid var(--marca); box-shadow: var(--sombra-2);
}
.confirmar-cambio h2 { margin: 0; font-size: 1.05rem; font-weight: 660; overflow-wrap: anywhere; }
.confirmar-cambio .explicacion { margin: 0.4rem 0 0.9rem; }
.acciones-confirmar { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* E7 (M-06): de qué correo vino un documento. Todo lo que muestra lo escribió
   el remitente: el cuerpo va como texto en un <pre>, plegado, y una línea
   larga (una URL, un base64) se parte en vez de desbordar la ficha. */
.correo-de-origen {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
  padding: 0.85rem 1.05rem;
  margin: 0 0 1rem;
  min-width: 0;
}
.correo-cabecera { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.correo-icono {
  flex: none; display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center;
  border-radius: var(--radio); color: var(--azul); background: var(--azul-tinta);
}
.correo-icono svg { width: 1.1rem; height: 1.1rem; }
.correo-datos { display: grid; gap: 0.1rem; min-width: 0; }
.correo-datos .rotulo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); }
.correo-asunto { font-weight: 650; color: var(--tinta); overflow-wrap: anywhere; }
.correo-remitente { font-size: 0.86rem; color: var(--tinta-media); overflow-wrap: anywhere; }
.correo-datos time { font-size: 0.8rem; color: var(--tinta-suave); font-family: var(--fuente-numeros); }
.correo-documentos { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.correo-documentos a {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
  padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.82rem;
  color: var(--tinta); background: var(--superficie-alta); border: 1px solid var(--borde-sutil); text-decoration: none;
}
.correo-documentos a:hover { border-color: var(--borde-fuerte); }
.correo-documentos svg { width: 0.9rem; height: 0.9rem; flex: none; color: var(--tinta-suave); }
.correo-documentos .archivo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-cuerpo { margin-top: 0.7rem; }
.correo-cuerpo summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--azul); }
.correo-cuerpo .explicacion { margin: 0.5rem 0; font-size: 0.8rem; }
.cuerpo-correo {
  margin: 0; max-height: 22rem; overflow: auto;
  padding: 0.75rem 0.9rem; border-radius: var(--radio);
  background: var(--superficie-alta); border: 1px solid var(--borde-sutil); color: var(--tinta);
  font-family: var(--fuente-numeros); font-size: 0.82rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.correo-sin-cuerpo { margin: 0.6rem 0 0; font-size: 0.84rem; color: var(--tinta-suave); }
.correos-del-lote { margin-top: 1.5rem; }
.correos-del-lote .titulo-correos { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 660; color: var(--tinta); }

/* pantallas-de-correo:inicio
   M-14 (plan-e7 corte 9): la casilla, los correos sin comprobante y los
   adjuntos rechazados. El aviso de la casilla va arriba y fuerte porque es
   el único indicador de la ingesta (B19): si no se ve, nadie se entera. */
.pestanas-de-correo { margin-top: 1rem; }
.aviso-casilla {
  display: flex; gap: 0.85rem; align-items: flex-start;
  margin: 0.75rem 0 1rem; padding: 0.95rem 1.1rem;
  border: 1px solid var(--borde); border-left-width: 4px; border-radius: var(--radio);
  background: var(--superficie);
}
.aviso-casilla .icono { display: inline-flex; width: 1.6rem; height: 1.6rem; flex: none; align-items: center; justify-content: center; border-radius: 50%; color: var(--sobre-tono); }
.aviso-casilla .icono svg { width: 0.95rem; height: 0.95rem; }
.aviso-casilla p { margin: 0; color: var(--tinta-media); font-size: 0.9rem; }
.aviso-casilla .titulo-aviso { color: var(--tinta); font-weight: 650; margin-bottom: 0.15rem; }
.aviso-casilla.error { border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); border-left-color: var(--peligro); background: var(--peligro-tinta); }
.aviso-casilla.error .icono { background: var(--peligro); }
.aviso-casilla.atencion { border-color: color-mix(in srgb, var(--atencion) 35%, var(--borde)); border-left-color: var(--atencion); background: var(--atencion-tinta); }
.aviso-casilla.atencion .icono { background: var(--atencion); }

.estado-casilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.dato-casilla {
  display: grid; gap: 0.3rem; align-content: start; padding: 0.95rem 1.05rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-1);
}
.dato-casilla .rotulo { font-size: 0.68rem; font-weight: 680; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinta-suave); }
.dato-casilla .valor { font-size: 1.05rem; font-weight: 640; color: var(--tinta); }
.dato-casilla .numerica { font-family: var(--fuente-numeros); font-variant-numeric: tabular-nums; }
.dato-casilla .nota { font-size: 0.8rem; color: var(--tinta-media); }
.situacion-casilla { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 650; }
.situacion-casilla .punto { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--neutro); }
.situacion-casilla.bien .punto { background: var(--exito); }
.situacion-casilla.atencion .punto { background: var(--atencion); }
.situacion-casilla.peligro { color: var(--peligro); }
.situacion-casilla.peligro .punto { background: var(--peligro); }

.error-casilla {
  padding: 0.95rem 1.05rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-grande);
}
.error-casilla h2 { margin: 0 0 0.45rem; font-size: 0.68rem; font-weight: 680; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinta-suave); }
.error-casilla p { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; font-size: 0.9rem; }
.error-casilla .numerica { font-family: var(--fuente-numeros); color: var(--tinta-media); }
.error-casilla .codigo { font-family: var(--fuente-numeros); font-size: 0.78rem; padding: 0.05rem 0.45rem; border-radius: 6px; background: var(--superficie-alta); border: 1px solid var(--borde); }
.error-casilla .sin-error { color: var(--tinta-media); }

.filtros-de-correo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: 0.25rem 0 0.9rem; }
.filtros-de-correo > label:not(.buscador) { display: grid; gap: 0.2rem; font-size: 0.74rem; color: var(--tinta-suave); }
.filtros-de-correo input[type="date"] {
  font: inherit; font-size: 0.9rem; color: var(--tinta); padding: 0.4rem 0.6rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie);
}
.filtros-de-correo .buscador { min-width: min(20rem, 100%); }

.tabla-de-correos td { padding: 0.8rem 1rem; }
.tabla-de-correos .numerica { font-family: var(--fuente-numeros); white-space: nowrap; color: var(--tinta-media); }
.tabla-de-correos .remitente { font-weight: 600; overflow-wrap: anywhere; }
.tabla-de-correos .asunto { overflow-wrap: anywhere; max-width: 28rem; }
.tabla-de-correos .nombre-declarado { overflow-wrap: anywhere; max-width: 22rem; }
.tabla-de-correos .nombre-declarado .numerica { white-space: normal; color: var(--tinta); }
.tabla-de-correos .nada { color: var(--tinta-suave); }
.por-que { display: inline-block; padding-left: 0.6rem; border-left: 3px solid var(--neutro); color: var(--tinta); }
.por-que.duplicado { border-left-color: var(--azul); }
.por-que.error { border-left-color: var(--peligro); }
.correo-del-adjunto { display: grid; gap: 0.15rem; }
.correo-del-adjunto .asunto { color: var(--tinta-media); font-size: 0.84rem; }
.correo-del-adjunto a { font-size: 0.84rem; }
.tabla-de-correos a { color: var(--marca); font-weight: 600; text-decoration: none; }
.tabla-de-correos a:hover { text-decoration: underline; }
.tabla-de-correos a:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; border-radius: 4px; }
/* pantallas-de-correo:fin */