/* ================= Claymorfismo (se carga después de ios.css) =================
   Oscuro por defecto; <html data-tema="claro"> para la versión pastel clara. */
:root {
  --bg: #030305;
  --bg2: #101016;
  --bg3: #191921;
  --bg4: #24242f;
  --sep: rgba(255, 255, 255, .055);
  --label: #f4f3ff;
  --label2: rgba(232, 230, 255, .66);
  --label3: rgba(232, 230, 255, .36);
  --fill: #191921;
  --fill2: #272733;
  --blue: #7fe6d5;          /* acento principal: verde agua pastel */
  --blue2: #45cdb8;
  --green: #5ee38a;
  --red: #ff6b81;
  --orange: #ffb067;
  --teal: #6cc8ff;
  --r: 26px;
  --sombra-fuera: 10px 10px 26px rgba(0, 0, 0, .75), -5px -5px 16px rgba(255, 255, 255, .028);
  --sombra-dentro: inset 2px 2px 5px rgba(255, 255, 255, .07), inset -5px -5px 12px rgba(0, 0, 0, .45);
  --clay: var(--sombra-fuera), var(--sombra-dentro);
  --clay-hundido: inset 6px 6px 14px rgba(0, 0, 0, .65), inset -4px -4px 10px rgba(255, 255, 255, .04);
  --clay-boton: 0 10px 22px rgba(69, 205, 184, .30), inset 3px 3px 6px rgba(255, 255, 255, .45), inset -5px -5px 10px rgba(0, 80, 68, .35);
  --texto-boton: #04241f;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", system-ui, -apple-system, sans-serif;
}
html[data-tema="claro"] {
  color-scheme: light;
  --bg: #eceefb;
  --bg2: #f6f7ff;
  --bg3: #e3e6f8;
  --bg4: #d9dcf2;
  --sep: rgba(90, 96, 160, .10);
  --label: #2a2c48;
  --label2: rgba(42, 44, 72, .62);
  --label3: rgba(42, 44, 72, .36);
  --fill: #e3e6f8;
  --fill2: #d3d7f0;
  --blue: #7b6cff;
  --blue2: #5d4dff;
  --green: #22c58b;
  --red: #ff5f79;
  --orange: #ff9c45;
  --sombra-fuera: 12px 12px 26px rgba(110, 116, 180, .32), -8px -8px 20px rgba(255, 255, 255, .95);
  --sombra-dentro: inset 3px 3px 6px rgba(255, 255, 255, .9), inset -5px -5px 12px rgba(110, 116, 180, .16);
  --clay-hundido: inset 6px 6px 12px rgba(110, 116, 180, .28), inset -5px -5px 12px rgba(255, 255, 255, .9);
  --clay-boton: 0 12px 24px rgba(93, 77, 255, .32), inset 3px 3px 6px rgba(255, 255, 255, .45), inset -5px -5px 10px rgba(40, 20, 160, .28);
}
html, body { background: var(--bg); }

/* ---------- barras ---------- */
.nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.nav-titulo { font-weight: 700; }
.enlace { color: var(--blue); font-weight: 600; }
.barra-inf { background: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-top: 0 !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .18); }
html[data-tema="claro"] .barra-inf { box-shadow: 0 -10px 24px rgba(110, 116, 180, .18); }

/* panel: el título no se pega; las pestañas sí, con fondo sólido */
body:has(.tabs) .nav { position: relative; }
.tabs { top: 0 !important; background: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: calc(var(--top) * .0 + 10px) 16px 14px !important; }

/* ---------- tarjetas / listas ---------- */
.grupo { background: var(--bg2); border-radius: var(--r); box-shadow: var(--clay); overflow: hidden; }
.celda { background: transparent; }
.celda + .celda::before { left: 18px; right: 18px; border-top: 1px solid var(--sep); }
.celda.toca:active { background: var(--bg3); }
.grupo-cab { font-weight: 700; letter-spacing: .04em; margin-top: 28px; }
.titulo-grande { font-weight: 800; }

