/* ══════════════════════════════════════════════════════════════════════
   CUBIERTO · Sistema de diseño — territorio "Boleta"
   Manual de marca v1.0 (26·07·2026)

   Reglas duras del manual, y no se negocian en ninguna vista:
     · Radio de esquina: 0     · Sombra: ninguna     · Degradado: ninguno
     · Grilla base de 4 px. Todo se alinea o no entra.
     · Sin líneas verticales en tablas. La hairline separa filas.
     · La doble regla cierra todo total: es el gesto que origina el logotipo.
     · El color solo aparece cuando significa algo. Nunca decora.
     · Toda cifra en monoespaciada, alineada a la derecha.

   Si una vista necesita un estilo que no está acá, se agrega acá — no
   con style= en el HTML. Ese fue exactamente el problema que se arregló:
   había 1.133 declaraciones inline y 21 tamaños de letra distintos.
   ══════════════════════════════════════════════════════════════════════ */

@import url("/assets/fonts.css");

/* ── Tokens ──────────────────────────────────────────────────────── */
:root, :root[data-theme="light"] {
  color-scheme: light;

  /* Neutros de papel */
  --papel:    #f4f3ef;
  --papel-2:  #eceae4;   /* zebra de filas */
  --linea:    #d8d6cd;
  --linea-f:  #b8b5a9;   /* línea fuerte */
  --tinta-d:  #6d6b64;   /* tinta débil */
  --tinta:    #16161a;

  /* Acentos de marca — máx. 5 % de la superficie */
  --azul:     #1d3557;   /* acción, enlace, cifra destacada */
  --azul-ink: #f4f3ef;
  --azul-bg:  #e4e8ef;
  --rojo:     #97302a;   /* descuadre, merma, anulación, error */
  --rojo-bg:  #f2e4e2;

  /* Funcionales — solo interfaz, nunca marca */
  --cuadra:   #33604a;
  --cuadra-bg:#e2ece6;
  --revisar:  #8a6a1f;
  --revisar-bg:#f4ecd7;

  /* Grilla base de 4 px */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  --ui:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --tit:  Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --num:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Nombres del sistema anterior. Siguen vivos porque quedan estilos
     inline que los invocan; sin esto se resuelven a nada y el texto
     desaparece —un enlace blanco sobre fondo claro—. Se van cuando se
     limpie el último style= a mano. */
  --acc: var(--azul);      --acc-ink: var(--azul-ink);  --acc-soft: var(--azul-bg);
  --mut: var(--tinta-d);   --bg: var(--papel);          --card: var(--papel-2);
  --line: var(--linea);    --txt: var(--tinta);
  --bad: var(--rojo);      --bad-soft: var(--rojo-bg);
  --warn: var(--revisar);  --warn-soft: var(--revisar-bg);
  --ok: var(--cuadra);     --ok-soft: var(--cuadra-bg);
  --sombra: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papel:    #131316;
  --papel-2:  #1c1c20;
  --linea:    #33333a;
  --linea-f:  #4d4d56;
  --tinta-d:  #9a988f;
  --tinta:    #f0efe9;
  --azul:     #7d9dc9;
  --azul-ink: #10161f;
  --azul-bg:  #1b2430;
  --rojo:     #d4796f;
  --rojo-bg:  #2c1c1a;
  --cuadra:   #7fb094;
  --cuadra-bg:#17241d;
  --revisar:  #c8a45c;
  --revisar-bg:#282013;
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
::selection { background: var(--azul); color: var(--azul-ink); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* ── Tipografía ──────────────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--tit); font-weight: 600; font-size: 20px;
  line-height: 1.3; letter-spacing: 0; margin: 0;
}
h2, .h2 {
  font-family: var(--tit); font-weight: 600; font-size: 15px;
  line-height: 1.3; letter-spacing: .01em; margin: 0 0 var(--e3);
}
h3 {
  font-family: var(--tit); font-weight: 600; font-size: 13px;
  line-height: 1.4; margin: 0 0 var(--e2);
}
p { margin: 0 0 var(--e3); }
.sec {
  font-size: 13px; line-height: 1.5; color: var(--tinta-d);
}
.et {
  font-family: var(--num); font-size: 10px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em; color: var(--tinta-d);
}

