/* ═══════════════════════════════════════════════════════════════════════════
   COMIC.CSS · "Cómic de acción" — MIDES / Actas Consolidadas (capa VISUAL)
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS del <style> propio de index.html y asistente-index.html.
   SOLO reescribe la capa visual: remapea tokens + reviste componentes reales.
   NO toca JS, IDs, data-*, clases ni estructura del DOM.
   Paleta/valores tomados de rediseno-propuesta.html (v6) y COMIC-DESIGN-SPEC.md.

   Ambas apps usan sistemas de tokens DISTINTOS:
     · index.html          → --ink-*, --line*, --txt*, --blue*, --gold*, --f-ui/--f-num, --sh-1/2/3
     · asistente-index.html→ --abismo/--noche/--panel*, --borde*, --celeste*, --texto/--tenue/--apagado,
                              --verde/--ambar/--rojo, --serif/--sans/--mono
   Aquí se remapean AMBOS al palette cómic.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── Fuentes cómic (independientes del nombre de token de cada app) ───────── */
:root{
  --comic-disp:'Bangers',system-ui,sans-serif;         /* titulares grandes           */
  --comic-sfx:'Bungee',system-ui,sans-serif;           /* efecto puntual              */
  --comic-ui:'Archivo',system-ui,-apple-system,sans-serif; /* texto de trabajo        */
  --comic-num:'Space Mono',ui-monospace,monospace;     /* números / correlativos      */
  /* Sombras duras offset (sin blur / sin glow) */
  --comic-sh-sm:3px 3px 0 #000;
  --comic-sh:5px 5px 0 #000;
  --comic-sh-lg:8px 8px 0 #000;
  /* ── 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 (dropzone / estado vacío)
     --campo    fondo de los campos de formulario
     --tenue2   gris muy tenue (cejas, pies, cápsulas)
     --on-acc   etiqueta SOBRE el acento (tinta en oscuro, crema si el acento es oscuro)
     --grito    amarillo de las onomatopeyas / serie sobre superficie
     Los rellenos BRILLANTES (verde/amarillo/lima) mantienen su #120C05 fijo.  */
  --trazo:#F7EFDF; --tinta:#F7EFDF; --punto:rgba(247,239,223,.055);
  --velo:rgba(18,12,5,.5); --campo:#120C05; --tenue2:#8c7f68;
  --on-acc:#120C05; --grito:#FFC93C;
  /* selector de paletas (comic-tema.js): superficie del panel flotante */
  --comic-panel:#241B12; --comic-sw:#31251A;
  /* texto de los cuadros de aviso (fondo = --warn-bg / --danger-bg / --ok-bg) */
  --warn-tx:#f3d08a; --danger-tx:#f6a9ab; --ok-tx:#c4f0dc;
}

/* ───────── Remapeo de tokens · index.html ───────── */
:root{
  /* superficies · espresso cálido */
  --ink-950:#171009; --ink-900:#221B13; --ink-850:#2F2419; --ink-800:#2F2419; --ink-750:#3D3122;
  /* trazos */
  --line:#4a3a28; --line-soft:#3a2c1c; --line-hi:var(--trazo);
  /* texto */
  --txt:#EFE6D3; --txt-2:#e6dcc8; --muted:#BBAF98; --muted-dim:#A79880;
  /* acento institucional → tangerina */
  --blue:#FA5A22; --blue-hi:#FF7038; --blue-dim:#c23d10;
  /* sello / correlativo → amarillo cómic */
  --gold:#FFC93C; --gold-2:#FFD873; --gold-dim:#8a6a1e;
  /* semánticos */
  --ok:#38B26F; --ok-hi:#4ADE9F; --ok-bg:#14251a;
  --warn:#FFC93C; --warn-bg:#2a2010;
  --danger:#EE4B2B; --danger-bg:#2a1410;
  /* tipografía */
  --f-ui:var(--comic-ui); --f-num:var(--comic-num);
  /* sombras → duras */
  --sh-1:var(--comic-sh-sm); --sh-2:var(--comic-sh); --sh-3:var(--comic-sh-lg);
}

