/* ══════════════════════════════════════════════════════════════════════════
   comic.css · CAPA VISUAL "CÓMIC DE ACCIÓN" · MIDES / Mesa Técnica
   Oscuro cálido (espresso) · sin azul · contornos gruesos · sombras duras
   offset (sin glow) · medios tonos (halftone) · tipografía de cómic.

   REGLA DE ORO: SOLO capa visual. No toca JS, IDs, data-*, clases del HTML,
   estructura del DOM ni textos. Se enlaza DESPUÉS del <style> propio de cada
   página, así gana la cascada. Remapea el vocabulario de tokens de la app
   (:root) y sobrescribe los componentes reales al look cómic.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · REMAPEO DE TOKENS ────────────────────────────────────────────────
   Al redefinir las custom properties después del <style> de la página, se
   recolorea casi todo lo que usa var(). */
:root{
  /* superficies */
  --void:#221B13;  --base:#1E160E;  --raise:#241B12;  --alto:#31251A;
  --edge:#4a3a28;  --edge2:var(--trazo);  --on-acc:#140D06;           /* edge2 = contorno (sigue a --trazo) */
  /* ── TOKENS DE MODO (permiten paletas CLARAS sin tocar el HTML) ──────────
     --trazo    contorno de paneles/campos sobre el fondo de la app
     --tinta    color del texto principal de los componentes
     --punto    color de los puntos del halftone del body
     --on-acc   etiqueta SOBRE el color de acento (tinta en oscuro, crema si el acento es oscuro)
     --on-brillo etiqueta SOBRE rellenos BRILLANTES (verde/amarillo/lima): SIEMPRE tinta oscura
     --acc-txt  acento usado como TEXTO sobre una superficie
     --grito    amarillo de las onomatopeyas sobre superficie                              */
  --trazo:#F7EFDF; --tinta:#EFE6D3; --punto:rgba(247,239,223,.055);
  --on-brillo:#140D06; --acc-txt:var(--cyan-hi); --grito:#FFC93C;
  /* selector de paletas (comic-tema.js): superficie del panel flotante */
  --comic-panel:#241B12; --comic-sw:#31251A;
  /* texto */
  --txt:var(--tinta);   --dim:#BBAF98;   --faint:#A79880;
  /* acento (tangerina, reemplaza el azul/cyan) */
  --cyan:#FA5A22;  --cyan-hi:#FF7038;  --cyan-dim:#c23d10;
  --cyan-bg:#2a1c10;
  /* acento jade (rescate) → tangerina/ok */
  --jade:#FA5A22;  --jade-hi:#FF7038;  --jade-bg:#2a1c10;  --jade-ed:#7a3a1a;
  /* semánticos (separados del acento) */
  --err:#EE4B2B;   --err-bg:#2a1510;  --err-ed:#7a2a1a;
  --warn:#FFC93C;  --warn-bg:#2a2109; --warn-ed:#7a5f1a;
  --ok:#38B26F;    --ok-bg:#0f2418;   --ok-ed:#1e5a3c;   --ok-tx:#38B26F;
  --nv:#BBAF98;    --nv-bg:#241B12;   --nv-ed:#4a3a28;
  /* radios */
  --r:14px; --r2:11px;
  /* tipografía */
  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --disp:'Bangers',var(--ui);
  --sfx:'Bungee',var(--ui);
  /* sombras: duras offset, NADA de blur/glow */
  --sombra:3px 3px 0 #000;
  --sombra2:8px 8px 0 #000;
  --sh:5px 5px 0 #000; --sh-sm:3px 3px 0 #000; --sh-lg:8px 8px 0 #000;
}

/* ── 2 · FONDO ESPRESSO + HALFTONE ────────────────────────────────────────
   Sobrescribe el gradiente de brillo azul del fondo anterior. */
body{
  background-color:var(--void)!important;
  background-image:radial-gradient(var(--punto) 1.4px,transparent 1.5px)!important;
  background-size:15px 15px!important;
  background-attachment:fixed!important;
  color:var(--txt);
  font-family:var(--ui);
}
html,body{overflow-x:hidden}
img,svg,table{max-width:100%}

/* ── 3 · @KEYFRAMES DE CÓMIC ──────────────────────────────────────────────*/
@keyframes comic-impact{
  0%{opacity:0;transform:scale(.6) rotate(-4deg)}
  60%{opacity:1;transform:scale(1.05) rotate(1deg)}
  100%{opacity:1;transform:none}
}
@keyframes comic-jitter{
  0%,100%{transform:rotate(-1.6deg)}
  50%{transform:rotate(1.6deg)}
}

/* ── 4 · TITULARES (Bangers, contorno + sombra dura) ──────────────────────
   Sin fijar font-size: se respeta el tamaño de cada página (evita romper
   barras compactas). clamp solo como tope superior de seguridad. */