/* Cifras: mono, tabular, derecha. El peso no lleva decimales. */
.num, td.num, .cifra {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 13px; text-align: right; white-space: nowrap;
}
.cifra-d {                       /* cifra destacada */
  font-family: var(--num); font-weight: 500; font-size: 28px;
  line-height: 1.2; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.neg { color: var(--rojo); }     /* negativo: signo menos real, en rojo */
.uni { color: var(--tinta-d); }  /* unidad o porcentaje, tras espacio fino */
.aus { color: var(--tinta-d); }  /* dato ausente: raya, nunca celda vacía */

/* ── Shell ───────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.barra {
  width: 224px; flex: 0 0 224px;
  background: var(--papel-2);
  border-right: 1px solid var(--linea);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: var(--e4) var(--e2) var(--e6);
}
.barra-marca { display: block; padding: var(--e1) var(--e2) var(--e5); text-decoration: none; }
.barra-marca:hover { text-decoration: none; }

.nav-grupo {
  font-family: var(--num); font-size: 10px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--tinta-d);
  padding: 0 var(--e2); margin: var(--e5) 0 var(--e2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--e3);
  padding: 7px var(--e2); margin-bottom: 1px;
  color: var(--tinta); text-decoration: none; font-size: 13.5px;
  border-left: 2px solid transparent;
}
.nav-item:hover { background: var(--papel); text-decoration: none; }
.nav-item.on {
  background: var(--papel); border-left-color: var(--azul);
  color: var(--azul); font-weight: 600;
}
.nav-item .ico { flex: 0 0 16px; width: 16px; height: 16px; opacity: .75; }
.nav-item.on .ico { opacity: 1; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e6);
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 40;
}
.topbar .sep { flex: 1; }
.topbar-dato { font-size: 12.5px; color: var(--tinta-d); }
.topbar-dato b { color: var(--tinta); font-weight: 600; }
.hamburguesa { display: none; }

main { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--e6) var(--e6) var(--e10); }

/* ── Cabecera de pantalla ────────────────────────────────────────── */
.cabecera {
  display: flex; align-items: flex-start; gap: var(--e4);
  flex-wrap: wrap; margin-bottom: var(--e5);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--linea);
}
.cabecera .sep { flex: 1; }
.cabecera-txt { min-width: 0; }
.cabecera .sec { margin-top: 2px; }
.acciones-cab { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

.migas { font-size: 12.5px; color: var(--tinta-d); margin-bottom: var(--e2); }
.migas a { color: var(--tinta-d); }
.migas a:hover { color: var(--azul); }

/* ── Bloques ─────────────────────────────────────────────────────── */
.bloque, .card {
  background: var(--papel-2);
  border: 1px solid var(--linea);
  margin-bottom: var(--e5);
  padding: var(--e4);
}
/* Cuando el bloque trae cabecera o cuerpo propios, el relleno lo ponen
   ellos. Así el markup viejo (.card suelta) y el nuevo conviven sin que
   nadie tenga que tocar 83 archivos el mismo día. */
.bloque:has(> .bloque-cab), .bloque:has(> .bloque-cuerpo),
.bloque:has(> table), .card:has(> table) { padding: 0; }
.bloque-cab {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
}
.bloque-cab .sep { flex: 1; }
.bloque-cab h2 { margin: 0; }
.bloque-cuerpo { padding: var(--e4); }
.bloque-pie {
  padding: var(--e2) var(--e4); border-top: 1px solid var(--linea);
  font-size: 12.5px; color: var(--tinta-d);
}

/* ── Botones — el botón es una orden: verbo primero ──────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--ui); font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 10px var(--e4); min-height: 38px;
  background: var(--azul); color: var(--azul-ink);
  border: 1px solid var(--azul); border-radius: 0;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #16283f; border-color: #16283f; text-decoration: none; }
:root[data-theme="dark"] .btn:hover { background: #9ab5d8; border-color: #9ab5d8; }
.btn:active { transform: none; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn .ico { width: 15px; height: 15px; }

.btn-sec {
  background: transparent; color: var(--tinta); border-color: var(--linea-f);
}
.btn-sec:hover { background: var(--papel); border-color: var(--tinta); }

.btn-peligro { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.btn-peligro:hover { background: var(--rojo); color: var(--papel); }

.btn-plano {
  background: transparent; border-color: transparent; color: var(--azul);
  padding: var(--e1) var(--e2); min-height: 0; font-weight: 500; font-size: 13px;
}
.btn-plano:hover { background: transparent; border-color: transparent; text-decoration: underline; }
.btn-plano.peligro { color: var(--rojo); }

.btn-chico { font-size: 12.5px; padding: 6px var(--e3); min-height: 32px; }

/* ── Tablas ──────────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; }

/* Se estila el elemento, no solo la clase: las 84 tablas del sistema ya
   existían sin clase y tienen que verse bien igual. */
table, table.tabla { width: 100%; border-collapse: collapse; background: var(--papel-2); border: 1px solid var(--linea); }
.card table, .bloque table { border: none; }
th, .tabla th {
  text-align: left; font-family: var(--num); font-weight: 400;
  font-size: 10px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--tinta-d); padding: var(--e2) var(--e4);
  border-bottom: 1px solid var(--linea-f); white-space: nowrap;
}
th.num, .tabla th.num { text-align: right; }
td, .tabla td { padding: 11px var(--e4); border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--papel); }
/* Las cifras van en monoespaciada aunque la vista no lo haya pedido. */
td.num, td.der, td[align="right"] { font-family: var(--num); font-variant-numeric: tabular-nums; text-align: right; }
.tabla .principal-col { font-weight: 500; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .acciones > * + * { margin-left: var(--e3); }

/* Zebra: solo en tablas de más de seis filas, nunca en color */
.tabla.zebra tbody tr:nth-child(even) { background: var(--papel); }
.tabla.zebra tbody tr:hover { background: var(--azul-bg); }

/* Doble regla: cierra toda suma */
.tabla tfoot td, .tabla tr.total td {
  border-top: 3px double var(--tinta);
  border-bottom: none;
  font-weight: 600; padding-top: var(--e3);
}
.doble-regla { border: none; border-top: 3px double var(--tinta); margin: var(--e3) 0; }
.corte { border: none; border-top: 1px dashed var(--linea-f); margin: var(--e5) 0; }

.vacio { padding: var(--e8) var(--e4); text-align: center; color: var(--tinta-d); font-size: 13px; }
.vacio strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: var(--e1); font-family: var(--tit); }

