.school { max-width:1000px; margin:auto; color:#26374b; }
/* Fondos claros y diferenciados para conservar los detalles de los emojis. */
#view-home .card-icon { border:2px solid #d1dce8; }
#view-home .school-bg { background:#e4f5ff; }
#view-home .math-bg { background:#fff1ce; }
#view-home .lang-bg { background:#fff0da; }
#view-home .nature-bg { background:#f7eedb; }
#view-home .tech-bg { background:#e2f4ec; }
#view-home .convivencia-bg { background:#e9e6ff; }
.school [hidden] { display:none !important; }
#school-audio-status:empty { display:none; }
.school-final-row { padding:18px 0; border-bottom:1px solid #dce3ed; }
.school-final-row label { line-height:1.7; font-size:1.12rem; }
.school-final-row input { max-width:320px; display:block; }
.school-final-result { min-height:26px; font-weight:800; font-size:.95rem; }
.school-final-result[data-status="correct"] { color:#167044; }
.school-final-result[data-status="incorrect"] { color:#aa3030; }
.school-final-row input[aria-invalid="true"] { border-color:#aa3030; }
.school-mini-bank { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
.school-mini-word { font:800 .8rem var(--font-body); line-height:1.3; padding:4px 8px; border:1px solid #c8d4e5; border-radius:999px; background:#f1f6ff; color:#344765; }
.school-memory-row { border:1px solid #d5dce8; border-radius:16px; padding:16px; margin:20px 0; min-width:0; }
.school-memory-row legend { font-weight:800; padding:0 8px; }
.school-memory-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media(max-width:600px) { .school-memory-fields { grid-template-columns:1fr; gap:4px; } }
.school-hero { margin:24px 0; padding:clamp(22px,4vw,36px); border-radius:24px; background:linear-gradient(120deg,#e2f7f2,#ece9ff); }
.school-hero h2 { font-family:var(--font-heading); font-size:clamp(1.8rem,4vw,2.6rem); margin:8px 0; }
.school-eyebrow { font-weight:800; color:#365b61; letter-spacing:.08em; font-size:.8rem; }
.school label { font-weight:800; display:block; }
.school select,.school input,.school textarea { font:inherit; color:inherit; background:white; border:2px solid #bccbd9; border-radius:12px; padding:12px; width:100%; margin:8px 0; }
.school select { max-width:480px; }
.school-steps { display:flex; overflow-x:auto; gap:8px; padding:12px 3px 16px; }
.school button { cursor:pointer; min-height:46px; }
.school-chip { font:800 1rem var(--font-body); border:2px solid #d5dce8; border-radius:16px; padding:10px 16px; background:#fff; color:#33455c; flex-shrink:0; }
.school-chip[aria-pressed=true] { background:#e9e4ff; border-color:#6c5ce7; color:#44329a; }
.school-panel { padding:clamp(18px,4vw,32px); }
.school-topline,.school-actions,.school-bank { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.school-topline { justify-content:space-between; }
.school-word { font-size:2.2rem; color:#5140ac; }
.school-context { padding:14px; background:#f2f6fa; border-radius:12px; margin:16px 0; }
.school-question { font-size:1.4rem; margin:20px 0; line-height:1.6; }
.school-bank { min-height:64px; margin:12px 0; }
.school-built { min-height:76px; padding:12px; border:2px dashed #b5a5dd; border-radius:16px; background:#faf8ff; }
.school-feedback { min-height:90px; margin:12px 0; padding:14px; background:#f4f3fb; border-radius:12px; font-weight:800; }
.school button:disabled { opacity:.5; cursor:default; }
.school :is(button,input,select,textarea):focus-visible { outline:3px solid #6150ce; outline-offset:3px; }
.school progress { width:100%; accent-color:#5b51bc; height:12px; }
.school-note { font-size:.92rem; margin:12px 0; line-height:1.6; }
.school textarea { min-height:100px; resize:vertical; }
.school-check label { display:flex; align-items:center; gap:10px; margin:8px 0; }
.school-check input { width:22px; height:22px; flex-shrink:0; }
@media(max-width:600px) { .school-actions .btn { flex:1 1 130px; } .school-steps { margin-right:-4px; } .school-feedback { min-height:115px; } }