/* ===== SMACT 2026 · identidad azul acero ===== */
:root{
  --deep:#14202c; --steel:#2c4a69; --steel2:#5b7e9d;
  --card:#1e354b; --cardhi:#27455f;
  --cyan:#35c0ea; --cyan2:#7fd8f5;
  --text:#e8f0f7; --muted:#9db4c8; --faint:#6e8ba4;
  --coral:#ff6b6b; --red:#e23b4a; --amber:#f5b942; --green:#35c48a;
  --grid:#33516d;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--text);
  background:linear-gradient(135deg,var(--deep) 0%,var(--steel) 100%);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}

/* ---------- escenario 16:9 escalado ---------- */
#escenario{position:fixed;inset:0;display:grid;place-items:center}
#lienzo{
  width:1280px;height:720px;position:relative;transform-origin:center center;
  background:linear-gradient(135deg,var(--deep) 0%,var(--steel) 100%);
  overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5);
}

/* ---------- diapositiva ---------- */
.slide{
  position:absolute;inset:0;padding:52px 68px 58px;
  display:none;flex-direction:column;
}
.slide.activa{display:flex;animation:entra .28s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- apariciones (uno por uno) ---------- */
.ap{opacity:0}
.slide.go .ap{animation:ap .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.42s + .2s)}
@keyframes ap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
h1.tit{font-size:31px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;line-height:1.06;color:#fff}
.regla{width:110px;height:4px;background:var(--cyan);margin:14px 0 26px}
.cuerpo{flex:1;display:flex;gap:26px;min-height:0}
.col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:16px;justify-content:center}
.pie{font-size:10.5px;color:var(--faint);font-style:italic;line-height:1.35;padding-top:12px}
.marca{position:absolute;top:30px;right:68px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.folio{position:absolute;bottom:22px;right:68px;font-size:11px;font-weight:700;color:var(--steel2)}
.barrainf{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--steel2)}

/* ---------- componentes ---------- */
ul.vi{list-style:none;display:flex;flex-direction:column;gap:15px}
ul.vi li{position:relative;padding-left:26px;font-size:21px;line-height:1.3}
ul.vi li::before{content:"";position:absolute;left:0;top:.48em;width:10px;height:10px;border-radius:50%;background:var(--cyan)}
ul.vi.chico li{font-size:16px;gap:10px}

.tarjetas{display:grid;gap:14px}
.tarjeta{background:var(--card);border-radius:14px;padding:20px 18px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:10px}
.tarjeta .num{font-size:44px;font-weight:800;color:var(--cyan);line-height:1}
.tarjeta .num.coral{color:var(--coral)} .tarjeta .num.verde{color:var(--green)} .tarjeta .num.claro{color:var(--cyan2)}
.tarjeta .txt{font-size:13px;color:var(--muted);line-height:1.3}