/* ── Estado: nunca solo con color ────────────────────────────────── */
.pill {
  display: inline-block; font-family: var(--num); font-size: 11px;
  padding: 2px var(--e2); border: 1px solid var(--linea-f);
  color: var(--tinta-d); background: transparent; white-space: nowrap;
}
.pill-ok      { color: var(--cuadra); border-color: var(--cuadra); background: var(--cuadra-bg); }
.pill-revisar { color: var(--revisar); border-color: var(--revisar); background: var(--revisar-bg); }
.pill-mal     { color: var(--rojo); border-color: var(--rojo); background: var(--rojo-bg); }
.pill-azul    { color: var(--azul); border-color: var(--azul); background: var(--azul-bg); }

.timbre {
  display: inline-block; font-family: var(--num); font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
  padding: var(--e1) var(--e2); border: 2px solid currentColor; color: var(--cuadra);
}
.timbre.mal { color: var(--rojo); }

.sello {
  font-family: var(--num); font-size: 11.5px; line-height: 1.5; color: var(--tinta-d);
}
.sello b { color: var(--tinta); font-weight: 500; }

/* ── Avisos ──────────────────────────────────────────────────────── */
.aviso {
  border: 1px solid var(--linea-f); border-left: 3px solid var(--tinta-d);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
  background: var(--papel-2);
}
.aviso-ok  { border-left-color: var(--cuadra); background: var(--cuadra-bg); }
.aviso-mal { border-left-color: var(--rojo); background: var(--rojo-bg); color: var(--rojo); }
.aviso-mal b, .aviso-mal strong { color: var(--rojo); }
.aviso-revisar { border-left-color: var(--revisar); background: var(--revisar-bg); }
.aviso h3 { margin-bottom: var(--e1); }
.aviso p:last-child { margin-bottom: 0; }

