/* ══════════════════════════════════════════════════════════════════════════
   CÓMIC DE ACCIÓN · capa visual (NO toca lógica, IDs, data-*, DOM ni textos)
   Oscuro cálido espresso · tangerina/amarillo/rojo · contornos gruesos,
   sombras duras offset (sin glow/blur), halftone, tipografía con puñetazo.
   Remapea los tokens de :root de index.html y sobrescribe los componentes
   reales. Cargado en <head> DESPUÉS del <style> propio para ganar por orden.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────── Remapeo de tokens (mismo :root, gana el último) ───────── */
:root{
  --abismo:#221B13;
  --noche:#2F2419;
  --panel:#241B12;            /* antes rgba translúcida → ahora sólida */
  --panel-alto:#31251A;
  /* ── 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
     --velo     velo translúcido de dropzone / estado vacío
     --on-acc   etiqueta SOBRE el acento (tinta en oscuro, crema si el acento es oscuro)
     --grito    amarillo de las onomatopeyas sobre superficie
     Los rellenos BRILLANTES (lima/verde) mantienen su etiqueta --ink oscura.  */
  --trazo:#F7EFDF; --tinta:#F7EFDF; --punto:rgba(247,239,223,.055);
  --velo:rgba(0,0,0,.25); --on-acc:#120C05; --grito:#FFC93C;
  /* selector de paletas (comic-tema.js): superficie del panel flotante */
  --comic-panel:#241B12; --comic-sw:#31251A;

  --borde:var(--trazo);       /* contorno crema sobre oscuro (sigue a --trazo) */
  --borde-vivo:var(--trazo);
  --luz-alta:transparent;     /* mata los filos de luz cenital */

  --celeste:#FA5A22;          /* ACENTO LÍDER (tangerina) reemplaza el azul */
  --celeste-hondo:#c23d10;
  --celeste-humo:rgba(250,90,34,.14);
  --celeste-brillo:rgba(250,90,34,.45);
  --indigo:#9A5CD0;           /* uva: contraste puntual */

  --texto:#EFE6D3;
  --tenue:#BBAF98;
  --apagado:#A79880;

  --verde:#38B26F;  --verde-tx:#38B26F;
  --ambar:#FFC93C;
  --rojo:#EE4B2B;

  --serif:'Bangers',system-ui,sans-serif;                 /* titulares → trazo cómic */
  --sans:'Archivo',system-ui,-apple-system,Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,Consolas,monospace;

  /* Tokens cómic nuevos */
  --ink:#120C05;
  --cream:var(--trazo);       /* usado como CONTORNO (sigue a --trazo) */
  --tang:#FA5A22; --tang-h:#FF7038;
  --yellow:#FFC93C; --lime:#D8F24B; --grape:#9A5CD0;
  --sh:5px 5px 0 #000; --sh-sm:3px 3px 0 #000; --sh-lg:8px 8px 0 #000;
  --bdk:3px solid #000;        /* elemento brillante: contorno negro */
  --bdc:3px solid var(--cream);/* panel oscuro: contorno crema */
}

/* ───────── @keyframes 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)}}

/* ───────── Fondo espresso + halftone (crema .055, 15px) ───────── */
body{
  background-color:var(--abismo);
  background-image:radial-gradient(var(--punto) 1.4px,transparent 1.5px);
  background-size:15px 15px;
  background-attachment:fixed;
  font-variant-numeric:tabular-nums;
}
/* Neutraliza los focos de luz celestes del fondo anterior; deja el sello y el grano */
.luz-1,.luz-2,.luz-3{background:none !important;filter:none !important;}
.grano{opacity:.10;mix-blend-mode:normal;}
.sello{opacity:.035;}

