/* ═══════════════════════════════════════════════════════════════
   Instructivo de voto — Lista 5 · Avanza País
   Distrito de Elías Soplín Vargas, provincia de Rioja — ERM 2026
   ═══════════════════════════════════════════════════════════════ */

/* ── Tipografía local (funciona sin internet) ───────────────────
   Archivo es una fuente variable: un solo archivo cubre de 100 a 900. */
@font-face{
  font-family:'Archivo';
  src:url('../assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ── Paleta ───────────────────────────────────────────────────── */
:root{
  --navy:#0A2050;
  --navy-2:#14285c;
  --red:#e2002b;
  --green:#0f9d58;
  --amber:#d98200;

  --bg:#eef0f4;
  --bg-2:#e2e5ec;
  --card:#ffffff;
  --ink:#1c2333;
  --ink-soft:#5a6479;
  --line:rgba(10,32,80,.12);
  --shadow:0 18px 40px -18px rgba(10,20,50,.45);

  /* Acento de interfaz: en oscuro se aclara para no perder contraste
     sobre las tarjetas. --navy se reserva para la cédula. */
  --accent:#0A2050;
  --accent-ink:#ffffff;

  --top-h:56px;
  --ctl-h:78px;
  --panel-h:44vh;          /* lo ajusta el JS según la diapositiva */
  --stage-dim:1;           /* 1 = cédula visible, .12 = cédula de fondo */

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#11141b; --bg-2:#1a1e28; --card:#1e2330;
    --ink:#e9ebf1; --ink-soft:#a3adc2;
    --line:rgba(255,255,255,.12);
    --shadow:0 18px 40px -18px rgba(0,0,0,.7);
    --accent:#9db4ff; --accent-ink:#0f1320;
  }
}
:root[data-theme="dark"]{
  --bg:#11141b; --bg-2:#1a1e28; --card:#1e2330;
  --ink:#e9ebf1; --ink-soft:#a3adc2;
  --line:rgba(255,255,255,.12);
  --shadow:0 18px 40px -18px rgba(0,0,0,.7);
  --accent:#9db4ff; --accent-ink:#0f1320;
}

/* ── Base ─────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
  background:radial-gradient(1200px 760px at 50% -12%, var(--bg-2), var(--bg) 62%);
  color:var(--ink);
  font-family:'Archivo','Helvetica Neue',Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
.app{ position:fixed; inset:0; }
em{ font-style:normal; color:var(--red); }
b{ font-weight:800; }

/* ═══════════ CAPA 1 · la cédula ═══════════════════════════════ */
.stage-layer{
  position:absolute; inset:0;
  padding:calc(var(--top-h) + var(--safe-t) + 8px) 12px calc(var(--panel-h) + 10px);
  display:flex; align-items:center; justify-content:center;
  opacity:var(--stage-dim);
  transition:filter .45s ease;
  pointer-events:none;
}
.frame{
  display:flex; align-items:stretch;
  width:100%; max-width:960px; max-height:100%;
  aspect-ratio:1750/1127;
  background:var(--card);
  border-radius:16px; overflow:hidden;
  box-shadow:0 1px 0 var(--line), var(--shadow);
}
.gutter{
  position:relative; flex:0 0 8.6%;
  background:linear-gradient(180deg,var(--navy-2),var(--navy));
  border-right:2px solid rgba(255,255,255,.08);
}
.num{
  position:absolute; left:50%;
  width:clamp(20px,62%,36px); aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.5);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:clamp(9px,1.6vw,13px);
  opacity:0;
}
.num.marked{ background:var(--red); border-color:#fff; }

.stage-outer{ position:relative; flex:1 1 auto; overflow:hidden; background:#fff; }
.stage{
  position:absolute; inset:0;
  transform-origin:0 0;
  will-change:transform;
}
.ballot-img{
  display:block; width:100%; height:100%;
  object-fit:fill; -webkit-user-drag:none;
}
.overlay{ position:absolute; inset:0; width:100%; height:100%; }

.col-hi{
  fill:rgba(226,0,43,.13);
  stroke:var(--red); stroke-width:9;
  opacity:0;
}
.row-hi{
  fill:rgba(226,0,43,.20);
  stroke:var(--red); stroke-width:12;
  opacity:0;
}
.stroke{
  fill:none; stroke:var(--red); stroke-width:22; stroke-linecap:round;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.32));
}
/* Señal de "marca aquí" */
.pulso{
  fill:none; stroke:var(--red); stroke-width:14;
  opacity:0;
}