h1{
  font-family:var(--disp)!important;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:.98;
  paint-order:stroke fill;
  -webkit-text-stroke:1.5px #000;
  text-shadow:3px 3px 0 #000;
  overflow-wrap:break-word;
}
/* h2: suelen ser subtítulos o frases → Archivo negrita, MÁS LEGIBLE (no Bangers).
   Los títulos cortos de sección que quieran el trazo cómic usan .h-comic. */
h2, h2.subtitulo, .subtitulo{
  font-family:var(--ui)!important;
  font-weight:800;
  letter-spacing:.005em;
  overflow-wrap:break-word;
}
.h-comic{
  font-family:var(--disp)!important;text-transform:uppercase;letter-spacing:.02em;
  line-height:.98;paint-order:stroke fill;-webkit-text-stroke:1.5px #000;text-shadow:3px 3px 0 #000;
}
/* Titulares realmente grandes: tope con clamp para que no desborden en 375px */
.hero h1, header h1, .caja h1{
  font-size:clamp(26px,7vw,44px)!important;
  -webkit-text-stroke:2px #000;
  text-shadow:4px 4px 0 #000;
}
h1 b, h1 em, h2 b, h2 em{color:var(--cyan);font-style:normal}

/* Datos / correlativos / cifras grandes → Space Mono */
.mono,.cifra,.cifraN,.cifraE,.trBig,.trNum,.tcNums,.big,.kpi .v,.num,
input.mono,input[inputmode="numeric"]{
  font-family:var(--mono)!important;
}

/* ── 5 · BOTONES CON PUÑETAZO ─────────────────────────────────────────────
   Base cómic para botones de acción (se excluyen los icon-only/segmentados).
   TIEMBLAN en hover (comic-jitter) y se HUNDEN en active. */
button:not(.rmX):not(.modo):not(.ojo):not(.flecha):not(.admFlecha):not(.dia-x):not(.admPendX):not(.rota):not(.admPendPick),
a.volver, .b-primary, .b-ok, .b-ghost, .b-exp, .b-del, .b-go, .b-ver,
.b-copiar, .filChip, .filLimpiar, .amb-btn, .amb-ok, .piVer, .admMasivo,
.admMesaChip, .b1, .b2{
  font-family:var(--ui)!important;
  font-weight:800!important;
  text-transform:uppercase;
  letter-spacing:.03em;
  border:3px solid #000!important;
  border-radius:11px!important;
  box-shadow:var(--sh)!important;
  transition:transform .1s,box-shadow .1s,background .12s!important;
}
button:not(.rmX):not(.modo):not(.ojo):not(.flecha):not(.admFlecha):not(.dia-x):not(.admPendX):not(.rota):not(.admPendPick):hover:not(:disabled),
a.volver:hover, .b-primary:hover:not(:disabled), .b-ok:hover:not(:disabled),
.b-ghost:hover:not(:disabled), .b-exp:hover, .b-del:hover, .b-go:hover:not(:disabled),
.b-ver:hover, .b-copiar:hover, .filChip:hover, .amb-btn:hover, .piVer:hover{
  animation:comic-jitter .2s ease-in-out infinite;
}
button:not(.rmX):not(.modo):not(.ojo):not(.flecha):not(.admFlecha):not(.dia-x):not(.admPendX):not(.rota):not(.admPendPick):active,
a.volver:active, .b-primary:active, .b-ok:active, .b-ghost:active,
.b-del:active, .b-go:active, .b-ver:active{
  animation:none!important;
  transform:translate(4px,4px)!important;
  box-shadow:0 0 0 #000!important;
}
button:disabled{opacity:.45;animation:none!important;transform:none!important}