/* ───────── Titulares (usaban var(--serif)) → trazo cómic Bangers ───────── */
.rail-name{
  font-weight:400 !important;letter-spacing:.02em;line-height:.95;
  color:var(--tinta);text-transform:uppercase;
  -webkit-text-stroke:1.6px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000;
}
.rail-name em{
  background:none !important;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--tang);color:var(--tang);
}
.stage-head h1{
  font-weight:400 !important;letter-spacing:.02em;line-height:.95;
  font-size:clamp(30px,7vw,44px);text-transform:uppercase;
  background:none !important;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--yellow);color:var(--yellow);
  -webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:4px 4px 0 #000;
}
.card h2{
  font-weight:400 !important;letter-spacing:.02em;line-height:1;
  font-size:clamp(21px,3vw,26px);text-transform:uppercase;color:var(--tinta);
  -webkit-text-stroke:1.8px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000;
}

/* Cejas / meta: legibles, sin brillo celeste (el color ya viene por token) */
.eyebrow{font-family:var(--sans);font-weight:800;letter-spacing:.14em;}
.card[data-clausula]::before{color:var(--tang);}

/* ───────── Riel / navegación de tipo (pestañas) ───────── */
.tab-tipo{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  border:2px solid transparent;color:var(--tenue);
}
.tab-tipo:hover{background:var(--panel-alto);color:var(--tinta);}
.tab-tipo.activa{
  background:var(--tang);color:var(--on-acc);border:var(--bdk);font-weight:800;
  box-shadow:var(--sh-sm);
}
.tab-tipo.activa svg{color:var(--on-acc);opacity:1;}
.tab-tipo.activa::before{display:none;}

.rail-note{border:var(--bdc);box-shadow:var(--sh-sm);border-radius:12px;background:var(--panel-alto);}
.rail-note svg{color:var(--tang);}

/* ───────── Paneles / tarjetas ───────── */
.card{
  background:var(--panel) !important;               /* sólido, sin radiales celestes */
  border:var(--bdc);border-radius:14px;
  box-shadow:var(--sh);
  transition:transform .18s var(--curva),box-shadow .18s var(--curva),border-color .18s var(--curva);
  animation:comic-impact .5s var(--curva) backwards;
}
.card:hover{
  transform:translate(-3px,-4px) rotate(-.6deg);
  box-shadow:var(--sh-lg);border-color:var(--cream);
}
.card::after{display:none;}   /* quita el filo de luz superior celeste */

/* ───────── Formularios ───────── */
input,select{
  background:var(--abismo);border:var(--bdc);border-radius:9px;color:var(--tinta);
  font-family:var(--sans);box-shadow:inset 2px 2px 0 rgba(0,0,0,.35);min-height:44px;
}
input::placeholder{color:var(--apagado);}
input:hover,select:hover{border-color:var(--cream);}
input:focus,select:focus{
  outline:none;border-color:var(--cream);background:var(--panel-alto);
  box-shadow:var(--sh-sm);transform:translate(-1px,-1px);
}
/* Flecha del select en crema */
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23F7EFDF' stroke-width='2.2'><path d='M1 1l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}
select option{background:var(--noche);color:var(--tinta);}
input[type=file]{border:none;background:transparent;box-shadow:none;min-height:0;}
input[type=file]::file-selector-button{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink);background:var(--lime);border:var(--bdk);border-radius:9px;
  box-shadow:var(--sh-sm);
}
input[type=file]::file-selector-button:hover{background:var(--yellow);border-color:#000;box-shadow:var(--sh-sm);}
label{font-family:var(--mono);font-weight:700;color:var(--tenue);text-transform:uppercase;}
/* Datos / correlativos en Space Mono, color acento */
#sup_cui,#com_correlativo,#com_serie_des,#com_serie_alm{
  font-family:var(--mono);color:var(--tang);letter-spacing:.03em;
}

/* Zona de carga */
.dropzone{
  border:3px dashed var(--cream);border-radius:12px;background:var(--velo);
}
.dropzone:hover{border-color:var(--tang);}
.dropzone.dragover{
  border-color:var(--tang);background:var(--celeste-humo);
  box-shadow:inset 4px 4px 0 rgba(0,0,0,.3);
}
.dropzone .dz-hint{font-family:var(--mono);color:var(--tenue);}
.dropzone.dragover .dz-hint{color:var(--tang);}

