/* ═══════════════════════════════════════════════════════════════════════
   Animaciones instructivas — SINTRAEMSDES
   ═══════════════════════════════════════════════════════════════════════
   El guion completo está en servicios/elecciones/GUION-ANIMACIONES.md.
   Las escenas se arman con las mismas piezas de la interfaz real: si el
   tarjetón cambia de color, la animación cambia con él.
   ═══════════════════════════════════════════════════════════════════════ */

.ins{
  --ins-azul:#123a6d; --ins-azulosc:#0d2b52; --ins-rojo:#d3302f;
  --ins-amarillo:#f6c915; --ins-verde:#059669; --ins-borde:#dbe2ee;
  --ins-suave:#71717a; --ins-wa:#25d366; --ins-waosc:#075e54;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  border:1px solid var(--ins-borde); border-radius:1.1rem; overflow:hidden;
  background:#fff; box-shadow:0 10px 30px -22px rgba(13,43,82,.4);
}

/* ── Escenario ── */
.ins-escena{
  position:relative; min-height:16rem; padding:1.2rem;
  background:linear-gradient(168deg,#f8fafc,#eef2f8);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ins-lienzo{width:100%; max-width:26rem}
/* Cada escena entra desde abajo. Una sola transición, sin rebotes. */
.ins-entra{animation:ins-entra .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes ins-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Rótulo ── */
.ins-rotulo{
  padding:1rem 1.2rem; border-top:1px solid var(--ins-borde); background:#fff;
  font-size:.95rem; line-height:1.55; color:#3f3f46; min-height:5.2rem;
}
.ins-rotulo b{color:var(--ins-azulosc); font-weight:900}
.ins-nota{
  margin:0 1.2rem 1rem; padding:.8rem 1rem; border-radius:.8rem;
  background:#fffbeb; border:1px solid #fde68a; color:#78350f;
  font-size:.87rem; line-height:1.5;
}

/* ── Controles ── */
.ins-barra{display:flex; gap:3px; padding:0 1.2rem}
.ins-barra i{flex:1; height:3px; background:#e4e9f0; border-radius:99px; overflow:hidden}
.ins-barra i b{display:block; height:100%; width:0; background:var(--ins-azul); border-radius:99px}
.ins-barra i.hecha b{width:100%}
.ins-barra i.activa b{animation:ins-avance linear forwards}
@keyframes ins-avance{from{width:0}to{width:100%}}

.ins-mandos{
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1.2rem 1rem; border-top:1px solid #f1f5f9;
}
.ins-mandos button{
  min-width:44px; min-height:44px;              /* área de toque cómoda */
  border:1px solid var(--ins-borde); background:#fff; border-radius:.7rem;
  cursor:pointer; font-size:1rem; color:var(--ins-azul); font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
/* `display:flex` de la regla de arriba gana sobre el atributo `hidden`, así que
   hay que decirlo explícitamente: si no, el botón de audio se ve aunque no haya
   audio generado, y al pulsarlo no pasa nada. */
.ins-mandos button[hidden]{display:none}
.ins-mandos button:hover{background:#eff6ff}
.ins-mandos button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(18,58,109,.22)}
.ins-paso{flex:1; font-size:.78rem; color:var(--ins-suave); font-variant-numeric:tabular-nums}

/* ═══ Piezas de escena ═══════════════════════════════════════════════ */

/* Teléfono */
.ins-tel{
  width:13rem; margin:0 auto; border:8px solid #1f2937; border-radius:1.6rem;
  background:#efe7dd; overflow:hidden; box-shadow:0 18px 40px -20px rgba(13,43,82,.6);
}
.ins-tel-barra{background:var(--ins-waosc); color:#fff; padding:.45rem .6rem;
  display:flex; align-items:center; gap:.4rem; font-size:.7rem}
.ins-tel-barra span{width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.7rem}
.ins-hilo{padding:.6rem; display:flex; flex-direction:column; gap:.35rem; min-height:9rem}

/* Globos de WhatsApp */
.ins-globo{max-width:88%; padding:.4rem .55rem; border-radius:.7rem; font-size:.72rem;
  line-height:1.4; white-space:pre-wrap; box-shadow:0 1px 1px rgba(0,0,0,.12)}
.ins-globo.bot{background:#fff; align-self:flex-start; border-top-left-radius:.15rem}
.ins-globo.yo{background:#dcf8c6; align-self:flex-end; border-top-right-radius:.15rem}
.ins-globo b{font-weight:800}
.ins-puntos{align-self:flex-start;background:#fff;border-radius:.7rem;padding:.45rem .6rem;
  display:flex;gap:.2rem}
.ins-puntos i{width:.35rem;height:.35rem;border-radius:50%;background:#9aa0a6;
  animation:ins-punto 1.2s infinite}
.ins-puntos i:nth-child(2){animation-delay:.2s}
.ins-puntos i:nth-child(3){animation-delay:.4s}
@keyframes ins-punto{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* Tarjetón */
.ins-casillas{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ins-casilla{position:relative;border:3px solid var(--ins-borde);border-radius:.8rem;
  background:#fff;overflow:hidden;transition:border-color .3s,box-shadow .3s,opacity .3s,filter .3s}
.ins-casilla .cara{height:5rem;background:#f8fafc;display:flex;align-items:center;
  justify-content:center;font-size:1.6rem;font-weight:900;color:var(--ins-azul)}
.ins-casilla .cara.blanco{background:#fff;border:2px dashed #d4dae5;margin:.5rem;
  height:4rem;border-radius:.4rem}
.ins-casilla .pie{border-top:2px solid var(--ins-borde);padding:.45rem .5rem;
  font-size:.7rem;font-weight:800;display:flex;align-items:center;gap:.4rem}
.ins-casilla .num{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ins-azul);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex:none}
.ins-casilla.marcada{border-color:var(--ins-rojo);box-shadow:0 0 0 4px rgba(211,48,47,.16)}
.ins-casilla.apagada{opacity:.35;filter:grayscale(.6)}
/* El aspa: el mismo trazo en dos golpes que el tarjetón real */
.ins-aspa{position:absolute;inset:0;opacity:0;pointer-events:none}
.ins-casilla.marcada .ins-aspa{opacity:1}
.ins-aspa line{stroke:var(--ins-rojo);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:200;stroke-dashoffset:200}
.ins-casilla.marcada .ins-aspa line:nth-child(1){animation:ins-trazo .22s ease forwards}
.ins-casilla.marcada .ins-aspa line:nth-child(2){animation:ins-trazo .22s ease .16s forwards}
@keyframes ins-trazo{to{stroke-dashoffset:0}}

/* Tarjetas, campos, relojes y sellos */
.ins-tarjeta{background:#fff;border:1px solid var(--ins-borde);border-radius:.9rem;
  padding:.9rem;box-shadow:0 8px 20px -14px rgba(13,43,82,.5)}
.ins-campo{border:3px solid var(--ins-borde);border-radius:.7rem;background:#f8fafc;
  padding:.6rem;text-align:center;font-weight:900;letter-spacing:.25em;font-size:1.3rem;
  color:var(--ins-azulosc);font-variant-numeric:tabular-nums}
.ins-boton{background:var(--ins-azul);color:#fff;border-radius:.7rem;padding:.55rem;
  text-align:center;font-weight:900;font-size:.82rem;margin-top:.5rem}
.ins-boton.verde{background:var(--ins-verde)}
.ins-boton.hueco{background:#fff;color:var(--ins-suave);border:2px solid var(--ins-borde)}
.ins-reloj{font-size:2.2rem;font-weight:900;color:var(--ins-azul);text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ins-reloj.poco{color:var(--ins-rojo)}
.ins-sello{width:3.6rem;height:3.6rem;border-radius:50%;background:#ecfdf5;margin:0 auto;
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;
  animation:ins-late 1.5s ease-in-out infinite}
@keyframes ins-late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.ins-comprobante{background:linear-gradient(180deg,#f8fafc,#fff);border:2px solid var(--ins-borde);
  border-radius:.8rem;padding:.7rem;text-align:center;margin-top:.7rem}
.ins-comprobante small{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ins-suave);font-weight:900}
.ins-comprobante b{display:block;font-size:1.05rem;font-weight:900;color:var(--ins-azulosc);
  letter-spacing:.05em;margin-top:.15rem}
.ins-franja{padding:.55rem .8rem;border-radius:.7rem;font-weight:900;font-size:.8rem;
  display:flex;align-items:center;gap:.5rem}
.ins-franja.abierta{background:#ecfdf5;color:#047857;border:2px solid #a7f3d0}
.ins-franja.cerrada{background:#fef3f2;color:var(--ins-rojo);border:2px solid #fecaca}
.ins-franja i{width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.ins-estado{padding:.5rem .7rem;border-radius:.6rem;font-size:.75rem;font-weight:700;margin-top:.5rem}
.ins-estado.espera{background:#fffbeb;color:#b45309}
.ins-estado.voto{background:#ecfdf5;color:var(--ins-verde)}
.ins-estado.alerta{background:#fef3f2;color:var(--ins-rojo)}
.ins-pastilla{font-size:.6rem;font-weight:800;padding:.1rem .45rem;border-radius:99px}
.ins-pastilla.si{background:#ecfdf5;color:var(--ins-verde)}
.ins-pastilla.no{background:#fef3f2;color:var(--ins-rojo)}
.ins-fila{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--ins-borde);padding:.35rem 0;font-size:.72rem}
.ins-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}
.ins-dato{border:1px solid var(--ins-borde);border-radius:.6rem;padding:.45rem .55rem}
.ins-dato b{display:block;font-size:1.15rem;font-weight:900;font-variant-numeric:tabular-nums}
.ins-dato span{font-size:.58rem;color:var(--ins-suave);line-height:1.2;display:block}
.ins-qr{width:6rem;height:6rem;margin:0 auto;border:3px solid var(--ins-azul);
  border-radius:.6rem;padding:.25rem;background:#fff}
.ins-qr img{width:100%;height:100%;object-fit:contain;display:block}
.ins-sobre{font-size:2.6rem;text-align:center;animation:ins-vuela 2.4s ease-in-out infinite}
@keyframes ins-vuela{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
.ins-anillo{display:block;margin:0 auto}
.ins-anillo circle{fill:none;stroke-width:11}
.ins-anillo .pista{stroke:#e4e9f0}
.ins-anillo .avance{stroke:var(--ins-verde);stroke-linecap:round;
  stroke-dasharray:283;stroke-dashoffset:283;animation:ins-anillo 1.4s ease forwards}
@keyframes ins-anillo{to{stroke-dashoffset:130}}
.ins-candado{font-size:2.4rem;text-align:center}
.ins-tachado{text-decoration:line-through;color:var(--ins-rojo);opacity:.6}

/* ── Sin movimiento: la animación se convierte en lista ────────────────
   No es un modo degradado: la información es exactamente la misma. */
@media (prefers-reduced-motion: reduce){
  .ins-escena, .ins-barra, .ins-mandos{display:none}
  .ins-lista{display:block !important}
  .ins-entra, .ins-casilla.marcada .ins-aspa line,
  .ins-sello, .ins-sobre, .ins-puntos i, .ins-anillo .avance{animation:none !important}
}
.ins-lista{display:none; padding:1rem 1.2rem}
.ins-lista ol{margin:0; padding-left:1.3rem}
.ins-lista li{margin-bottom:.7rem; font-size:.9rem; line-height:1.5; color:#3f3f46}
.ins-lista li b{color:var(--ins-azulosc)}

/* ── Modal de ayuda (jurado y veedor) ── */
.ins-capa{position:fixed;inset:0;background:rgba(13,43,82,.78);z-index:90;
  display:none;align-items:center;justify-content:center;padding:1rem;
  backdrop-filter:saturate(140%) blur(6px)}
.ins-capa.abierta{display:flex}
.ins-capa > div{width:100%;max-width:28rem;max-height:94vh;overflow-y:auto}
.ins-cerrar{width:100%;margin-top:.6rem;border:0;border-radius:.8rem;padding:.75rem;
  background:#fff;color:var(--ins-azulosc);font-weight:900;cursor:pointer;font-family:inherit}
.ins-ayuda{border:2px solid var(--ins-borde);background:#fff;color:var(--ins-azul);
  font-weight:800;font-size:.85rem;padding:.5rem .9rem;border-radius:.7rem;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:.4rem}
.ins-ayuda:hover{background:#eff6ff;border-color:var(--ins-azul)}

/* Enlace de WhatsApp dentro de la animación. Es tocable de verdad: desde el
   celular abre el chat correcto con el mensaje ya escrito. */
.ins-wa{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  text-decoration:none;padding:.5rem .7rem;border-radius:.8rem;
  border:2px solid transparent;transition:background .15s,border-color .15s}
.ins-wa:hover{background:#f0fdf4;border-color:var(--ins-wa)}
.ins-wa:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,211,102,.35)}