/* ── Tiles de cifra ──────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0;
  border: 1px solid var(--linea); margin-bottom: var(--e5); background: var(--papel-2); }
.tile { padding: var(--e3) var(--e4); border-right: 1px solid var(--linea); }
.tile:last-child { border-right: none; }
.tile .et { display: block; margin-bottom: var(--e1); }
.tile .cifra-d { font-size: 24px; }
.tile .pie { font-size: 12px; color: var(--tinta-d); margin-top: 2px; }

/* ── Formularios ─────────────────────────────────────────────────── */
.campo { margin-bottom: var(--e4); }
.campo > label, label.campo-et {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--tinta); margin-bottom: var(--e1);
}
.campo .ayuda { font-size: 12.5px; color: var(--tinta-d); margin-top: var(--e1); }
.campo .ayuda-arriba { font-size: 12.5px; color: var(--tinta-d); margin: -2px 0 var(--e1); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"],
input[type="url"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: 9px var(--e3); min-height: 38px;
  font-family: var(--ui); font-size: 14px; line-height: 1.4;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea-f); border-radius: 0;
}
input[type="number"] { font-family: var(--num); text-align: right; }
textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
input::placeholder, textarea::placeholder { color: var(--tinta-d); opacity: .65; }
input[disabled], select[disabled], textarea[disabled] { background: var(--papel-2); color: var(--tinta-d); }

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.fila-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.check { display: flex; align-items: center; gap: var(--e2); font-size: 14px; }
.check input { width: auto; min-height: 0; margin: 0; }

.form-pie {
  display: flex; align-items: center; gap: var(--e3);
  padding-top: var(--e4); margin-top: var(--e4); border-top: 1px solid var(--linea);
}
.form-pie .sep { flex: 1; }

/* Barra de filtros de listado */
.filtros {
  display: flex; align-items: flex-end; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4); background: var(--papel-2);
  border: 1px solid var(--linea); border-bottom: none;
}
.filtros .campo { margin-bottom: 0; min-width: 150px; }
.filtros .sep { flex: 1; }
.filtros + .tabla-envoltura > .tabla,
.filtros + .tabla { border: 1px solid var(--linea); }

/* ── Combobox con buscador ───────────────────────────────────────── */
.sb { position: relative; }
.sb .sb-input { padding-right: var(--e6); }
.sb::after {
  content: ""; position: absolute; right: var(--e3); top: 50%; margin-top: -2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--tinta-d); pointer-events: none;
}
.sb select {
  display: none; position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  width: 100%; padding: var(--e1); max-height: 240px; overflow-y: auto;
  background: var(--papel-2); border: 1px solid var(--azul); margin-top: -1px;
}
.sb.open select { display: block; }
.sb.open::after { border-top: none; border-bottom: 5px solid var(--azul); }
.sb select option { padding: 7px var(--e2); font-size: 14px; cursor: pointer; }
.sb select option:checked { background: var(--azul-bg); color: var(--tinta); }
.sb select option.hidden { display: none; }

/* ── Diálogos ────────────────────────────────────────────────────── */
dialog {
  padding: 0; border: 1px solid var(--tinta); border-radius: 0;
  background: var(--papel-2); color: var(--tinta);
  max-width: 480px; width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(22,22,26,.6); }
.dlg-cab { padding: var(--e4) var(--e5) 0; }
.dlg-cab h2 { font-size: 17px; margin-bottom: var(--e2); }
.dlg-cuerpo { padding: 0 var(--e5) var(--e4); font-size: 14px; line-height: 1.6; }
.dlg-cuerpo .cifra { font-family: var(--num); font-weight: 500; }
.dlg-pie {
  display: flex; gap: var(--e2); justify-content: flex-end;
  padding: var(--e3) var(--e5) var(--e5);
}