/* ───────── Botones cómic ───────── */
button{
  font-family:var(--sans);font-weight:800;font-size:13.5px;letter-spacing:.04em;
  text-transform:uppercase;border:var(--bdk);border-radius:11px;color:var(--cream);
  background:var(--panel-alto);box-shadow:var(--sh);min-height:44px;
  transition:transform .1s,box-shadow .1s,background .12s;
}
button:hover:not(:disabled){transform:none;animation:comic-jitter .2s ease-in-out infinite;}
button:active:not(:disabled){animation:none;transform:translate(4px,4px);box-shadow:0 0 0 #000;}
button:focus-visible{outline:3px solid var(--tang);outline-offset:2px;box-shadow:var(--sh);}
.b-primary{background:var(--tang);color:var(--on-acc);border:var(--bdk);box-shadow:var(--sh);}
.b-primary:hover:not(:disabled){background:var(--tang-h);box-shadow:var(--sh);}
.b-ok{background:var(--verde);color:var(--ink);border:var(--bdk);box-shadow:var(--sh);}
.b-ok:hover:not(:disabled){background:var(--verde);box-shadow:var(--sh);}
.b-ghost{background:var(--panel-alto);color:var(--tinta);border:var(--bdc);box-shadow:var(--sh);}
.b-ghost:hover:not(:disabled){background:var(--lime);color:var(--ink);border-color:var(--cream);box-shadow:var(--sh);}
.b-danger{background:var(--rojo);color:var(--tinta);border:var(--bdk);box-shadow:var(--sh);}
.b-danger:hover:not(:disabled){background:var(--rojo);box-shadow:var(--sh);}

/* ───────── Resumen de lectura ───────── */
.resumen{
  background:var(--panel-alto);border:var(--bdc);border-radius:12px;
  box-shadow:var(--sh-sm);color:var(--tenue);
}
.resumen::before{background:var(--tang);box-shadow:none;}
.resumen > b{font-family:var(--mono);color:var(--tinta);text-shadow:none;}

/* ───────── Renglones del lote / matriz ───────── */
.lote-item{
  background:var(--panel);border:var(--bdc);border-radius:12px;box-shadow:var(--sh-sm);
  transition:transform .14s var(--curva),box-shadow .14s var(--curva);
}
.lote-item:hover{
  background:var(--panel-alto);transform:translate(-2px,-3px) rotate(-.4deg);
  box-shadow:var(--sh);border-color:var(--cream);
}
.lote-item .info b{color:var(--tinta);}
.lote-item .info span b{font-family:var(--mono);color:var(--tang);text-shadow:none;}

/* ───────── Piezas menores ───────── */
.badge{
  font-family:var(--mono);font-weight:700;text-transform:uppercase;
  background:var(--lime);color:var(--ink);border:var(--bdk);border-radius:8px;
  box-shadow:var(--sh-sm);padding:3px 10px;
}
.saved{color:var(--verde-tx);font-weight:800;}
.vacio{
  color:var(--tenue);border:3px dashed var(--cream);border-radius:12px;
  background:var(--velo);font-family:var(--mono);
}
iframe{border:var(--bdc) !important;border-radius:12px !important;box-shadow:var(--sh) !important;}
.rail-eyebrow,.hint{font-family:var(--mono);}

/* ───────── Control "Separar en 2 actas" (solo estilo; lógica intacta) ─────────
   El <style> inline del cuerpo va DESPUÉS de este archivo → requiere !important.
   El contenedor #wrap_separar trae estilos inline (fondo azul) → !important. */
#wrap_separar{
  background:var(--celeste-humo) !important;
  border:var(--bdc) !important;border-radius:12px !important;
  box-shadow:var(--sh-sm);
}
.sw-toggle{width:52px !important;height:28px !important;}
.sw-slider{
  background:var(--abismo) !important;border:3px solid var(--cream) !important;
  border-radius:28px !important;
}
.sw-slider::before{
  width:18px !important;height:18px !important;left:3px !important;top:3px !important;
  background:var(--cream) !important;border-radius:5px !important;
}
.sw-toggle input:checked + .sw-slider{background:var(--tang) !important;}
.sw-toggle input:checked + .sw-slider::before{
  transform:translateX(24px) !important;background:var(--on-acc) !important;
}