/* Variantes de color (los degradados originales estaban hardcodeados) */
.b-primary, .b-go, .b-ver{background:var(--cyan)!important;color:var(--on-acc)!important;border-color:#000!important}
.b-primary:hover:not(:disabled), .b-go:hover:not(:disabled), .b-ver:hover{background:var(--cyan-hi)!important}
.b-ok, .amb-ok{background:var(--ok)!important;color:var(--on-brillo)!important;border-color:#000!important}
.b-ok:hover:not(:disabled), .amb-ok:hover{background:#45c47d!important}
.b-ghost, .filChip, .filLimpiar, .amb-btn, .piVer, a.volver, .b-copiar, .admMasivo{
  background:var(--alto)!important;color:var(--txt)!important;border:3px solid var(--edge2)!important}
.b-ghost:hover:not(:disabled), .filChip:hover, .filLimpiar:hover, .amb-btn:hover,
.piVer:hover, a.volver:hover, .b-copiar:hover, .admMasivo:hover{
  background:var(--lime,#D8F24B)!important;color:var(--on-brillo)!important;border-color:#000!important}
.b-del, .b-exp{background:var(--err)!important;color:var(--txt)!important;border-color:#000!important}
.b-del:hover, .b-exp:hover{background:#ff6347!important;color:var(--on-brillo)!important}

/* Chips de filtro / mesa activos → tangerina */
.filChip.filOn, .admMesaChip.admMesaOn{
  background:var(--cyan)!important;color:var(--on-acc)!important;border:3px solid #000!important}
.filChip.filOn b, .admMesaChip.admMesaOn b{color:var(--on-acc)!important;background:rgba(0,0,0,.15)!important}

/* ── 6 · CAMPOS (input / select / textarea) ───────────────────────────────*/
input, select, textarea, .dropzone, .rmBuscar input{
  background:var(--void)!important;
  color:var(--txt)!important;
  border:3px solid var(--edge2)!important;
  border-radius:9px!important;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.35)!important;
  font-family:var(--ui);
}
input:focus, select:focus, textarea:focus, .rmBuscar input:focus{
  outline:none!important;
  border-color:var(--cyan)!important;
  box-shadow:var(--sh-sm)!important;
  transform:translate(-1px,-1px);
  background:var(--alto)!important;
}
input.mono, input[inputmode="numeric"], input[readonly]{color:var(--acc-txt)!important}
input::placeholder{color:var(--faint)!important}
.dropzone{border-style:dashed!important;box-shadow:none!important}
.dropzone:hover, .dropzone.over{border-color:var(--cyan)!important;background:var(--alto)!important;color:var(--acc-txt)!important}
.dropzone.ok{border-style:solid!important;border-color:var(--ok)!important;background:var(--ok-bg)!important;color:var(--ok-tx)!important}

/* ── 7 · PANELES / TARJETAS ───────────────────────────────────────────────*/
.panel, .card, .grupo, .actaBox, .hero, .codigoCard, .caja > .panel,
.box, .tabCard, .kpi, .consola, .tablero, .tiraCaja, .depGrupo, .cadWrap,
.admBox, .admGrupo, .admPendientes, .stream, .tira, .rmLeido, .rmActual{
  border:3px solid var(--edge2)!important;
  border-radius:14px!important;
  box-shadow:var(--sh)!important;
  background:var(--base)!important;
  background-image:none!important;   /* quita filos de luz con gradiente */
}
.card:hover, .tabCard:hover, .kpi:hover{
  transform:translate(-3px,-4px) rotate(-.6deg);
  box-shadow:var(--sh-lg)!important;
}
/* KPI grande en tangerina */
.kpi .v, .cifra, .cifraN{color:var(--cyan)!important;-webkit-text-stroke:1px #000}

/* ── 8 · PILLS / BADGES / ESTADOS ─────────────────────────────────────────*/
.pill, .badge, .tag, .trChip, .tcTag, .a-ok, .a-er, .a-nv, .a-av,
.m-ok, .m-err, .m-warn, .m-info, .m-mov, .m-fij, .syncOk, .syncMal{
  font-family:var(--ui)!important;
  font-weight:800!important;
  text-transform:uppercase;
  letter-spacing:.02em;
  border:3px solid #000!important;
  border-radius:8px!important;
  box-shadow:var(--sh-sm)!important;
}
.p-ok, .a-ok, .m-ok, .n-ok, .c-ok, .e-ok, .syncOk{background:var(--ok)!important;color:var(--on-brillo)!important}
.p-err, .a-er, .m-err, .n-err, .c-err, .e-err, .syncMal{background:var(--err)!important;color:var(--on-brillo)!important}
.m-warn, .p-warn{background:var(--warn)!important;color:var(--on-brillo)!important}
.p-cor, .a-av, .m-info, .m-mov, .badge, .p-nv, .a-nv{background:var(--cyan)!important;color:var(--on-acc)!important}

/* ── 9 · PESTAÑAS / NAV / SEGMENTADOS ─────────────────────────────────────*/
.modos{background:var(--void)!important;border:3px solid var(--edge2)!important;border-radius:11px!important;box-shadow:var(--sh-sm)!important}
.modo{font-family:var(--ui)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.02em;color:var(--dim)!important;border-radius:7px!important}
.modo.activo{background:var(--cyan)!important;color:var(--on-acc)!important;box-shadow:none!important}
.tabCard.tabActiva, .tabActiva{border-color:var(--cyan)!important;box-shadow:var(--sh)!important}
.tabCard.tabActiva .tcNom, .tabActiva .tcNom{color:var(--acc-txt)!important}
.tabCard::before{width:5px!important}
.mtSel select{border:3px solid var(--edge2)!important}
/* barra superior / topbar cálida */
.topbar, .navSup, .barra, .admBar{background:var(--base)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:3px solid var(--edge2)!important}
.topbar::after{display:none!important}

/* ── 10 · MODALES (entran con comic-impact) ───────────────────────────────*/
.rmOverlay{background:rgba(23,18,13,.82)!important}
.rmBox{
  background:var(--base)!important;
  border:3px solid var(--edge2)!important;
  border-radius:14px!important;
  box-shadow:var(--sh-lg)!important;
  animation:comic-impact .32s cubic-bezier(.2,.8,.3,1.3) both;
}
.rmHd{border-bottom:3px solid var(--edge)!important;font-weight:800!important;text-transform:uppercase}
.rmX{border:0!important;box-shadow:none!important;background:none!important}
.rmX:hover{background:var(--alto)!important;color:var(--txt)!important}

/* ── 11 · TOGGLES / CHECKBOX ──────────────────────────────────────────────*/
.row-toggle input, input[type="checkbox"], input[type="radio"]{
  accent-color:var(--cyan)!important;
  width:auto!important;
  min-height:auto!important;
  box-shadow:none!important;
  border-width:2px!important;
}

/* ── 12 · TABLAS ──────────────────────────────────────────────────────────*/
table{border-collapse:collapse}
.tablaEnv th, table th{font-family:var(--ui)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.02em;color:var(--txt)!important}
.tablaEnv td, table td{border-bottom:2px solid var(--alto)!important;font-variant-numeric:tabular-nums}
.tablaEnv tr:hover td{background:var(--alto)!important}

/* ── 13 · FOCO ACCESIBLE ──────────────────────────────────────────────────*/
:focus-visible{outline:3px solid var(--cyan)!important;outline-offset:2px!important}

/* ── 14 · RESPONSIVE / TÁCTIL ─────────────────────────────────────────────*/
@media (max-width:640px){
  button:not(.rmX):not(.modo):not(.ojo):not(.flecha):not(.admFlecha):not(.dia-x):not(.admPendX):not(.rota),
  a.volver, .b-primary, .b-ok, .b-ghost, .b-del, .b-go, .b-ver{min-height:44px}
  input, select, textarea{min-height:44px}
  .hero h1, header h1, .caja h1{font-size:clamp(24px,9vw,34px)!important}
}

/* ── 15 · MOVIMIENTO REDUCIDO ─────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rmBox{animation:none!important}
}

/* ── Onomatopeyas cómic (SOLO CSS decorativo · sin tocar lógica ni JS) ─────────
   Aparecen donde la app ya muestra algo: aviso de guardado, acuses de trabajo y
   estados vacíos. Contenido generado por ::before; no altera el DOM ni funciones. */
.vacio{position:relative}
.vacio::before{
  content:"¡NADA POR AQUÍ… TODAVÍA!";
  display:block;font-family:'Bangers',system-ui,sans-serif;text-transform:uppercase;
  font-size:clamp(17px,3.5vw,23px);line-height:1;letter-spacing:.02em;color:var(--grito);
  -webkit-text-stroke:1.1px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000;
  margin-bottom:9px;
}
.saved::before{
  content:"¡LISTO! ";font-family:'Bangers',system-ui,sans-serif;letter-spacing:.02em;
  color:var(--grito);-webkit-text-stroke:.5px #000;paint-order:stroke fill;text-shadow:1px 1px 0 #000;
  font-size:17px;margin-right:6px;
}
.acuse .acuseTxt::before{
  content:"¡LISTO! ";font-family:'Bangers',system-ui,sans-serif;letter-spacing:.02em;display:inline;
  color:var(--grito);-webkit-text-stroke:.5px #000;paint-order:stroke fill;text-shadow:1px 1px 0 #000;
  font-size:16px;margin-right:6px;
}
.acuse.a-err .acuseTxt::before{content:"¡UPS! ";color:#EE4B2B}
.acuse.a-avi .acuseTxt::before{content:"¡OJO! ";color:var(--grito)}


/* ── PALETAS CÓMIC (elegibles, contraste calibrado) · :root[data-comic-tema] · comic-tema.js las conmuta ── */
:root[data-comic-tema="tangerina"]{
  --void:#221B13;--base:#2F2419;--raise:#2F2419;--alto:#3D3122;
  --cyan:#FA5A22;--cyan-hi:#FF7A45;--cyan-dim:#C23D10;--cyan-bg:#2A1C10;
  --jade:#FA5A22;--jade-hi:#FF7A45;--jade-bg:#2A1C10;
}
:root[data-comic-tema="chicle"]{
  --void:#241620;--base:#32202B;--raise:#32202B;--alto:#412B39;
  --cyan:#FF4C93;--cyan-hi:#FF74AC;--cyan-dim:#C41F63;--cyan-bg:#2A1420;
  --jade:#FF4C93;--jade-hi:#FF74AC;--jade-bg:#2A1420;
}
:root[data-comic-tema="uva"]{
  --void:#1C182A;--base:#282141;--raise:#282141;--alto:#362C55;
  --cyan:#B074FF;--cyan-hi:#C594FF;--cyan-dim:#7B36D6;--cyan-bg:#231A34;
  --jade:#B074FF;--jade-hi:#C594FF;--jade-bg:#231A34;
}
:root[data-comic-tema="sakura"]{
  --void:#241922;--base:#322330;--raise:#322330;--alto:#412E3D;
  --cyan:#FF8FBF;--cyan-hi:#FFA9CD;--cyan-dim:#D64F8E;--cyan-bg:#2A1A24;
  --jade:#FF8FBF;--jade-hi:#FFA9CD;--jade-bg:#2A1A24;
}
:root[data-comic-tema="menta"]{
  --void:#16281F;--base:#1F3329;--raise:#1F3329;--alto:#2A4234;
  --cyan:#2BC7A0;--cyan-hi:#4FE0BB;--cyan-dim:#0E9B77;--cyan-bg:#12241C;
  --jade:#2BC7A0;--jade-hi:#4FE0BB;--jade-bg:#12241C;
}
:root[data-comic-tema="fresa"]{
  --void:#271815;--base:#35221C;--raise:#35221C;--alto:#452E25;
  --cyan:#F24A3E;--cyan-hi:#FF6A5C;--cyan-dim:#C22318;--cyan-bg:#2A1512;
  --jade:#F24A3E;--jade-hi:#FF6A5C;--jade-bg:#2A1512;
}
:root[data-comic-tema="limon"]{
  --void:#222414;--base:#2E301C;--raise:#2E301C;--alto:#3C3E28;
  --cyan:#BCDE4E;--cyan-hi:#CFEE6E;--cyan-dim:#8FB80E;--cyan-bg:#24260F;
  --jade:#BCDE4E;--jade-hi:#CFEE6E;--jade-bg:#24260F;
}
:root[data-comic-tema="cielo"]{
  --void:#15232F;--base:#1F3140;--raise:#1F3140;--alto:#2A4152;
  --cyan:#4FB0FF;--cyan-hi:#7CC4FF;--cyan-dim:#1877CC;--cyan-bg:#12222E;
  --jade:#4FB0FF;--jade-hi:#7CC4FF;--jade-bg:#12222E;
}

/* ══ PALETAS CLARAS (fondo papel) ══════════════════════════════════════════
   Invierten los tokens de modo: --trazo pasa a TINTA (contorno negro), --tinta
   a texto oscuro y --punto a puntos oscuros. --on-acc se ajusta por paleta
   (tinta si el acento es claro, crema si es oscuro). Los rellenos BRILLANTES
   (verde/amarillo/lima) conservan su etiqueta oscura vía --on-brillo, que NO
   se redefine aquí. Ratios WCAG verificados: texto/fondo 11.3–11.6,
   atenuado/fondo 6.8–7.0, etiqueta/botón 4.8–5.6, acento/fondo 3.5–5.2.       */
:root[data-comic-tema="papel"]{
  --comic-panel:#FFFAF0;--comic-sw:#EDE5D3;
  --void:#F5EFE1;--base:#FFFAF0;--raise:#FFFAF0;--alto:#EDE5D3;
  --edge:#C9BFA9;--trazo:#140D06;--tinta:#38302A;--dim:#5A5148;--faint:#6E6558;
  --punto:rgba(20,13,6,.05);--on-acc:#F7EFDF;--grito:#9A5B00;
  --cyan:#BE3A09;--cyan-hi:#9E2E05;--cyan-dim:#8F2A04;--cyan-bg:#FBE3D6;--acc-txt:#9E2E05;
  --jade:#BE3A09;--jade-hi:#9E2E05;--jade-bg:#FBE3D6;--jade-ed:#8F2A04;
  --err-bg:#FBE0D8;--err-ed:#D9432A;--warn-bg:#FBF0CF;--warn-ed:#C08A12;
  --ok-bg:#DEF2E6;--ok-ed:#2E8F5A;--nv:#5A5148;--nv-bg:#EDE5D3;--nv-ed:#C9BFA9;
}
:root[data-comic-tema="nube"]{
  --comic-panel:#FFFFFF;--comic-sw:#E2E9F2;
  --void:#EEF2F7;--base:#FFFFFF;--raise:#FFFFFF;--alto:#E2E9F2;
  --edge:#BFCBDB;--trazo:#140D06;--tinta:#38302A;--dim:#5A5148;--faint:#6E6558;
  --punto:rgba(20,13,6,.05);--on-acc:#FFF8EE;--grito:#9A5B00;
  --cyan:#1A63BE;--cyan-hi:#14539F;--cyan-dim:#0F406F;--cyan-bg:#DCE8F7;--acc-txt:#1A63BE;
  --jade:#1A63BE;--jade-hi:#14539F;--jade-bg:#DCE8F7;--jade-ed:#0F406F;
  --err-bg:#FBE0D8;--err-ed:#D9432A;--warn-bg:#FBF0CF;--warn-ed:#C08A12;
  --ok-bg:#DEF2E6;--ok-ed:#2E8F5A;--nv:#5A5148;--nv-bg:#E2E9F2;--nv-ed:#BFCBDB;
}
:root[data-comic-tema="rosa"]{
  --comic-panel:#FFF8FB;--comic-sw:#F3E0E9;
  --void:#FBEFF4;--base:#FFF8FB;--raise:#FFF8FB;--alto:#F3E0E9;
  --edge:#DDBFCE;--trazo:#140D06;--tinta:#38302A;--dim:#5A5148;--faint:#6E6558;
  --punto:rgba(20,13,6,.05);--on-acc:#FFF8EE;--grito:#9A5B00;
  --cyan:#C43070;--cyan-hi:#A32458;--cyan-dim:#7E1B43;--cyan-bg:#F8DCE8;--acc-txt:#C43070;
  --jade:#C43070;--jade-hi:#A32458;--jade-bg:#F8DCE8;--jade-ed:#7E1B43;
  --err-bg:#FBE0D8;--err-ed:#D9432A;--warn-bg:#FBF0CF;--warn-ed:#C08A12;
  --ok-bg:#DEF2E6;--ok-ed:#2E8F5A;--nv:#5A5148;--nv-bg:#F3E0E9;--nv-ed:#DDBFCE;
}
:root[data-comic-tema="menta-clara"]{
  --comic-panel:#FAFFFC;--comic-sw:#D9EBE1;
  --void:#EAF5EF;--base:#FAFFFC;--raise:#FAFFFC;--alto:#D9EBE1;
  --edge:#B7D3C4;--trazo:#140D06;--tinta:#38302A;--dim:#5A5148;--faint:#6E6558;
  --punto:rgba(20,13,6,.05);--on-acc:#FFF8EE;--grito:#9A5B00;
  --cyan:#0E7A55;--cyan-hi:#0A6244;--cyan-dim:#084C35;--cyan-bg:#D7EFE3;--acc-txt:#0E7A55;
  --jade:#0E7A55;--jade-hi:#0A6244;--jade-bg:#D7EFE3;--jade-ed:#084C35;
  --err-bg:#FBE0D8;--err-ed:#D9432A;--warn-bg:#FBF0CF;--warn-ed:#C08A12;
  --ok-bg:#DEF2E6;--ok-ed:#2E8F5A;--nv:#5A5148;--nv-bg:#D9EBE1;--nv-ed:#B7D3C4;
}

/* Texto de estado en verde: sobre fondo claro necesita una versión oscura (el
   verde de relleno queda en ~2.4:1 sobre papel y sería incómodo de leer). */
:root[data-comic-tema="papel"],:root[data-comic-tema="nube"],
:root[data-comic-tema="rosa"],:root[data-comic-tema="menta-clara"]{ --ok-tx:#0B5637; }

/* ═══ Legibilidad en paletas claras ═══
   Los colores de estado son RELLENOS brillantes (pill ámbar, borde rojo). Usados
   como TEXTO sobre fondo claro resultan ilegibles (el ámbar queda en 1.5:1), así
   que cada uno tiene su versión de texto. En oscuro conservan el valor de siempre. */
:root{ --warn-tx:#FFC93C; --err-tx:#EE4B2B; }
:root[data-comic-tema="papel"],:root[data-comic-tema="nube"],
:root[data-comic-tema="rosa"],:root[data-comic-tema="menta-clara"]{
  --warn-tx:#7A5600; --err-tx:#B3220E;
}
.tiraPie .mono, .tiraPie b{ color:var(--warn-tx)!important; }
/* Asterisco de campo obligatorio: venía con un rosa fijo poco legible sobre claro. */
[style*="color:#f0a"]{ color:var(--err-tx)!important; }
/* Botón de ayuda: nunca tuvo fondo propio y quedaba casi invisible (1.1:1). */
#guia-btn{
  background:var(--alto)!important; color:var(--txt)!important;
  border:2px solid var(--trazo)!important; border-radius:9px!important;
}
/* Chip "vivo" de la tira de correlativos: conservaba un azul marino fijo del
   diseño anterior, así que en las paletas claras el número quedaba en 2.2:1.
   Pasa a usar el fondo suave del acento en ambos modos. */
.tira .t.viva, .t.viva{
  background:var(--cyan-bg)!important;
  color:var(--acc-txt)!important;
  border-color:var(--cyan)!important;
}

/* ═══ Cajas de estado: texto legible en las paletas claras ═══
   Estas cajas (avisos de revisión, notas de diferencia, alertas del PDF) traen el
   color de texto del tema oscuro escrito a mano en el HTML (#F7C877, #FF9BA6…),
   mientras su fondo sí sigue la paleta. En claro eso dejaba textos a 1.37:1, casi
   invisibles. Se reencaminan a los tokens de texto, que ya existen por paleta. */
.caja.c-avi, .alertaPDF.apAvi, .diff-note, .m-warn-txt{
  background:var(--warn-bg)!important; color:var(--warn-tx)!important;
  border-left:4px solid var(--warn)!important;
}
.caja.c-err, .alertaPDF.apErr, .msg.m-err, #revisionCor.apErr{
  background:var(--err-bg)!important; color:var(--err-tx)!important;
  border-left:4px solid var(--err)!important;
}
.caja.c-ok, #revisionCor.apOk, .msg.m-ok{
  background:var(--ok-bg)!important; color:var(--ok-tx)!important;
  border-left:4px solid var(--ok)!important;
}
#ambiguoCor .amb-tit{ color:var(--warn-tx)!important; }
#motivoOblig.obligatorio{ color:var(--err-tx)!important; }
/* El fondo de estas cajas ya viene de --*-bg; el borde izquierdo mantiene el color
   pleno para que el estado se siga leyendo de un vistazo. */

/* ═══ Barra superior en teléfono ═══
   El bloque «quién revisa / código de carga» no envolvía y quedaba fuera de la
   pantalla (a 396px de la izquierda en un ancho de 375): como el documento lleva
   overflow-x:hidden, el campo era sencillamente inalcanzable. Se deja envolver y
   se permite que sus controles encojan. */
@media (max-width:640px){
  .topbar{flex-wrap:wrap!important;row-gap:0!important}
  .marca{flex:1 1 100%!important;min-width:0!important}
  .quien{
    display:flex!important;flex-wrap:wrap!important;align-items:center;gap:8px!important;
    width:100%!important;margin-left:0!important;padding-bottom:10px!important;
  }
  .quien label{flex:0 0 auto}
  .quien select,.quien input{flex:1 1 150px!important;min-width:0!important;width:auto!important}
}

/* Pastillas de estado en paletas claras: con el color pleno de fondo y tinta
   encima quedaban en 3.5:1. Sobre claro se usa la variante oscura del semántico
   con texto crema, que mantiene la pastilla sólida y sube el contraste. */
:root[data-comic-tema="papel"] .p-err, :root[data-comic-tema="nube"] .p-err,
:root[data-comic-tema="rosa"] .p-err, :root[data-comic-tema="menta-clara"] .p-err,
:root[data-comic-tema="papel"] .a-er, :root[data-comic-tema="nube"] .a-er,
:root[data-comic-tema="rosa"] .a-er, :root[data-comic-tema="menta-clara"] .a-er,
:root[data-comic-tema="papel"] .m-err, :root[data-comic-tema="nube"] .m-err,
:root[data-comic-tema="rosa"] .m-err, :root[data-comic-tema="menta-clara"] .m-err,
:root[data-comic-tema="papel"] .n-err, :root[data-comic-tema="nube"] .n-err,
:root[data-comic-tema="rosa"] .n-err, :root[data-comic-tema="menta-clara"] .n-err,
:root[data-comic-tema="papel"] .e-err, :root[data-comic-tema="nube"] .e-err,
:root[data-comic-tema="rosa"] .e-err, :root[data-comic-tema="menta-clara"] .e-err,
:root[data-comic-tema="papel"] .syncMal, :root[data-comic-tema="nube"] .syncMal,
:root[data-comic-tema="rosa"] .syncMal, :root[data-comic-tema="menta-clara"] .syncMal{
  background:var(--err-tx)!important; color:#F7EFDF!important;
}
:root[data-comic-tema="papel"] .m-warn, :root[data-comic-tema="nube"] .m-warn,
:root[data-comic-tema="rosa"] .m-warn, :root[data-comic-tema="menta-clara"] .m-warn,
:root[data-comic-tema="papel"] .p-warn, :root[data-comic-tema="nube"] .p-warn,
:root[data-comic-tema="rosa"] .p-warn, :root[data-comic-tema="menta-clara"] .p-warn{
  background:var(--warn-tx)!important; color:#F7EFDF!important;
}

/* ── ENLACES ──────────────────────────────────────────────────────────────
   No había NINGUNA regla para <a> en toda la app, así que caían al azul por
   omisión del navegador (#0000EE, y #551A8B una vez visitados). Sobre los
   paneles oscuros eso da 1.42:1 en «cielo» y 1.61:1 en «tangerina»: ilegible.
   Medido en las trece paletas, fallaba en NUEVE — todas las oscuras, que son
   las que trae el sistema de fábrica.

   Se usa --grito, el acento que cada paleta ya trae calibrado: 5.19:1 en el
   peor caso, legible en las trece. No se usa --tinta, que daría más contraste
   pero dejaría el enlace idéntico al texto y nadie sabría que se puede tocar.

   Y va SUBRAYADO a propósito: el color no puede ser lo único que distingue un
   enlace, porque quien no distingue ese matiz se queda sin la pista. */
a{ color:var(--grito); text-decoration:underline; text-underline-offset:2px;
   text-decoration-thickness:1px; }
/* :visited hay que declararlo aparte: la hoja del navegador lo pinta con su
   propio morado y gana a la regla de arriba si no se dice nada. */
a:visited{ color:var(--grito) }
a:hover,a:focus{ text-decoration-thickness:2px }
a:focus-visible{ outline:2px solid var(--grito); outline-offset:2px; border-radius:3px }

/* ══════════ MEDALLÓN · base común ══════════
   El avatar 320×320 entero, recortado a disco. Adorno puro:
   ni foco, ni clic, ni lectura por lector de pantalla.
   HTML tipo: <img class="medallon medallon--m medallon--pin"
                   src="./avatares/25.webp" alt="" aria-hidden="true"> */
.medallon{
  display:inline-block; border-radius:50%;
  object-fit:cover; object-position:center top; /* cabeza grande arriba: es lo que se ve */
  pointer-events:none; user-select:none;
  flex:none;
}
/* ancla del pin: se añade esta clase al panel/tarjeta que lo recibe
   (varias tarjetas ya son position:relative; esta clase lo garantiza) */
.tiene-medallon{position:relative;}

/* ── Tallas (regla aprobada: S=28/40 · M=72/56 móvil · L=128) ── */
.medallon--s  {width:28px;  height:28px;}   /* títulos y pestañas */
.medallon--s40{width:40px;  height:40px;}   /* solo si la caja de icono existente mide ≥40 */
.medallon--m  {width:72px;  height:72px;}   /* pin de tarjeta */
.medallon--l  {width:128px; height:128px;}  /* testigo de estado vacío */
@media (max-width:640px){ .medallon--m{width:56px; height:56px;} }

/* ── Puestos ── */
/* B · pin: esquina superior derecha de la tarjeta, ligeramente girado */
.medallon--pin{
  position:absolute; top:-16px; right:-12px; z-index:2;
  transform:rotate(6deg);
}
@media (max-width:640px){ .medallon--pin{top:-12px; right:-8px;} }
/* D · testigo: centrado dentro del estado vacío, sin empujar el texto */
.medallon--testigo{display:block; margin:0 auto 12px;}
/* E · rótulo: sustituye al icono existente de pestaña o h2.
   El margen negativo absorbe la diferencia con la caja de 17–19 px
   para NO crecer la fila (regla: no ocupa espacio nuevo). */
.medallon--rotulo{vertical-align:middle; margin:-6px 0;}

/* ── Higiene común ── */
@media print{ .medallon{display:none !important;} }
@media (prefers-reduced-motion:reduce){ .medallon{animation:none !important; transition:none !important;} }

/* ══════════ MEDALLÓN · vestido CÓMIC ══════════ */
/* calcomanía: contorno crema 3px + sombra dura, como .card/.paso del cómic */
.medallon{
  border:3px solid var(--trazo, #F7EFDF);
  box-shadow:5px 5px 0 #000;
  background:#fff; /* por si el webp trae borde translúcido */
}
.medallon--s,.medallon--s40{border-width:2px; box-shadow:3px 3px 0 #000;}
/* entrada UNA vez, sin bucles (reusa la curva del sistema si existe) */
.medallon--pin,.medallon--testigo{animation:medallon-entra .5s cubic-bezier(.2,.9,.3,1.2) backwards;}
@keyframes medallon-entra{
  0%{opacity:0; transform:scale(.6) rotate(-6deg);}
  100%{opacity:1;}
}
.medallon--pin{animation-name:medallon-entra-pin;}
@keyframes medallon-entra-pin{
  0%{opacity:0; transform:scale(.6) rotate(-4deg);}
  100%{opacity:1; transform:rotate(6deg);}
}
/* hover una vez está bien: leve levantón junto con la tarjeta */
.tiene-medallon:hover .medallon--pin{transform:rotate(8deg) translateY(-2px); transition:transform .18s;}