/* ───────── Remapeo de tokens · asistente-index.html ───────── */
:root{
  --abismo:#221B13; --noche:#2F2419;
  --panel:rgba(247,239,223,.04); --panel-alto:rgba(247,239,223,.08);
  --borde:#4a3a28; --borde-vivo:var(--trazo); --luz-alta:rgba(247,239,223,.06);
  --celeste:#FA5A22; --celeste-hondo:#c23d10;
  --celeste-humo:rgba(250,90,34,.14); --celeste-brillo:rgba(250,90,34,.40);
  --indigo:#FF7038;
  --texto:#EFE6D3; --tenue:#BBAF98; --apagado:#A79880;
  --verde:#38B26F; --ambar:#FFC93C; --rojo:#EE4B2B;
  /* la serif de titulares pasa a Bangers; sans → Archivo; mono → Space Mono */
  --serif:var(--comic-disp); --sans:var(--comic-ui); --mono:var(--comic-num);
}

/* ───────── @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 (mata halos/gradientes azules previos) ───────── */
body{
  background-color:var(--ink-900);
  background-image:radial-gradient(var(--punto) 1.4px,transparent 1.5px);
  background-size:15px 15px;
  background-attachment:fixed;
}
/* asistente: los focos de luz azul del ambiente se recolorean a cálido; se conservan sello y grano */
.luz-1{background:radial-gradient(circle, rgba(250,90,34,.16) 0%, rgba(250,90,34,0) 70%)!important;}
.luz-2{background:radial-gradient(circle, rgba(255,201,60,.10) 0%, rgba(255,201,60,0) 70%)!important;}
.luz-3{background:radial-gradient(circle, rgba(250,90,34,.08) 0%, rgba(250,90,34,0) 70%)!important;}

::selection{background:var(--blue,var(--blue));color:var(--on-acc);}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

/* ═══════════════ TITULARES (Bangers · contorno negro + sombra dura) ═══════════════ */
.stage-head h1{
  font-family:var(--comic-disp);font-weight:400;
  color:var(--tinta);-webkit-text-fill-color:var(--tinta);background:none;
  -webkit-text-stroke:2.5px #000;paint-order:stroke fill;text-shadow:5px 5px 0 #000;
  text-transform:uppercase;letter-spacing:.02em;line-height:.95;
  font-size:clamp(30px,6vw,46px);
}
.rail-name{
  font-family:var(--comic-disp);font-weight:400;color:var(--tinta);
  -webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000;
  text-transform:uppercase;letter-spacing:.02em;line-height:.96;
  font-size:clamp(23px,3vw,30px);
}
.rail-name em{
  color:var(--blue)!important;-webkit-text-fill-color:var(--blue)!important;background:none;
  -webkit-text-stroke:2px #000;display:block;
}
/* Título de sección (card) en ambas apps */
.card h2{
  font-family:var(--comic-disp);font-weight:400;color:var(--tinta);
  -webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.05;
  font-size:clamp(18px,3vw,24px);
}
/* Barra superior de index: título de trabajo en Archivo (no titular gigante) */
.hd h1{font-family:var(--comic-ui);font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.hd .org{font-family:var(--comic-ui);font-weight:600;}

/* Micro-etiquetas / eyebrows */
.eyebrow{font-family:var(--comic-ui);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)!important;}
.rail-eyebrow{font-family:var(--comic-num);color:var(--tenue2);letter-spacing:.14em;}