/* ───────── Foco accesible global ───────── */
:focus-visible{outline:3px solid var(--tang);outline-offset:2px;}

/* ───────── Respeta prefers-reduced-motion ───────── */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .card{animation:none !important;transform:none !important;}
  button:hover:not(:disabled){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"]{
  --abismo:#221B13;--noche:#2F2419;--panel:#2F2419;--panel-alto:#3D3122;
  --celeste:#FA5A22;--celeste-hondo:#C23D10;--celeste-humo:rgba(250,90,34,.14);--celeste-brillo:rgba(250,90,34,.45);
  --tang:#FA5A22;--tang-h:#FF7A45;
}
:root[data-comic-tema="chicle"]{
  --abismo:#241620;--noche:#32202B;--panel:#32202B;--panel-alto:#412B39;
  --celeste:#FF4C93;--celeste-hondo:#C41F63;--celeste-humo:rgba(255,76,147,.14);--celeste-brillo:rgba(255,76,147,.45);
  --tang:#FF4C93;--tang-h:#FF74AC;
}
:root[data-comic-tema="uva"]{
  --abismo:#1C182A;--noche:#282141;--panel:#282141;--panel-alto:#362C55;
  --celeste:#B074FF;--celeste-hondo:#7B36D6;--celeste-humo:rgba(176,116,255,.14);--celeste-brillo:rgba(176,116,255,.45);
  --tang:#B074FF;--tang-h:#C594FF;
}
:root[data-comic-tema="sakura"]{
  --abismo:#241922;--noche:#322330;--panel:#322330;--panel-alto:#412E3D;
  --celeste:#FF8FBF;--celeste-hondo:#D64F8E;--celeste-humo:rgba(255,143,191,.14);--celeste-brillo:rgba(255,143,191,.45);
  --tang:#FF8FBF;--tang-h:#FFA9CD;
}
:root[data-comic-tema="menta"]{
  --abismo:#16281F;--noche:#1F3329;--panel:#1F3329;--panel-alto:#2A4234;
  --celeste:#2BC7A0;--celeste-hondo:#0E9B77;--celeste-humo:rgba(43,199,160,.14);--celeste-brillo:rgba(43,199,160,.45);
  --tang:#2BC7A0;--tang-h:#4FE0BB;
}
:root[data-comic-tema="fresa"]{
  --abismo:#271815;--noche:#35221C;--panel:#35221C;--panel-alto:#452E25;
  --celeste:#F24A3E;--celeste-hondo:#C22318;--celeste-humo:rgba(242,74,62,.14);--celeste-brillo:rgba(242,74,62,.45);
  --tang:#F24A3E;--tang-h:#FF6A5C;
}
:root[data-comic-tema="limon"]{
  --abismo:#222414;--noche:#2E301C;--panel:#2E301C;--panel-alto:#3C3E28;
  --celeste:#BCDE4E;--celeste-hondo:#8FB80E;--celeste-humo:rgba(188,222,78,.14);--celeste-brillo:rgba(188,222,78,.45);
  --tang:#BCDE4E;--tang-h:#CFEE6E;
}
:root[data-comic-tema="cielo"]{
  --abismo:#15232F;--noche:#1F3140;--panel:#1F3140;--panel-alto:#2A4152;
  --celeste:#4FB0FF;--celeste-hondo:#1877CC;--celeste-humo:rgba(79,176,255,.14);--celeste-brillo:rgba(79,176,255,.45);
  --tang:#4FB0FF;--tang-h:#7CC4FF;
}

