@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #fff8f0;
  --ink: #3d3551;
  --ink-soft: #7a7090;
  --card: #ffffff;
  --line: #f0e6f6;
  --rosa: #ffd6e0; --rosa-f: #ec6f95;
  --lila: #e6dcff; --lila-f: #8c72e0;
  --azul: #d4e9ff; --azul-f: #3f8fe0;
  --menta: #cdf3df; --menta-f: #2fa874;
  --amarillo: #fff1b0; --amarillo-f: #d49b00;
  --melocoton: #ffe3c8; --melocoton-f: #ea7a3a;
  --c: var(--lila); --c-f: var(--lila-f);
  --radio: 26px;
  --sombra: 0 10px 30px -12px rgb(140 114 224 / 0.35);
  --sombra-s: 0 4px 14px -6px rgb(61 53 81 / 0.25);
  color-scheme: light;
}
[data-color='rosa'] { --c: var(--rosa); --c-f: var(--rosa-f); }
[data-color='lila'] { --c: var(--lila); --c-f: var(--lila-f); }
[data-color='azul'] { --c: var(--azul); --c-f: var(--azul-f); }
[data-color='menta'] { --c: var(--menta); --c-f: var(--menta-f); }
[data-color='amarillo'] { --c: var(--amarillo); --c-f: var(--amarillo-f); }
[data-color='melocoton'] { --c: var(--melocoton); --c-f: var(--melocoton-f); }

