/* Ubicación: /trivias/_assets/estilos.css */

:root{
  --rus-navy:   #0c2340;   /* texto y títulos */
  --rus-azul:   #0a47c2;   /* azul principal */
  --rus-celeste:#0a8fe6;   /* acento / ola */
  --rus-cielo:  #e8f3fc;   /* fondo claro */
  --ok:   #16a34a;
  --mal:  #e23b48;
  --gris: #5b6b7e;
  --linea:#d7e3f2;
  --radio: 18px;
  --sombra: 0 14px 40px rgba(12,35,64,.12);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:"Nunito Sans", system-ui, sans-serif;
  color:var(--rus-navy);
  background:
    radial-gradient(1100px 480px at 50% -120px, var(--rus-cielo), transparent 70%),
    linear-gradient(180deg,#fff 0%, #f4f8fd 100%);
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ── Cabecera con logo siempre presente ── */
.cabecera{
  display:flex; align-items:center; gap:16px;
  padding:14px 22px; background:#fff;
  border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:10;
}
.cabecera .logo img{ height:34px; display:block; }
.cabecera-trivia{
  margin-left:auto; font-family:"Poppins",sans-serif; font-weight:700;
  color:var(--rus-azul); font-size:.95rem; letter-spacing:.02em;
}

/* ── Layout central ── */
.lienzo{ flex:1; display:flex; justify-content:center; align-items:flex-start; padding:34px 18px; }
.tarjeta{
  width:100%; max-width:560px; background:#fff;
  border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:30px 28px;
}

h1{ font-family:"Poppins",sans-serif; font-weight:800; font-size:1.7rem; margin:0 0 6px; }
h2{ font-family:"Poppins",sans-serif; font-weight:700; font-size:1.15rem; margin:26px 0 12px; }
.bajada{ color:var(--gris); margin:0 0 22px; }

/* ── Formulario de inscripción ── */
.formulario{ display:flex; flex-direction:column; gap:16px; }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo span{ font-weight:700; font-size:.9rem; }
.campo input{
  font:inherit; padding:12px 14px; border:1.5px solid var(--linea);
  border-radius:12px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.campo input:focus{ border-color:var(--rus-celeste); box-shadow:0 0 0 4px rgba(10,143,230,.15); }

.boton{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,var(--rus-azul),var(--rus-celeste));
  border:0; border-radius:14px; padding:14px 22px; cursor:pointer;
  box-shadow:0 8px 20px rgba(10,71,194,.28); transition:transform .12s, box-shadow .12s;
}
.boton:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,71,194,.34); }
.boton:active{ transform:translateY(0); }
.boton:focus-visible{ outline:3px solid var(--rus-navy); outline-offset:2px; }

.aviso{ border-radius:12px; padding:12px 14px; margin-bottom:18px; font-weight:600; }
.aviso-error{ background:#fdecee; color:var(--mal); border:1px solid #f6c5cb; }

/* ── Escenario del personaje ── */
.escenario{ position:relative; text-align:center; margin-bottom:18px; }
.personaje-host{ width:200px; height:250px; margin:0 auto; }
.personaje-host svg{ width:100%; height:100%; }
.globo{
  position:relative; display:inline-block; max-width:90%;
  margin-top:8px; padding:12px 16px; background:var(--rus-cielo);
  border:1.5px solid var(--linea); border-radius:16px;
  font-weight:700; color:var(--rus-navy); min-height:1.2em;
}
.globo:after{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  border:9px solid transparent; border-top:0; border-bottom-color:var(--rus-cielo);
}

/* animaciones del personaje (sólo translate: robustas en todos los navegadores) */
#personaje{ animation:flotar 3s ease-in-out infinite; }
.est-correcto  #personaje{ animation:saltito .5s ease; }
.est-incorrecto #personaje{ animation:sacudida .5s ease; }
.est-final     #personaje{ animation:saltito .6s ease infinite; }
@keyframes flotar  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes saltito { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-22px)} 60%{transform:translateY(-6px)} }
@keyframes sacudida{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-12px)} 40%{transform:translateX(12px)} 60%{transform:translateX(-8px)} 80%{transform:translateX(8px)} }

/* ── Juego ── */
.bloque.oculto{ display:none; }
.progreso{ font-weight:700; color:var(--rus-azul); font-size:.85rem; margin-bottom:8px; }
.pregunta{ font-family:"Poppins",sans-serif; font-weight:700; font-size:1.25rem; margin:0 0 18px; }
.opciones{ display:flex; flex-direction:column; gap:12px; }
.opcion{
  font:inherit; font-weight:600; text-align:left; cursor:pointer;
  padding:14px 16px; background:#fff; border:2px solid var(--linea);
  border-radius:14px; transition:border-color .12s, background .12s, transform .08s;
}
.opcion:hover:not(:disabled){ border-color:var(--rus-celeste); transform:translateY(-1px); }
.opcion:focus-visible{ outline:3px solid var(--rus-azul); outline-offset:2px; }
.opcion.bloqueada{ cursor:default; }
.opcion.correcta{ border-color:var(--ok); background:#e9f8ef; }
.opcion.incorrecta{ border-color:var(--mal); background:#fdecee; }

/* ── Resultado final ── */
.marcador{ text-align:center; padding:18px 0 6px; }
.marcador-total{ font-family:"Poppins",sans-serif; font-weight:800; }
.marcador-total span{ font-size:3.2rem; color:var(--rus-azul); line-height:1; }
.marcador-total small{ display:block; color:var(--gris); font-weight:600; }
.marcador-detalle{ display:flex; gap:18px; justify-content:center; margin-top:10px; color:var(--gris); font-size:.9rem; flex-wrap:wrap; }
.marcador-detalle b{ color:var(--rus-navy); }

.ranking{ width:100%; border-collapse:collapse; }
.ranking td{ padding:10px 8px; border-bottom:1px solid var(--linea); }
.ranking .pos{ width:34px; font-weight:800; color:var(--rus-celeste); }
.ranking .nom{ font-weight:600; }
.ranking .pts{ text-align:right; font-weight:800; color:var(--rus-azul); }
.ranking tr:first-child .pos{ color:var(--rus-azul); }

.pie{ text-align:center; color:var(--gris); font-size:.8rem; padding:18px; }

@media (max-width:480px){
  .tarjeta{ padding:22px 18px; }
  h1{ font-size:1.45rem; }
  .pregunta{ font-size:1.1rem; }
}
@media (prefers-reduced-motion:reduce){
  #personaje, .est-correcto #personaje, .est-incorrecto #personaje, .est-final #personaje{ animation:none; }
}