/* ═══════════════ BOTONES (contorno negro, sombra dura, tiemblan / se hunden) ═══════════════ */
button, .b-primary, .b-ok, .b-ghost, .b-danger{
  font-family:var(--comic-ui);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border:3px solid #000;border-radius:11px;
  box-shadow:var(--comic-sh);
  min-height:44px;                         /* táctil ≥44px */
  transition:transform .1s, box-shadow .1s, background .12s;
}
button:hover:not(:disabled){animation:comic-jitter .2s ease-in-out infinite;transform:none;}
button:active:not(:disabled){animation:none;transform:translate(4px,4px);box-shadow:0 0 0 #000;}
.b-primary{background:var(--blue)!important;color:var(--on-acc);border-color:#000;}
.b-primary:hover:not(:disabled){background:var(--blue-hi)!important;}
.b-ok{background:#38B26F;color:#120C05;border-color:#000;}
.b-ok:hover:not(:disabled){background:#4ADE9F;}
.b-ghost{background:var(--ink-750);color:var(--tinta);border:3px solid var(--trazo);}
.b-ghost:hover:not(:disabled){background:#D8F24B;color:#120C05;border-color:#000;}
.b-danger{background:#EE4B2B;color:var(--tinta);border-color:#000;}
.b-danger:hover:not(:disabled){background:#ff6242;color:var(--tinta);}

/* ═══════════════ INPUTS / SELECT / TEXTAREA ═══════════════ */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select, textarea{
  background:var(--campo);color:var(--tinta);
  border:3px solid var(--trazo);border-radius:9px;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.35);
  font-family:var(--comic-ui);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
select:focus, textarea:focus{
  outline:none;border-color:var(--trazo);background:var(--ink-750);
  box-shadow:var(--comic-sh-sm);transform:translate(-1px,-1px);
}
input[type=number],input[type=date],input[type=time]{font-family:var(--comic-num);}
/* Flecha del select en crema (unifica ambas apps) */
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23F7EFDF' stroke-width='2.4'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;
}
/* Carga de archivos */
input[type=file]{border:3px dashed var(--trazo);background:var(--campo);color:var(--muted);border-radius:9px;}
input[type=file]::file-selector-button{
  font-family:var(--comic-ui);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  background:var(--blue)!important;color:var(--on-acc);border:3px solid #000;border-radius:8px;box-shadow:var(--comic-sh-sm);
}
input[type=file]::file-selector-button:hover{background:var(--blue-hi)!important;}
label{font-family:var(--comic-ui);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}

/* Zona de arrastre (asistente) */
.dropzone{border:3px dashed var(--trazo);background:var(--velo);border-radius:12px;}
.dropzone.dragover{border-color:var(--blue)!important;background:rgba(250,90,34,.14);box-shadow:var(--comic-sh-sm);}
.dz-hint{font-family:var(--comic-num);color:var(--tenue2);}

/* ═══════════════ PANELES / TARJETAS ═══════════════ */
.card{
  background:var(--ink-800);border:3px solid var(--trazo);border-radius:14px;
  box-shadow:var(--comic-sh);
  transition:transform .14s, box-shadow .14s;
}
.card:hover{transform:translate(-3px,-4px) rotate(-.6deg);box-shadow:var(--comic-sh-lg);border-color:var(--trazo);}
.card::after{display:none!important;}   /* quita el filo de luz azul superior (asistente) */
.card[data-clausula]::before{font-family:var(--comic-num);color:var(--blue)!important;letter-spacing:.18em;font-weight:700;}
.priv{background:var(--ink-800);border:3px solid var(--trazo);border-left:6px solid #38B26F;border-radius:12px;box-shadow:var(--comic-sh-sm);}

/* Aviso lateral / resumen (asistente) */
.resumen{
  background:var(--ink-850);border:3px solid var(--trazo);border-radius:12px;box-shadow:var(--comic-sh-sm);
}
.resumen::before{background:var(--blue)!important;box-shadow:none;width:4px;}
.resumen > b{font-family:var(--comic-num);color:var(--gold-2);text-shadow:2px 2px 0 #000;}

/* ═══════════════ NUMERADORA / CORRELATIVO (index) ═══════════════ */
.numeradora{
  border:3px solid var(--trazo);border-radius:18px;box-shadow:var(--comic-sh-lg);
  background:linear-gradient(168deg,var(--ink-800) 0%,var(--ink-900) 60%,var(--ink-900) 100%);
}
.numeradora::before{
  background-image:
    repeating-linear-gradient(58deg, rgba(255,201,60,.06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, var(--celeste-humo) 0 1px, transparent 1px 9px);
}
.num-serie{font-family:var(--comic-num);color:var(--grito);letter-spacing:.12em;}
.folio .cap{font-family:var(--comic-ui);font-weight:800;color:var(--tenue2);}
.folio .val{font-family:var(--comic-num);color:#e6dcc8;}
.folio.next .val{color:var(--gold-2);text-shadow:2px 2px 0 #000;}   /* sin glow */
.folio.next .val .z{color:#8a6a1e;}
.flecha{color:var(--blue)!important;}

/* Chips del panel (index) */
.chip{
  background:var(--ink-850);border:3px solid #000;border-radius:8px;box-shadow:var(--comic-sh-sm);
  font-family:var(--comic-ui);font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--tinta);
}
.chip b{font-family:var(--comic-num);color:var(--gold-2);}
.chip.local{border-style:dashed;color:var(--tenue2);}

/* Emblema (index) */
.emblema{
  background:var(--blue)!important;border:3px solid #000;border-radius:9px;box-shadow:var(--comic-sh-sm);
  font-family:var(--comic-disp);color:#FFC93C;-webkit-text-stroke:.6px #000;
}
/* Pill de estado en barra (index) */
.pill{
  background:var(--ink-750);border:3px solid #000;border-radius:999px;box-shadow:var(--comic-sh-sm);
  font-family:var(--comic-ui);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--tinta);
}

/* ═══════════════ PASOS / PESTAÑAS ═══════════════ */
.paso{
  background:#FFC93C;border:3px solid #000;border-radius:8px;box-shadow:var(--comic-sh-sm);
  font-family:var(--comic-num);font-weight:700;color:#120C05;
}
.tab-tipo{
  border:3px solid transparent;border-radius:11px;font-family:var(--comic-ui);font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;color:var(--muted);
}
.tab-tipo:hover{background:var(--ink-750);color:var(--tinta);}
.tab-tipo.activa{
  background:var(--blue)!important;color:var(--on-acc);border:3px solid #000;box-shadow:var(--comic-sh-sm);
}
.tab-tipo.activa svg{color:var(--on-acc);opacity:1;}
.tab-tipo.activa::before{display:none;}

/* ═══════════════ PILLS / BADGES / VALIDACIÓN ═══════════════ */
.badge, .badge-hora{
  font-family:var(--comic-ui);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  border:3px solid #000;border-radius:8px;box-shadow:var(--comic-sh-sm);
}
.badge{background:#D8F24B;color:#120C05;}
.badge-hora{background:#38B26F;color:#120C05;}
.vchip{font-family:var(--comic-ui);font-weight:800;text-transform:uppercase;border:3px solid #000;border-radius:8px;box-shadow:var(--comic-sh-sm);}
.vchip.verr{background:#EE4B2B;color:var(--tinta);}
.vchip.vavi{background:#FFC93C;color:#120C05;}
/* Cuadros de aviso */
.warn-box{background:var(--warn-bg);border:3px solid var(--gold);border-left-width:6px;color:var(--warn-tx);border-radius:10px;}
.err-box{background:var(--danger-bg);border:3px solid var(--danger);border-left-width:6px;color:var(--danger-tx);border-radius:10px;}
.ok-box{background:var(--ok-bg);border:3px solid var(--ok);border-left-width:6px;color:var(--ok-tx);border-radius:10px;}
.item-err{border-color:#EE4B2B!important;border-left:6px solid #EE4B2B!important;}
.item-avi{border-color:#FFC93C!important;border-left:6px solid #FFC93C!important;}

/* ═══════════════ LISTAS DE ACTAS ═══════════════ */
.item, .lote-item{
  background:var(--ink-800);border:3px solid var(--trazo);border-radius:12px;box-shadow:var(--comic-sh-sm);
  transition:transform .14s, box-shadow .14s;
}
.item:hover, .lote-item:hover{
  background:var(--ink-750);border-color:var(--trazo);transform:translate(-2px,-3px);box-shadow:var(--comic-sh);
}
.item .info b, .lote-item .info b{font-family:var(--comic-ui);font-weight:800;color:var(--tinta);}
.lote-item .info span b{font-family:var(--comic-num);color:var(--blue)!important;text-shadow:none;}
.vacio{
  border:3px dashed var(--line);border-radius:12px;background:var(--velo);
  font-family:var(--comic-num);color:var(--tenue2);
}

/* ═══════════════ TABLAS ═══════════════ */
table.hist, table.corrTab{border:3px solid var(--trazo);border-radius:12px;overflow:hidden;}
table.hist th, table.corrTab th{
  background:var(--ink-800);color:var(--muted);font-family:var(--comic-ui);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--ink-750);
}
table.hist td, table.corrTab td{border-bottom:2px solid var(--ink-750);}
table.hist td b{font-family:var(--comic-num);color:var(--gold-2);}
table.hist tbody tr:hover td, table.hist tr:hover td, table.corrTab tr:hover td{background:var(--ink-750);}

/* ═══════════════ MODAL DE CORRECCIÓN (index) ═══════════════ */
.modal-card{
  background:var(--ink-800);border:3px solid var(--trazo);border-radius:16px;box-shadow:var(--comic-sh-lg);
  animation:comic-impact .28s cubic-bezier(.2,.8,.3,1.3) both;
}
.modal-head, .modal-foot{border-color:#3a2c1c;}
.modal-head h2{font-family:var(--comic-disp);font-weight:400;color:var(--tinta);-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000;text-transform:uppercase;}
.corr-totales{background:var(--ok-bg);border:3px solid var(--ok);border-left-width:6px;border-radius:10px;color:var(--ok-tx);}
.corr-totales b{font-family:var(--comic-num);color:#4ADE9F;}

/* ═══════════════ CONTROL "SEPARAR EN 2 ACTAS" (asistente) ═══════════════
   Su <style> vive en el <body> (después de comic.css en la cascada): requiere
   !important para que el toggle reciba el estilo cómic sin tocar su JS.            */
#wrap_separar{
  border:3px solid var(--trazo)!important;border-radius:12px!important;
  background:rgba(250,90,34,.10)!important;box-shadow:var(--comic-sh-sm)!important;
}
.sw-toggle .sw-slider{
  background:var(--campo)!important;border:3px solid var(--trazo)!important;border-radius:26px!important;
}
.sw-toggle .sw-slider::before{
  background:var(--trazo)!important;border-radius:5px!important;   /* perilla cuadrada cómic */
}
.sw-toggle input:checked + .sw-slider{background:var(--blue)!important;}
.sw-toggle input:checked + .sw-slider::before{background:var(--on-acc)!important;transform:translateX(20px)!important;}

/* ═══════════════ PIES ═══════════════ */
.foot{border-top:3px solid var(--line-soft);color:var(--tenue2);font-family:var(--comic-ui);}
.foot .ver{font-family:var(--comic-num);}

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

/* ══ PALETAS CLARAS (fondo papel) ══════════════════════════════════════════
   Invierten los tokens de modo: --trazo pasa a TINTA (contorno negro), --tinta
   y --txt a texto oscuro, --punto/--velo a oscuros muy diluidos y --campo a
   papel. --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 #120C05 fija. Ratios WCAG: 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;
  --ink-950:#EAE2CE;--ink-900:#F5EFE1;--ink-850:#FFFAF0;--ink-800:#FFFAF0;--ink-750:#EDE5D3;
  --line:#C9BFA9;--line-soft:#DED4BE;--trazo:#140D06;--tinta:#38302A;
  --txt:#38302A;--txt-2:#453C34;--muted:#5A5148;--muted-dim:#6E6558;--tenue2:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--campo:#FFFAF0;
  --on-acc:#F7EFDF;--grito:#9A5B00;
  --blue:#BE3A09;--blue-hi:#9E2E05;--blue-dim:#8F2A04;
  --gold:#9A5B00;--gold-2:#8A5A0B;--gold-dim:#7A4E00;
  --ok-bg:#DEF2E6;--ok-tx:#0B5637;--warn-bg:#FBF0CF;--warn-tx:#6B4A00;--danger-bg:#FBE0D8;--danger-tx:#8C2113;
  --abismo:#F5EFE1;--noche:#FFFAF0;--panel:#FFFAF0;--panel-alto:#EDE5D3;
  --borde:#C9BFA9;--luz-alta:rgba(20,13,6,.04);--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --celeste:#BE3A09;--celeste-hondo:#8F2A04;--celeste-humo:rgba(225,75,18,.12);--celeste-brillo:rgba(225,75,18,.40);
  --indigo:#8F2A04;--tang:#BE3A09;--tang-h:#9E2E05;
}
:root[data-comic-tema="nube"]{
  --comic-panel:#FFFFFF;--comic-sw:#E2E9F2;
  --ink-950:#DDE4EE;--ink-900:#EEF2F7;--ink-850:#FFFFFF;--ink-800:#FFFFFF;--ink-750:#E2E9F2;
  --line:#BFCBDB;--line-soft:#D5DEEA;--trazo:#140D06;--tinta:#38302A;
  --txt:#38302A;--txt-2:#453C34;--muted:#5A5148;--muted-dim:#6E6558;--tenue2:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--campo:#FFFFFF;
  --on-acc:#FFF8EE;--grito:#9A5B00;
  --blue:#1A63BE;--blue-hi:#14539F;--blue-dim:#0F406F;
  --gold:#9A5B00;--gold-2:#8A5A0B;--gold-dim:#7A4E00;
  --ok-bg:#DEF2E6;--ok-tx:#0B5637;--warn-bg:#FBF0CF;--warn-tx:#6B4A00;--danger-bg:#FBE0D8;--danger-tx:#8C2113;
  --abismo:#EEF2F7;--noche:#FFFFFF;--panel:#FFFFFF;--panel-alto:#E2E9F2;
  --borde:#BFCBDB;--luz-alta:rgba(20,13,6,.04);--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --celeste:#1A63BE;--celeste-hondo:#14539F;--celeste-humo:rgba(26,99,190,.12);--celeste-brillo:rgba(26,99,190,.40);
  --indigo:#14539F;--tang:#1A63BE;--tang-h:#14539F;
}
:root[data-comic-tema="rosa"]{
  --comic-panel:#FFF8FB;--comic-sw:#F3E0E9;
  --ink-950:#F2DFE8;--ink-900:#FBEFF4;--ink-850:#FFF8FB;--ink-800:#FFF8FB;--ink-750:#F3E0E9;
  --line:#DDBFCE;--line-soft:#EBD3DE;--trazo:#140D06;--tinta:#38302A;
  --txt:#38302A;--txt-2:#453C34;--muted:#5A5148;--muted-dim:#6E6558;--tenue2:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--campo:#FFF8FB;
  --on-acc:#FFF8EE;--grito:#9A5B00;
  --blue:#C43070;--blue-hi:#A32458;--blue-dim:#7E1B43;
  --gold:#9A5B00;--gold-2:#8A5A0B;--gold-dim:#7A4E00;
  --ok-bg:#DEF2E6;--ok-tx:#0B5637;--warn-bg:#FBF0CF;--warn-tx:#6B4A00;--danger-bg:#FBE0D8;--danger-tx:#8C2113;
  --abismo:#FBEFF4;--noche:#FFF8FB;--panel:#FFF8FB;--panel-alto:#F3E0E9;
  --borde:#DDBFCE;--luz-alta:rgba(20,13,6,.04);--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --celeste:#C43070;--celeste-hondo:#A32458;--celeste-humo:rgba(196,48,112,.12);--celeste-brillo:rgba(196,48,112,.40);
  --indigo:#A32458;--tang:#C43070;--tang-h:#A32458;
}
:root[data-comic-tema="menta-clara"]{
  --comic-panel:#FAFFFC;--comic-sw:#D9EBE1;
  --ink-950:#D6E9DE;--ink-900:#EAF5EF;--ink-850:#FAFFFC;--ink-800:#FAFFFC;--ink-750:#D9EBE1;
  --line:#B7D3C4;--line-soft:#CCE2D6;--trazo:#140D06;--tinta:#38302A;
  --txt:#38302A;--txt-2:#453C34;--muted:#5A5148;--muted-dim:#6E6558;--tenue2:#6E6558;
  --punto:rgba(20,13,6,.05);--velo:rgba(20,13,6,.05);--campo:#FAFFFC;
  --on-acc:#FFF8EE;--grito:#9A5B00;
  --blue:#0E7A55;--blue-hi:#0A6244;--blue-dim:#084C35;
  --gold:#9A5B00;--gold-2:#8A5A0B;--gold-dim:#7A4E00;
  --ok-bg:#DEF2E6;--ok-tx:#0B5637;--warn-bg:#FBF0CF;--warn-tx:#6B4A00;--danger-bg:#FBE0D8;--danger-tx:#8C2113;
  --abismo:#EAF5EF;--noche:#FAFFFC;--panel:#FAFFFC;--panel-alto:#D9EBE1;
  --borde:#B7D3C4;--luz-alta:rgba(20,13,6,.04);--texto:#38302A;--tenue:#5A5148;--apagado:#6E6558;
  --celeste:#0E7A55;--celeste-hondo:#0A6244;--celeste-humo:rgba(14,122,85,.12);--celeste-brillo:rgba(14,122,85,.40);
  --indigo:#0A6244;--tang:#0E7A55;--tang-h:#0A6244;
}

/* En claro los halos de ambiente del asistente se apagan (sobre papel manchan). */
:root[data-comic-tema="papel"] .luz-1, :root[data-comic-tema="papel"] .luz-2, :root[data-comic-tema="papel"] .luz-3,
:root[data-comic-tema="nube"] .luz-1, :root[data-comic-tema="nube"] .luz-2, :root[data-comic-tema="nube"] .luz-3,
:root[data-comic-tema="rosa"] .luz-1, :root[data-comic-tema="rosa"] .luz-2, :root[data-comic-tema="rosa"] .luz-3,
:root[data-comic-tema="menta-clara"] .luz-1, :root[data-comic-tema="menta-clara"] .luz-2, :root[data-comic-tema="menta-clara"] .luz-3{
  background:none!important;filter:none!important;
}

/* 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,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23140D06' stroke-width='2.4'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}