.panel{background:var(--card);border-radius:12px;padding:20px 22px}
.panel.hi{background:var(--cardhi)}
.panel h4{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.panel h4.amber{color:var(--amber)} .panel h4.coral{color:var(--coral)} .panel h4.verde{color:var(--green)}
.panel p{font-size:16px;line-height:1.45;white-space:pre-line}

.franja{border-radius:10px;padding:16px 20px;font-size:17px;font-weight:700;line-height:1.32;white-space:pre-line}
.franja.cyan{background:var(--cyan);color:var(--deep)}
.franja.coral{background:var(--coral);color:var(--deep)}
.franja.amber{background:var(--amber);color:var(--deep)}
.franja.card{background:var(--card);color:var(--cyan)}
.franja.hi{background:var(--cardhi);color:var(--text)}

table.t{width:100%;border-collapse:separate;border-spacing:0 3px;font-size:14px}
table.t th{background:var(--cyan);color:var(--deep);font-weight:800;padding:9px 12px;text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
table.t th:not(:first-child),table.t td:not(:first-child){text-align:center}
table.t td{background:var(--card);padding:9px 12px;line-height:1.3}
table.t tr:nth-child(even) td{background:var(--cardhi)}
table.t th:first-child{border-radius:8px 0 0 8px} table.t th:last-child{border-radius:0 8px 8px 0}
table.t td:first-child{border-radius:8px 0 0 8px} table.t td:last-child{border-radius:0 8px 8px 0}
/* tabla en grande (diapositivas de dosis) */
table.t.grande{font-size:19px;border-spacing:0 5px}
table.t.grande th{font-size:14.5px;padding:14px 18px}
table.t.grande td{padding:14px 18px}

/* barras */
.barras{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.grupo .glabel{font-size:12.5px;color:var(--text);margin-bottom:7px;font-weight:600}
.fila{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.fila .serie{font-size:11px;color:var(--muted);width:132px;flex:0 0 132px;text-align:right;line-height:1.2}
.pista{flex:1;height:24px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.barra{height:100%;border-radius:5px;display:flex;align-items:center;justify-content:flex-end;padding-right:9px;font-size:12px;font-weight:800;color:#08131d;transition:width 2s cubic-bezier(.2,.8,.2,1)}
.barra.cyan{background:var(--cyan)} .barra.coral{background:var(--coral)}
.barra.steel{background:var(--steel2)} .barra.verde{background:var(--green)} .barra.amber{background:var(--amber)}

/* flujo */
.flujo{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.paso{background:var(--card);border-radius:11px;padding:12px 14px;border-left:4px solid var(--cyan);min-height:82px}
.paso.coral{border-left-color:var(--coral)} .paso.amber{border-left-color:var(--amber)}
.paso b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--cyan);margin-bottom:5px}
.paso.coral b{color:var(--coral)} .paso.amber b{color:var(--amber)}
.paso span{font-size:11.5px;color:var(--text);line-height:1.3;white-space:pre-line}

/* linea de tiempo */
.linea{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding-top:34px;margin-bottom:8px}
.linea::before{content:"";position:absolute;left:5%;right:5%;top:52px;height:2px;background:var(--steel2)}
.hito{text-align:center;position:relative}
.hito .anio{font-size:15px;font-weight:800;color:var(--cyan);margin-bottom:8px}
.hito.mal .anio{color:var(--coral)}
.hito .pt{width:13px;height:13px;border-radius:50%;background:var(--cyan);margin:0 auto 12px;position:relative;z-index:2;box-shadow:0 0 0 4px var(--deep)}
.hito.mal .pt{background:var(--coral)}
.hito .et{font-size:11.5px;color:var(--muted);line-height:1.25;white-space:pre-line}
/* la línea se traza sola antes de que aparezcan los hitos */
.linea.anim::before{transform:scaleX(0);transform-origin:left center}
.slide.go .linea.anim::before{animation:barre 1.4s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes barre{to{transform:scaleX(1)}}

/* casillas */
.checks{display:flex;flex-direction:column;gap:13px}
.check{display:flex;align-items:flex-start;gap:13px;font-size:16px;line-height:1.3}
.check i{flex:0 0 20px;width:20px;height:20px;border:2px solid var(--cyan);border-radius:5px;margin-top:1px}

/* numerados */
.nums{display:flex;flex-direction:column;gap:13px}
.nums li{list-style:none;display:flex;gap:15px;align-items:flex-start;font-size:18px;line-height:1.32}
.nums li em{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--cyan);color:var(--deep);
  font-style:normal;font-weight:800;font-size:16px;display:grid;place-items:center}

/* portada / cierre */
.portada{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;height:100%}
.portada h1{font-size:43px;font-weight:800;line-height:1.02;color:#fff;text-transform:none;letter-spacing:-.01em}
.portada .art{border:2px solid var(--cyan);border-radius:6px;overflow:hidden;aspect-ratio:1;background:var(--card)}
.portada .art img{width:100%;height:100%;object-fit:cover;display:block}
.placa{background:#fff;border-radius:10px;padding:9px 12px;display:inline-block;margin-top:20px}
.placa img{height:44px;display:block}
.autor{font-size:20px;font-weight:700;color:#fff;margin-top:6px}
.cargo{font-size:14px;color:var(--cyan2);margin-top:4px}
.inst{font-size:13px;color:var(--muted);margin-top:3px}

/* imagen pendiente */
.imgph{background:var(--card);border:1.5px dashed var(--faint);border-radius:12px;
  display:grid;place-items:center;text-align:center;padding:18px;min-height:120px;flex:1}
.imgph b{font-size:13px;color:var(--steel2);display:block;margin-bottom:5px}
.imgph span{font-size:10.5px;color:var(--faint)}

/* svg curva */
svg.curva{width:100%;height:auto;display:block}
/* trazado progresivo: primero la normal (--i:0), luego la de fibrinólisis (--i:1) */
svg.curva path.dib{stroke-dasharray:1;stroke-dashoffset:1}
.slide.go svg.curva path.dib{animation:dibuja 1.5s ease forwards;animation-delay:calc(var(--i,0)*1.6s + .25s)}
@keyframes dibuja{to{stroke-dashoffset:0}}

/* fila anidada de columnas */
.rejilla{display:grid;gap:20px;align-items:center}

/* cascada de imágenes con flechas (diapositiva 11) */
.cascadaimg{display:flex;align-items:flex-end;gap:4px}
.cascadaimg .cimg{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;text-align:center}
.cascadaimg .marco{border-radius:12px;overflow:hidden;background:var(--card)}
.cascadaimg .marco img{width:100%;height:100%;object-fit:contain;display:block}
.cascadaimg .nom{font-size:13px;font-weight:800;color:var(--cyan);line-height:1.2}
.cascadaimg .cflecha{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;margin-bottom:22px}
.cascadaimg .cflecha .et{font-size:11.5px;font-weight:700;color:var(--text);
  line-height:1.2;white-space:pre-line;text-align:center}
.cascadaimg .cflecha svg{width:100%;height:16px;display:block}

/* texto tecleado con cursor */
.tecleo{position:relative;white-space:pre-line}
.tecleo .cur{display:inline-block;width:2px;height:.95em;background:currentColor;
  vertical-align:-.1em;margin-left:3px;animation:parpadeo .85s steps(1,end) infinite}
.tecleo.fin .cur{animation:parpadeo 1.1s steps(1,end) infinite}
@keyframes parpadeo{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- encuesta ---------- */
.enc{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;flex:1;min-height:0;align-items:center}
.enc .preg{font-size:30px;font-weight:800;line-height:1.2;color:#fff;margin-bottom:26px}
.enc .qr{background:#fff;border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;align-self:start}
.enc .qr canvas,.enc .qr svg,.enc .qr img{width:100%;height:auto;display:block;max-width:220px}
.enc .qr .url{font-size:11px;color:#14202c;font-weight:700;word-break:break-all;text-align:center;line-height:1.3}
.enc .qr .ind{font-size:10px;color:#5b7e9d;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.enc .total{font-size:12px;color:var(--muted);margin-top:14px}
.estado{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;margin-left:10px;vertical-align:middle}
.estado.abierta{background:var(--green);color:var(--deep)}
.estado.cerrada{background:var(--faint);color:var(--deep)}

/* ---------- barra de control ---------- */
#ctrl{position:fixed;bottom:0;left:0;right:0;background:rgba(10,18,26,.94);
  border-top:1px solid var(--grid);padding:8px 16px;display:flex;gap:8px;align-items:center;
  font-size:12px;color:var(--muted);z-index:50;flex-wrap:wrap}
#ctrl button{background:var(--card);color:var(--text);border:1px solid var(--grid);
  border-radius:7px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
#ctrl button:hover{background:var(--cardhi);border-color:var(--cyan)}
#ctrl button.on{background:var(--cyan);color:var(--deep);border-color:var(--cyan)}
#ctrl .sep{flex:1}
#ctrl .pos{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text)}
#ctrl .conn{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
#ctrl .conn.ok{color:var(--green)} #ctrl .conn.demo{color:var(--amber)} #ctrl .conn.mal{color:var(--coral)}
body.limpio #ctrl{display:none}

/* notas del ponente */
#notas{position:fixed;right:14px;top:14px;width:330px;max-height:52vh;overflow:auto;
  background:rgba(10,18,26,.96);border:1px solid var(--grid);border-radius:12px;padding:15px;
  font-size:13px;line-height:1.45;color:var(--text);z-index:60;display:none}
#notas.ver{display:block}
#notas h5{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}

/* ---------- página del público (votar.html) ---------- */
body.publico{overflow-y:auto;overflow-x:hidden;display:block}
.wrap{max-width:620px;width:100%;margin:0 auto;padding:22px 18px 60px;overflow-wrap:break-word}
.pubhead{display:flex;align-items:center;gap:12px;padding:14px 0 20px;border-bottom:1px solid var(--grid);margin-bottom:22px}
.pubhead .lg{background:#fff;border-radius:8px;padding:6px 8px}
.pubhead .lg img{height:30px;display:block}
.pubhead div b{display:block;font-size:13px;color:#fff}
.pubhead div span{font-size:11px;color:var(--muted)}
.pubq{font-size:22px;font-weight:800;line-height:1.25;color:#fff;margin-bottom:6px}
.pubn{font-size:12px;color:var(--muted);margin-bottom:20px}
.ops{display:flex;flex-direction:column;gap:11px}
.op{background:var(--card);border:2px solid transparent;border-radius:12px;padding:15px 16px;
  font-size:16px;color:var(--text);cursor:pointer;text-align:left;font-family:var(--font);
  display:flex;justify-content:space-between;align-items:center;gap:12px;transition:.15s;
  width:100%;min-height:56px}
.opw{width:100%}
.op:hover{border-color:var(--steel2)}
.op.mia{border-color:var(--cyan);background:var(--cardhi)}
.op .pc{font-size:14px;font-weight:800;color:var(--cyan);white-space:nowrap}
.op .med{position:absolute;inset:0;background:rgba(53,192,234,.14);border-radius:10px;width:0;transition:width .6s}
.opw{position:relative}
.aviso{background:var(--card);border-radius:12px;padding:18px;font-size:14.5px;line-height:1.5;color:var(--muted);text-align:center}
.aviso b{color:var(--cyan)}
.grx{font-size:11px;color:var(--faint);text-align:center;margin-top:26px;line-height:1.5}
.pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;background:var(--green);color:var(--deep);margin-bottom:14px}
.pill.gris{background:var(--faint)}
.hist{margin-top:30px;padding-top:22px;border-top:1px solid var(--grid)}
.hist h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.hq{background:var(--card);border-radius:11px;padding:14px;margin-bottom:11px}
.hq b{font-size:13.5px;color:#fff;display:block;margin-bottom:10px;line-height:1.3}
.hr2{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:11.5px}
.hr2 .hl{flex:0 0 44%;color:var(--muted);line-height:1.2}
.hr2 .hp{flex:1;height:16px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.hr2 .hb{height:100%;background:var(--cyan);border-radius:4px;transition:width .5s}
.hr2 .hv{flex:0 0 44px;text-align:right;font-weight:800;color:var(--cyan)}

@media (max-width:640px){
  .pubq{font-size:19px}
  .op{font-size:15px;padding:14px}
}

/* ---------- QR del PDF en la diapositiva de cierre ---------- */
.cierrepdf{display:flex;flex-direction:column;align-items:center;gap:14px}
.cierrepdf .qr{background:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;
  align-items:center;gap:10px;width:100%;max-width:280px}
.cierrepdf .qr svg,.cierrepdf .qr img{width:100%;height:auto;display:block}
.cierrepdf .qr .url{font-size:11px;color:#14202c;font-weight:700;word-break:break-all;text-align:center;line-height:1.3}
.cierrepdf .qr .ind{font-size:10px;color:#5b7e9d;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.cierrepdf .pieqr{font-size:18px;font-weight:800;color:var(--cyan);text-align:center;line-height:1.2}

/* =====================================================================
   MODO IMPRESIÓN (?imprimir=1) — todas las diapositivas apiladas y
   quietas, una por página, para generar el PDF que se lleva el público.
   ===================================================================== */
body.imprimir{overflow:visible;background:#fff}
body.imprimir #ctrl,body.imprimir #notas{display:none!important}
body.imprimir #escenario{position:static;display:block;inset:auto}
body.imprimir #lienzo{width:1280px;height:auto;transform:none!important;
  box-shadow:none;overflow:visible;background:none}
body.imprimir .slide{position:relative;inset:auto;display:flex!important;
  width:1280px;height:720px;break-after:page;page-break-after:always;animation:none!important;
  background:linear-gradient(135deg,var(--deep) 0%,var(--steel) 100%)}
body.imprimir .slide:last-child{break-after:auto;page-break-after:auto}

/* nada se mueve: todo en su estado final */
body.imprimir .ap{opacity:1!important;transform:none!important;animation:none!important}
body.imprimir .linea.anim::before{transform:none!important;animation:none!important}
body.imprimir svg.curva path.dib{stroke-dashoffset:0!important;animation:none!important}
body.imprimir .barra{transition:none!important}
body.imprimir .tecleo .cur{display:none}

/* lista de opciones: se ve antes de abrir la votación y en el PDF */
.opslista{display:flex;flex-direction:column;gap:10px}
.opitem{background:var(--card);border-left:4px solid var(--cyan);border-radius:10px;
  padding:12px 18px;font-size:17px;color:var(--text)}

@page{size:1280px 720px;margin:0}
@media print{
  body{overflow:visible}
  #ctrl,#notas{display:none!important}
}
/* en el PDF la encuesta no lleva QR: ya no hay nada que votar */
body.imprimir .enc{grid-template-columns:1fr}
body.imprimir .enc .qr{display:none}

/* ---------- botón grande para abrir/cerrar la votación ---------- */
.enccol{display:flex;flex-direction:column;justify-content:center;min-height:0}
.granbtn{
  margin-top:20px;width:100%;padding:20px 24px;border:none;border-radius:14px;
  background:var(--green);color:var(--deep);font-family:var(--font);
  font-size:23px;font-weight:800;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 6px 22px rgba(53,196,138,.28);transition:transform .12s,filter .12s;
}
.granbtn:hover{filter:brightness(1.07)}
.granbtn:active{transform:translateY(2px)}
.granbtn.cerrar{background:var(--coral);box-shadow:0 6px 22px rgba(255,107,107,.28)}
.granbtn[hidden]{display:none}
body.imprimir .granbtn{display:none!important}