/* =====================================================================
   BINNACORP COMISIONES — hoja de estilos BASE, compartida por las 14 pantallas.
   =====================================================================
   Todo lo que se repetía en cada página vive aquí y SOLO aquí: cambiar un color
   o el alto de una fila es tocar un archivo, no catorce. Cada pantalla enlaza
   este archivo y añade en su propio <style> únicamente lo que es suyo.

   Reglas del contrato de diseño (docs/diseno-ui.md), en una línea:
     · mono = identificadores literales · azul = interactivo o marca
     · un solo elemento coloreado por fila (el estado) · sin cápsulas
     · escala de radios 2/3/4px · escala tipográfica 28/19/14/12.5/11/10

   Cada regla se declara UNA vez. Había pares duplicados (.sec-sub, h1,
   .wordmark b, .steps .s) con valores distintos: ganaba el segundo en silencio,
   así que el 12.5px que documenta el contrato se pintaba a 12px en las catorce
   pantallas. Si hace falta una variante, se declara con su propia clase.
   ===================================================================== */

/* ── TOKENS — la única definición de la paleta y la tipografía (contrato: docs/diseno-ui.md) ──
   Una línea por familia: un cambio de paleta tiene que leerse en el diff. */
:root{
  /* neutros (fríos, alineados al gris del sitio de BinnaCorp) */
  /* --ink-3 NO es un gris decorativo: son los rótulos de columna de todas las tablas, los de KPI,
     el pie y los labels del login. Estaba en #7C8890 = 3,4:1 sobre --paper, bajo el 4,5:1 que pide
     WCAG AA para texto chico; a 11px eso se lee mal en una pantalla con reflejo. #5F6972 mantiene
     el mismo matiz frío y sube a 5,0:1 sobre --paper y 5,7:1 sobre blanco, sin tocar la jerarquía:
     sigue siendo el gris más claro de la escala. Lo verifica diseno.test.js. */
  --ink:#212B33;--ink-2:#3C4858;--ink-3:#5F6972;
  --paper:#EEF1F3;--surface:#FFFFFF;--panel:#F4F6F7;--line:#D9DEE3;--line-2:#E8ECEF;
  /* marca */
  --cobalt:#0076BA;--cobalt-deep:#00558A;--cobalt-soft:#E9F4FA;--cobalt-line:#BBDCEE;--marca-gris:#606060;
  /* firma de quien lo desarrolló: los dos colores de RonBStudio —gris para el nombre, azul vivo
     para la B—, distintos del cobalto de BinnaCorp a propósito (son dos marcas). Viven sólo en
     el pie, en cuerpo chico, para no competir con la marca que encabeza cada pantalla. */
  --ronb:#3B82F6;--ronb-gris:#4B5563;
  /* semánticos: texto · tinte de fondo · borde del tinte */
  --ok:#2E7D54;--ok-soft:#EAF4EE;--ok-line:#BEDBC9;
  --warn:#9A6B18;--warn-soft:#F8F1E2;--warn-line:#E7D6AE;
  --alert:#B23B2E;--alert-soft:#F9EBE8;--alert-line:#E6C3BD;
  /* tipografía */
  --disp:"Roboto",Helvetica,Arial,sans-serif;--sans:"Roboto",Helvetica,Arial,sans-serif;--mono:"JetBrains Mono",monospace
}

/* ── RESET Y BASE DEL DOCUMENTO ── */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}