/* ═══════════ CAPA 2 · barra superior ══════════════════════════ */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:30;
  height:calc(var(--top-h) + var(--safe-t));
  padding:var(--safe-t) 14px 0;
  display:flex; align-items:center; gap:10px;
  pointer-events:none;
}
.brand{ display:flex; align-items:center; gap:9px; flex:1 1 auto; min-width:0; }
.brand-num{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:9px;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px;
  box-shadow:0 3px 10px -2px rgba(226,0,43,.6);
}
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-txt strong{ font-size:12.5px; font-weight:900; letter-spacing:.04em; color:var(--accent); }
.brand-txt small{ font-size:10.5px; color:var(--ink-soft); font-weight:600; }

/* Contador de trenes: el objetivo siempre a la vista */
.tren-count{
  display:flex; gap:4px; flex:0 0 auto;
  padding:4px 7px; border-radius:999px;
  background:var(--card); border:1px solid var(--line);
  /* La opacidad la anima GSAP; una transición CSS aquí pelearía con él. */
}
.tren-count i{
  width:22px; height:19px; display:block;
  background:url('../assets/tren-icono.png') center/contain no-repeat;
  filter:grayscale(1); opacity:.28;
  transition:filter .35s ease, opacity .35s ease, transform .35s ease;
}
.tren-count i.on{ filter:none; opacity:1; transform:scale(1.08); }

.icon-btn{
  pointer-events:auto;
  width:32px; height:32px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:50%;
  background:var(--card); color:var(--ink);
  font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--line);
}
.progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--red));
  border-radius:0 3px 3px 0;
}

/* ═══════════ CAPA 3 · diapositivas ════════════════════════════ */
.deck{ position:absolute; inset:0; z-index:20; }
.swiper-slide{
  display:flex; align-items:flex-end; justify-content:center;
  padding:calc(var(--top-h) + var(--safe-t) + 8px) 12px calc(var(--ctl-h) + var(--safe-b)) 12px;
}

.panel{
  width:100%; max-width:640px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 20px 20px;
  box-shadow:var(--shadow);
  max-height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* Los paneles a pantalla completa se centran verticalmente: los
   márgenes automáticos ganan sobre el align-items:flex-end del slide. */
.panel--full{
  max-width:680px;
  margin-block:auto;
  display:flex; flex-direction:column; justify-content:center;
}

.step{
  display:inline-block;
  align-self:flex-start;   /* si no, como hijo flex se estira a todo el ancho */
  font-size:10.5px; font-weight:900; letter-spacing:.09em;
  color:var(--red);
  background:rgba(226,0,43,.10);
  padding:4px 9px; border-radius:999px;
  margin-bottom:9px;
}
.panel h2{
  margin:0 0 8px;
  font-size:clamp(19px,4.6vw,27px);
  font-weight:900; line-height:1.14;
}
.panel p{
  margin:0 0 10px;
  font-size:clamp(13px,3.3vw,15px);
  line-height:1.55; color:var(--ink-soft);
}

.chips{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:7px; }
.chips li{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700;
  background:var(--bg-2); border-radius:11px; padding:9px 11px;
}
.chips li b{
  flex:0 0 auto; width:21px; height:21px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900;
}
/* La cuarta columna es la de nuestro distrito: va en rojo. */
.chips li:last-child b{ background:var(--red); color:#fff; }

.hint{
  display:inline-block;
  font-size:12.5px; font-weight:700;
  background:var(--bg-2); color:var(--ink-soft);
  padding:8px 12px; border-radius:10px;
}
.hint--ok{ background:rgba(226,0,43,.10); color:var(--red); }

.trains-done{ display:flex; gap:8px; font-size:26px; margin-top:4px; }
.trains-done span{ opacity:0; }

/* Portada y cierre */
.panel--cover, .panel--close{ text-align:center; align-items:center; gap:2px; }
.cover-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:900; letter-spacing:.07em;
  color:var(--accent); margin-bottom:12px;
}
.cover-kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 4px rgba(226,0,43,.16);
}
.cover-train{ width:min(230px,66%); height:auto; margin:0 auto 10px; display:block; }
.cover-train .tr-body path{ fill:var(--accent); }
.cover-train .tr-win{ fill:#fff !important; opacity:.92; }
.cover-train .tr-lamp{ fill:#ffd166; }
.cover-train .tr-speed line{ stroke:var(--red); stroke-width:5; stroke-linecap:round; opacity:.85; }
.cover-train .tr-rail line{ stroke:var(--ink-soft); stroke-width:4; stroke-linecap:round; opacity:.4; }

.cover-h1{
  margin:2px 0 10px;
  font-size:clamp(30px,9vw,54px);
  font-weight:900; line-height:.98; letter-spacing:-.02em;
}
.cover-sub{
  margin:0 auto 16px; max-width:430px;
  font-size:clamp(13px,3.4vw,15px); line-height:1.55; color:var(--ink-soft);
}
.cover-go{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  background:var(--bg-2); padding:9px 15px; border-radius:999px;
}
.swipe-hand{ font-size:15px; display:inline-block; }

/* ── Práctica interactiva ─────────────────────────────────────── */
.practica-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:7px;
  margin:6px 0 12px;
}
.tren-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 3px; border-radius:12px;
  background:var(--bg-2); border:2px solid transparent;
  font-family:inherit; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .1s ease;
}
.tren-btn:active{ transform:scale(.95); }
.tren-btn.on{ border-color:var(--red); background:rgba(226,0,43,.09); }

