/* Portada: estilos aislados para conservar las pantallas de actividad. */
body.home-active { background:#f4f7fb; padding:24px; display:block; }
body.home-active::before { display:none; }
body.home-active .app { width:min(1180px,100%); margin:auto; }
#appHome { display:none; }
body.home-active #appHome { display:block; }
body.home-active #welcomeScreen { display:none !important; }
body.home-active .topbar { background:#fff; border:1px solid #dce6f0; border-radius:16px; box-shadow:none; padding:16px 24px; margin-bottom:20px; }
body.home-active .brand-logo { width:52px; height:52px; filter:none; }
body.home-active .brand-copy strong { color:#06163f; font-size:clamp(1.25rem,2.6vw,1.9rem); }
body.home-active .brand-copy span { color:#526888; font-size:.95rem; font-weight:700; }
body.home-active #today { display:none; }
.topbar .presentation-link { background:transparent; color:inherit; border:1px solid currentColor; box-shadow:none; font-size:.88rem; min-height:44px; padding:8px 12px; }
body.home-active .presentation-link { color:#526888; border-color:#dce6f0; }
.home-welcome { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) 350px; align-items:center; gap:8px; padding:0 24px 0 36px; background:#e3f2ff; border-radius:20px; overflow:hidden; }
.home-welcome::before { content:""; position:absolute; z-index:-1; width:78%; height:130%; right:-20%; bottom:-75%; border-radius:50%; background:#d2e9fc; transform:rotate(-18deg); }
.home-welcome > div:first-child { padding:30px 0; }
.home-mascot-frame { position:relative; align-self:end; height:330px; overflow:hidden; }
.home-welcome h1 { font-family:'Nunito',Arial,sans-serif; font-size:clamp(1.8rem,3.4vw,2.65rem); line-height:1.18; font-weight:900; }
.home-welcome p { color:#526888; font-size:1.12rem; line-height:1.5; margin:12px 0 20px; }
.home-mascot { position:absolute; width:560px; max-width:none; height:560px; left:47%; top:-10px; transform:translateX(-50%); object-fit:contain; }
.home-grade-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; color:#526888; font-size:.88rem; }
.home-grade { display:grid; gap:6px; text-align:center; }
.home-grade select { width:100%; max-width:100%; min-height:48px; padding:8px 16px; border:1.5px solid #173965; background:#fff; color:#06163f; border-radius:16px; font:inherit; font-size:1.05rem; font-weight:800; cursor:pointer; }
.home-grade label { text-align:left; font-weight:700; }
.home-grade select:focus-visible { outline:3px solid #0865cb; outline-offset:3px; }
#homeGradeStatus.is-coming-soon { padding:8px 14px; background:#fff4d8; border-radius:10px; color:#705016; font-weight:800; }
#appHome button:disabled { cursor:not-allowed; opacity:.5; }
.home-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:22px 0; }
.home-mode { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 20px; background:#fff; color:#06163f; border:1px solid #dbe6f2; border-radius:18px; box-shadow:0 4px 14px #17396508; font-family:'Nunito',Arial,sans-serif; }
.home-mode:focus-visible, #appHome button:focus-visible { outline:3px solid #0865cb; outline-offset:4px; }
.home-mode-icon { display:grid; place-items:center; width:88px; height:88px; border-radius:50%; background:#e9f5ff; margin-bottom:16px; }
.home-mode-icon img { width:64px; height:64px; object-fit:contain; }
.home-mode-icon svg { width:56px; height:56px; }
.home-mode strong { font-size:1.65rem; line-height:1.2; }
.home-mode-description { color:#526888; font-size:1rem; line-height:1.5; font-weight:700; min-height:48px; margin:10px 0 18px; }
.home-mode-action { display:block; width:100%; border:1.5px solid #163a70; border-radius:10px; padding:12px 8px; font-size:1rem; margin-top:auto; }
.home-mode:first-child .home-mode-action { background:#0865cb; color:white; border-color:#0865cb; }
.home-join { text-align:center; margin:22px 0; }
.home-join button { padding:12px 22px; min-height:48px; border:1.5px solid #173965; background:white; color:#06163f; font-size:1.05rem; border-radius:12px; }
.home-teacher { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 26px; background:#e7f0f9; border-radius:16px; }
.home-teacher strong { font-size:1.1rem; }
.home-teacher button { min-height:44px; background:transparent; color:#075bb5; font-size:1.05rem; padding:8px; }
.setup-back { display:inline-flex; padding:10px 14px; margin-bottom:16px; min-height:44px; background:#fff; color:#173965; border:1px solid #cad9e9; box-shadow:none; }
body.welcome-setup #welcomeScreen .welcome-copy { padding-right:0; }
body.welcome-setup #welcomeScreen .brand-kicker, body.welcome-setup #welcomeScreen .nem-note, body.welcome-setup #welcomeScreen .adventure-note, body.welcome-setup #welcomeScreen .hero-art { display:none; }
body.welcome-setup:not(.teacher-setup) #welcomeScreen .grade-grid, body.welcome-setup:not(.teacher-setup) #welcomeScreen .carousel-label { display:none; }
body.welcome-setup.teacher-setup #welcomeScreen .name-box, body.welcome-setup.teacher-setup #welcomeScreen .profile-panel { display:none; }
@media(max-width:760px) {
 body.home-active { padding:14px; }
 body.home-active .topbar { flex-direction:row; flex-wrap:wrap; align-items:center; padding:14px; }
 body.home-active .presentation-link { width:auto; }
 .home-welcome { grid-template-columns:minmax(0,1fr) 230px; padding:0 16px 0 24px; gap:0; }
 .home-mascot-frame { height:300px; }
 .home-mascot { width:420px; height:420px; top:12px; }
 .home-modes { gap:12px; }
 .home-mode { padding:20px 12px; }
 .home-mode-action { font-size:.9rem; }
}
@media(max-width:580px) {
 .home-welcome { grid-template-columns:1fr; padding:0 24px; }
 .home-welcome > div:first-child { padding:24px 0 0; }
 .home-welcome::before { width:140%; height:65%; right:-55%; bottom:-20%; }
 .home-mascot-frame { width:100%; height:190px; margin-top:8px; }
 .home-welcome h1 { padding-right:0; }
 .home-mascot { right:auto; top:0; width:320px; height:320px; left:60%; }
 .home-welcome p { margin-top:18px; }
 .home-modes { grid-template-columns:1fr; }
 .home-mode { display:grid; grid-template-columns:68px 1fr; column-gap:16px; text-align:left; padding:20px; }
 .home-mode-icon { width:68px; height:68px; grid-row:1 / 3; margin:0; }
 .home-mode-icon img { width:52px; height:52px; }
 .home-mode strong { font-size:1.45rem; }
 .home-mode-description { min-height:0; margin:6px 0 14px; }
 .home-mode-action { grid-column:1 / -1; text-align:center; }
 .home-teacher { flex-direction:column; align-items:flex-start; padding:18px; gap:4px; }
}
@media(prefers-reduced-motion:reduce) { #appHome button { transition:none; } }

#appHome .home-join button { box-shadow:none; }
#appHome .home-teacher button { border:0; border-radius:8px; box-shadow:none; }
/* PNG originales del paquete aprobado, sin deformación ni fondos añadidos. */
.home-mode-icon { background:transparent; }
.home-mode-icon img { width:88px; height:88px; object-fit:contain; }
@media(max-width:580px) { .home-mode-icon img { width:68px; height:68px; } }