/* ── CABECERA — logo, título y navegación de pasos (idéntica en las 14 pantallas) ── */
header.top{border-top:4px solid var(--cobalt);background:var(--paper);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:22px clamp(16px,4vw,48px) 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
/* El logo es un PNG de 582x176: SIN altura fija sale a tamaño natural y se come la pantalla.
   La altura vive acá, en un solo lugar, para las 14 pantallas. */
.wordmark{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:500;font-size:14px;color:var(--ink-2)}
.wordmark img{height:30px;width:auto;display:block}
.wordmark b{color:var(--cobalt);font-weight:500}
/* Versión del sistema, pintada por comun.js bajo el logo en las 14 pantallas. Es un
   identificador literal —como una O.Compra o un lote— así que va en mono, igual que ellos. */
.version{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.02em;margin-top:5px}
/* ── FIRMA DEL PIE — la pinta comun.js al final de las 14 pantallas ──
   El nombre es un logotipo hecho de texto: peso alto, la B en el azul de RonBStudio. El resto
   de la línea es texto corriente y en gris, para que el crédito no pese más que el contenido. */
.firma{width:100%;text-align:center;padding:30px 16px 34px;font-size:11.5px;color:var(--ink-3)}
.firma .ronb{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ronb-gris);letter-spacing:-.02em}
.firma .ronb b{color:var(--ronb);font-weight:700}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.6vw,38px);letter-spacing:-.02em;margin:8px 0 0}
.steps{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--ink-3);font-weight:600;flex-wrap:wrap;justify-content:flex-end;max-width:430px}
.steps .s{padding:4px 9px;border:1px solid var(--line);border-radius:3px;background:var(--surface);white-space:nowrap;text-decoration:none;color:inherit}
.steps .s.on{border-color:var(--cobalt);color:var(--cobalt);background:var(--cobalt-soft)}

/* ── TIPOGRAFÍA DE SECCIÓN — títulos, subtítulos, franja de contexto, pie ── */
.proto{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:10px 15px;font-size:12px;color:var(--ink-2);margin-bottom:22px}
.proto b{color:var(--ink)}
h2.sec{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.01em;margin:26px 0 4px}
/* Nivel intermedio de título: existía sólo como style="font-size:16px" sobre un h2. */
h3.sub{font-family:var(--disp);font-weight:500;font-size:14px;margin:22px 0 4px}
.sec-sub{font-size:12.5px;color:var(--ink-2);margin:0 0 14px}
.sec-sub b{color:var(--ink)}
.foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-3);font-size:11.5px;line-height:1.6}
.foot b{color:var(--ink-2)}

/* ── TABLAS DE DATOS — la superficie principal del sistema ──
   La densidad de fila es UNA sola: tres pantallas consecutivas del mismo asistente venían con
   tres altos y tres cuerpos de letra distintos, y al avanzar de paso la tabla «respiraba» sin
   que hubiera cambiado el contenido. Lo específico de cada página (min-width, white-space,
   vertical-align) se queda como override puntual; la densidad, no. */