/* ── Logotipo ────────────────────────────────────────────────────── */
.logo { display: inline-block; text-decoration: none; color: inherit; }
.logo:hover { text-decoration: none; }
.logo .palabra {
  display: block; font-family: var(--tit); font-weight: 600;
  text-transform: uppercase; letter-spacing: .055em;
  font-size: var(--logo-tam, 17px); line-height: 1; color: var(--tinta);
  /* El tracking deja aire después de la última letra y la regla se pasaba
     de la O. Se descuenta para que la marca cuadre, que es todo el chiste. */
  margin-right: -.055em;
}
/* La doble regla ES la marca. Nace y muere donde la palabra. */
.logo .reglas { display: block; margin-top: calc(var(--logo-tam, 17px) * .18); }
.logo .reglas i { display: block; background: var(--tinta); }
.logo .reglas i.gruesa { height: calc(var(--logo-tam, 17px) * .05); min-height: 2px; }
.logo .reglas i.fina   { height: 1px; margin-top: calc(var(--logo-tam, 17px) * .05); }
.logo .descriptor {
  display: block; font-family: var(--ui); font-size: 11px; font-weight: 400;
  letter-spacing: .02em; color: var(--tinta-d); margin-top: var(--e1);
  text-transform: none;
}
.logo.sobre-azul .palabra, .logo.sobre-azul .reglas i { color: var(--papel); background: var(--papel); }
.logo.sobre-azul .palabra { background: none; }

/* ══════════════════════════════════════════════════════════════════
   Traducción del markup anterior al sistema Boleta.

   Las vistas venían escritas contra un juego de clases distinto (.err,
   .muted, .row, .pill.acc, botones sin clase). En vez de reescribir 83
   archivos a mano y arriesgar el sistema entero en un solo golpe, acá se
   les da su significado nuevo. Los estilos inline sí se limpian, que era
   el problema de fondo.
   ══════════════════════════════════════════════════════════════════ */

