/* Capa visual compartida: conserva los estados y los controles de los motores. */
:root{--pm-acento:#514bc1;--pm-suave:#efedff;--pm-fondo:#faf9f6;--pm-borde:#e7e4ed;--pm-tinta:#282746;--pm-secundario:#666078;--pm-sombra:0 10px 30px #35305a09}
[hidden]{display:none!important}
body.pm-app{background:var(--pm-fondo)!important;font-family:"Nunito",system-ui,sans-serif;color:var(--pm-tinta);line-height:1.5}
.pm-app h1,.pm-app h2,.pm-app h3{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;line-height:1.18;letter-spacing:-.02em}
.pm-app .sub{color:var(--pm-secundario)}
.pm-app .btn{font-family:"Nunito",system-ui,sans-serif;border-radius:15px;min-height:48px;font-weight:800}
.pm-app .btn-rosa,.pm-app .btn-rojo,.pm-app .btn-lila{background:var(--pm-acento);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--pm-acento) 75%,#191631)}
.pm-app .btn-menta,.pm-app .btn-verde{background:#27776b;color:#fff;box-shadow:0 4px 0 #195e52}
.pm-app .btn-azul,.pm-app .btn-cielo{background:#246a8e;color:#fff;box-shadow:0 4px 0 #1b5270}
.pm-app .btn-oro{background:#ffe5a1;color:#654709;box-shadow:0 4px 0 #d8b55d}
.pm-app .tarjeta{border:1px solid var(--pm-borde);box-shadow:var(--pm-sombra);border-radius:22px}
.pm-app .chip,.pm-app .icono-btn{box-shadow:none;border:1px solid var(--pm-borde)}
.pm-app .icono-btn{flex-shrink:0;display:inline-grid;place-items:center;min-width:44px;min-height:44px}
.pm-app .chip .num{color:var(--pm-acento)}
.pm-app .deco{opacity:.06;animation:none}
.pm-app .arcoiris{display:none}
.pm-app :is(button,a,input,select,summary):focus-visible,.tema-card:focus-visible{outline:3px solid #514bc1;outline-offset:4px}
.pm-app .badge{background:var(--pm-acento);color:#fff}
.pm-app .screen{max-width:980px}
.pm-app #s-home{gap:22px;padding:24px 28px 36px;min-height:100vh}
.pm-app #s-home>.topbar{max-width:none;gap:10px;flex-wrap:wrap}
.pm-marca{font-family:"Fredoka",system-ui,sans-serif;color:var(--pm-acento);font-size:1.3rem;font-weight:600;margin-right:auto}
.pm-app .home-bienvenida{width:100%;display:grid;grid-template-columns:1fr 1.15fr;gap:26px;align-items:center;background:none;box-shadow:none;border:0;max-width:none;border-radius:0;overflow:visible}
.pm-app .home-saludo{min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:0;gap:8px;background:none}
.pm-app .home-saludo h1{text-align:left;font-size:clamp(1.8rem,3.6vw,2.5rem);margin:0;overflow-wrap:anywhere}
.pm-app .home-saludo>.sub{text-align:left;font-size:1rem;line-height:1.5;margin:0 0 12px;color:var(--pm-secundario)}
.pm-eyebrow{color:var(--pm-acento);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin:0 0 8px}
.pm-app .home-paisaje{margin:0;min-width:0;background:var(--pm-suave);border-radius:25px;overflow:hidden;box-shadow:var(--pm-sombra)}
.pm-app .home-paisaje img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.pm-app .home-mision{background:var(--pm-suave);border:1px solid var(--pm-borde);border-radius:22px;padding:20px;box-shadow:var(--pm-sombra)}
.pm-app .home-mision h2{font-size:1.4rem;text-align:left;margin:0 0 8px}
.pm-app .home-mision>p{font-size:.9rem;color:var(--pm-secundario);margin:0 0 16px}
.pm-app .home-mision .btn{width:100%;font-size:1.08rem;min-height:54px;padding:14px 12px;margin:0}
.pm-app .home-mision .btn small{font-size:.85rem!important}
.pm-app .home-mision #btn-seguir{flex-direction:column;gap:4px}
.pm-app .home-mision #btn-diaria{background:var(--pm-acento);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--pm-acento) 75%,#191631);opacity:1!important}
.pm-app .home-mision:has(#btn-seguir:not(.oculto)) #btn-diaria{margin-top:12px;background:#fff;color:var(--pm-acento);box-shadow:none;border:1px solid var(--pm-borde);font-size:.9rem;min-height:44px}
.pm-app .home-acciones{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:none}
.pm-app .home-acciones>.pos-rel{min-width:0;width:100%;max-width:none!important}
.pm-app .home-acciones .btn{width:100%;height:100%;min-height:82px;border:1px solid var(--pm-tarjeta-borde,var(--pm-borde));background:var(--pm-tarjeta-fondo,var(--pm-suave));color:var(--pm-tinta);box-shadow:var(--pm-sombra);border-radius:18px;padding:16px 12px;font-size:1.05rem;display:flex;flex-direction:column;gap:5px}
.pm-app .home-acciones #btn-misiones{--pm-tarjeta-fondo:#d4eaff;--pm-tarjeta-borde:#a5cbed}
.pm-app .home-acciones :is(#btn-libre,#btn-jugar){--pm-tarjeta-fondo:#d3efdf;--pm-tarjeta-borde:#a1d4b6}
.pm-app .home-acciones #btn-premios{--pm-tarjeta-fondo:#ffe5a1;--pm-tarjeta-borde:#e5c773}
.pm-app .home-acciones .btn small{font-size:.8rem;font-weight:600;color:var(--pm-secundario)}
.pm-app .home-acciones.modo-demo{grid-template-columns:repeat(2,minmax(0,1fr))}
.pm-app #hoy-info{font-size:.85rem!important;color:var(--pm-secundario)!important;letter-spacing:0!important}
.pm-app #btn-regalo{background:#fff3d7;color:#674b0d;width:100%;font-size:1rem;max-width:none;border:1px solid #ebd69f;box-shadow:none}
/* Durante el ejercicio la ilustración se queda en el inicio. */
.pm-app:has(#s-juego.activa){background:#fafafc!important}
.pm-app:has(#s-juego.activa)>.deco{display:none}
.pm-app #s-juego{max-width:900px;padding-bottom:145px}
.pm-app #s-juego>.topbar{gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--pm-borde);border-radius:18px;padding:12px}
.pm-app #s-juego .topbar>.chip:last-child{font-size:.9rem}
.pm-app #zona-ejercicio{background:#fff;border:1px solid var(--pm-borde);border-radius:24px;padding:20px 16px;box-shadow:var(--pm-sombra)}
.pm-app .pbar>div{background:var(--pm-acento)}
.pm-app .pad button{font-family:"Fredoka",system-ui,sans-serif}
.pm-app .pad .pad-ok{background:#27776b;color:#fff}
.pm-app #s-juego .celda.activa{border-color:var(--pm-acento);background:var(--pm-suave)}
/* Ejemplos del aprendizaje, no emojis que el niño tenga que interpretar. */
.pm-app :is(#s-libre,#s-elegir)>.fila:has([data-tipo]),.pm-app #s-elegir>.fila:has([data-juego]){align-items:stretch;gap:16px}
.pm-app .btn.pm-actividad{min-width:0!important;max-width:none!important;background:var(--pm-tarjeta-fondo,var(--pm-suave));color:var(--pm-tinta);border:1px solid #28274618;box-shadow:var(--pm-sombra);display:flex;flex-direction:column;gap:8px;padding:16px;font-size:1rem!important;text-align:left;align-items:stretch;border-radius:20px;opacity:1!important}
/* Un color estable por actividad, compartido por las dos etapas. */
.pm-app .pm-actividad:is([data-tipo="abn"],[data-tipo="cla"],[data-juego="num"]){--pm-tarjeta-fondo:#e4ddff}
.pm-app .pm-actividad:is([data-tipo="igu"],[data-juego="fam"]){--pm-tarjeta-fondo:#d4efff}
.pm-app .pm-actividad:is([data-tipo="dif"],[data-juego="ami"]){--pm-tarjeta-fondo:#d6f3e7}
.pm-app .pm-actividad:is([data-tipo="mul"],[data-juego="vec"]){--pm-tarjeta-fondo:#ffe3cf}
.pm-app .pm-actividad:is([data-tipo="div"],[data-juego="sil"]){--pm-tarjeta-fondo:#ffe9ad}
.pm-app .pm-actividad:is([data-tipo="tab"],[data-juego="tra"]){--pm-tarjeta-fondo:#e7edbe}
.pm-app .pm-actividad:is([data-tipo="rel"],[data-juego="sub"]){--pm-tarjeta-fondo:#f8dced}
.pm-app .pm-actividad:is([data-tipo="pes"],[data-juego="pal"]){--pm-tarjeta-fondo:#e5e1fa}
.pm-app .pm-actividad:is([data-tipo="geo"],[data-juego="ret"]){--pm-tarjeta-fondo:#cef0f0}
.pm-app .pm-actividad:is([data-tipo="cie"],[data-juego="cyd"]){--pm-tarjeta-fondo:#f8dddd}
.pm-app .pm-actividad:is([data-tipo="ing"],[data-juego="ing"]){--pm-tarjeta-fondo:#dce8ff}
.pm-app .pm-actividad[aria-pressed="true"]{border:2px solid var(--pm-acento);padding:15px;box-shadow:0 0 0 2px var(--pm-acento)}
.pm-actividad-muestra{display:flex;align-items:center;justify-content:center;background:#ffffff73;color:var(--pm-tinta);min-height:86px;border-radius:13px;font-family:"Fredoka",system-ui,sans-serif;font-size:clamp(1.1rem,3vw,1.7rem);font-weight:600}
.pm-app .pm-actividad strong{font-size:1.05rem}.pm-app .pm-actividad small{font-size:.82rem!important;color:var(--pm-secundario);font-weight:600;line-height:1.4}
.pm-mini-puntos{display:grid;grid-template-columns:repeat(3,16px);gap:8px}.pm-mini-puntos i{display:block;width:16px;height:16px;background:#398879;border-radius:50%}
/* Portal y demo: imágenes pequeñas y botones nativos para elegir mundo. */
#w-temas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:stretch;gap:14px}
#w-temas .tema-card{width:100%;padding:0 0 14px;overflow:hidden;color:var(--tinta);font:inherit;cursor:pointer;border:2px solid transparent}
.pm-tema-mini{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;margin-bottom:12px}
#w-temas .tema-card.sel{border-color:#514bc1;background:#f1efff}
#w-temas .tema-card .masco{padding:0 10px}.pm-app #pm-demo-sel{background:#faf9f6;color:#282746;font-family:"Nunito",system-ui,sans-serif}
.pm-app #pm-demo-sel .sub,.pm-app #pm-demo-sel .nota{color:#666078}
.pm-app #pm-demo-sel .ir{background:#514bc1;color:#fff;box-shadow:0 4px 0 #393582;border-radius:15px}
.pm-app #pm-demo-tema{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pm-app #pm-demo-tema .op{min-width:0;padding:0 0 14px;overflow:hidden}
.pm-app #pm-demo-sel .op.on{border-color:#514bc1}
@media(max-width:700px){.pm-app #s-home{padding:18px 18px 30px}.pm-app .home-bienvenida{gap:20px;grid-template-columns:1fr 1fr}.pm-app .home-mision{padding:16px}.pm-app .home-acciones{gap:10px}.pm-app .home-acciones .btn{font-size:.95rem;padding:14px 10px}}
@media(max-width:560px){.pm-app .home-bienvenida{grid-template-columns:1fr}.pm-app .home-paisaje{grid-row:1}.pm-app .home-paisaje img{max-height:255px;object-fit:contain}.pm-app .home-acciones{grid-template-columns:1fr 1fr}.pm-app .home-acciones>.pos-rel{grid-column:1/-1}.pm-app .home-acciones .btn{min-height:74px}.pm-app .home-acciones.modo-demo>.pos-rel{grid-column:auto}.pm-marca{font-size:1.1rem}.pm-app #s-home>.topbar>.fila{gap:5px!important}.pm-app #s-home .chip{padding:8px 10px;font-size:1rem}.pm-app #s-home>.topbar{gap:6px}.pm-app #s-juego>.topbar{padding:9px;gap:6px}.pm-app #zona-ejercicio{padding:16px 10px}.pm-app .btn.pm-actividad{padding:12px}.pm-app .pm-actividad[aria-pressed="true"]{padding:11px}#w-temas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:350px){.pm-marca{width:100%;order:-1}.pm-app .home-acciones{grid-template-columns:1fr}.pm-app .home-acciones>.pos-rel{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.pm-app *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.pm-app .home-mision #btn-seguir{margin-bottom:12px}

.pm-app #hoy-info:empty{display:none}