@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&display=swap");
[hidden] { display: none !important; }
:root {
  --fondo: #f6f3ec; --papel: #fffdf8; --tinta: #1f2a44; --suave: #6b7280;
  --acento: #e2583e; --ok: #2f9e6a; --medio: #d99a1c; --mal: #c8432f; --borde: #e6dfd0;
}

* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 system-ui, "Segoe UI", "Noto Sans JP", "Noto Sans SC", sans-serif;
  background: var(--fondo); color: var(--tinta); padding-bottom: 80px; }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--papel);
  border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.marca { flex: 1; }
.xp { font-weight: 700; color: var(--medio); }
select, input, textarea, button, .boton { font: inherit; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--papel); color: var(--tinta); padding: 10px 14px; }
button, .boton { cursor: pointer; background: var(--tinta); color: var(--papel); border: none; font-weight: 600; }
button:active { transform: scale(.97); }
.vista { display: none; max-width: 720px; margin: 0 auto; padding: 16px; }
.vista.activa { display: block; }
.tarjeta { background: var(--papel); border: 1px solid var(--borde); border-radius: 20px; padding: 20px; margin-bottom: 16px; }
.grande { text-align: center; }
.etiqueta { color: var(--suave); font-size: 14px; }
.emoji { font-size: 64px; }
.texto { font-size: 44px; font-weight: 700; }
.lectura { font-size: 22px; color: var(--acento); }
.pron { color: var(--suave); }
.significado { font-size: 22px; margin: 6px 0 14px; }
.botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.mic { width: 100%; padding: 22px; font-size: 20px; background: var(--acento); touch-action: none; user-select: none; }
.mic.grabando { animation: latido 1s infinite; background: var(--mal); }
@keyframes latido { 50% { transform: scale(1.03); } }
canvas { width: 100%; height: auto; margin-top: 12px; background: var(--fondo); border-radius: 12px; }
#resultado { margin-top: 12px; font-size: 18px; }
.silabas { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.silabas span { padding: 4px 10px; border-radius: 8px; color: #fff; }
.s-ok { background: var(--ok); } .s-tono { background: var(--medio); } .s-mal { background: var(--mal); }
.barra { height: 8px; background: var(--borde); border-radius: 4px; overflow: hidden; }
#barra-avance { height: 100%; width: 0; background: var(--ok); transition: width .4s; }
nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--papel);
  border-top: 1px solid var(--borde); z-index: 5; padding-bottom: env(safe-area-inset-bottom); }
nav button { flex: 1; background: none; color: var(--suave); border-radius: 0; padding: 10px 2px; font-size: 12px; white-space: nowrap; }
nav button.on { color: var(--acento); }
.usuarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.usuarios button { padding: 20px; font-size: 18px; background: var(--papel); color: var(--tinta); border: 1px solid var(--borde); }
#f-usuario { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 40vh; margin-bottom: 12px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; }
.msg.yo { align-self: flex-end; background: var(--tinta); color: var(--papel); }
.msg.tutor { align-self: flex-start; background: var(--papel); border: 1px solid var(--borde); }
.msg.tutor button { margin-top: 6px; padding: 4px 10px; font-size: 14px; }
.entrada { display: flex; gap: 8px; position: sticky; bottom: 70px; }
.entrada input { flex: 1; }
.mic-peq { background: var(--acento); }
.misiones { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
.misiones button { white-space: nowrap; background: var(--papel); color: var(--tinta); border: 1px solid var(--borde); }
.misiones button.on { border-color: var(--acento); color: var(--acento); }
textarea { width: 100%; }
.correccion { white-space: pre-wrap; margin-top: 12px; }
.unidad { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--borde); }
#festejo { position: fixed; inset: 0; display: grid; place-items: center; font-size: 120px; pointer-events: none;
  animation: festejo 0.9s ease-out forwards; z-index: 10; }
@keyframes festejo { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6) rotate(20deg); opacity: 0; } }