button:not(.btn):not(.hamburguesa):not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--ui); font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 10px var(--e4); min-height: 38px;
  background: var(--azul); color: var(--azul-ink);
  border: 1px solid var(--azul); border-radius: 0; cursor: pointer;
}
button:not(.btn):not(.hamburguesa):not([class]):hover { background: #16283f; border-color: #16283f; }
:root[data-theme="dark"] button:not(.btn):not(.hamburguesa):not([class]):hover { background: #9ab5d8; border-color: #9ab5d8; }

label:not(.campo-et):not(.check) {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta); margin-bottom: var(--e1);
}

/* Mensajes: el error del sistema viejo pasa a ser un aviso de corrección. */
.err {
  border: 1px solid var(--rojo); border-left: 3px solid var(--rojo);
  background: var(--rojo-bg); color: var(--rojo);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
}
/* El "flash" de éxito venía como .card con el borde pintado a mano. */
.card[style*="--acc"], .card.ok-flash {
  background: var(--cuadra-bg); border-color: var(--cuadra); border-left: 3px solid var(--cuadra);
  color: var(--cuadra); padding: var(--e3) var(--e4); font-size: 14px;
}

.muted { color: var(--tinta-d); }
.acc   { color: var(--azul); }
.warn  { color: var(--revisar); }
.bad   { color: var(--rojo); }

.pill.acc  { color: var(--azul);    border-color: var(--azul);    background: var(--azul-bg); }
.pill.warn { color: var(--revisar); border-color: var(--revisar); background: var(--revisar-bg); }
.pill.bad  { color: var(--rojo);    border-color: var(--rojo);    background: var(--rojo-bg); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
@media (max-width: 980px) { .row { grid-template-columns: 1fr; } }

/* Clases que introdujo la migración al sacar los estilos inline. */
.fuerte { font-weight: 600; }
.hilera-ancha { gap: var(--e6); }
.angosto { max-width: 440px; }
.medio   { max-width: 600px; }

.acc-der { float: right; font-size: 13.5px; color: var(--azul); font-weight: 500; }
.acc-der:hover { text-decoration: underline; }

.ok-flash {
  background: var(--cuadra-bg); border: 1px solid var(--cuadra);
  border-left: 3px solid var(--cuadra); color: var(--cuadra);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
}
.revisar-flash {
  background: var(--revisar-bg); border: 1px solid var(--revisar);
  border-left: 3px solid var(--revisar); color: var(--revisar);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
}
.btn-revisar { background: var(--revisar); color: var(--papel); border-color: var(--revisar); }
:root[data-theme="dark"] .btn-revisar { color: #241d10; }

/* Una cifra destacada dentro de una tabla o tarjeta sigue siendo cifra. */
.cifra-d { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* Restos de la identidad anterior que ya no existen en Boleta. */
.brand .logo, .login-marca .logo { display: none; }

/* ── Pantalla de acceso ──────────────────────────────────────────── */
main.sin-sesion { max-width: none; padding: 0; }

.acceso { min-height: 100vh; display: grid; place-items: center; padding: var(--e6) var(--e4); }
.acceso-caja { width: 100%; max-width: 380px; }
.acceso-marca { margin-bottom: var(--e6); }
.acceso-pie {
  margin-top: var(--e4); font-size: 12.5px; color: var(--tinta-d);
  font-family: var(--tit); letter-spacing: .01em;
}
.btn-ancho { width: 100%; }

/* Contexto antes de entrar: se entra a un lugar concreto, no a una app. */
.acceso-contexto {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--linea); border-bottom: none; background: var(--papel-2);
}
.acceso-contexto div { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); }
.acceso-contexto div:nth-child(odd) { border-right: 1px solid var(--linea); }
.acceso-contexto .et { display: block; }
.acceso-contexto b { font-size: 13.5px; font-weight: 600; }

/* Teclado numérico: se usa con las manos mojadas. 46 px mínimo. */
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.teclado button {
  min-height: 52px; font-family: var(--num); font-size: 19px; font-weight: 500;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea-f);
  cursor: pointer;
}
.teclado button:hover { background: var(--papel-2); border-color: var(--tinta); }
.teclado button.ancho { grid-column: span 2; font-size: 13px; font-family: var(--ui); font-weight: 600; }
.pin-puntos {
  display: flex; gap: var(--e3); justify-content: center; align-items: center;
  min-height: 46px; margin-bottom: var(--e4); font-family: var(--num); font-size: 26px;
  letter-spacing: .3em; color: var(--tinta);
}

/* ── Utilidades mínimas. Deliberadamente pocas. ──────────────────── */
.der { text-align: right; }
.izq { text-align: left; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.mut { color: var(--tinta-d); }
.mal { color: var(--rojo); }
.ok { color: var(--cuadra); }
.en-linea { display: inline; }
.pila { display: flex; flex-direction: column; gap: var(--e2); }
.hilera { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.hilera .sep { flex: 1; }
.oculto { display: none; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Banda de impersonación ──────────────────────────────────────── */
.banda-soporte {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e5);
  background: var(--rojo); color: var(--papel);
  font-size: 13px; font-weight: 500;
}
.banda-soporte .sep { flex: 1; }
.banda-soporte a { color: var(--papel); border: 1px solid rgba(244,243,239,.5); padding: 3px var(--e3); text-decoration: none; }
.banda-soporte a:hover { background: rgba(244,243,239,.15); text-decoration: none; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .barra {
    position: fixed; z-index: 90; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .16s ease;
    border-right: 1px solid var(--tinta);
  }
  .shell.menu-abierto .barra { transform: none; }
  .velo { display: none; }
  .shell.menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(22,22,26,.5); }
  .hamburguesa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    background: transparent; border: 1px solid var(--linea-f); color: var(--tinta); cursor: pointer;
  }
  main { padding: var(--e4) var(--e4) var(--e8); }
  .fila, .fila-3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { border-bottom: 1px solid var(--linea); }
}

/* Manos mojadas, tablet, servicio. El manual pide 46 px de alto. */
@media (pointer: coarse) {
  .btn, input, select, textarea { min-height: 46px; }
  .btn-plano { min-height: 38px; }
  .nav-item { padding: 11px var(--e2); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media print {
  .barra, .topbar, .velo, .acciones-cab, .filtros, .banda-soporte { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .bloque, .tabla { border-color: #000; }
}