/* ---------- botones ---------- */
.btn { border-radius: 22px; min-height: 54px; font-weight: 700;
  background: linear-gradient(145deg, var(--blue), var(--blue2)); color: var(--texto-boton); box-shadow: var(--clay-boton); }
.btn:active { transform: translateY(2px) scale(.99); box-shadow: 0 4px 10px rgba(69, 205, 184, .25), inset 4px 4px 10px rgba(0, 80, 68, .35); opacity: 1; }
.btn.gris { background: var(--bg2); color: var(--blue); box-shadow: var(--clay); }
.btn.gris:active { box-shadow: var(--clay-hundido); }
.btn.verde { background: linear-gradient(145deg, #6ff0bd, #2fcf8f); color: #0d3b2a;
  box-shadow: 0 10px 22px rgba(47, 207, 143, .32), inset 3px 3px 6px rgba(255, 255, 255, .45), inset -5px -5px 10px rgba(0, 80, 50, .25); }
.btn.rojo { background: linear-gradient(145deg, #ff8a9c, #ff5470); color: #fff;
  box-shadow: 0 10px 22px rgba(255, 84, 112, .32), inset 3px 3px 6px rgba(255, 255, 255, .35), inset -5px -5px 10px rgba(120, 0, 30, .25); }
.btn:disabled { background: var(--bg3); color: var(--label3); box-shadow: var(--clay-hundido); }
.btn.chico { border-radius: 999px; min-height: 38px; }

/* ---------- switch / segmentado / stepper ---------- */
.switch { width: 56px; height: 34px; background: var(--bg3); box-shadow: var(--clay-hundido); }
.switch::after { top: 4px; left: 4px; width: 26px; height: 26px; background: linear-gradient(145deg, #ffffff, #dcdcf0);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .35), inset -2px -2px 4px rgba(0, 0, 0, .12); }
.switch:checked { background: linear-gradient(145deg, #6ff0bd, #2fcf8f); box-shadow: inset 3px 3px 7px rgba(0, 80, 50, .35), inset -3px -3px 7px rgba(255, 255, 255, .25); }
.switch:checked::after { transform: translateX(22px); }
.segmentado { background: var(--bg2); border-radius: 20px; padding: 5px; box-shadow: var(--clay-hundido); }
.segmentado button { border-radius: 15px; font-weight: 600; color: var(--label2); padding: 9px 6px; }
.segmentado button[aria-selected="true"] { background: linear-gradient(145deg, var(--blue), var(--blue2)); color: var(--texto-boton); box-shadow: var(--clay-boton); }
.stepper { background: var(--bg3); border-radius: 16px; box-shadow: var(--clay-hundido); }
.stepper span { border-color: var(--sep); }

/* ---------- insignias ---------- */
.badge { border-radius: 999px; padding: 4px 10px; font-weight: 700; background: var(--bg3); box-shadow: inset 1px 1px 2px rgba(255,255,255,.08), inset -2px -2px 4px rgba(0,0,0,.2); }
html[data-tema="claro"] .badge { box-shadow: inset 1px 1px 2px rgba(255,255,255,.9), inset -2px -2px 4px rgba(110,116,180,.15); }
.badge.azul { background: rgba(127, 230, 213, .16); color: var(--blue); }
.badge.verde { background: rgba(79, 224, 165, .18); color: var(--green); }
.badge.rojo { background: rgba(255, 107, 129, .18); color: var(--red); }
.badge.naranja { background: rgba(255, 176, 103, .18); color: var(--orange); }
.punto.on { background: var(--green); box-shadow: 0 0 0 4px rgba(79, 224, 165, .18); }

/* ---------- hojas y avisos ---------- */
dialog.hoja { background: var(--bg2); border-radius: 30px 30px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .4), var(--sombra-dentro); }
@media (min-width: 700px) { dialog.hoja { border-radius: 30px; } }
.hoja-asa { background: var(--fill2); width: 44px; }
.toast { border-radius: 20px; background: var(--bg4); color: var(--label); box-shadow: var(--clay); }
.toast.error { background: linear-gradient(145deg, #ff8a9c, #ff5470); color: #fff; }

/* =================== Estudiante =================== */
.icono-app, .icono { border-radius: 28px !important; width: 88px !important; height: 88px !important;
  background: linear-gradient(145deg, #b4f5ea, #45cdb8) !important; box-shadow: var(--clay-boton) !important;
  display: grid !important; place-items: center !important; font-size: 46px !important; line-height: 1 !important; }
.espera-icono { background: var(--bg2); box-shadow: var(--clay); }
.espera-icono.ok { background: linear-gradient(145deg, #6ff0bd, #2fcf8f); color: #fff; box-shadow: 0 12px 26px rgba(47,207,143,.35), inset 3px 3px 6px rgba(255,255,255,.4), inset -5px -5px 10px rgba(0,80,50,.25); }
.espera-icono.mal { background: linear-gradient(145deg, #ff8a9c, #ff5470); color: #fff; box-shadow: 0 12px 26px rgba(255,84,112,.35), inset 3px 3px 6px rgba(255,255,255,.35), inset -5px -5px 10px rgba(120,0,30,.25); }
.chip-nombre { background: var(--bg2); box-shadow: var(--clay); padding: 10px 18px; font-weight: 600; }
.reloj { background: var(--bg2); box-shadow: var(--clay); padding: 7px 14px; border-radius: 16px; font-weight: 700; }
.reloj.alerta { background: linear-gradient(145deg, #ff8a9c, #ff5470); color: #fff; }
.progreso { height: 10px; margin: 4px 16px 0; border-radius: 6px; background: var(--bg2); box-shadow: var(--clay-hundido); overflow: hidden; }
.progreso div { border-radius: 6px; background: linear-gradient(90deg, var(--blue2), var(--blue)); }
.enunciado { font-weight: 700; }
/* cada opción es una pieza de arcilla independiente */
#x-opciones { background: transparent; box-shadow: none; overflow: visible; display: grid; gap: 14px; }
#x-opciones .celda::before { display: none; }
.opcion { background: var(--bg2) !important; border-radius: 22px; box-shadow: var(--clay); min-height: 64px; padding: 14px 16px; transition: transform .12s, box-shadow .12s; }
.opcion:active { transform: scale(.985); box-shadow: var(--clay-hundido); }
.opcion .letra { border: 0; width: 34px; height: 34px; background: var(--bg3); box-shadow: var(--clay-hundido); color: var(--label2); }
.opcion[aria-checked="true"] { background: linear-gradient(145deg, rgba(127,230,213,.32), rgba(69,205,184,.18)) !important;
  box-shadow: var(--sombra-fuera), inset 0 0 0 2px var(--blue), var(--sombra-dentro); }
.opcion[aria-checked="true"] .letra { background: linear-gradient(145deg, var(--blue), var(--blue2)); color: var(--texto-boton); box-shadow: var(--clay-boton); }
.rejilla { gap: 10px !important; }
.rejilla button { border-radius: 16px !important; background: var(--bg3) !important; box-shadow: var(--clay); }
.rejilla button.hecha { background: linear-gradient(145deg, rgba(127,230,213,.40), rgba(69,205,184,.26)) !important; color: #e9fffb !important; }
.rejilla button.actual { outline: 0 !important; box-shadow: var(--sombra-fuera), inset 0 0 0 2px var(--blue) !important; }
.anillo { width: 184px !important; height: 184px !important; box-shadow: var(--clay); background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--bg3) 0) !important; }
.anillo > div { width: 146px !important; height: 146px !important; background: var(--bg2) !important; box-shadow: var(--clay); }
.stats { gap: 12px !important; }
.stats div, .resumen div { background: var(--bg2) !important; border-radius: 22px !important; box-shadow: var(--clay); }
.rev { background: var(--bg2) !important; border-radius: 24px !important; box-shadow: var(--clay); margin-top: 16px !important; padding: 16px 18px !important; }
.resp { border-radius: 14px !important; }
.explica { border-top-color: var(--sep) !important; }

/* =================== Panel =================== */
.resumen { gap: 10px !important; }
.redondo { box-shadow: var(--clay); }
.redondo.si { background: linear-gradient(145deg, #6ff0bd, #2fcf8f); color: #0d3b2a; }
.redondo.no { background: linear-gradient(145deg, #ff8a9c, #ff5470); color: #fff; }
.redondo.mas { background: var(--bg3); }
.banner { background: linear-gradient(145deg, rgba(127,230,213,.35), rgba(69,205,184,.18)) !important; border-radius: 26px !important; box-shadow: var(--clay); }
.barra { height: 10px !important; border-radius: 6px !important; background: var(--bg2) !important; box-shadow: var(--clay-hundido); }
.barra div { border-radius: 6px; background: linear-gradient(90deg, #6ff0bd, #2fcf8f) !important; }
.codigo { border-radius: 10px; background: var(--bg3); box-shadow: var(--clay-hundido); padding: 4px 8px; }
.barra-pct { height: 7px !important; border-radius: 4px !important; background: var(--bg3) !important; box-shadow: var(--clay-hundido); }
.contador { box-shadow: 0 3px 8px rgba(255, 84, 112, .4); }
.preg-mal { background: var(--bg3) !important; border-radius: 16px !important; box-shadow: var(--clay-hundido); }

/* ---- arreglos para celular ---- */
.alumno .principal .badge { margin-top: 5px; }
@media (max-width: 600px) {
  .resumen { grid-template-columns: repeat(4, 1fr); gap: 8px !important; }
  .resumen div { padding: 10px 4px !important; border-radius: 18px !important; }
  .resumen b { font-size: 20px !important; }
  .resumen span { font-size: 11px !important; }
  .alumno { align-items: flex-start; }
  .alumno .punto { margin-top: 8px; }
  #i-titulo { font-size: 21px !important; }
  .pdfs { grid-template-columns: 1fr !important; }
  .tabs .segmentado button { font-size: 13px !important; padding: 9px 2px !important; }
}

/* =================== Animaciones (lentas y suaves) =================== */
@keyframes entrar { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rebote { 35% { transform: scale(1.2); } 70% { transform: scale(.96); } }
@keyframes latido-verde { 0%, 100% { box-shadow: 0 0 0 3px rgba(94, 227, 138, .20); } 50% { box-shadow: 0 0 0 7px rgba(94, 227, 138, .05); } }
@keyframes aplastar { 45% { transform: scale(.975, .96); } 100% { transform: none; } }
@keyframes alerta { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }

.entra { animation: entrar 1.3s cubic-bezier(.22, .8, .3, 1) both; }
.escalonar > * { animation: entrar 1.1s cubic-bezier(.22, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 170ms + 200ms); }
.pop { animation: pop 1.1s cubic-bezier(.3, 1.2, .5, 1) both; }

/* portadas (/quiz, /login, espera): cada pieza entra una tras otra, despacio */
@keyframes aparecer-icono { 0% { opacity: 0; transform: translateY(24px) scale(.6); } 60% { opacity: 1; transform: translateY(-4px) scale(1.04); } 100% { opacity: 1; transform: none; } }
.hero.entra { animation: none; }
.hero.entra > * { animation: entrar 1.5s cubic-bezier(.22, .8, .3, 1) both; }
.hero.entra > :nth-child(1) { animation: aparecer-icono 1.8s cubic-bezier(.22, .8, .3, 1) both, flotar 7s ease-in-out 2s infinite; animation-delay: .1s, 2s; }
.hero.entra > :nth-child(2) { animation-delay: .55s; }
.hero.entra > :nth-child(3) { animation-delay: .9s; }
.hero.entra > :nth-child(4) { animation-delay: 1.25s; }
.hero.entra > :nth-child(5) { animation-delay: 1.6s; }
.hero.entra > :nth-child(6) { animation-delay: 1.95s; }
.cargando { animation-duration: 2.2s !important; }

/* estudiante */
.icono-app, .icono { animation: flotar 7s ease-in-out infinite; }
#v-espera .espera-icono:not(.ok):not(.mal) { animation: flotar 6s ease-in-out infinite; }
.opcion .letra { transition: transform .35s, background .35s, box-shadow .35s; }
.opcion.elegida-ahora { animation: aplastar .55s ease-out; }
.opcion.elegida-ahora .letra { animation: pop .7s cubic-bezier(.3, 1.2, .5, 1); }
#v-resultado.entra .anillo { animation: pop 1.6s cubic-bezier(.3, 1.15, .5, 1) both; }
#v-resultado.entra .stats div { animation: entrar 1.2s cubic-bezier(.22, .8, .3, 1) both; }
#v-resultado.entra .stats div:nth-child(1) { animation-delay: .6s; }
#v-resultado.entra .stats div:nth-child(2) { animation-delay: .8s; }
#v-resultado.entra .stats div:nth-child(3) { animation-delay: 1s; }
.reloj.alerta { animation: alerta 2.4s ease-in-out infinite; }

/* panel */
.celda.nuevo { animation: entrar 1.3s cubic-bezier(.22, .8, .3, 1) both; }
.contador.rebota { animation: rebote .8s ease-out; }
.punto.on { animation: latido-verde 5s ease-in-out infinite; }
.banner { animation: entrar 1.3s cubic-bezier(.22, .8, .3, 1) both; }
.tarjeta-codigo, .proy-digitos { box-shadow: var(--clay); }
.tarjeta-codigo .digitos, .proy-digitos { color: var(--label); }

@media (hover: hover) {
  .btn:not(:disabled):hover { transform: translateY(-2px); }
  .opcion:hover { transform: translateY(-2px); }
  .celda.toca:hover { background: var(--bg3); }
}
.btn, .opcion, .redondo { transition: transform .3s ease, box-shadow .35s ease, background .35s ease; }
.redondo:active { transform: scale(.9); }
.toast { transition: opacity .4s, transform .7s cubic-bezier(.22, .8, .3, 1.15); }

/* los contenedores con barras fijas no se transforman (rompería la barra inferior) */
#v-examen.entra, #v-resultado.entra { animation: none; }

/* =================== Logo Quiznius (pixel art) =================== */
.logo-h { margin: 0 0 10px; text-align: center; line-height: 0; }
.logo-q { width: min(86%, 380px); height: auto; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 10px 28px rgba(127,230,213,.18)); animation: flotar 7s ease-in-out infinite; }
.logo-proy { width: min(60vw, 560px); margin: 0 auto 2vh; display: block; }
.logo-nav { height: 26px; width: auto; image-rendering: pixelated; display: block; }
.cab-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo-cab { width: clamp(28px, 4vh, 44px); height: auto; image-rendering: pixelated; flex: none; }
.version { text-align: center; color: var(--label3); font-size: 12px; margin-top: 22px; letter-spacing: .04em; }
@media (max-width: 420px) { .logo-nav { height: 20px; } }
.lq.lq-proy { width: min(62vw, 600px); margin-bottom: 2.4vh; }
.creditos { text-align: center; color: var(--label3); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; margin: 22px 0 6px; }
.creditos-pie { padding: 0 16px 28px; }
.creditos-proy { position: fixed; left: 18px; bottom: 22px; margin: 0; z-index: 4; font-size: clamp(12px, 1.6vh, 16px); }
/* racha de 25 o más: nombre dorado con brillo */
.nombre-oro { background: linear-gradient(90deg, #fff1a8 0%, #ffd23f 30%, #f0a92c 50%, #ffd23f 70%, #fff1a8 100%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 800; animation: brillo-oro 2.4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,210,63,.35)); }
@keyframes brillo-oro { to { background-position: -200% center; } }
.llama[data-n="4"] { color: #ffd23f; }