/* ---------- Juegos ---------- */
.juegos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.juego-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 18px;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--borde); border-radius: 20px; }
.juego-btn .ico { font-size: 40px; }
.juego-btn small { color: var(--suave); font-weight: 400; }
.chip { font-size: 12px; background: var(--fondo); border-radius: 99px; padding: 2px 8px; margin-top: 4px; }
.juego-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.juego-cab > div:nth-child(2) { flex: 1; }
.juego-cab .ayuda { color: var(--suave); font-size: 14px; }
.juego-cab .volver { padding: 8px 14px; }
.marcador { font-weight: 700; color: var(--medio); white-space: nowrap; }
.oir-grande { font-size: 40px; padding: 14px 30px; border-radius: 50%; background: var(--acento); }
.opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.opcion { font-size: 64px; padding: 16px; background: var(--fondo); color: var(--tinta); border: 3px solid transparent; display: flex; flex-direction: column; align-items: center; }
.opcion small { font-size: 18px; }
.ok { border-color: var(--ok) !important; background: color-mix(in srgb, var(--ok) 20%, transparent) !important; }
.mal { border-color: var(--mal) !important; opacity: .5; }
.memorama { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.carta { aspect-ratio: 3/4; font-size: 22px; padding: 4px; background: var(--tinta); position: relative; }
.carta .dorso { display: none; } .carta.abierta .frente { display: none; }
.carta.abierta { background: var(--papel); color: var(--tinta); border: 2px solid var(--borde); }
.carta.abierta .dorso { display: block; } .dorso.emoji { font-size: 42px; }
.carta.hecha { border-color: var(--ok); }
.respuesta, .banco { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 56px; padding: 8px; border-radius: 12px; }
.respuesta { border: 2px dashed var(--borde); margin: 12px 0; }
.pieza { font-size: 22px; background: var(--papel); color: var(--tinta); border: 2px solid var(--borde); }
.elige { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.sig { font-size: 20px; color: var(--suave); }
.msg-juego { min-height: 28px; margin-top: 10px; font-size: 18px; }
.tonos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.tono { display: flex; flex-direction: column; align-items: center; background: var(--fondo); color: var(--tinta); border: 3px solid transparent; }
.tono span { font-size: 40px; line-height: 1; } .tono small { font-weight: 400; font-size: 12px; }
.lienzo { width: 100%; height: auto; background: #fff; border: 2px solid var(--borde); border-radius: 16px; touch-action: none; margin-top: 8px; }
.paleta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.paleta .color { width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 3px solid var(--borde); }
.grande-paleta .color { width: 52px; height: 52px; }
.paleta .color.on { border-color: var(--tinta); transform: scale(1.15); }
.paleta .borrar { background: var(--papel); color: var(--tinta); border: 1px solid var(--borde); }
.pistas { font-size: 30px; letter-spacing: 4px; }
.pregunta { font-size: 24px; margin-top: 10px; } .mini { padding: 4px 10px; }
.escena { width: 100%; height: auto; background: #fff; border-radius: 16px; margin: 10px 0; }
.escena [data-obj] { cursor: pointer; }
.instruccion { font-size: 24px; min-height: 36px; }
/* ---------- Nivel ---------- */
.nivel-titulo { font-size: 30px; font-weight: 800; margin: 4px 0; }
.niveles { margin: 14px 0; }
.nivel-fila { display: grid; grid-template-columns: 64px 120px 1fr 44px; align-items: center; gap: 8px; padding: 4px 0; }
.nivel-fila .cod { font-weight: 700; } .nivel-fila .nom { color: var(--suave); font-size: 14px; }
.nivel-fila .barra > div { height: 100%; background: var(--ok); }
.pendiente { color: var(--suave); font-size: 14px; margin-top: 6px; }
.nivel-fila.hecho .cod::after { content: " ✅"; }
.nota { color: var(--suave); display: block; margin-top: 6px; }
#radar { max-width: 360px; display: block; margin: 0 auto; background: none; }

.mic-estado { min-height: 22px; margin-top: 6px; color: var(--suave); font-size: 15px; }
.entrada .mic-estado { display: none; }

/* ---------- v3 ---------- */
.ayuda-caja { background: var(--papel); border: 1px solid var(--borde); border-radius: 16px; padding: 10px 14px; margin-bottom: 12px; }
.ayuda-caja summary { cursor: pointer; font-weight: 600; }
.ayuda-caja p { margin: 8px 0; color: var(--suave); }
.ejemplos { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { padding: 4px 10px; font-size: 14px; font-weight: 500; background: var(--fondo); color: var(--tinta); border: 1px solid var(--borde); }
.pestanas { display: flex; gap: 6px; margin-bottom: 12px; }
.pestanas button { flex: 1; background: var(--fondo); color: var(--tinta); border: 1px solid var(--borde); }
.pestanas button.on { background: var(--tinta); color: var(--papel); }
.ayuda { color: var(--suave); }
#v-escribir textarea { margin-top: 10px; }
.idioma-prog summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; cursor: pointer; list-style: none; }
.idioma-prog summary::-webkit-details-marker { display: none; }
.idioma-prog summary .idi { font-size: 20px; font-weight: 700; }
.idioma-prog summary .idi::before { content: "▸ "; color: var(--suave); }
.idioma-prog[open] summary .idi::before { content: "▾ "; }
.idioma-prog summary .res { color: var(--acento); font-weight: 600; text-align: right; }
.mini-barra { height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; align-self: center; }
.mini-barra span { display: block; height: 100%; background: var(--ok); }
.idioma-prog summary .cnt { color: var(--suave); font-size: 14px; text-align: right; }
.idioma-prog[open] summary { margin-bottom: 12px; }
canvas.radar { max-width: 360px; display: block; margin: 0 auto; }
#leccion-vacia p { color: var(--suave); }

/* ---------- v4: voz y trazos ---------- */
.voz-panel { position: sticky; bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px; background: linear-gradient(transparent, var(--fondo) 30%); }
.voz-estado { color: var(--suave); min-height: 24px; text-align: center; }
.b-voz { width: 96px; height: 96px; border-radius: 50%; font-size: 42px; background: var(--acento);
  box-shadow: 0 0 0 calc(var(--nivel, 0) * 22px) color-mix(in srgb, var(--acento) 35%, transparent); transition: box-shadow .08s; }
.b-voz.escuchando { background: var(--mal); }
.b-voz.hablando { background: var(--ok); animation: latido 1.2s infinite; }
.voz-opciones { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.voz-opciones select { padding: 6px 10px; font-size: 14px; }
.interruptor { display: inline-flex; gap: 6px; align-items: center; color: var(--suave); }
.chat { padding-bottom: 8px; }
.msg.correccion { align-self: flex-start; background: color-mix(in srgb, var(--medio) 22%, var(--papel)); border: 1px solid var(--medio); }
.msg.jerga { align-self: flex-start; background: color-mix(in srgb, #9b5de5 18%, var(--papel)); border: 1px solid #9b5de5; }
.msg.tutor details { margin-top: 6px; color: var(--suave); font-size: 14px; }
.trazo-palabra { text-align: center; }
.trazo-palabra .texto-guia { font-size: 30px; color: var(--suave); }
.trazo-cajas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.trazo-caja { background: #fff; border: 2px solid var(--borde); border-radius: 14px; touch-action: none;
  background-image: linear-gradient(#eee 1px, transparent 1px), linear-gradient(90deg, #eee 1px, transparent 1px);
  background-size: 50% 50%; background-position: center; }
.trazo-caja.actual { border-color: var(--acento); }
.trazo-msg { text-align: center; }

.msg { scroll-margin-bottom: 240px; }
#v-conversar .chat { padding-bottom: 16px; }


/* ================= Diseño "Aventura" ================= */
:root { --fondo: #bfe6ff; --papel: #fff; --tinta: #1b3a6b; --suave: #6c86ab; --acento: #ffd34d;
  --ok: #2fb36a; --medio: #f0a020; --mal: #e5484d; --borde: #1b3a6b; --isla: #8fd694; }
body { font-family: "Baloo 2", system-ui, "Segoe UI", "Noto Sans JP", "Noto Sans SC", sans-serif; font-weight: 500;
  background: var(--fondo) radial-gradient(circle at 85% 6%, #fff7 0 60px, transparent 61px) no-repeat; }
header { background: var(--papel); border-bottom: 4px solid var(--borde); }
.marca { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.marca::before { content: ""; width: 38px; height: 38px; flex: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%2218%22%20fill%3D%22%23ffd34d%22%20stroke%3D%22%231b3a6b%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%231b3a6b%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%231b3a6b%22/%3E%3Cpath%20d%3D%22M18%2032q6%205%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%231b3a6b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M12%2012l4%206M36%2012l-4%206%22%20stroke%3D%22%231b3a6b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat; }
.xp { background: #fff; border: 3px solid var(--borde); border-radius: 999px; padding: 2px 12px; color: var(--tinta); font-weight: 800; }
select, input, textarea { border: 3px solid var(--borde); border-radius: 14px; }
button, .boton { background: var(--acento); color: var(--tinta); border: 3px solid var(--borde); border-radius: 16px;
  font-weight: 800; box-shadow: 0 5px 0 var(--borde); transition: transform .08s, box-shadow .08s; }
button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--borde); }
button.sec, .sec { background: #fff; }
button:disabled { opacity: .55; }
.tarjeta { border: 4px solid var(--borde); border-radius: 26px; box-shadow: 0 6px 0 #1b3a6b22; }
.lectura { color: #2a6fc9; }
.mic { background: var(--ok); color: #fff; font-size: 22px; }
.mic.grabando { background: var(--mal); }
nav { background: #fff !important; border-top: 4px solid var(--borde) !important; }
nav button { box-shadow: none; border: none; background: none; color: var(--suave); }
nav button.on { color: var(--tinta); background: var(--acento); border-radius: 14px; }
.barra { border: 2px solid var(--borde); height: 14px; border-radius: 8px; background: #fff; }
#barra-avance { background: var(--ok); }
h1, h2, h3 { font-weight: 800; line-height: 1.15; }
.msg.tutor { border: 3px solid var(--borde); }
.juego-btn { border: 4px solid var(--borde); }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 50; background: var(--acento);
  border: 3px solid var(--borde); border-radius: 16px; padding: 10px 18px; font-weight: 800; box-shadow: 0 5px 0 var(--borde); }

/* Modo niño: todo más grande y con isla de fondo */
body.nino { font-size: 19px; background: var(--fondo) radial-gradient(ellipse at 50% 120%, var(--isla) 0 45%, transparent 46%) fixed; }
body.nino button { min-height: 56px; font-size: 19px; }
body.nino .tarjeta { border-radius: 32px; }

/* ================= 🎬 Escuchar ================= */
.serie { margin: 18px 0 8px; }
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.clip { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff; text-align: left; }
.clip img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; background: var(--fondo); }
.clip-t { font-size: 15px; line-height: 1.2; }
.clip-m, .sub { font-size: 13px; color: var(--suave); font-weight: 600; }
.video-caja { position: relative; border: 4px solid var(--borde); border-radius: 20px; overflow: hidden; background: #000; margin: 10px 0; }
.video-caja video { display: block; width: 100%; max-height: 60vh; }
.video-caja video.solo-audio { height: 200px; object-fit: contain; }
#esc-franja { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; display: flex; align-items: center; justify-content: center;
  background: #1b3a6b; color: #ffd34d; font-weight: 800; pointer-events: none; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.fila input { flex: 1; min-width: 160px; }
.sec-chk { font-weight: 700; display: flex; gap: 6px; align-items: center; }
.ops { display: grid; gap: 8px; margin-top: 8px; }
.op { background: #fff; text-align: left; }
.op.bien { background: #c9f2d8; } .op.mal { background: #ffd0d2; }
#esc-texto { width: 100%; margin: 8px 0; }
#esc-transcripcion { margin: 12px 0; } #esc-transcripcion summary { cursor: pointer; font-weight: 800; }
.linea { cursor: pointer; padding: 8px 10px; border-radius: 12px; margin: 4px 0; background: #fff; border: 2px solid #1b3a6b33; }
.linea .t { display: block; font-size: 19px; font-weight: 700; } .linea .lect { display: block; color: #2a6fc9; }
.linea .tr { display: block; color: var(--suave); }
.jerga span { display: inline-block; margin: 2px 0; }
#esc-terminar { width: 100%; padding: 16px; font-size: 20px; margin-top: 10px; }

.modos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.modos button { background: #fff; padding: 8px 14px; box-shadow: 0 3px 0 var(--borde); }
.modos button.on { background: var(--acento); }
.modos.chico button { padding: 4px 12px; }
.esc-cab { display: flex; flex-direction: column; gap: 6px; }
.aviso { background: #fff3c4; border: 3px solid var(--borde); border-radius: 14px; padding: 8px 12px; font-weight: 600; }
.clip-p { font-size: 13px; color: var(--ok); font-weight: 800; }
#esc-ayuda-es { position: absolute; left: 4%; right: 4%; bottom: 24%; text-align: center; color: #fff; font-weight: 700;
  font-size: clamp(14px, 2.6vw, 20px); text-shadow: 0 2px 3px #000, 0 0 6px #000; pointer-events: none; }
.ej .ops, .ej .cartas { margin-top: 8px; }
.cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.carta-p { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; padding: 10px 6px; }
.carta-p .emo { font-size: 30px; } .carta-p .w { font-size: 18px; } .carta-p .lect { color: #2a6fc9; font-size: 14px; }
.carta-p.on { background: #ffe9a8; } .carta-p.bien { background: #c9f2d8; } .carta-p.mal { background: #ffd0d2; }
.carta-p.neutra { opacity: .55; }
.ej .res { margin-top: 8px; font-weight: 600; }
.ej textarea { width: 100%; margin: 8px 0; }
.pregunta p { margin: 10px 0 4px; font-weight: 700; }

/* ===== Ruta de niveles y examen ===== */
.ruta { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 12px; }
.nodo { flex: 0 0 auto; min-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; background: #fff; }
.nodo .ico { font-size: 22px; } .nodo .sub { font-size: 12px; text-align: center; }
.nodo.actual { background: var(--acento); } .nodo.superado { background: #c9f2d8; }
.nodo.bloqueado { background: #e6eef7; border-style: dashed; box-shadow: 0 3px 0 #6c86ab; color: #6c86ab; }
.nodo:disabled { opacity: .5; }
.lista-pal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pal { background: #fff; padding: 6px 10px; box-shadow: 0 3px 0 var(--borde); font-weight: 600; }
.pal i { color: #2a6fc9; }
.nivel-chip { display: inline-block; background: #fff; border: 3px solid var(--borde); border-radius: 999px; padding: 4px 14px; margin-bottom: 12px; font-weight: 600; }
.aviso-examen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; background: #fff3c4; }
.ex-cab { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 6px; }
.ex-preg .ops { display: grid; gap: 10px; margin-top: 14px; text-align: left; }
.ex-preg .op { background: #fff; } .ex-preg .op.bien { background: #c9f2d8; } .ex-preg .op.mal { background: #ffd0d2; }
.ex-preg .trazo-caja { margin: 10px auto; width: 224px; height: 224px; background: #fff; border: 3px solid var(--borde); border-radius: 16px; }
.certificado { background: #fffbe6; border-style: double; border-width: 8px; }
.nivel-clips summary { cursor: pointer; list-style: none; } .nivel-clips summary::-webkit-details-marker { display: none; }
.clip.con-candado { background: #e6eef7; }

.gram-lista { display: grid; gap: 8px; margin-top: 10px; }
.gram-item { display: flex; justify-content: space-between; text-align: left; background: #fff; }
.gram-item.con-candado { background: #e6eef7; }
.gram-exp { font-size: 18px; }
.gram-ej { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.gram-ej .t { font-size: 20px; font-weight: 700; } .gram-ej .lect { color: #2a6fc9; }
.gram-frase { font-size: 28px; margin: 10px 0; }
#g-resp { min-height: 48px; border: 3px dashed var(--borde); border-radius: 14px; padding: 8px; margin: 8px 0; }
#g-banco { display: flex; flex-wrap: wrap; gap: 8px; }
#g-terminar { width: 100%; padding: 16px; font-size: 20px; }

.lec-texto { white-space: pre-wrap; font-size: 19px; line-height: 1.7; background: #fff; border: 3px solid #1b3a6b33; border-radius: 14px; padding: 12px 14px; margin: 10px 0; text-align: left; }
.lec-texto.chico { font-size: 15px; max-height: 40vh; overflow: auto; }
.lec-trad { white-space: pre-wrap; margin-bottom: 10px; }
#r-texto { width: 100%; }
#l-fin { width: 100%; padding: 16px; font-size: 20px; }

.guiada .modos button.con-candado { background: #e6eef7; color: #6c86ab; }
.esc-cab .aviso { display: block; margin-top: 6px; }

/* ===== Minijuegos por nivel ===== */
.lluvia { position: relative; height: 60vh; min-height: 360px; background: linear-gradient(#bfe6ff, #e9f6ff); border: 4px solid var(--borde);
  border-radius: 24px; overflow: hidden; margin-bottom: 10px; }
.lluvia .suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: var(--isla, #8fd694); border-top: 4px solid var(--borde); }
.gota { position: absolute; width: 22%; padding: 8px 4px; font-size: 16px; background: #fff; border-radius: 999px; box-shadow: 0 4px 0 var(--borde); }
.gota.mal { background: #ffd0d2; }
.parejas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .parejas .col { display: grid; gap: 8px; }
.parejas .op { background: #fff; } .parejas .op.on { background: var(--acento); } .parejas .op.bien { background: #c9f2d8; opacity: .6; }
.parejas .op.mal { background: #ffd0d2; }
.kana-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px auto; max-width: 320px; }
.kana { font-size: 40px; background: #fff; padding: 10px 0; }
.opciones.col { flex-direction: column; }
.hueco { display: inline-block; min-width: 48px; padding: 0 6px; border-bottom: 3px solid var(--borde); font-weight: 800; color: #2a6fc9; }
.hueco.actual { background: var(--acento); } .hueco.bien { background: #c9f2d8; } .hueco.mal { background: #ffd0d2; }
nav#tabs { display: flex !important; overflow-x: auto; scrollbar-width: none; }
nav#tabs[hidden] { display: none !important; }
nav#tabs button { flex: 0 0 auto; white-space: nowrap; }

.sit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.sit { display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff; padding: 12px; }
.sit .emo { font-size: 30px; } .sit.con-candado { background: #e6eef7; }
.objetivos { display: grid; gap: 4px; margin: 10px 0; } .obj { font-weight: 600; } .obj.hecho { color: var(--ok); }
#s-chat { min-height: 120px; }
.s-entrada .fila input { flex: 1; }

.escalones { display: flex; gap: 6px; margin: 10px 0; } .esc { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--borde); background: #fff; font-weight: 800; } .esc.actual { background: var(--acento); } .esc.hecho { background: #c9f2d8; }

.velado { filter: blur(9px); user-select: none; }
#tarjeta.produccion .significado { font-size: 30px; font-weight: 800; }
.diario-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 20px; margin-bottom: 12px; background: #ff9f5a; }
.diario-btn span { font-size: 15px; } .diario-btn.hecho { background: #c9f2d8; }
#racha.apagada { opacity: .5; }
.err { position: relative; padding-right: 56px; } .err .borrar { position: absolute; right: 10px; top: 10px; padding: 4px 8px; }
.texto.chico { font-size: 26px; }
.msg.correccion .ver { margin-top: 6px; }
header .xp { white-space: nowrap; font-size: 15px; padding: 2px 10px; }
header select { min-width: 0; flex: 1 1 auto; max-width: 52%; }
#lec-pestanas, #conv-pestanas { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; }
#lec-pestanas button, #conv-pestanas button { flex: 0 0 auto; }

/* ===== Tamaño en computadora: más compacto, y ajustable con el botón 🔍 ===== */
body { zoom: var(--escala, 1); }
@media (min-width: 900px) {
  :root { --escala: .82; }
  .vista { max-width: 900px; }
  .tarjeta { padding: 16px 20px; }
  .juegos-grid, .sit-grid, .clips { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
#b-escala { background: #fff; padding: 2px 10px; font-size: 14px; box-shadow: 0 3px 0 var(--borde); }

.mis-frases { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; font-size: 18px; background: #fff3c4; }
.minar { padding: 0 8px; margin-right: 6px; box-shadow: none; font-size: 16px; }
.mnemo .mn-ch { font-size: 64px; text-align: center; line-height: 1.1; } .mn-partes { text-align: center; margin: 6px 0; }
mark { background: #ffe9a8; border-radius: 4px; padding: 0 2px; }
.rondas { display: flex; gap: 8px; justify-content: center; margin: 10px 0; } .rondas .esc { width: auto; padding: 0 10px; border-radius: 999px; }
.reloj-grande { font-size: 56px; font-weight: 800; }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 80px; background: #fff; border: 2px solid #1b3a6b33; border-radius: 10px; padding: 6px; }
.barras span { flex: 1; background: var(--ok); border-radius: 3px 3px 0 0; min-width: 4px; }
@media (min-width: 900px) {
  nav#tabs { justify-content: center; gap: 6px; }
  nav#tabs button { font-size: 17px; padding: 8px 16px; }
  header select { max-width: 320px; }
}

/* ===== 🏠 Panel de inicio (Aventura) ===== */
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes flotar { 50% { transform: translateY(-6px) rotate(-3deg); } }
.anim { animation: subir .5s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .anim, .p-mascota { animation: none !important; } .anillo .valor, .relleno { transition: none !important; } }
.p-saludo { display: flex; gap: 18px; align-items: center; background: linear-gradient(135deg, #fff 55%, #fff3c4); }
.p-saludo h1 { margin: 0; font-size: 34px; } .p-saludo p { margin: 6px 0 12px; }
.p-mascota { flex: none; width: 104px; height: 104px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%2218%22%20fill%3D%22%23ffd34d%22%20stroke%3D%22%231b3a6b%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%231b3a6b%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%231b3a6b%22/%3E%3Cpath%20d%3D%22M18%2032q6%205%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%231b3a6b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M12%2012l4%206M36%2012l-4%206%22%20stroke%3D%22%231b3a6b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;
  animation: flotar 3.5s ease-in-out infinite; filter: drop-shadow(0 6px 0 #1b3a6b33); }
.p-cta { font-size: 19px; padding: 12px 20px; }
.p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.p-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; transition: transform .2s, box-shadow .2s; }
.p-stat .ico { font-size: 28px; } .p-stat .num { font-size: 34px; line-height: 1; }
.p-stat .sube { color: var(--ok); font-weight: 700; } .p-stat .baja { color: var(--mal); font-weight: 700; }
.p-stat:hover, .p-idioma:hover { transform: translateY(-5px); box-shadow: 0 10px 0 #1b3a6b33; }
.p-tit { margin: 18px 0 8px; }
.p-idiomas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.p-idioma { margin: 0; transition: transform .2s, box-shadow .2s; }
.p-idioma.actual { background: linear-gradient(180deg, #fff, #eaf7ff); }
.p-idioma .p-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .p-idioma h3 { margin: 0; font-size: 22px; }
.p-anillo { position: relative; width: 92px; height: 92px; }
.anillo { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 11; } .anillo .fondo { stroke: #e6eef7; }
.anillo .valor { stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.p-anillo-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.p-anillo-txt b { font-size: 16px; } .p-anillo-txt span { font-size: 13px; color: var(--suave); font-weight: 700; }
.p-meta { margin: 8px 0; min-height: 2.6em; }
.p-habs { display: grid; gap: 6px; }
.p-hab { display: grid; grid-template-columns: 92px 1fr 30px; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.p-hab .barra { height: 12px; } .relleno { height: 100%; width: 0; background: var(--ok); border-radius: 6px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.p-pie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.p-pie > div { display: flex; flex-direction: column; } .p-pie b { font-size: 22px; line-height: 1.1; }
.mini { width: 100%; height: 34px; }
.p-mapa { margin-top: 16px; } .p-mapa h2 { margin-top: 0; font-size: 20px; }
.p-calor { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.p-calor span, .p-ley span { width: 15px; height: 15px; border-radius: 4px; display: inline-block; }
.c0 { background: #e6eef7; } .c1 { background: #c9f2d8; } .c2 { background: #8fd694; } .c3 { background: #2fb36a; } .c4 { background: #1b7a47; }
.p-ley { display: flex; align-items: center; gap: 4px; margin-top: 8px; justify-content: flex-end; }
@media (max-width: 520px) { .p-saludo { flex-direction: column; text-align: center; } .p-mascota { width: 76px; height: 76px; } }

.p-anillo { flex: none; }
@media (max-width: 520px) {
  header { gap: 8px; padding: 8px 10px; }
  .marca { flex: 0 0 auto; font-size: 0; }
  header select { flex: 1 1 auto; min-width: 110px; max-width: none; font-size: 15px; padding: 6px 8px; }
  header .xp { font-size: 13px; padding: 2px 8px; }
}

/* ===== 🔐 Acceso y cuenta ===== */
.acceso { max-width: 440px; margin: 30px auto; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.acceso .acceso-masc { width: 90px; height: 90px; margin: 0 auto; }
.acceso h1 { margin: 0; } #f-acceso { display: grid; gap: 10px; } #acc-pestanas { justify-content: center; }
.cuenta-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 700; }
.cuenta-cfg label.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; font-weight: 600; }
.vista-correo { margin-top: 10px; border: 2px dashed var(--borde); border-radius: 12px; overflow: hidden; }

/* ===== 🤖 Explorador (mascota) ===== */
.marca::before { background: url("/static/img/explorador-cara.webp") center/cover no-repeat !important; border-radius: 50%; border: 3px solid var(--borde); }
.explorador-video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 4px solid var(--borde); border-radius: 20px; background: #8fd694; }
.acceso { max-width: 480px; }
.p-explorador { flex: none; width: 150px; height: 200px; object-fit: cover; object-position: 50% 30%; border-radius: 22px; border: 4px solid var(--borde);
  box-shadow: 0 6px 0 var(--borde); animation: flotar 4s ease-in-out infinite; }
@media (max-width: 520px) { .p-explorador { width: 120px; height: 150px; } }
@media (prefers-reduced-motion: reduce) { .p-explorador { animation: none; } }

/* ===== 🤖 Escenas del explorador ===== */
.pensando { position: fixed; right: 14px; bottom: 90px; z-index: 60; width: 170px; background: #fff; border: 4px solid var(--borde);
  border-radius: 20px; box-shadow: 0 6px 0 var(--borde); overflow: hidden; text-align: center; font-weight: 800; animation: subir .35s both; }
.pensando video { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 35%; }
.pensando span { display: block; padding: 4px 0 6px; }
.escena-celebra { position: fixed; inset: 0; z-index: 80; background: #1b3a6b99; display: grid; place-items: center; padding: 16px; }
.escena-celebra .tarjeta { max-width: 520px; width: 100%; text-align: center; animation: subir .4s both; }
.escena-celebra video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 4px solid var(--borde); border-radius: 18px; background: #8fd694; }
@media (prefers-reduced-motion: reduce) { .pensando, .escena-celebra .tarjeta { animation: none; } }
#b-escala { align-self: center; height: auto; min-height: 0; }

.escena-inline { width: 100%; max-width: 420px; aspect-ratio: 16/9; object-fit: cover; border: 4px solid var(--borde); border-radius: 18px; display: block; margin: 0 auto 10px; }
video.p-explorador { width: 210px; height: 160px; object-position: 50% 40%; }
@media (max-width: 520px) { video.p-explorador { width: 100%; height: auto; aspect-ratio: 16/9; } }
.p-idioma-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--borde); flex: none; }
.p-idioma .p-cab > div:nth-child(2) { flex: 1; }

/* ===== 🖥️ Pantallas anchas: menú lateral y contenido que aprovecha el ancho ===== */
@media (min-width: 1200px) {
  :root { --escala: .9; }
  body { padding-left: 210px; }
  nav#tabs { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: 210px; z-index: 30;
    flex-direction: column; justify-content: flex-start !important; gap: 6px; padding: 84px 12px 16px;
    border-top: none !important; border-right: 4px solid var(--borde) !important; overflow-y: auto; }
  nav#tabs button { flex: none; width: 100%; text-align: left; font-size: 17px; padding: 10px 14px; border-radius: 14px; }
  header { position: sticky; top: 0; z-index: 40; margin-left: -210px; padding-left: 20px; }
  body:has(nav#tabs[hidden]) { padding-left: 0; }
  body:has(nav#tabs[hidden]) header { margin-left: 0; }
  .vista { max-width: 1480px; padding: 22px 32px 40px; }
  /* Vistas de concentración (una tarjeta a la vez): anchas pero legibles */
  #v-leccion, #v-conversar, #v-examen, #v-escribir, #v-acceso, #v-perfil { max-width: 1000px; }
  /* Panel de inicio: saludo + estadísticas lado a lado, idiomas en 3 columnas */
  #panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
  #panel > .p-saludo { grid-column: 1; margin: 0; }
  #panel > .p-stats { grid-column: 2; grid-template-columns: 1fr 1fr; margin: 0; }
  #panel > .p-tit, #panel > .p-idiomas, #panel > .p-mapa { grid-column: 1 / -1; }
  #panel > .p-tit { margin: 6px 0 -6px; }
  .p-idiomas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-calor span { width: 18px; height: 18px; }
  /* Rejillas que crecen con la pantalla */
  .juegos-grid, .sit-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .clips { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  #progreso { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
  #progreso > * { margin: 0; }
}
@media (min-width: 1700px) { :root { --escala: 1; } .vista { max-width: 1680px; } }
@media (min-width: 1200px) { video.p-explorador { width: 300px; height: 200px; } .p-saludo h1 { font-size: 40px; } }

/* ---------- Aventura: Tutorito y las palabras perdidas ---------- */
.av-destacado{display:flex;gap:14px;align-items:center;width:100%;text-align:left;cursor:pointer;background:linear-gradient(120deg,#2b1d4e,#4a2f7a);color:#fff;border:3px solid #1b3a6b}
.av-destacado img{width:120px;border-radius:12px;border:2px solid #ffd34d}
.av-destacado b{font-size:1.2em;display:block}.av-destacado .sub{color:#e4dcff}
.av-mundos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.av-mundo img,.av-final img{width:100%;border-radius:12px;border:3px solid #1b3a6b;aspect-ratio:16/9;object-fit:cover}
.av-mundo.actual{outline:4px solid #ffd34d}
.av-final{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#2b1d4e;color:#fff}
.av-final img{max-width:320px}.av-final.bloq img{filter:grayscale(1) brightness(.6)}
.av-biblio{width:100%;text-align:left;cursor:pointer;font-size:1.1em}
.av-juego{position:relative;max-width:1100px;margin:auto}
.av-juego canvas{width:100%;height:auto;border:4px solid #1b3a6b;border-radius:16px;touch-action:none;display:block;background:#bfe6ff}
.av-hud{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0;font-weight:700}
.av-hud span{background:#fff;border:2px solid #1b3a6b;border-radius:12px;padding:2px 10px}
.av-palabra b{letter-spacing:2px;color:#aab}.av-palabra b.ok{color:#2fb36a}.av-palabra i{font-weight:400;margin-left:6px}
.av-pregunta{position:absolute;inset:4% 4% auto 4%;background:#fffdf3;border:4px solid #1b3a6b;border-radius:18px;padding:14px;box-shadow:0 8px 0 #1b3a6b44;max-height:92%;overflow:auto}
.av-retrato{float:right;width:150px;border-radius:12px;border:3px solid #1b3a6b;margin-left:10px}
.av-retrato.grande{float:none;width:100%;max-width:480px;display:block;margin:0 auto 10px}
.av-q{font-size:1.15em;margin-bottom:8px}.av-han{font-size:1.6em}
.av-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;clear:both;margin-top:8px}
.av-ops.col{grid-template-columns:1fr}
.av-op{font-size:1.1em;padding:14px;border-radius:14px;border:3px solid #1b3a6b;background:#fff;cursor:pointer}
.av-op small{opacity:.5;margin-right:4px}.av-op.bien{background:#c9f5d6}.av-op.mal{background:#ffd0d0}.av-op.neutra{opacity:.5}
.av-tono{display:block;font-size:2em;line-height:1}
.av-tiempo{height:8px;background:#eee;border-radius:4px;margin-top:10px;overflow:hidden}.av-tiempo div{height:100%;width:100%;background:#ff8a00}
.av-r{margin-top:8px}.av-curio li.bloq{opacity:.55}
.av-silencio{background:#1d1533;color:#fff}.av-silencio .op,.av-silencio .pieza{color:#1b3a6b}
@media (max-width:700px){.av-retrato{width:90px}.av-pregunta{position:static;margin-top:8px;padding:10px}.av-op{padding:10px;font-size:1em}}

.av-camino{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:10px 0}
.av-paso{align-self:center;font-size:1.6em;color:#1b3a6b}
.av-nodo{flex:1 1 180px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px;border:3px solid #1b3a6b;border-radius:18px;background:#fff;cursor:pointer;box-shadow:0 5px 0 #1b3a6b}
.av-nodo .ico{font-size:2.4em}.av-nodo small{opacity:.75}
.av-nodo.hecha{background:#eafbea}.av-nodo.bloq{opacity:.55;cursor:not-allowed;filter:grayscale(.7)}
.av-nodo.jefe{background:#2b1d4e;color:#fff}.av-nodo.jefe img{width:100%;max-width:200px;border-radius:10px;border:2px solid #ffd34d}
.av-estrellas{font-size:1.2em;letter-spacing:2px}.av-estrellas.grande{font-size:2.4em;text-align:center}
.av-relax-sw{display:block;cursor:pointer}
@media (max-width:700px){.av-paso{display:none}.av-nodo{flex-basis:100%}}

.av-banner{background:#fffdf3;border:4px solid #1b3a6b;border-radius:16px;padding:10px 14px;margin-bottom:8px}
.av-banner .av-q{font-size:1.15em}.av-orden{font-size:1.3em;margin:6px 0;letter-spacing:1px}.av-orden b.ok{color:#2fb36a}
.av-control{display:flex;justify-content:center;gap:14px;margin-top:6px}
.av-control button{font-size:2em;width:84px;height:64px;border-radius:18px;touch-action:none;user-select:none}
@media (hover:hover) and (pointer:fine){.av-control button{font-size:1.3em;width:60px;height:44px}}

.av-eco{display:block;text-decoration:none;color:#e8f1ff;background:linear-gradient(120deg,#05070f,#1c1230);border:3px solid #1b3a6b;font-size:1.1em}
.av-eco .sub{color:#b9c6e6}

/* 🎬 YouTube incrustado (sin controles ni subtítulos de YouTube) */
#esc-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
#esc-yt iframe, #mini-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#mini-yt { position: fixed; right: 12px; bottom: 84px; width: 240px; aspect-ratio: 16 / 9; z-index: 60; background: #000;
  border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px #0008; }
#mini-yt > div { position: absolute; inset: 0; }
#mini-yt button { position: absolute; top: 4px; right: 4px; z-index: 2; padding: 2px 8px; }