:root{
  --azul:#005da4;
  --azul-oscuro:#0a2a5a;
  --celeste:#00c0f3;
  --celeste-claro:#e8f0fe;
  --verde:#1fa05a;
  --rojo:#d64545;
  --ambar:#f5a623;
  --texto:#1d2b3a;
  --texto-suave:#5c6f82;
  --fondo:#eef5fc;
  --tarjeta:#ffffff;
  --borde:#d9e6f2;
  --sombra:0 4px 16px rgba(10,42,90,.08);
  --radio:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--fondo);color:var(--texto);
  font-size:17px;line-height:1.45;
  overscroll-behavior-y:contain;
}
#app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh}
.vista{display:none;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.vista.activa{display:block}
.vista.centrada{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:20px}
.oculta{display:none !important}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(135deg,var(--azul-oscuro) 0%,var(--azul) 55%,var(--celeste) 130%);
  color:#fff;
}
.topbar-titulo{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.logo-mini{font-size:1.2rem}
.topbar-derecha{display:flex;align-items:center;gap:6px}
.icono-btn{
  background:rgba(255,255,255,.16);border:none;border-radius:12px;
  min-width:44px;min-height:44px;font-size:1.15rem;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.icono-btn:active{transform:scale(.94)}
.contador{font-weight:800;background:rgba(255,255,255,.18);padding:6px 12px;border-radius:999px;font-size:.9rem}
.cronometro{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.5px}

/* ---------- Contenido ---------- */
.contenido{padding:16px 16px 30px;display:flex;flex-direction:column;gap:14px}
h2{margin:0;font-size:1.45rem}
h3{margin:6px 0 2px;font-size:1.12rem}
h4{margin:10px 0 2px;font-size:.98rem;color:var(--texto-suave)}
.sub{margin:4px 0;color:var(--texto-suave)}
.nota{font-size:.82rem;color:var(--texto-suave)}
.js-ok{font-size:.82rem;color:var(--verde);font-weight:700;margin-top:10px}
.saludo h2{color:var(--azul-oscuro)}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra)}
.tarjeta h3{margin-top:0;color:var(--azul-oscuro)}

/* ---------- Bienvenida ---------- */
.bienvenida{width:100%;text-align:center;padding:28px 20px}
.bienvenida h1{margin:8px 0 4px;color:var(--azul-oscuro);font-size:1.9rem}
.emoji-grande{font-size:3.4rem}
.campo-nombre{display:block;margin:18px 0 6px;text-align:left}
.campo-nombre span{display:block;font-size:.9rem;color:var(--texto-suave);margin-bottom:6px}
.campo-nombre input{
  width:100%;padding:14px;font-size:1.1rem;border:2px solid var(--borde);border-radius:12px;
  outline:none;background:#f8fbff;
}
.campo-nombre input:focus{border-color:var(--celeste)}