/* ══ PALETAS CLARAS (fondo papel) ══════════════════════════════════════════
   Invierten los tokens de modo: --trazo pasa a TINTA (contorno negro), --tinta
   a texto oscuro y --punto/--velo a oscuros muy diluidos. --on-acc se ajusta
   por paleta (tinta si el acento es claro, crema si es oscuro). Los rellenos
   BRILLANTES (lima/verde) conservan su etiqueta --ink oscura, que NO se toca.
   Ratios WCAG: texto/fondo 11.3–11.6, tenue/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;
  --abismo:#F5EFE1;--noche:#FFFAF0;--panel:#FFFAF0;--panel-alto:#EDE5D3;
  --trazo:#140D06;--tinta:#38302A;--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--on-acc:#F7EFDF;--grito:#9A5B00;--yellow:#A66600;
  --celeste:#BE3A09;--celeste-hondo:#8F2A04;--celeste-humo:rgba(225,75,18,.12);--celeste-brillo:rgba(225,75,18,.40);
  --tang:#BE3A09;--tang-h:#9E2E05;
}
:root[data-comic-tema="nube"]{
  --comic-panel:#FFFFFF;--comic-sw:#E2E9F2;
  --abismo:#EEF2F7;--noche:#FFFFFF;--panel:#FFFFFF;--panel-alto:#E2E9F2;
  --trazo:#140D06;--tinta:#38302A;--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--on-acc:#FFF8EE;--grito:#9A5B00;--yellow:#A66600;
  --celeste:#1A63BE;--celeste-hondo:#14539F;--celeste-humo:rgba(26,99,190,.12);--celeste-brillo:rgba(26,99,190,.40);
  --tang:#1A63BE;--tang-h:#14539F;
}
:root[data-comic-tema="rosa"]{
  --comic-panel:#FFF8FB;--comic-sw:#F3E0E9;
  --abismo:#FBEFF4;--noche:#FFF8FB;--panel:#FFF8FB;--panel-alto:#F3E0E9;
  --trazo:#140D06;--tinta:#38302A;--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--on-acc:#FFF8EE;--grito:#9A5B00;--yellow:#A66600;
  --celeste:#C43070;--celeste-hondo:#A32458;--celeste-humo:rgba(196,48,112,.12);--celeste-brillo:rgba(196,48,112,.40);
  --tang:#C43070;--tang-h:#A32458;
}
:root[data-comic-tema="menta-clara"]{
  --comic-panel:#FAFFFC;--comic-sw:#D9EBE1;
  --abismo:#EAF5EF;--noche:#FAFFFC;--panel:#FAFFFC;--panel-alto:#D9EBE1;
  --trazo:#140D06;--tinta:#38302A;--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--on-acc:#FFF8EE;--grito:#9A5B00;--yellow:#A66600;
  --celeste:#0E7A55;--celeste-hondo:#0A6244;--celeste-humo:rgba(14,122,85,.12);--celeste-brillo:rgba(14,122,85,.40);
  --tang:#0E7A55;--tang-h:#0A6244;
}

/* La flecha del <select> va dentro de un data-URI (no admite var()): en claro
   se sustituye por su versión en tinta para que no quede invisible. */
:root[data-comic-tema="papel"] select,
:root[data-comic-tema="nube"] select,
:root[data-comic-tema="rosa"] select,
:root[data-comic-tema="menta-clara"] select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23140D06' stroke-width='2.2'><path d='M1 1l6 6 6-6'/></svg>");
}

/* 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"]{ --verde-tx:#0B5637; }

/* Estados usados como texto: versión legible sobre fondo claro. */
:root{ --warn-tx:#FFC93C; --rojo-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; --rojo-tx:#B3220E;
}