.mono{font-family:var(--mono);font-size:11px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-2)}
th{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
/* El rótulo de una columna numérica va del mismo lado que sus números. Existía sólo `td.num`,
   así que el encabezado quedaba colgado a la izquierda sobre cifras alineadas a la derecha.
   `th.num` (0,1,1) le gana al `th,td{text-align:left}` local de cada página sin tocarlas. */
th.num{text-align:right}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── ESTADOS Y AVISOS — semántica visual (verde/ámbar/rojo) y el spinner ── */
/* La caja de aviso significa lo MISMO en toda la app: base ámbar (atención), .bad rojo (error o
   decisión a sabiendas), .good verde (resultado). Había una copia por página y en una de ellas la
   base era roja: el mismo nombre pintaba dos gravedades distintas según la pantalla. */
.alertbox{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:3px;padding:12px 15px;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:12px}
.alertbox.bad{background:var(--alert-soft);border-color:var(--alert-line)}
.alertbox.good{background:var(--ok-soft);border-color:var(--ok-line)}
.alertbox .a{padding:3px 0}
.alertbox b{color:var(--ink)}
/* Botón primario: azul, el color de lo interactivo. Las páginas con matices propios (tamaño,
   variante secundaria) lo afinan en su hoja; el color no se toca. */
.btn{font:inherit;font-weight:800;font-size:13.5px;border:0;border-radius:3px;padding:10px 20px;color:#fff;background:var(--cobalt);cursor:pointer}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--cobalt-soft);border-top-color:var(--cobalt);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}

/* ══════════════════════════════════════════════════════════════════════════════════════
   COMPONENTES QUE VIVÍAN COPIADOS EN CADA PANTALLA (auditoría 4-sep-2026).
   ══════════════════════════════════════════════════════════════════════════════════════
   Estos ocho componentes estaban declarados en hasta cuatro <style> distintos, y ya habían
   divergido en silencio: `.rescard .who` se pintaba a 12px/600, 11px/700 y 11.5px/700 según la
   pantalla —y dos de esos tres tamaños ni siquiera están en la escala del contrato
   (28/19/14/12.5/11/10)—; `.acts` tenía cuatro márgenes distintos; y `.btn.sec2` se USABA en
   conciliación, órdenes y reajuste sin estar definida en ninguna parte, así que el botón
   secundario salía azul sólido, indistinguible de la acción principal.

   Cada propiedad se declara UNA vez y con el valor del contrato. Lo que de verdad es propio de
   una pantalla (el min-width de su tabla, el ancho de su columna) sigue viviendo en su <style>.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── VARIANTES DEL BOTÓN ──
   El `.btn` azul de arriba es la acción principal. Éstas son las otras tres formas que ya existían
   —repetidas, y con nombres distintos para lo mismo— y que ahora significan una sola cosa:
   secundaria (neutra), fantasma (azul sobre blanco: acción principal de un paso que no escribe)
   y peligro (roja: la decisión destructiva, tomada a sabiendas). */
.btn.sec2{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.btn.ghost{background:var(--surface);color:var(--cobalt);border:1px solid var(--cobalt)}
.btn.peligro{background:var(--alert)}
.btn.mini{padding:4px 10px;font-size:11.5px;font-weight:700}
/* El botón único de una tarjeta de formulario (entrar, cambiar la clave): ocupa el ancho de la
   tarjeta porque es la única acción que hay. Las dos pantallas de clave lo pedían estilando el
   SELECTOR `button`, así que el `width:100%` alcanzaba también a los botones del diálogo de la
   casa si alguna vez se abriera uno ahí. */
.btn.ancho{width:100%;margin-top:20px;padding:12px;font-size:14px}

/* ── TARJETA DE KPI (`.rescard`) — cálculo, cierre, dirección y operación ──
   El rótulo va en versalitas 11px/700 (la escala del contrato) y el número en 28px: es EL número
   de la tarjeta. El color del número sólo es semántico —.ok/.warn/.alert por el estado del KPI,
   .neg cuando la cifra es negativa—; sin modificador va en tinta, como todo dato. */
.rescard{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:15px 17px}
.rescard .who{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.rescard .amt{font-family:var(--disp);font-size:28px;color:var(--ink);margin-top:5px}
.rescard .amt.neg{color:var(--alert)}
.rescard.ok .amt{color:var(--ok)} .rescard.warn .amt{color:var(--warn)} .rescard.alert .amt{color:var(--alert)}
.rescard .sub{font-size:11.5px;color:var(--ink-2);margin-top:6px;line-height:1.4}

/* ── TARJETA DE CONTENIDO (`.card`) ──
   `.card.auth` es la misma tarjeta con la franja de marca arriba y más aire: las dos pantallas
   de clave (entrar y cambiar la propia) no tienen nada más en la página. Venían con dos anchos
   distintos —380 y 400— para la MISMA tarjeta. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:18px 20px}
.card.auth{border-top:4px solid var(--cobalt);padding:34px 36px;max-width:400px;width:100%}

/* ── FORMULARIO (`.form` · `.grid` · `.f` · `.i` · `.hint`) — ajustes y maestros ──
   `.grid` la usaban además las filas de KPI de conciliación y promoción con otro mínimo por
   columna, y operación y órdenes la escribían en el HTML sin tenerla definida: la grilla no
   existía y los campos caían uno debajo del otro. */
.form{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0 8px}
/* dentro de una tarjeta de formulario el margen ya lo pone el padding de la tarjeta */
.form .grid{margin:0}
.f{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.i{font:inherit;font-size:13px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink)}
textarea.i{min-height:52px;resize:vertical}
.hint{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.4}

/* ── FILA DE ACCIONES (`.acts`) ──
   `.acts.en-bloque` es la fila que cuelga de un bloque con cuerpo propio (conciliación, órdenes,
   reajuste): no es hija del cuerpo, así que necesita su propio margen lateral para alinearse con
   el padding de ese cuerpo. */
.acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.acts.en-bloque{margin:12px 16px 14px}
/* la explicación que acompaña a un botón se lee en columna angosta, no de borde a borde */
.acts .hint{max-width:430px}

/* ── BOTÓN DE FILTRO (`.chip`) — cálculo e ingesta ──
   Es un CONTROL: el encendido lleva el mismo tinte azul suave que el paso actual de la nav y que
   la pestaña elegida. El `.chip` de dirección era otra cosa (una etiqueta de estado, que no se
   puede clickear) y se llama `.etq` desde el 4-sep: un tratamiento, un significado. */
.chip{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:6px 12px;border-radius:3px;cursor:pointer}
.chip.on{border-color:var(--cobalt);color:var(--cobalt);background:var(--cobalt-soft)}
.chip .n{font-variant-numeric:tabular-nums;opacity:.7;margin-left:5px}

/* ── MICRO-ETIQUETA DE TIPO (`.tag`) — el tipo de documento, en las tablas densas ──
   Es VOCABULARIO del sistema, no un identificador literal: va en sans (el número del documento,
   que sí es un identificador, ya lleva su `.mono` al lado). `.nc` es la nota de crédito, que es
   lo que origina un clawback y por eso se distingue. */
.tag{font-size:10.5px;padding:1px 7px;border-radius:2px;border:1px solid var(--line);background:var(--surface);color:var(--ink-3)}
.tag.nc{border-color:var(--alert-line);color:var(--alert)}
/* explicación DERIVADA del cálculo, no una regla de la estructura: no se confunde con la política */
.tag.der{font-style:italic;background:var(--panel);border-style:dashed}

/* ── LA PALABRA DE ESTADO (`.pill`) ──
   Vivía en cuatro pantallas con DOS aspectos distintos: en cierre, ingesta y maestros era la
   palabra en versalitas coloreada; en la bandeja, una cajita con borde. Gana la palabra, que es
   lo que dice el contrato: el estado se dice con SU palabra, no pintando una caja alrededor.
   Los modificadores de las cuatro conviven acá porque nombran la MISMA semántica con distinta
   letra (verde = está bien / rojo = falta o frena / ámbar = atención / gris = inactivo).
   ingesta.html escribía `pill ok` y `pill no` sin tenerlos definidos en ninguna parte: la palabra
   salía en tinta, sin el color que era todo su trabajo. */
.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.pill.ok,.pill.a,.pill.est{color:var(--ok)}
.pill.no,.pill.bloq{color:var(--alert)}
.pill.b,.pill.aviso{color:var(--warn)}
.pill.off{color:var(--ink-3)}
/* «retiene el documento» es el estado más grave de la bandeja y hay que verlo de un vistazo en
   una tabla de cientos de filas: es el único que además del color lleva tinte de fondo. */
.pill.dinero{color:var(--alert);font-weight:800;background:var(--alert-soft);border-radius:2px;padding:1px 7px}

/* ── EL AVISO AL PIE DE UNA CIFRA (`.gap`) — cálculo, cierre y statements ──
   Ámbar: «esto que estás mirando tiene un pero». Es hermano de `.alertbox`, en cuerpo chico y
   sin borde, para ir pegado al dato del que habla. */
.gap{font-size:11.5px;color:var(--warn);background:var(--warn-soft);border-radius:3px;padding:9px 12px;margin:14px 0;line-height:1.45}
.gap b{color:var(--warn)}

/* Un desplegable cableado por detalleDesplegable() (comun.js) se alcanza con Tab: hay que VER
   dónde está el foco, o el teclado funciona a ciegas. El atributo lo pone el propio helper, así
   que ningún desplegable puede quedarse sin esta marca por olvido. */
[data-desplegable]:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}

/* ── LA BARRA DE SESIÓN (la pinta /js/sesion.js) ──────────────────────────────────────
   Quién está adentro y por dónde se sale, fija arriba a la derecha en las trece pantallas que
   exigen sesión. sesion.js la escribía con doce `style="…"` en línea y los colores a mano; uno de
   esos hex era el gris VIEJO (#7C8890), el que se había subido a #5F6972 justamente porque no
   llegaba al 4,5:1 de WCAG AA — así que el rol de la persona se leía peor que cualquier otro texto
   de la app, y el auditor de diseño no podía verlo porque vive en un .js, no en un .html.

   sesion.js corre ANTES que comun.js (es una guarda: pregunta quién sos antes de mostrar nada) y
   no puede depender de él. Por eso acá sólo hay clases: el .js las asigna y no sabe de colores. */
.barra-sesion{position:fixed;top:0;right:0;z-index:9999;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-top:0;border-right:0;
  border-radius:0 0 0 4px;padding:6px 12px;font-family:var(--sans);font-size:12px;font-weight:600;
  line-height:1.2;color:var(--ink-2);box-shadow:0 1px 6px rgba(33,43,51,.08);backdrop-filter:blur(6px)}
.barra-sesion .quien{color:var(--ink)}
.barra-sesion .rol{font-weight:500;color:var(--ink-3)}
/* «mi clave» y «salir» son la misma cosa —dos controles chicos, uno al lado del otro—, así que se
   declaran juntos: si uno cambiara de alto, el otro quedaría desalineado. */
.barra-sesion a,.barra-sesion button{font:inherit;font-size:11px;font-weight:600;color:var(--ink-2);
  text-decoration:none;white-space:nowrap;border:1px solid var(--line);background:var(--surface);
  padding:3px 10px;border-radius:3px}
.barra-sesion button{font-weight:700;cursor:pointer}
.barra-sesion a:hover,.barra-sesion button:hover{border-color:var(--cobalt);color:var(--cobalt)}
.barra-sesion a:focus-visible,.barra-sesion button:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

/* La cinta del ENTORNO DE PRUEBAS: fija abajo a la izquierda, en el ámbar de aviso, en todas las
   pantallas cuando el servidor corre con ENSAYO=1 (la pinta comun.js desde /healthz). Sin botón de
   cerrar a propósito: es lo único que distingue a la vista el entorno de prueba del real. */
.cinta-ensayo{position:fixed;left:0;bottom:0;z-index:9999;background:var(--warn);color:var(--surface);
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.2;
  padding:8px 14px;border-radius:0 4px 0 0;box-shadow:0 -1px 6px rgba(33,43,51,.18)}
.cinta-ensayo b{font-weight:800;letter-spacing:.08em}

/* ── UTILIDADES ── */
.wrap{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,44px) clamp(16px,4vw,48px) 60px}
/* El selector de período, idéntico en las pantallas que lo llevan (radio 3px: es un control). */
select.sel{font:inherit;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:6px 9px;background:var(--surface)}
.neg{color:var(--alert)}
.q{color:var(--cobalt);font-weight:600}
/* El vacío es UNA sola cosa en toda la app: guion largo gris (contrato, checklist 6). */
.vacio{color:var(--ink-3)}
/* Rótulo que existe para el lector de pantalla y no para el ojo: una columna de datos sin
   encabezado se anuncia sin contexto, pero el texto visible estorbaría. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* animación del spinner (una sola definición para toda la app) */
@keyframes sp{to{transform:rotate(360deg)}}

/* ── El diálogo de la casa (comun.js: confirmarAccion / pedirTexto) ─────────────────────
   Reemplaza a confirm() y prompt() del navegador, que bloquean el hilo, no respetan nada del
   sistema y no se pueden ver ni probar (no están en el DOM). El fondo oscurece pero deja ver la
   pantalla de atrás: lo que se está por confirmar sigue ahí. */
.dlg-fondo{position:fixed;inset:0;z-index:100;background:rgba(33,43,51,.42);
  display:grid;place-items:center;padding:24px}
.dlg{background:var(--surface);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 12px 40px rgba(33,43,51,.22);max-width:520px;width:100%;padding:22px 24px}
.dlg-t{font-family:var(--disp);font-size:17px;font-weight:500;color:var(--ink);line-height:1.3}
.dlg-p{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:9px 0 0;white-space:normal}
.dlg-l{display:block;font-size:11.5px;color:var(--ink-2);margin:14px 0 4px}
.dlg-i{font:inherit;font-size:13px;width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:3px;background:var(--surface);color:var(--ink)}
.dlg-i:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.dlg-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.dlg-b{font:inherit;font-weight:700;font-size:13px;border-radius:3px;padding:9px 18px;cursor:pointer}
.dlg-b.dlg-cancel{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.dlg-b.dlg-ok{background:var(--cobalt);color:#fff;border:0}
/* Rojo SOLO para lo destructivo: si todo botón de acción fuera rojo, ninguno avisaría de nada. */
.dlg-b.dlg-ok.peligro{background:var(--alert)}
.dlg-b:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}