/* ---------- Temas por edad ---------- */
/* Colores de estados comunes a todos los temas (el tema «Peques» es el de :root). */
:root { --rojo-suave: #ffe1e8; --rojo-texto: #a3294a; --naranja-suave: #ffe1c7; --apagado: #e3dde9; --calma-1: #eef6ff; --calma-2: #f6f0ff; }
/* Aventura (3º–4º): colores más vivos y formas menos redondas. */
:root[data-tema='aventura'] {
  --bg: #eaf1ff; --ink: #172040; --ink-soft: #4f5a80; --card: #ffffff; --line: #d3dcf2;
  --rosa: #ffb0c8; --rosa-f: #e0245e;
  --lila: #c3b0ff; --lila-f: #5b35db;
  --azul: #9ccfff; --azul-f: #0f67d1;
  --menta: #8ee6bf; --menta-f: #0b8f5a;
  --amarillo: #ffd84d; --amarillo-f: #b87600;
  --melocoton: #ffb987; --melocoton-f: #d9540a;
  --radio: 14px;
  --sombra: 0 10px 26px -12px rgb(15 103 209 / 0.4);
  --sombra-s: 0 4px 12px -6px rgb(23 32 64 / 0.3);
  --naranja-suave: #ffd6b0; --apagado: #cfd6ea; --calma-1: #dfeaff; --calma-2: #e6ddff;
}
/* Aventura: fondo con rayas diagonales, cabecera con degradado y formas más rectas. */
:root[data-tema='aventura'] body { background-image: repeating-linear-gradient(135deg, transparent 0 26px, rgb(15 103 209 / 0.045) 26px 52px); }
:root[data-tema='aventura'] body::before, :root[data-tema='aventura'] body::after { opacity: 0.35; }
:root[data-tema='aventura'] .cabecera { background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c-f) 55%, var(--c))); border-radius: 18px; border: 3px solid var(--c-f); }
:root[data-tema='aventura'] .pestanas { border-radius: 18px; border: 2px solid var(--line); }
:root[data-tema='aventura'] .pestana { border-radius: 12px; }
:root[data-tema='aventura'] h1 { letter-spacing: -0.01em; text-transform: uppercase; font-size: clamp(1.5rem, 4.6vw, 2.1rem); }
:root[data-tema='aventura'] .btn { border-radius: 12px; }
/* Pro: cabecera con borde de acento. */
:root[data-tema='pro'] .cabecera { border: 2px solid color-mix(in srgb, var(--c-f) 45%, transparent); border-radius: 20px; }
:root[data-tema='pro'] .pestanas { border: 1px solid var(--line); border-radius: 20px; }
:root[data-tema='pro'] .btn { border-radius: 14px; }
/* Pro (5º–6º): modo oscuro con acentos de color. */
:root[data-tema='pro'] {
  --bg: #0e1325; --ink: #edf0ff; --ink-soft: #9aa3c8; --card: #1a2140; --line: #2b3458;
  --rosa: #3a1f36; --rosa-f: #ff5c93;
  --lila: #2a2552; --lila-f: #9d7dff;
  --azul: #172c50; --azul-f: #3d9bff;
  --menta: #143a30; --menta-f: #22c483;
  --amarillo: #3a3216; --amarillo-f: #d99e00;
  --melocoton: #3d2716; --melocoton-f: #ff7a33;
  --radio: 16px;
  --sombra: 0 12px 30px -14px rgb(0 0 0 / 0.7);
  --sombra-s: 0 4px 14px -6px rgb(0 0 0 / 0.6);
  --rojo-suave: #44202c; --rojo-texto: #ff9bb0; --naranja-suave: #43301b; --apagado: #39426a; --calma-1: #16213f; --calma-2: #1f1c3d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
}
/* Burbujas de colores del fondo */
body::before, body::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
}
body::before { width: 55vmax; height: 55vmax; background: var(--lila); top: -25vmax; left: -20vmax; }
body::after { width: 50vmax; height: 50vmax; background: var(--rosa); bottom: -25vmax; right: -20vmax; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
h2 { font-size: 1.45rem; }
p { margin: 0 0 0.8em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--c-f); outline-offset: 3px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { max-width: 980px; margin: 0 auto; padding: 16px 16px 120px; }

/* ---------- Botones y tarjetas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  border: 0; border-radius: 18px; padding: 0.8em 1.3em; min-height: 52px;
  background: var(--c-f); color: #fff; font-weight: 600; font-size: 1.05rem;
  box-shadow: 0 6px 0 -1px color-mix(in srgb, var(--c-f) 60%, #000 0%), var(--sombra-s);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--c-f) 70%, #3d3551), var(--sombra-s);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c-f) 70%, #3d3551); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-suave { background: var(--card); color: var(--ink); box-shadow: 0 5px 0 var(--line), var(--sombra-s); }
.btn-peligro { background: #e5536f; box-shadow: 0 5px 0 #a93650; }
.btn-grande { font-size: 1.25rem; padding: 1em 1.6em; border-radius: 22px; }
.btn-ancho { width: 100%; }
.btn-icono { width: 52px; padding: 0; font-size: 1.4rem; }

.tarjeta { background: var(--card); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); border: 2px solid var(--line); }
.pila > * + * { margin-top: 14px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.centro { text-align: center; }
.suave { color: var(--ink-soft); }
.pequeno { font-size: 0.9rem; }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo { display: block; width: 100%; border: 2px solid var(--line); background: var(--card); color: inherit; border-radius: 16px; padding: 0.7em 0.9em; min-height: 52px; }
.campo:focus { border-color: var(--c-f); outline: none; }
textarea.campo { min-height: 110px; resize: vertical; }
.pin { letter-spacing: 0.6em; text-align: center; font-size: 1.6rem; font-weight: 700; max-width: 240px; margin: 0 auto; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--c-f); flex: none; }
.error { background: var(--rojo-suave); color: var(--rojo-texto); border-radius: 14px; padding: 10px 14px; font-weight: 600; }

/* ---------- Portada ---------- */
.portada { min-height: 80dvh; display: grid; place-items: center; }
.portada .tarjeta { max-width: 520px; width: 100%; }
.logo { font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.logo span { color: var(--lila-f); }
.desfile { display: flex; justify-content: center; margin: 10px 0 18px; }
.desfile img { width: 64px; height: 64px; margin: 0 -8px; border: 4px solid var(--card); border-radius: 50%; box-shadow: var(--sombra-s); animation: saltito 2.4s ease-in-out infinite; }
.desfile img:nth-child(2) { animation-delay: 0.2s; }
.desfile img:nth-child(3) { animation-delay: 0.4s; }
.desfile img:nth-child(4) { animation-delay: 0.6s; }
.desfile img:nth-child(5) { animation-delay: 0.8s; }
@keyframes saltito { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.idiomas { display: flex; gap: 8px; justify-content: center; }
.idiomas .btn { min-height: 40px; padding: 0.4em 0.9em; font-size: 0.95rem; }
.idiomas .btn[aria-pressed='true'] { background: var(--lila-f); color: #fff; }
.codigo-grande { font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 700; letter-spacing: 0.04em; background: var(--amarillo); border-radius: 18px; padding: 14px; word-break: break-word; }

/* ---------- Elegir niño ---------- */
.ninos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.nino-carta { border: 0; background: var(--c); border-radius: 30px; padding: 20px 12px; box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 700; transition: transform 0.15s ease; }
.nino-carta:hover { transform: translateY(-4px) rotate(-1deg); }
.nino-carta img { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--card); box-shadow: var(--sombra-s); background: var(--card); }
.nino-carta small { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }

/* ---------- Cabecera del niño ---------- */
.cabecera { display: flex; align-items: center; gap: 14px; background: var(--c); border-radius: 30px; padding: 14px 16px; box-shadow: var(--sombra); margin-bottom: 16px; }
.avatar-btn { border: 0; padding: 0; background: none; border-radius: 50%; position: relative; flex: none; }
.avatar-btn img { width: 78px; height: 78px; border-radius: 50%; border: 5px solid var(--card); display: block; background: var(--card); }
.avatar-btn::after { content: '✏️'; position: absolute; right: -4px; bottom: -2px; font-size: 0.9rem; background: var(--card); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; box-shadow: var(--sombra-s); }
.cabecera .nombre { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.cabecera .quien { flex: 1; min-width: 0; }
.marcadores { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.marcador { background: var(--card); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; }
.marcador b { font-size: 1.2rem; color: var(--c-f); }
.cabecera .btn-icono { background: var(--card); color: var(--ink); box-shadow: 0 4px 0 rgb(0 0 0 / 0.08); }
.pop { animation: pop 0.5s ease; }
@keyframes pop { 40% { transform: scale(1.35); } }

/* ---------- Pestañas grandes (abajo) ---------- */
.pestanas { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 20; display: flex; gap: 6px; background: var(--card); padding: 8px; border-radius: 28px; box-shadow: 0 10px 40px -10px rgb(61 53 81 / 0.35); width: min(620px, calc(100% - 24px)); }
.pestana { flex: 1; border: 0; background: transparent; border-radius: 20px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.pestana span { font-size: 1.75rem; line-height: 1.1; }
.pestana[aria-current='page'] { background: var(--c); color: var(--ink); }

/* ---------- Misiones ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mision { position: relative; border: 3px solid transparent; background: var(--card); border-radius: 26px; padding: 18px 10px 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-height: 170px; transition: transform 0.15s ease; }
.mision:hover { transform: translateY(-3px); }
.mision .emoji { font-size: 3.2rem; line-height: 1; }
.mision .titulo { font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.mision .pts { background: var(--c); border-radius: 999px; padding: 2px 12px; font-weight: 700; }
.mision.hecha { background: var(--menta); border-color: var(--menta-f); }
.mision.hecha .emoji { filter: grayscale(0.2); }
.mision.hecha::after { content: '✓'; position: absolute; top: -10px; right: -8px; width: 40px; height: 40px; border-radius: 50%; background: var(--menta-f); color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; box-shadow: var(--sombra-s); }
.vacio { text-align: center; padding: 30px 10px; color: var(--ink-soft); }
.vacio .emoji { font-size: 3rem; display: block; }

/* ---------- Premios ---------- */
.premio { background: var(--card); border-radius: 26px; padding: 16px; box-shadow: var(--sombra); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.premio .emoji { font-size: 3rem; grid-row: span 2; }
.premio .titulo { font-weight: 600; line-height: 1.2; }
.barra { height: 14px; background: var(--line); border-radius: 999px; overflow: hidden; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-f), color-mix(in srgb, var(--c-f) 60%, #fff)); border-radius: 999px; transition: width 0.6s ease; }
.premio .btn { grid-column: 1 / -1; }
.lista-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.85rem; font-weight: 600; background: var(--amarillo); }
.chip.entregado { background: var(--menta); }
.chip.rechazado { background: var(--rojo-suave); }

/* ---------- Diario ---------- */
.caras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cara { min-width: 0; border: 3px solid transparent; background: var(--card); border-radius: 20px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; font-weight: 600; box-shadow: var(--sombra-s); overflow-wrap: anywhere; text-align: center; line-height: 1.1; }
.cara span { font-size: 2.5rem; line-height: 1.1; transition: transform 0.2s ease; }
.cara[aria-pressed='true'] { border-color: var(--c-f); background: var(--c); }
.cara[aria-pressed='true'] span { transform: scale(1.2); }
.con-micro { position: relative; }
.con-micro .btn-icono { position: absolute; right: 8px; bottom: 8px; min-height: 44px; width: 44px; font-size: 1.2rem; }
.escuchando { animation: latido 1s ease-in-out infinite; background: #e5536f !important; }
@keyframes latido { 50% { transform: scale(1.12); } }

/* ---------- Reloj ---------- */
.reloj-zona { display: grid; justify-items: center; gap: 12px; }
.reloj-btn { border: 0; background: none; padding: 0; border-radius: 50%; }
.reloj { width: min(78vw, 340px); height: auto; display: block; filter: drop-shadow(0 14px 24px rgb(140 114 224 / 0.35)); }
.reloj-btn:active .reloj { transform: scale(0.97); }
.digital { font-size: 2.6rem; font-weight: 700; background: var(--card); border-radius: 20px; padding: 4px 22px; box-shadow: var(--sombra-s); font-variant-numeric: tabular-nums; }
.frase-hora { font-size: 1.35rem; font-weight: 600; min-height: 2em; text-align: center; }
.reloj-cuerpo { display: grid; gap: 20px; align-items: start; }
@media (min-width: 760px) {
  .reloj-cuerpo { grid-template-columns: 1fr minmax(280px, 360px); align-items: center; }
}
.leyenda { background: var(--card); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); border: 3px solid var(--c); }
.leyenda h2 { font-size: 1.5rem; margin-bottom: 12px; }
.leyenda-fila { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 2px dashed var(--line); }
.leyenda-fila:first-of-type { border-top: 0; padding-top: 0; }
.leyenda-fila b { display: block; font-size: 1.2rem; line-height: 1.2; }
.leyenda-fila span { display: block; font-size: 1.1rem; }
.leyenda-fila strong { color: var(--c-f); font-size: 1.2rem; }
.leyenda-fila .ahora { margin-top: 6px; background: var(--c); border-radius: 12px; padding: 6px 10px; font-size: 1rem; font-weight: 600; }
.leyenda-fila .ahora:empty { display: none; }
.aguja-icono { color: var(--ink); width: 70px; height: 24px; flex: none; margin-top: 2px; }
.truco { background: var(--amarillo); border-radius: 16px; padding: 10px 12px; margin: 12px 0 0; font-size: 1.05rem; font-weight: 500; }
.opciones { display: grid; grid-template-columns: 1fr; gap: 10px; width: min(100%, 420px); }
.opciones .btn.bien { background: var(--menta-f); }
.opciones .btn.mal { background: #e5536f; }

/* ---------- Modales ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgb(61 53 81 / 0.45); display: grid; place-items: center; padding: 16px; animation: aparece 0.2s ease; }
.modal > .tarjeta { width: min(560px, 100%); max-height: 90dvh; overflow: auto; }
@keyframes aparece { from { opacity: 0; } }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.galeria button { border: 4px solid transparent; background: none; border-radius: 50%; padding: 0; }
.galeria button[aria-pressed='true'] { border-color: var(--c-f); }
.galeria img { display: block; width: 100%; border-radius: 50%; }
.colores { display: flex; gap: 10px; flex-wrap: wrap; }
.colores button { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--card); background: var(--c); box-shadow: var(--sombra-s); }
.colores button[aria-pressed='true'] { outline: 3px solid var(--ink); }

/* Celebración */
.celebra { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgb(61 53 81 / 0.55); padding: 16px; }
.celebra video { width: min(640px, 100%); max-height: 80dvh; border-radius: 24px; background: #000; box-shadow: 0 20px 60px rgb(0 0 0 / 0.5); }
.celebra .mensaje { background: var(--card); border-radius: 30px; padding: 26px 30px; text-align: center; box-shadow: var(--sombra); animation: pop 0.5s ease; }
.celebra .mensaje .grande { font-size: 4rem; line-height: 1; }
.confeti { position: fixed; top: -20px; z-index: 70; width: 12px; height: 16px; border-radius: 3px; pointer-events: none; animation: cae linear forwards; }
@keyframes cae { to { transform: translateY(110vh) rotate(720deg); } }

/* A la cama */
.cama { background: linear-gradient(180deg, #2b2a5a, #5b4b9a); color: #fff; }
.cama .luna { font-size: 5rem; animation: saltito 3s ease-in-out infinite; }

/* ---------- Zona de padres ---------- */
.padres-cab { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.menu-padres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.menu-padres button { flex: none; border: 0; background: var(--card); border-radius: 999px; padding: 10px 16px; font-weight: 600; box-shadow: var(--sombra-s); }
@media (max-width: 520px) {
  .menu-padres { gap: 6px; }
  .menu-padres button { padding: 8px 12px; font-size: 0.9rem; }
}
.menu-padres button[aria-current='page'] { background: var(--lila-f); color: #fff; }
.linea { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 2px dashed var(--line); }
.linea:first-child { border-top: 0; }
.linea .emoji { font-size: 1.8rem; }
.linea .que { flex: 1; min-width: 0; }
.linea.anulada .que { text-decoration: line-through; color: var(--ink-soft); }
.interruptor { position: relative; width: 58px; height: 34px; flex: none; }
.interruptor input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.interruptor i { position: absolute; inset: 0; background: var(--apagado); border-radius: 999px; transition: background 0.2s; }
.interruptor i::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-s); transition: transform 0.2s; }
.interruptor input:checked + i { background: var(--menta-f); }
.interruptor input:checked + i::after { transform: translateX(24px); }
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dias label { margin: 0; }
.dias input { position: absolute; opacity: 0; }
.dias span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); font-weight: 700; cursor: pointer; }
.dias input:checked + span { background: var(--lila-f); color: #fff; border-color: var(--lila-f); }
.dias input:focus-visible + span { outline: 3px solid var(--lila-f); outline-offset: 2px; }
.emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.emojis button { width: 46px; height: 46px; font-size: 1.6rem; border: 2px solid var(--line); background: var(--card); border-radius: 14px; padding: 0; }
.emojis button[aria-pressed='true'] { border-color: var(--lila-f); background: var(--lila); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.entrada-diario { background: var(--lila); border-radius: 18px; padding: 12px 14px; }
.entrada-diario + .entrada-diario { margin-top: 10px; }
.aviso { background: var(--amarillo); border-radius: 18px; padding: 12px 14px; }

/* ---------- Tablero del día (encima de las misiones) ---------- */
.tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.widget { background: var(--card); border-radius: 22px; padding: 12px 14px; box-shadow: var(--sombra-s); border: 2px solid var(--line); display: flex; gap: 10px; align-items: center; }
.widget .icono { font-size: 2rem; line-height: 1; flex: none; }
.widget .txt { min-width: 0; font-size: 0.95rem; line-height: 1.3; }
.widget .txt b { display: block; font-size: 1rem; }
.widget.nota { background: var(--rosa); border-color: var(--rosa-f); cursor: pointer; animation: saltito 2s ease-in-out infinite; }
.widget.meta { display: block; }
.widget.meta .barra { margin-top: 6px; }
.widget.tiempo { background: var(--azul); border-color: transparent; }
.widget.mochila { background: var(--amarillo); border-color: transparent; }
.widget.fecha { background: var(--lila); border-color: transparent; }

/* Misiones: altavoz, racha y tiempo */
.mision-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; border-radius: 20px; }
.mision-btn:focus-visible { outline: 3px solid var(--c-f); outline-offset: 4px; }
.mision-btn[disabled] { opacity: 0.6; }
.mision .leer { position: absolute; top: 6px; left: 6px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--c); font-size: 1.1rem; display: grid; place-items: center; }
.mision .etiquetas { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.mision .racha { background: var(--naranja-suave); border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 0.85rem; }
.mision .minutos { background: var(--azul); border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 0.85rem; }

/* Temporizador */
.anillo-zona { position: relative; width: min(70vw, 260px); margin: 0 auto; }
.anillo { width: 100%; display: block; }
.anillo .progreso { transition: stroke-dashoffset 1s linear, stroke 0.6s ease; }
.anillo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anillo-emoji { font-size: 3rem; line-height: 1; }
.anillo-tiempo { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Rincón de la calma */
.calma { background: linear-gradient(180deg, var(--calma-1), var(--calma-2)); position: relative; }
.cerrar-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--card); color: var(--ink-soft); font-size: 1.2rem; box-shadow: var(--sombra-s); cursor: pointer; }
.cerrar-x:hover { color: var(--ink); }
.calma-circulo { width: 90px; height: 90px; margin: 40px auto; border-radius: 50%; background: radial-gradient(circle, var(--card) 0%, var(--lila) 60%, var(--azul) 100%); display: grid; place-items: center; font-size: 2.6rem; transition: transform 4s ease-in-out; box-shadow: 0 10px 40px -10px rgb(140 114 224 / 0.6); }
.calma-circulo.crece { transform: scale(1.7); }
.calma-circulo.quieto { transform: scale(1.7); }
.calma-circulo.encoge { transform: scale(1); }
.calma-texto { font-size: 1.4rem; font-weight: 600; min-height: 2.2em; margin-top: 30px; }

/* Medallas */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.medalla { background: var(--card); border-radius: 22px; padding: 14px 8px; text-align: center; box-shadow: var(--sombra-s); border: 2px solid var(--line); }
.medalla .emoji { font-size: 2.8rem; line-height: 1.1; display: block; }
.medalla .t { font-weight: 600; font-size: 0.9rem; line-height: 1.2; display: block; margin-top: 4px; }
.medalla .f { font-size: 0.75rem; color: var(--ink-soft); }
.medalla.bloqueada { opacity: 0.55; border-style: dashed; }
.medalla.bloqueada .emoji { filter: grayscale(1) brightness(1.2); }
.medalla-brillo { animation: brillo 1.2s ease-in-out infinite alternate; }
@keyframes brillo { to { transform: scale(1.12) rotate(6deg); filter: drop-shadow(0 0 16px #ffd166); } }
.fuego { font-size: 1.2rem; font-weight: 700; background: var(--naranja-suave); border-radius: 18px; padding: 10px 14px; display: inline-block; }

/* Hucha */
.hucha { display: flex; align-items: center; gap: 14px; background: var(--rosa); border-radius: 24px; padding: 14px 16px; box-shadow: var(--sombra-s); flex-wrap: wrap; }
.hucha .cerdito { font-size: 3rem; line-height: 1; }
.hucha .cuanto { flex: 1; min-width: 150px; }
.hucha .cuanto b { font-size: 1.6rem; display: block; }
.importes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Diario: días anteriores y reacciones */
.dia-previo { background: var(--card); border-radius: 18px; padding: 10px 14px; box-shadow: var(--sombra-s); display: flex; gap: 10px; align-items: flex-start; }
.dia-previo + .dia-previo { margin-top: 8px; }
.dia-previo .cara-mini { font-size: 1.8rem; }
.dia-previo .reaccion { margin-left: auto; font-size: 1.8rem; animation: pop 0.6s ease; }
.reacciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.reacciones button { border: 2px solid var(--line); background: var(--card); border-radius: 12px; font-size: 1.3rem; width: 44px; height: 44px; padding: 0; }
.reacciones button[aria-pressed='true'] { border-color: var(--rosa-f); background: var(--rosa); }
.grabando { background: #e5536f !important; animation: latido 1s ease-in-out infinite; }

@media (max-width: 520px) {
  .tablero { grid-template-columns: 1fr; gap: 8px; }
  .mision .leer { width: 34px; height: 34px; font-size: 1rem; }
  body { font-size: 17px; }
  .cabecera .nombre { font-size: 1.35rem; }
  .cabecera { gap: 10px; padding: 12px; }
  .marcador { font-size: 0.85rem; padding: 3px 9px; }
  .marcador b { font-size: 1.05rem; }
  .cara span { font-size: 2rem; }
  .avatar-btn img { width: 64px; height: 64px; }
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mision { min-height: 150px; padding: 14px 6px 10px; }
  .mision .emoji { font-size: 2.6rem; }
  .pestana { font-size: 0.72rem; }
  .pestana span { font-size: 1.5rem; }
  .dos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Juegos ---------- */
.juegos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.juego-carta { border: 3px solid var(--c-f); background: var(--c); border-radius: var(--radio); padding: 18px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--ink); transition: transform 0.15s ease; }
.juego-carta:hover { transform: translateY(-3px); }
.juego-carta .emoji { font-size: 3.4rem; line-height: 1.1; }
.juego-carta .t { font-size: 1.5rem; font-weight: 700; }
.juego-carta .sub { color: var(--ink-soft); font-size: 0.95rem; }
.juego-carta .nivel { margin-top: 6px; font-weight: 600; }
.juego-carta .estrellas-nivel { display: flex; align-items: center; gap: 2px; font-size: 1.15rem; }
.juego-carta .estrellas-nivel span:not(.on) { filter: grayscale(1) opacity(0.3); }
.juego-carta .estrellas-nivel small { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-left: 6px; }
.juego-carta .hoy { font-size: 0.85rem; color: var(--ink-soft); }

.juego-capa { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; padding: 12px 16px 32px; display: flex; flex-direction: column; animation: aparece 0.2s ease; }
.juego-barra { display: flex; align-items: center; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto 8px; }
.puntos-progreso { flex: 1; display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.puntos-progreso i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.puntos-progreso i.hecho { background: var(--c-f); }
.puntos-progreso i.ahora { background: var(--c); outline: 3px solid var(--c-f); }
.juego-pregunta { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.juego-pregunta h2 { font-size: clamp(1.3rem, 4.5vw, 1.8rem); margin: 6px 0 0; }
.juego-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 560px); }
.juego-opciones .opcion { min-height: 72px; font-size: clamp(1.1rem, 4vw, 1.5rem); background: var(--card); color: var(--ink); border: 3px solid var(--c-f); box-shadow: 0 5px 0 var(--c-f); padding: 0.5em; overflow-wrap: anywhere; }
.juego-opciones .opcion-emoji { font-size: clamp(1.8rem, 7vw, 2.8rem); min-height: 96px; line-height: 1.15; }
.juego-opciones .opcion.bien { background: var(--menta); border-color: var(--menta-f); box-shadow: 0 5px 0 var(--menta-f); animation: pop 0.4s ease; }
.juego-opciones .opcion.mal { background: var(--rojo-suave); border-color: #e5536f; box-shadow: 0 5px 0 #e5536f; animation: tiembla 0.4s ease; }
@keyframes tiembla { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.juego-mensaje { min-height: 1.6em; margin: 0; font-weight: 700; font-size: 1.2rem; }
.juego-mensaje.bien { color: var(--menta-f); }
.juego-mensaje.mal { color: #c23b58; }

.v-contar { display: grid; grid-template-columns: repeat(5, auto); gap: 6px 10px; justify-content: center; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.1; }
.v-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.v-fila > b { font-size: 2.4rem; }
.v-fila .v-contar { grid-template-columns: repeat(2, auto); }
.v-grupos { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.v-grupos .grupo { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 6px; padding: 8px 10px; border: 3px dashed var(--c-f); border-radius: 18px; background: var(--card); font-size: 1.6rem; line-height: 1.1; }
.v-bloques { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; justify-content: center; }
.v-bloques .decena { display: grid; grid-template-rows: repeat(10, 14px); width: 18px; border: 2px solid #1f6fb8; border-radius: 4px; background: #1f6fb8; gap: 2px; }
.v-bloques .decena i { background: #6fb4f0; border-radius: 2px; }
.v-bloques .cubos { display: grid; grid-template-columns: repeat(3, 18px); gap: 3px; margin-left: 10px; align-content: end; }
.v-bloques .cubos i { width: 18px; height: 18px; background: #ffb547; border: 2px solid #d4880f; border-radius: 4px; }
.v-fraccion { display: flex; width: min(100%, 420px); height: 56px; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.v-fraccion i { flex: 1; background: var(--card); border-right: 3px solid var(--ink); }
.v-fraccion i:last-child { border-right: 0; }
.v-fraccion i.on { background: var(--c-f); }
.v-op { font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 700; background: var(--card); border-radius: 22px; padding: 10px 26px; box-shadow: var(--sombra-s); letter-spacing: 0.02em; }
.v-emoji { font-size: clamp(3.5rem, 16vw, 5.5rem); line-height: 1.1; }
.v-palabra { font-size: clamp(1.8rem, 8vw, 2.8rem); font-weight: 700; background: var(--card); border-radius: 22px; padding: 8px 24px; box-shadow: var(--sombra-s); letter-spacing: 0.04em; }
.v-texto { background: var(--card); border-radius: 22px; padding: 16px 20px; box-shadow: var(--sombra-s); font-size: 1.2rem; line-height: 1.55; text-align: left; max-width: 640px; border-left: 6px solid var(--c-f); }
.v-rect { position: relative; width: min(60vw, 260px); max-height: 180px; background: var(--c); border: 3px solid var(--c-f); border-radius: 6px; margin: 22px 40px 6px 10px; }
.v-rect .arriba { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-weight: 700; white-space: nowrap; }
.v-rect .lado { position: absolute; right: -58px; top: 50%; transform: translateY(-50%); font-weight: 700; white-space: nowrap; }

.juego-final { max-width: 560px; margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.juego-final .estrellas { font-size: 3.4rem; letter-spacing: 0.1em; }
.juego-final .estrellas span { filter: grayscale(1) opacity(0.35); }
.juego-final .estrellas span.on { filter: none; animation: pop 0.5s ease; }
.juego-final .grande-num { font-size: 2.6rem; font-weight: 700; margin: 0; }
.juego-final .sube { font-size: 1.2rem; font-weight: 700; color: var(--lila-f); }
@media (max-width: 520px) {
  .juegos-lista { grid-template-columns: 1fr; gap: 10px; }
  .juego-carta { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; text-align: left; align-items: center; padding: 12px 14px; }
  .juego-carta .emoji { grid-row: span 5; font-size: 2.8rem; }
  .juego-carta .t { font-size: 1.3rem; }
  .juego-carta .nivel { margin-top: 2px; }
  .juego-opciones { gap: 10px; }
  .v-texto { font-size: 1.08rem; padding: 12px 14px; }
}
.nino-ficha { --gap: 8px; padding: 12px 0; }
.nino-ficha + .nino-ficha { border-top: 2px dashed var(--line); }
.nino-ficha .pequeno.suave { display: block; }

/* Selector de estilo (temas) y grupos de personajes */
.galeria-titulo { margin: 4px 0 8px; font-size: 1rem; color: var(--ink-soft); }
.galeria + .galeria-titulo { margin-top: 16px; }
.temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tema-opcion { border: 3px solid var(--line); background: var(--card); color: var(--ink); border-radius: 18px; padding: 10px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.tema-opcion b { font-size: 1.05rem; }
.tema-opcion small { color: var(--ink-soft); font-size: 0.85rem; }
.tema-opcion[aria-pressed='true'] { border-color: var(--c-f); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-f) 25%, transparent); }