/* ══════════════════════════════════════════════════════════════
   BASE COMÚN — Rosario Reclama
   Colores, letras, botones, efectos al tocar y todas las animaciones.
   Lo usan el formulario (index.html) y el panel (panel.html).
══════════════════════════════════════════════════════════════ */

:root {
  /* Violetas de La Libertad Avanza: del casi negro al lila */
  --violeta: #6a2fc0;
  --violeta-2: #8146e0;
  --violeta-osc: #2a0f55;
  --violeta-noche: #1b0937;
  --lila: #b794f6;
  --lila-claro: #d8c8ff;
  --violeta-claro: #ece2ff;
  --violeta-suave: #f6f0ff;
  --verde: #22c55e;
  --verde-osc: #15803d;
  --oro: #f5b400;
  --oro-osc: #b45309;
  --texto: #1e1433;
  --texto-2: #5b5470;
  --borde: #e4def2;
  --fondo: #faf8ff;
  --blanco: #ffffff;
  --ok: #16a34a;
  --peligro: #dc2626;
  --aviso: #d97706;
  --radio: 18px;
  --sombra: 0 10px 30px -12px rgba(46, 16, 101, .35);
  --sombra-chica: 0 4px 14px -6px rgba(46, 16, 101, .35);
  --letra: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
/* Sin demora de doble toque en los celulares */
button, a, label, input, select, textarea, .chip, .tarjeta-opcion, .opcion-lista { touch-action: manipulation; }
body {
  font-family: var(--letra);
  color: var(--texto);
  background: var(--fondo);
  font-size: 16px;
  line-height: 1.45;
}
h1, h2, h3 { font-family: var(--titulo); line-height: 1.1; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Botones ─────────────────────────────────────────────────── */
.boton {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 800; font-size: 17px; letter-spacing: .2px;
  background: linear-gradient(135deg, var(--violeta-2), var(--violeta));
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(109, 40, 217, .7), inset 0 -3px 0 rgba(0,0,0,.15);
  transition: transform .18s var(--rebote), box-shadow .2s, filter .2s, opacity .2s;
  user-select: none;
}
.boton:hover { filter: brightness(1.07); transform: translateY(-2px); }
.boton:active, .boton.apretado { transform: scale(.94); box-shadow: 0 3px 8px -4px rgba(109,40,217,.7); }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.boton.oro { background: linear-gradient(135deg, #fcd34d, var(--oro)); color: var(--violeta-osc);
  box-shadow: 0 8px 20px -8px rgba(245,180,0,.8), inset 0 -3px 0 rgba(0,0,0,.12); }
.boton.verde { background: linear-gradient(135deg, #34d36c, var(--verde) 45%, var(--verde-osc)); color: #fff;
  box-shadow: 0 8px 22px -8px rgba(22,163,74,.75), inset 0 -3px 0 rgba(0,0,0,.15); }
.boton.verde.late { animation-name: late-verde; }
@keyframes late-verde {
  0%, 100% { box-shadow: 0 8px 22px -8px rgba(22,163,74,.75), 0 0 0 0 rgba(34,197,94,.5); }
  50% { box-shadow: 0 8px 22px -8px rgba(22,163,74,.75), 0 0 0 16px rgba(34,197,94,0); }
}
.boton.claro { background: var(--blanco); color: var(--violeta); border: 2px solid var(--borde); box-shadow: none; }
.boton.chico { min-height: 40px; padding: 0 16px; font-size: 15px; }
.boton.peligro { background: linear-gradient(135deg, #ef4444, var(--peligro)); }
.boton.ancho { width: 100%; }
.boton .flecha { transition: transform .25s var(--rebote); display: inline-block; }
.boton:hover .flecha { transform: translateX(4px); }

a.boton { text-decoration: none; }
.link { background: none; border: 0; color: var(--violeta); font-weight: 800; text-decoration: underline; cursor: pointer; padding: 6px 0; font-size: 15px; }

/* Onda que sale desde el dedo al tocar (la agrega efectos.js) */
.onda {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .55);
  transform: scale(0); animation: onda .6s ease-out forwards;
}
.boton.claro .onda, .tarjeta-opcion .onda, .chip .onda { background: rgba(124, 58, 237, .22); }
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* Latido para el botón principal */
.late { animation: late 2.2s ease-in-out infinite; }
@keyframes late {
  0%, 100% { box-shadow: 0 8px 20px -8px rgba(109,40,217,.7), 0 0 0 0 rgba(124,58,237,.45); }
  50% { box-shadow: 0 8px 20px -8px rgba(109,40,217,.7), 0 0 0 14px rgba(124,58,237,0); }
}

/* ── Chips (opciones chicas) ─────────────────────────────────── */
.chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--borde); background: var(--blanco);
  font-weight: 700; font-size: 15px; color: var(--texto);
  transition: transform .18s var(--rebote), border-color .2s, background .2s, color .2s;
  user-select: none;
}
.chip:hover { border-color: #c4b5fd; transform: translateY(-1px); }
.chip:active { transform: scale(.94); }
.chip.elegido {
  background: var(--violeta); border-color: var(--violeta); color: #fff;
  animation: saltito .35s var(--rebote);
}
@keyframes saltito { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ── Campos ──────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo > span, .etiqueta { font-weight: 800; font-size: 15px; }
.campo small, .ayuda { color: var(--texto-2); font-size: 13.5px; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border-radius: 14px; border: 2px solid var(--borde); background: var(--blanco);
  font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
textarea.entrada { min-height: 120px; resize: vertical; }
.entrada:focus { outline: none; border-color: var(--violeta-2); box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
.entrada.error { border-color: var(--peligro); animation: temblor .4s; }
@keyframes temblor {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

/* Interruptor (sí/no) */
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .riel {
  flex: 0 0 auto; width: 56px; height: 32px; border-radius: 999px; background: #d6d0e4;
  position: relative; transition: background .25s;
}
.interruptor .riel::after {
  content: ''; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .3s var(--rebote);
}
.interruptor input:checked + .riel { background: var(--violeta); }
.interruptor input:checked + .riel::after { transform: translateX(24px); }
.interruptor input:focus-visible + .riel { box-shadow: 0 0 0 4px rgba(124,58,237,.25); }

/* Casilla */
.casilla { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14.5px; }
.casilla input { width: 24px; height: 24px; accent-color: var(--violeta); flex: 0 0 auto; margin-top: 1px; }

/* ── Avisos ──────────────────────────────────────────────────── */
.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px; font-size: 14.5px;
  background: #fff7ed; border: 2px solid #fed7aa; color: #7c2d12;
  animation: aparecer .4s var(--rebote);
}
.aviso.rojo { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.aviso.violeta { background: var(--violeta-suave); border-color: #ddd6fe; color: var(--violeta-osc); }
.aviso .emoji { font-size: 22px; line-height: 1; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.cartel-prueba {
  position: fixed; left: 0; right: 0; top: 0; z-index: 99999; pointer-events: none;
  height: 22px; padding: 0 10px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #f59e0b 0 14px, #fbbf24 14px 28px); color: #1a0a2e;
  font: 800 11px var(--letra); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-top: env(safe-area-inset-top); box-sizing: content-box;
}
body.con-cartel { padding-top: calc(22px + env(safe-area-inset-top)); }
body.con-cartel .cabecera, body.con-cartel .barra { top: calc(22px + env(safe-area-inset-top)); }

.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 100000;
  width: max-content; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 16px;
  background: var(--violeta-osc); color: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; text-align: center;
  box-shadow: var(--sombra); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(30px) scale(.96);
  transition: opacity .3s, transform .4s var(--rebote), visibility 0s .4s;
}
.toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%); transition: opacity .25s, transform .4s var(--rebote), visibility 0s; }

/* Ruedita de carga */
.girando {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }


/* Las animaciones de los íconos están en iconos.css */

/* ══════════════════════════════════════════════════════════════
   LOGOS OFICIALES
   El águila de La Libertad Avanza bate las alas: cada ala es una capa
   que gira desde el hombro. El león de Romina Diez "ruge" cada tanto.
   El color se cambia con --logo (por defecto, degradé violeta).
══════════════════════════════════════════════════════════════ */
.logo-lla { position: relative; width: 100%; aspect-ratio: 600 / 481; --logo: linear-gradient(160deg, #8b5cf6, #5b21b6 55%, #2e1065); }
.logo-lla.completo { aspect-ratio: 1000 / 491; }
.logo-lla .capa {
  position: absolute; inset: 0; background: var(--logo);
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
}
.logo-lla .l-cuerpo  { --m: url('../img/lla-aguila-cuerpo.png'); }
.logo-lla .l-ala-izq { --m: url('../img/lla-aguila-ala-izq.png'); transform-origin: 37% 51%; animation: lla-ala-izq 1.25s ease-in-out infinite; }
.logo-lla .l-ala-der { --m: url('../img/lla-aguila-ala-der.png'); transform-origin: 65% 60%; animation: lla-ala-der 1.25s ease-in-out infinite; }
.logo-lla.completo .l-cuerpo  { --m: url('../img/lla-completo-cuerpo.png'); }
.logo-lla.completo .l-ala-izq { --m: url('../img/lla-completo-ala-izq.png'); transform-origin: 20.5% 46%; }
.logo-lla.completo .l-ala-der { --m: url('../img/lla-completo-ala-der.png'); transform-origin: 36.3% 54%; }
@keyframes lla-ala-izq {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-13deg) scale(.96, .9); }
}
@keyframes lla-ala-der {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(12deg) scale(.95, .9); }
}
/* Todo el águila sube y baja un poquito al ritmo de las alas */
.logo-lla:not(.completo) { animation: flotar 1.25s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
.logo-lla.blanco { --logo: #ffffff; }
.logo-lla.dorado { --logo: linear-gradient(160deg, #fde68a, #f5b400 60%, #b45309); }

.logo-diez { width: 100%; aspect-ratio: 520 / 567; animation: rugido 6s ease-in-out infinite; transform-origin: 70% 40%; }
.logo-diez i {
  display: block; width: 100%; height: 100%;
  background: var(--logo, linear-gradient(160deg, #8b5cf6, #5b21b6 60%, #2e1065));
  -webkit-mask: url('../img/diez.png') center / 100% 100% no-repeat; mask: url('../img/diez.png') center / 100% 100% no-repeat;
}
.logo-diez:hover { animation-duration: 1.6s; }
@keyframes rugido {
  0%, 78%, 100% { transform: scale(1) rotate(0); }
  82% { transform: scale(1.1) rotate(-4deg); }
  86% { transform: scale(1.06) rotate(3deg); }
  90% { transform: scale(1.09) rotate(-2deg); }
  95% { transform: scale(1) rotate(0); }
}

/* Águila que se va volando (pantalla final) */
.aguila-vuela { animation: vuelo 2.6s cubic-bezier(.45,0,.55,1) forwards; }
@keyframes vuelo {
  0% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(-10px, 10px) scale(1.05); }
  100% { transform: translate(60vw, -70vh) scale(.3) rotate(-15deg); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   MOVIMIENTO DEL CELULAR (acelerómetro / giroscopio)
   efectos.js escribe --mx y --my (de -1 a 1) según cómo se inclina el
   teléfono; en la computadora, según dónde está el mouse. Se usan las
   propiedades sueltas "translate" y "rotate", que se suman a las
   animaciones sin pisarlas.
══════════════════════════════════════════════════════════════ */
.mueve-1 { translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 8px); }
.mueve-2 { translate: calc(var(--mx, 0) * 24px) calc(var(--my, 0) * 18px); }
.mueve-3 { translate: calc(var(--mx, 0) * -48px) calc(var(--my, 0) * -36px); }
.inclina { rotate: calc(var(--mx, 0) * 9deg); }
/* Giro en 3D (el logo de la portada) */
.gira-3d { rotate: y calc(var(--mx, 0) * 22deg); }
.aviso-sensor { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: rgba(255,255,255,.1); color: #e4d7ff; animation: aparecer .5s var(--rebote); }
.aviso-sensor .tel { display: inline-block; animation: tel-gira 2.4s ease-in-out infinite; }
@keyframes tel-gira { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
/* Si se sacude el celular, todo se agita un momento */
.agitado .logo-lla .capa { animation-duration: .32s !important; }
.agitado .logo-diez { animation: rugido 1s ease-in-out infinite; }

/* En pantallas táctiles no hay "pasar el mouse": se evita que quede pegado */
@media (hover: none) {
  .boton:hover, .chip:hover, .tarjeta-opcion:hover, .opcion-lista:hover { transform: none; filter: none; }
}

/* ── Accesibilidad: si el teléfono pide menos movimiento ──────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}