.tb-cab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:9.5px; font-weight:800; line-height:1.15;
  color:var(--ink-soft); text-align:center;
}
.tb-cab b{
  width:16px; height:16px; border-radius:5px;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.tren-btn.on .tb-cab b{ background:var(--red); color:#fff; }

/* La casilla imita el papel: fondo blanco también en modo oscuro. */
.tb-box{
  position:relative; display:block;
  width:100%; max-width:54px; aspect-ratio:104/130;
  background:#fff; border:1.5px solid var(--navy);
  border-radius:5px; overflow:hidden;
}
.tb-box img{ width:100%; height:100%; object-fit:contain; display:block; }
.tb-aspa{ position:absolute; inset:0; width:100%; height:100%; }
.tb-s{ fill:none; stroke:var(--red); stroke-width:11; stroke-linecap:round; }

.practica-msg{
  text-align:center; font-weight:800;
  font-size:14px !important; color:var(--ink) !important;
  margin:0 0 12px !important;
}
.practica-msg.done{ color:var(--red) !important; }

/* ── Reglas con ejemplo dibujado ──────────────────────────────── */
.rules{ display:grid; gap:9px; margin-top:4px; }
.rule{
  display:flex; gap:10px; align-items:center;
  padding:11px 12px; border-radius:13px;
  background:var(--bg-2);
  border-left:4px solid var(--ink-soft);
}
.rule-tx{ flex:1 1 auto; min-width:0; }

/* Miniatura de la casilla real: el mismo tren que verán en la cédula. */
.mini{
  flex:0 0 50px; height:43px;
  position:relative; display:block;
  background:#fff; border:1.5px solid var(--navy); border-radius:5px;
}
.mini img{ width:100%; height:100%; object-fit:contain; padding:3px; display:block; }
.mini-x{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mini-x path{ fill:none; stroke:var(--red); stroke-width:13; stroke-linecap:round; }
/* El cruce cae fuera del recuadro, que es justo lo que anula el voto.
   Se sale por la derecha, así que esa miniatura reserva hueco. */
.mini-x--fuera{ left:74%; top:14%; width:72%; height:72%; }
.rule--bad .mini{ margin-right:22px; }
/* Solo el título de la regla es bloque; las negritas del párrafo
   tienen que seguir siendo inline. */
.rule > div > b{ font-size:13.5px; display:block; margin-bottom:2px; }
.rule p{ margin:0; font-size:12.5px; line-height:1.45; }
.rule-ic{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:#fff;
}
.rule--ok{ border-left-color:var(--green); }
.rule--ok .rule-ic{ background:var(--green); }
.rule--bad{ border-left-color:var(--red); }
.rule--bad .rule-ic{ background:var(--red); }
.rule--warn{ border-left-color:var(--amber); }
.rule--warn .rule-ic{ background:var(--amber); }

/* ── Páginas del manual de ONPE ───────────────────────────────── */
.step--doc{ background:var(--bg-2); color:var(--accent); }
.doc-lead{ font-size:12.5px !important; margin-bottom:10px !important; }

/* El marco va en la imagen, no en el contenedor: las páginas
   apaisadas dejarían si no un recuadro vacío altísimo. */
.doc-img{
  flex:0 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  cursor:zoom-in;
  /* Es un <button>: hay que quitarle la apariencia de botón. */
  background:none; border:0; padding:0; margin:0;
  width:100%; font:inherit; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.doc-img:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:10px; }
.doc-img img{
  max-width:100%; max-height:50vh;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:5px;
}

.fuente{
  margin:10px 0 0 !important;
  font-size:11.5px !important; line-height:1.45;
  color:var(--ink-soft); text-align:center;
}
.fuente small{ font-size:10px; opacity:.7; }

.close-h2{ font-size:clamp(24px,7vw,40px) !important; margin-bottom:14px !important; }
.checklist{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px; text-align:left; }
.checklist li{
  position:relative; padding:9px 12px 9px 34px;
  background:var(--bg-2); border-radius:11px;
  font-size:13px; line-height:1.45; color:var(--ink-soft);
}
.checklist li::before{
  content:'✓'; position:absolute; left:11px; top:9px;
  color:var(--green); font-weight:900;
}
.close-cta{
  font-size:16px !important; font-weight:900; color:var(--ink) !important;
  line-height:1.35; margin-bottom:14px !important;
}

/* ═══════════ CAPA 4 · controles ═══════════════════════════════ */
.controls{
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--ctl-h) + var(--safe-b));
  padding:0 14px var(--safe-b);
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,transparent,var(--bg) 58%);
}
.controls-mid{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }

.btn{
  font-family:inherit; font-weight:800; cursor:pointer;
  border-radius:999px; border:1.5px solid var(--accent);
  background:var(--card); color:var(--accent);
  transition:background .15s ease,color .15s ease,transform .1s ease,opacity .2s ease;
}
.btn:active{ transform:scale(.95); }
.btn--round{
  flex:0 0 auto; width:42px; height:42px;
  font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:3px;
}
.btn--next{ background:var(--accent); color:var(--accent-ink); }
.btn:disabled{ opacity:.3; cursor:default; }
.btn--narr{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; padding:7px 14px;
}
.btn--narr.is-playing{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--ghost{
  font-size:12.5px; padding:9px 18px;
  border-color:var(--line); color:var(--ink-soft);
  align-self:center;
}

.swiper-pagination{ position:static !important; display:flex; gap:5px; }
.swiper-pagination-bullet{
  width:6px; height:6px; margin:0 !important;
  background:var(--ink-soft); opacity:.3; transition:all .25s ease;
}
.swiper-pagination-bullet-active{
  background:var(--red); opacity:1; width:18px; border-radius:3px;
}

/* ── Pantallas anchas ─────────────────────────────────────────── */
@media (min-width:860px) and (orientation:landscape){
  :root{ --ctl-h:82px; }
  .swiper-slide{ align-items:center; justify-content:flex-end; padding-right:20px; }
  .panel{ max-width:380px; }
  .panel--full{ max-width:640px; margin:0 auto; }
  .stage-layer{ padding:calc(var(--top-h) + 12px) 400px 90px 16px; }
  .swiper-slide[data-slide="portada"],
  .swiper-slide[data-slide="validez"],
  .swiper-slide[data-slide="dia"],
  .swiper-slide[data-slide^="doc-"]{ justify-content:center; }
  .doc-img img{ max-height:58vh; }
  .tb-box{ max-width:82px; }
  .tb-cab{ font-size:11px; }
}

@media (max-width:520px){
  .gutter{ flex-basis:10.5%; }
}

/* ── Visor a pantalla completa ────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:#0b0e14;          /* opaco: no debe transparentarse la diapositiva */
  display:flex; flex-direction:column;
  padding:calc(var(--safe-t) + 10px) 0 calc(var(--safe-b) + 10px);
}
.lightbox[hidden]{ display:none; }

.lb-bar{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:0 66px 9px;
}
.lb-btn{
  width:42px; height:42px; flex:0 0 auto;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1); color:#fff;
  font-family:inherit; font-size:19px; font-weight:800; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lb-btn:active{ transform:scale(.94); }
.lb-btn:disabled{ opacity:.3; cursor:default; }
/* Cerrar va anclado a la esquina, donde se busca por costumbre. */
.lb-close{
  position:absolute; right:14px; top:0;
  background:var(--red); border-color:transparent;
}
.lb-lvl{
  color:#fff; font-weight:800; font-size:13px;
  min-width:36px; text-align:center;
}

/* El desplazamiento nativo hace de "arrastrar para moverse". */
.lb-stage{
  flex:1 1 auto; overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 10px;
}
.lb-stage img{
  display:block; margin:0 auto;
  width:100%; height:auto;
  background:#fff; border-radius:6px;
}
.lb-hint{
  margin:9px 0 0; text-align:center;
  color:rgba(255,255,255,.62); font-size:11.5px; font-weight:600;
}

/* ── Accesibilidad ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}
.btn:focus-visible, .icon-btn:focus-visible{
  outline:3px solid var(--red); outline-offset:2px;
}