/* ---------- Botones ---------- */
.btn-primario{
  background:linear-gradient(135deg,var(--azul) 0%,var(--celeste) 150%);
  color:#fff;border:none;border-radius:14px;padding:14px 22px;
  font-size:1.05rem;font-weight:800;cursor:pointer;width:100%;
  box-shadow:0 4px 14px rgba(0,93,164,.3);
}
.btn-primario:active{transform:scale(.98)}
.btn-grande{padding:16px;font-size:1.1rem;margin-top:10px}
.btn-secundario{
  background:var(--celeste-claro);color:var(--azul);border:none;border-radius:12px;
  padding:12px 14px;font-size:.95rem;font-weight:700;cursor:pointer;flex:1;min-height:46px;
}
.btn-secundario:active{transform:scale(.97)}
.btn-secundario.marcada{background:var(--ambar);color:#fff}
.btn-texto{background:none;border:none;color:var(--azul);font-weight:700;font-size:.95rem;cursor:pointer;padding:10px;text-decoration:underline}

/* ---------- Acciones inicio ---------- */
.grid-acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-accion{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:16px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  text-align:left;cursor:pointer;box-shadow:var(--sombra);min-height:110px;
}
.btn-accion:active{transform:scale(.97)}
.accion-emoji{font-size:1.7rem}
.accion-txt b{display:block;color:var(--azul-oscuro);font-size:1rem}
.accion-txt small{color:var(--texto-suave);font-size:.78rem;line-height:1.3;display:block;margin-top:2px}

/* ---------- Meta día ---------- */
.meta-dia .meta-fila{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.95rem}
.racha{color:#b45309;font-weight:800}
.barra{background:#e3edf7;border-radius:999px;height:12px;overflow:hidden}
.barra-llena{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--celeste),var(--azul));transition:width .4s}

/* ---------- Chips / opciones ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:var(--tarjeta);border:2px solid var(--borde);border-radius:999px;
  padding:10px 18px;font-size:.95rem;font-weight:700;cursor:pointer;color:var(--texto);
}
.chip.activa{background:var(--azul);border-color:var(--azul);color:#fff}
.opciones-area{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opc-area{
  background:var(--tarjeta);border:2px solid var(--borde);border-radius:14px;
  padding:12px 6px;font-weight:700;cursor:pointer;font-size:.9rem;
}
.opc-area.activa{background:var(--azul);border-color:var(--azul);color:#fff}
.opciones-simulacro{display:flex;flex-direction:column;gap:10px}
.opc-sim{
  background:var(--tarjeta);border:2px solid var(--borde);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:left;
}
.opc-sim b{color:var(--azul-oscuro)}
.opc-sim small{color:var(--texto-suave)}
.opc-sim.activa{border-color:var(--azul);background:var(--celeste-claro)}

/* ---------- Pregunta ---------- */
.etiqueta-cat{
  display:inline-block;background:var(--celeste-claro);color:var(--azul);
  font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:999px;margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.4px;
}
.texto-pregunta{font-size:1.04rem;margin:0 0 14px;white-space:pre-line}
.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{
  display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:#f8fbff;border:2px solid var(--borde);border-radius:14px;
  padding:13px 14px;cursor:pointer;font-size:.98rem;width:100%;
}
.opcion .letra{
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--celeste-claro);color:var(--azul);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;margin-top:1px;
}
.opcion:active{transform:scale(.99)}
.opcion.correcta{border-color:var(--verde);background:#e9f8f0}
.opcion.correcta .letra{background:var(--verde);color:#fff}
.opcion.incorrecta{border-color:var(--rojo);background:#fdeeee}
.opcion.incorrecta .letra{background:var(--rojo);color:#fff}
.opcion.deshabilitada{cursor:default;opacity:.75}

/* ---------- Explicación ---------- */
.explicacion{
  background:#fff8e8;border:1px solid #f2d9a0;border-radius:var(--radio);padding:14px;
  animation:aparecer .3s ease;
}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.explicacion-titulo{font-weight:800;margin-bottom:6px}
.explicacion-titulo.bien{color:var(--verde)}
.explicacion-titulo.mal{color:var(--rojo)}
.explicacion p{margin:0 0 10px;font-size:.95rem}

/* ---------- Racha en vivo ---------- */
.racha-en-vivo{
  background:linear-gradient(135deg,#ff7b00,#ffb800);color:#fff;font-weight:800;
  border-radius:999px;padding:8px 16px;text-align:center;font-size:.95rem;
  box-shadow:0 3px 10px rgba(255,123,0,.35);
}

/* ---------- Simulacro ---------- */
.progreso-simulacro{margin:2px 0 4px}
.nav-sim{display:flex;gap:8px}
.navegador-items{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.item-nav{
  aspect-ratio:1;border-radius:10px;border:2px solid var(--borde);background:var(--tarjeta);
  font-weight:800;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--texto);padding:0;
}
.item-nav.respondida{background:var(--azul);border-color:var(--azul);color:#fff}
.item-nav.marcada{border-color:var(--ambar)}
.item-nav.actual{outline:3px solid var(--celeste)}
.overlay{
  position:fixed;inset:0;background:rgba(10,42,90,.55);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.pausa-box{width:100%;max-width:380px;text-align:center}
.pausa-box p{color:var(--texto-suave)}

/* ---------- Resultado ---------- */
.resultado{text-align:center}
.nota-grande{font-size:4rem;font-weight:900;color:var(--azul);line-height:1}
.resultado .sub{margin-bottom:14px}
.mini-stat{
  display:flex;justify-content:space-between;align-items:center;
  background:#f6fafd;border:1px solid var(--borde);border-radius:12px;padding:10px 14px;margin:6px 0;
}
.mini-stat b{color:var(--azul-oscuro)}
.lista-revision{display:flex;flex-direction:column;gap:10px}
.item-revision{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:12px;font-size:.9rem}
.item-revision .rev-cabecera{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-weight:800}
.rev-bien{color:var(--verde)}.rev-mal{color:var(--rojo)}
.item-revision .rev-opcion{margin:4px 0;padding:6px 10px;border-radius:8px;background:#f6fafd}
.item-revision .rev-clave{background:#e9f8f0;font-weight:700}
.item-revision .rev-elegida-mal{background:#fdeeee;font-weight:700}
.item-revision .rev-ex{background:#fff8e8;border-radius:8px;padding:8px 10px;margin-top:6px;font-size:.85rem}

/* ---------- Progreso ---------- */
.nivel-fila{display:flex;justify-content:space-between;margin-bottom:8px;font-weight:700}
.grid-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lista-categorias,.lista-simulacros{display:flex;flex-direction:column;gap:8px}
.fila-cat{display:flex;align-items:center;gap:10px;font-size:.88rem}
.fila-cat .cat-nombre{flex:0 0 130px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-cat .barra{flex:1}
.fila-cat .cat-pct{flex:0 0 52px;text-align:right;font-weight:800;color:var(--azul)}
.fila-sim{display:flex;justify-content:space-between;align-items:center;background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:10px 14px;font-size:.88rem}
.fila-sim b{color:var(--azul)}
.lista-insignias{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.insignia{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:12px 8px;
  text-align:center;font-size:.72rem;color:var(--texto-suave);
}
.insignia .ins-emoji{font-size:1.6rem;display:block;margin-bottom:4px;filter:grayscale(1);opacity:.45}
.insignia.ganada{border-color:#f2d9a0;background:#fffdf4;color:var(--texto)}
.insignia.ganada .ins-emoji{filter:none;opacity:1}

/* ---------- Info ---------- */
.datos-oficiales,.consejos,.enlaces{margin:0;padding-left:20px;font-size:.92rem;display:flex;flex-direction:column;gap:8px}
.datos-oficiales li::marker,.consejos li::marker{color:var(--celeste)}
.enlaces a{color:var(--azul);word-break:break-all}

/* ---------- Reanudar ---------- */
.reanudar{border:2px solid var(--celeste);text-align:center}

/* ---------- Confeti ---------- */
#confeti{position:fixed;inset:0;pointer-events:none;z-index:100}

@media (min-width:600px){
  body{font-size:18px}
  .navegador-items{grid-template-columns:repeat(15,1fr)}
}