/* DFGM Aula Ciencias — estilos base */
:root{--tinta:#0E1A3A;--fondo:#F6F8FC;--verde:#12A594;--verde-o:#0B7568;--ambar:#F4A100;--ambar-o:#B87900;--azul:#2F4BA8;--gris:#44506B;--borde:#E3E8F2}
*{box-sizing:border-box}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--tinta);background:var(--fondo);line-height:1.5}
h1,h2,h3{font-family:'Baloo 2',sans-serif;font-weight:800;line-height:1.1;margin:0}
a{color:var(--verde-o)}
.ancho{max-width:1180px;margin:0 auto;padding:0 20px}
.fila{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-block;font:inherit;font-weight:800;font-size:17px;text-decoration:none;border:0;border-radius:14px;padding:14px 24px;cursor:pointer;text-align:center}
.btn-verde{background:var(--verde);color:#fff;box-shadow:0 5px 0 var(--verde-o)}
.btn-ambar{background:var(--ambar);color:var(--tinta);box-shadow:0 4px 0 var(--ambar-o)}
.btn-linea{color:#fff;border:2px solid #3A4C7A}
.btn:active{transform:translateY(3px);box-shadow:none}
/* Portada */
.barra{background:var(--tinta);padding:14px 0}
.barra-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.marca span{display:flex;flex-direction:column;line-height:1}
.marca strong{font-family:'Baloo 2';font-size:24px}.marca small{font-size:12px;font-weight:800;letter-spacing:2px;color:#9FE7DC}
.barra nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-weight:700}
.barra nav a{color:#DCE4F5;text-decoration:none}.barra nav a.btn{color:var(--tinta);padding:10px 20px}
.hero{background:var(--tinta);color:#fff;padding:36px 0 70px}
.hero-in{display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.hero-txt{flex:999 1 440px;display:flex;flex-direction:column;gap:18px}
.hero h1{font-size:clamp(36px,5.4vw,62px)}.hero h1 span{color:var(--ambar)}
.hero p{font-size:19px;color:#C9D3EA;margin:0;max-width:560px}
.chip-osc{align-self:flex-start;background:#1B2C57;color:#9FE7DC;font-weight:800;font-size:12px;letter-spacing:1.5px;padding:8px 14px;border-radius:999px}
.hero-sabi{flex:1 1 300px;display:flex;flex-direction:column;align-items:center}
.globo{background:#fff;color:var(--tinta);font-weight:800;border-radius:18px;padding:14px 18px;margin:0;box-shadow:0 5px 0 #C6D0E6}
.hero .globo{max-width:280px;text-align:center;margin-bottom:8px}
.bloque{padding:64px 0 8px}
.bloque h2{font-size:clamp(28px,3.4vw,40px);margin:8px 0 26px;max-width:720px}
.kicker{font-weight:800;font-size:13px;letter-spacing:2px;color:var(--verde-o)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.tarjeta{background:#fff;border-radius:22px;padding:24px;box-shadow:0 6px 0 #DCE3F0;display:flex;flex-direction:column;gap:10px}
.tarjeta h3{font-size:23px}.tarjeta p{margin:0;color:var(--gris)}
.tarjeta.enlace{text-decoration:none;color:var(--tinta)}
.curso{display:block;background:var(--c,var(--verde));color:#fff;border-radius:22px;padding:24px;text-decoration:none;box-shadow:0 6px 0 rgba(0,0,0,.22)}
.curso span{font-weight:800;font-size:13px;letter-spacing:2px;opacity:.9}.curso h3{font-size:28px}
.caja-ingreso{display:flex;flex-wrap:wrap;gap:32px;align-items:center;background:#fff;border-radius:28px;box-shadow:0 8px 0 #DCE3F0;padding:32px}
.caja-ingreso>div{flex:999 1 340px}.caja-ingreso h2{margin:0 0 10px}.caja-ingreso p{color:var(--gris);font-size:17px;margin:0}
.form{flex:1 1 300px;display:flex;flex-direction:column;gap:10px}
.form label{font-weight:800;font-size:14px}
.form input{font:inherit;font-size:17px;padding:13px 15px;border:2px solid #CBD4E6;border-radius:14px;background:#fff}
.form input:focus{outline:3px solid #9FE7DC;border-color:var(--verde)}
.form .btn{margin-top:8px}
.alerta{background:#FDE6E0;color:#7C2D12;font-weight:700;border-radius:12px;padding:10px 14px;margin:0}
.nota{font-size:14px;color:var(--gris);text-align:center;margin:4px 0 0}
.familia{background:#E9EEF8;padding-bottom:64px;margin-top:56px}
.pie{background:var(--tinta);color:#B5C1DC;font-size:14px;padding:28px 0}
.pie .ancho{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
/* App del estudiante */
.app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--fondo);padding-bottom:84px}
.app-top{background:#fff;border-bottom:2px solid var(--borde);padding:14px 16px 10px;position:sticky;top:0;z-index:5}
.app-top-in{display:flex;justify-content:space-between;align-items:center}
.chip{background:#DDF6F2;color:var(--verde-o);font-weight:800;font-size:14px;padding:7px 12px;border-radius:12px}
.stats{display:flex;gap:14px;font-weight:800;font-size:17px}
.stats span{display:flex;align-items:center;gap:4px}.racha{color:#B86E00}.xp{color:var(--verde-o)}
.semana{list-style:none;display:flex;justify-content:space-between;margin:12px 0 0;padding:0}
.semana li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:800;color:#5B6785}
.semana i{width:30px;height:30px;border-radius:50%;background:#EEF1F7}
.semana li.si i{background:var(--ambar)}.semana li.hoy i{border:2px dashed var(--ambar);background:#FFF6E2}
.app-main{padding:16px;display:flex;flex-direction:column;gap:14px}
.sabi-dice{display:flex;align-items:flex-end;gap:10px}
.sabi-dice .globo{flex:1;font-size:15px;box-shadow:none;border:2px solid var(--borde);border-radius:16px 16px 16px 4px}
.subt{font-size:22px;margin-top:6px}
.pendiente{display:flex;flex-direction:column;background:#fff;border:2px solid #FFDF9E;border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--tinta);box-shadow:0 4px 0 #FFDF9E}
.pendiente small{color:var(--gris);font-weight:700}
.app-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;background:#fff;border-top:2px solid var(--borde);display:grid;grid-template-columns:repeat(4,1fr);padding:6px 4px 12px}
.app-nav a{text-align:center;font-weight:800;font-size:13px;color:#5B6785;text-decoration:none;padding:12px 0}
.app-nav a.activo{color:var(--verde-o)}
.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.panel{background:#fff;border-radius:24px;box-shadow:0 8px 0 #DCE3F0;padding:26px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.sabi .ojo{transform-box:fill-box;transform-origin:center;animation:parpadeo 5s infinite}
@media (prefers-reduced-motion:reduce){.sabi .ojo{animation:none}}
/* Cuestionario */
.ancho-total{width:100%}
.btn-coral{background:#C2410C;color:#fff;box-shadow:0 5px 0 #8A2E08}
.btn-texto{font:inherit;font-weight:800;color:var(--verde-o);background:none;border:0;padding:12px;cursor:pointer}
.quiz{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:#fff}
.quiz-top{display:flex;align-items:center;gap:12px;padding:14px 16px}
.cerrar{font-size:30px;line-height:1;color:#8A96B0;text-decoration:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.barra-prog{flex:1;height:16px;background:var(--borde);border-radius:999px;overflow:hidden}.barra-prog i{display:block;height:100%;background:var(--verde);border-radius:999px;transition:width .4s}
.reloj{font-weight:800;color:var(--gris);font-variant-numeric:tabular-nums}.reloj.poco{color:#C2410C}
.quiz-main{flex:1;padding:6px 18px 18px;display:flex;flex-direction:column;gap:14px}
.sabi-dice.arriba{align-items:flex-start}
.enunciado{font-size:17px;font-weight:700;border-radius:4px 16px 16px 16px!important}.enunciado p{margin:0 0 8px}
.pista{background:#FFF6E2;border:2px solid #FFDF9E;border-radius:14px;padding:10px 14px;font-weight:700;color:#4A3200;margin:0}
.opciones{display:flex;flex-direction:column;gap:12px}
.opcion{display:flex;gap:12px;align-items:flex-start;border:2px solid #DCE2EE;box-shadow:0 4px 0 #DCE2EE;border-radius:16px;padding:14px 16px;cursor:pointer;font-weight:700;font-size:17px}
.opcion input{position:absolute;opacity:0}
.opcion b{flex:none;width:30px;height:30px;border:2px solid #DCE2EE;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gris)}
.opcion:has(input:checked){border-color:#5C77D6;box-shadow:0 4px 0 #5C77D6;background:#E4EAFB}
.opcion:has(input:focus-visible){outline:3px solid #9FE7DC}
.opcion.ok{border-color:var(--verde);box-shadow:0 4px 0 var(--verde);background:#DDF6F2}
.opcion.mal{border-color:#E26A3F;box-shadow:0 4px 0 #E26A3F;background:#FDE6E0}
.quiz-pie{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.retro{padding:18px 18px 26px;display:flex;flex-direction:column;gap:10px}
.retro h2{font-size:26px}.retro p{margin:0;font-weight:700}
.retro-ok{background:#DDF6F2;color:#0B4A43}.retro-mal{background:#FDE6E0;color:#7C2D12}
.retro details{background:rgba(255,255,255,.6);border-radius:12px;padding:10px 14px}.retro summary{font-weight:800;cursor:pointer}
.datos{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--gris)}
.resumen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.resumen div{background:var(--fondo);border-radius:14px;padding:12px 4px;display:flex;flex-direction:column}
.resumen strong{font-family:'Baloo 2';font-size:24px;display:flex;justify-content:center;align-items:center;gap:2px}.resumen small{font-weight:700;color:var(--gris)}
.logro{background:#FFF6E2;border-radius:12px;padding:10px 14px;font-weight:800;margin:0;text-align:center}
/* Panel docente */
.panel-doc{background:var(--fondo)}
.panel-doc .barra nav a.actual{color:#fff;text-decoration:underline;text-underline-offset:6px}
.doc-main{padding-top:24px;padding-bottom:48px;display:flex;flex-direction:column;gap:16px}
.doc-h1{font-size:34px}
.flash{background:#DDF6F2;color:#0B4A43;font-weight:800;border-radius:12px;padding:12px 16px;margin:0}
.ayuda{color:var(--gris);margin:0}
.pestanas{display:flex;flex-wrap:wrap;gap:8px}
.pestanas a{background:#fff;border:2px solid var(--borde);border-radius:12px;padding:8px 16px;font-weight:800;text-decoration:none;color:var(--tinta)}
.pestanas a.actual{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.tabla-caja{overflow-x:auto;background:#fff;border-radius:18px;box-shadow:0 5px 0 #DCE3F0}
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th{text-align:left;font-size:13px;letter-spacing:.5px;color:var(--gris);padding:12px 14px;border-bottom:2px solid var(--borde);white-space:nowrap}
.tabla td{padding:10px 14px;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tr.inactivo td{color:#8A96B0}
.acciones form{display:flex;gap:6px;flex-wrap:wrap}
.btn-mini{font:inherit;font-size:13px;font-weight:800;background:#fff;border:2px solid #CBD4E6;border-radius:10px;padding:6px 10px;cursor:pointer;color:var(--tinta);text-decoration:none;display:inline-block;white-space:nowrap}
.btn-mini:hover{border-color:var(--verde)}
.btn-gris{background:#E3E8F2;color:var(--tinta)}
.tag{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px;background:#E3E8F2;color:#3A4560}
.tag-ok{background:#DDF6F2;color:#0B6157}.tag-mal{background:#FDE6E0;color:#9A3412}
.form-doc{background:#fff;border-radius:20px;box-shadow:0 5px 0 #DCE3F0;padding:24px;display:flex;flex-direction:column;gap:16px;max-width:900px}
.form-doc label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:14px}
.form-doc input:not([type=checkbox]),.form-doc select,.form-doc textarea{font:inherit;font-weight:600;font-size:16px;padding:11px 13px;border:2px solid #CBD4E6;border-radius:12px;background:#fff}
.form-doc fieldset{border:2px solid var(--borde);border-radius:14px;padding:12px 16px}
.form-doc legend{font-weight:800;font-size:14px;padding:0 6px}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.checks.temas{flex-direction:column;gap:6px}
.tema-padre{margin-top:8px}
.form-doc label.check{flex-direction:row;align-items:center;gap:8px;font-weight:700}
.form-doc label.check input{width:20px;height:20px;accent-color:var(--verde)}
.fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.notas td{text-align:center;font-weight:700}.notas td:first-child,.notas th:first-child{text-align:left;white-space:nowrap}
.notas th{text-align:center}.notas .n-alta{background:#DDF6F2;color:#0B6157}.notas .n-media{background:#FFF6E2;color:#6B4600}.notas .n-baja{background:#FDE6E0;color:#9A3412}
.notas .nota-vacia{color:#9A3412}.notas sup{font-size:10px;color:#B86E00;margin-left:2px}.notas tfoot th,.notas tfoot td{font-size:13px;color:var(--gris)}
/* Banco */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filtros select,.filtros input{font:inherit;font-weight:600;padding:9px 11px;border:2px solid #CBD4E6;border-radius:10px;background:#fff;max-width:100%}
.filtros .btn{margin-left:auto;padding:10px 18px}
.ops-editor{display:flex;flex-direction:column;gap:10px}
.op-edit{display:grid;grid-template-columns:56px 1fr 1fr;gap:8px;align-items:center}
@media (max-width:700px){.op-edit{grid-template-columns:56px 1fr}.op-edit input[name^=op_expl]{grid-column:2}}
.img-prev{display:flex;align-items:center;gap:14px}.img-prev img{max-height:140px;border-radius:10px;border:2px solid var(--borde)}
.img-preg{max-width:100%;border-radius:14px;border:2px solid var(--borde);align-self:center}
/* Curso y recursos */
.item{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:2px solid var(--borde);border-radius:16px;padding:12px 16px;text-decoration:none;color:var(--tinta);box-shadow:0 4px 0 var(--borde)}
.item span{display:flex;flex-direction:column;min-width:0}.item small{color:var(--gris);font-weight:700}
.item b{flex:none;font-size:14px;border-radius:999px;padding:4px 12px}.item b.sin{background:#E3E8F2}.item b.bien{background:#DDF6F2;color:#0B6157}.item b.mal{background:#FDE6E0;color:#9A3412}
.vacio{color:var(--gris);margin:0}
.video{background:#fff;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;border:2px solid var(--borde)}.video h3{font-size:18px}
.marco16x9{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}.marco16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aviso{background:#FFF6E2;border:2px solid #FFDF9E;border-radius:16px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.aviso p{margin:0}
/* Escudo institucional */
.escudo{display:block;object-fit:contain;border-radius:8px;background:#fff}
.top-izq{display:flex;align-items:center;gap:10px}
.escudo-caja{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:4px 12px 4px 4px}
.escudo-caja small{color:var(--tinta);font-weight:800;font-size:13px;line-height:1.2;max-width:160px}
@media (max-width:700px){.escudo-caja small{display:none}.escudo-caja{padding:4px}}
/* Tareas */
.tarea{background:#fff;border:2px solid var(--borde);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px}
.tarea header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.tarea h3{font-size:20px}
.tarea small{color:var(--gris);font-weight:700}.tarea p{margin:0}.tarea .btn-mini{align-self:flex-start}
.tarea .form{gap:8px}.tarea .form .btn{margin-top:4px}
.nota-tarea{background:#DDF6F2;border-radius:14px;padding:12px 14px;display:flex;gap:14px;align-items:center}
.nota-tarea strong{font-family:'Baloo 2';font-size:32px;color:#0B6157}.nota-tarea p{color:#0B4A43;font-weight:700}
.calificar{display:flex;gap:6px;flex-wrap:wrap}.calificar input{font:inherit;padding:6px 8px;border:2px solid #CBD4E6;border-radius:8px}
.calificar input[name=retro]{flex:1;min-width:160px}
/* Logros */
.nivel{display:flex;gap:16px;align-items:center;background:#fff;border:2px solid var(--borde);border-radius:20px;padding:16px}
.nivel>div{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.nivel h2{font-size:24px}.nivel small{color:var(--gris);font-weight:700}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.cifras div{background:#fff;border:2px solid var(--borde);border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.cifras strong{font-family:'Baloo 2';font-size:28px;line-height:1}.cifras small{color:var(--gris);font-weight:700}
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#fff;border:2px solid var(--borde);border-radius:16px;padding:12px}
.calendario b{text-align:center;font-size:12px;color:var(--gris)}
.calendario i{aspect-ratio:1;border-radius:8px;background:#EEF1F7}
.calendario i.n1{background:#FFE4A8}.calendario i.n2{background:#F8C24F}.calendario i.n3{background:var(--ambar)}
.calendario i.futuro{background:transparent;border:2px dashed #E3E8F2}.calendario i.hoy{outline:3px solid var(--verde);outline-offset:1px}
.insignias{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.insignia{background:#fff;border:2px solid var(--borde);border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;filter:grayscale(1);opacity:.75}
.insignia.si{filter:none;opacity:1;border-color:#FFDF9E;box-shadow:0 4px 0 #FFDF9E}
.medalla{width:54px;height:54px;border-radius:50%;background:#FFF6E2;display:flex;align-items:center;justify-content:center}
.insignia small{color:var(--gris);font-weight:600;font-size:13px}.insignia em{font-size:12px;color:#0B6157;font-style:normal;font-weight:800}
.barra-prog.fina{height:8px;width:100%;flex:none}
/* ===== Tableta y PC: más espacio, menú lateral ===== */
.lista-grid{display:flex;flex-direction:column;gap:12px}
@media (min-width:760px){
  body.app{max-width:920px}
  .lista-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .app-main{padding:22px 24px;gap:16px}
  .app-top{padding:16px 24px 12px}
  .semana{max-width:520px;margin-left:auto;margin-right:auto}
  .sabi-dice .globo{font-size:16px}
  .curso h3{font-size:30px}
}
@media (min-width:1080px){
  body.app:has(> .app-nav){max-width:1180px;padding-left:236px;padding-bottom:30px;position:relative}
  .app-nav{position:fixed;top:24px;bottom:auto;left:max(16px,calc(50% - 590px));transform:none;width:210px;max-width:none;
    display:flex;flex-direction:column;gap:4px;border:2px solid var(--borde);border-radius:20px;padding:14px 10px}
  .app-nav a{text-align:left;font-size:16px;padding:12px 16px;border-radius:12px}
  .app-nav a.activo{background:#DDF6F2}
  .app-nav a:hover{background:var(--fondo)}
  .app-top{border:2px solid var(--borde);border-radius:20px;margin:24px 0 0;position:static}
  .lista-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .insignias{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nivel{padding:22px}
}
.calendario{max-width:520px}
@media (min-width:760px) and (max-width:1079px){.app-nav{max-width:920px}}
.lista-archivos{font-family:ui-monospace,monospace;font-size:13px;max-height:260px;overflow:auto;margin:8px 0 0}
/* ===== Camino de aprendizaje ===== */
.curso-hero{background:var(--c);color:#fff;border-radius:24px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 6px 0 rgba(0,0,0,.18);position:relative;overflow:hidden}
.curso-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.curso-hero span{font-size:12px;font-weight:800;letter-spacing:1.5px;opacity:.9}
.curso-hero h1{font-size:clamp(28px,4vw,40px);margin:4px 0 6px}.curso-hero p{margin:0;font-weight:700;opacity:.95}
.anillo{--p:0;flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.25) 0)}
.anillo::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--c)}
.anillo b{position:relative;font-family:'Baloo 2';font-size:20px}
.segmentos{display:grid;grid-template-columns:repeat(3,1fr);background:#E3E8F2;border-radius:14px;padding:4px;gap:4px}
.segmentos a{text-align:center;font-weight:800;color:var(--gris);text-decoration:none;padding:10px 6px;border-radius:10px}
.segmentos a.actual{background:#fff;color:var(--tinta);box-shadow:0 2px 0 #CBD4E6}
.periodos{justify-content:center}
.unidad{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.unidad-cab{background:var(--c);color:#fff;border-radius:18px;padding:14px 18px;box-shadow:0 5px 0 rgba(0,0,0,.18);display:flex;flex-direction:column;gap:2px}
.unidad-cab span{font-size:12px;font-weight:800;letter-spacing:1.5px;opacity:.9}.unidad-cab h2{font-size:22px}.unidad-cab small{font-weight:700;opacity:.92}
.camino{list-style:none;margin:0;padding:18px 0 8px;display:flex;flex-direction:column;align-items:center;gap:26px}
.nodo{display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(var(--x));max-width:260px;text-align:center}
.bola{width:72px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .15s}
a.bola:hover{transform:translateY(-2px)}a.bola:active{transform:translateY(4px)}
.nodo.hecha .bola{background:var(--c);box-shadow:0 7px 0 rgba(0,0,0,.25)}
.nodo.actual .bola{background:var(--ambar);box-shadow:0 7px 0 var(--ambar-o),0 0 0 8px #FFE4A8;animation:latido 2.2s ease-in-out infinite}
.nodo.actual .bola svg path{fill:#fff}
.nodo.bloqueada .bola,.nodo.pronto .bola{background:#E3E8F2;box-shadow:0 7px 0 #CBD4E6}
.nodo.pronto .bola{background:#F1F4F9;border:2px dashed #CBD4E6;box-shadow:none}
.etiqueta{font-weight:800;font-size:14px;line-height:1.3;color:var(--tinta);display:flex;flex-direction:column;gap:2px}
.etiqueta b{font-size:11px;letter-spacing:1.5px;color:#B86E00}.etiqueta em{font-style:normal;font-size:12px;color:#8A96B0}
.nodo.pronto .etiqueta,.nodo.bloqueada .etiqueta{color:#5B6785}
@keyframes latido{0%,100%{box-shadow:0 7px 0 var(--ambar-o),0 0 0 6px #FFE4A8}50%{box-shadow:0 7px 0 var(--ambar-o),0 0 0 12px rgba(255,228,168,.5)}}
@media (prefers-reduced-motion:reduce){.nodo.actual .bola{animation:none}}
@media (max-width:420px){.nodo{max-width:200px}}
/* ===== Reproductor de lecciones ===== */
.leccion-pag{background:#fff}
.lec{max-width:860px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.lec-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:2px solid var(--borde);position:sticky;top:0;background:#fff;z-index:5}
.lec-tit{flex:1;min-width:0;display:flex;flex-direction:column}.lec-tit small{color:var(--gris);font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lec-tit strong{font-family:'Baloo 2';font-size:19px;line-height:1.2}
.vista-previa{margin:0;background:#FFF6E2;color:#4A3200;font-weight:800;font-size:13px;text-align:center;padding:6px}
.lec-pasos{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:12px 16px 0}
.lec-pasos a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#8A96B0;font-weight:800;font-size:12px}
.lec-pasos i{font-style:normal;width:100%;height:8px;border-radius:999px;background:#E3E8F2;font-size:0}
.lec-pasos a.hecho i{background:var(--c)}.lec-pasos a.actual i{background:var(--ambar)}
.lec-pasos a.actual{color:var(--tinta)}.lec-pasos a.hecho{color:var(--verde-o)}
.lec-main{flex:1;padding:18px 18px 28px;display:flex;flex-direction:column;gap:16px}
.lec-pie{position:sticky;bottom:0;background:#fff;border-top:2px solid var(--borde);padding:12px 16px 16px;display:flex;justify-content:space-between;gap:10px}
.intro-paso{margin:0;color:var(--gris);font-weight:700}
.contenido{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.65}
.bloque-lec h2{font-size:26px;margin-bottom:8px}.bloque-lec h3{font-size:20px;margin:14px 0 6px}.bloque-lec p{margin:0 0 10px}
.bloque-lec.gancho{background:linear-gradient(135deg,#0E1A3A,#1B2C57);color:#E8EEFB;border-radius:20px;padding:20px 22px}
.bloque-lec.gancho h2{color:#fff}.bloque-lec.gancho em{color:#FFE4A8;font-style:normal}
.clave,.cuidado{border-radius:14px;padding:12px 16px;margin:10px 0;display:block}
.clave{background:#DDF6F2;color:#0B4A43}.cuidado{background:#FFF6E2;color:#4A3200}
.clave b,.cuidado b{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}
.tabla-lec{overflow-x:auto;border:2px solid var(--borde);border-radius:14px;margin:8px 0}
.tabla-lec table{width:100%;border-collapse:collapse;font-size:15px}.tabla-lec th{background:#F1F4F9;text-align:left;padding:8px 12px}.tabla-lec td{padding:8px 12px;border-top:1px solid var(--borde)}
.dos-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:8px 0 12px}
.tarjeta-lec{border-radius:16px;padding:14px 16px;border:2px solid var(--borde)}.tarjeta-lec ul{margin:6px 0 0;padding-left:20px}
.tarjeta-lec.escalar{background:#F1F4F9}.tarjeta-lec.vectorial{background:#E4EAFB;border-color:#C9D5F5}
.vec{font-style:italic;font-weight:800;position:relative;padding-top:4px}.vec::before{content:"→";position:absolute;top:-10px;left:0;font-size:13px;font-style:normal}
.resumen-lec{background:#F6F8FC;border:2px solid var(--borde);border-radius:18px;padding:16px 18px}.resumen-lec ul{margin:0;padding-left:20px}
.ejemplo{border:2px solid var(--borde);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 0 var(--borde)}
.ejemplo header span,.sim header span{font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--verde-o)}.ejemplo h2,.sim h2{font-size:21px}
.ejemplo .enun{margin:0;font-size:16px}
.ejemplo details{background:#F6F8FC;border-radius:12px;padding:10px 14px}.ejemplo summary{font-weight:800;cursor:pointer;color:var(--verde-o)}
.pasos-sol{margin:10px 0 6px;padding-left:22px;display:flex;flex-direction:column;gap:6px}.respuesta{margin:0;background:#DDF6F2;border-radius:10px;padding:8px 12px}
.sim{display:flex;flex-direction:column;gap:8px}.sim header p{margin:2px 0 0;color:var(--gris)}
.sim-marco{position:relative;width:100%;aspect-ratio:16/10;min-height:360px;border-radius:18px;overflow:hidden;border:2px solid var(--borde);background:#0E1A3A}
.sim-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#reto{display:flex;flex-direction:column;gap:14px}.reto-preg{display:flex;flex-direction:column;gap:12px}
button.opcion{font:inherit;text-align:left;background:#fff;color:var(--tinta);width:100%}
button.opcion:disabled{cursor:default}
.retro-inline{border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.retro-inline h3{font-size:22px}.retro-inline p{margin:0;font-weight:700}
.retro-inline details{background:rgba(255,255,255,.6);border-radius:10px;padding:8px 12px}
.pista-d summary{font-weight:800;color:var(--verde-o);cursor:pointer}.pista-d .pista{margin-top:8px}
.reto-fin{display:flex;flex-direction:column;gap:14px}
@media (max-width:520px){.lec-pasos span{font-size:10px}.lec-pie .btn{padding:12px 14px;font-size:15px}.contenido{font-size:16px}.sim-marco{aspect-ratio:3/4}}

[hidden]{display:none!important}
.etq-repaso{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:800;margin:0 0 6px!important}
.abrir-sim{align-self:flex-end;margin-top:-2px}
.sim-marco.lab-marco{aspect-ratio:auto;height:min(1150px,88vh);min-height:560px;background:#F6F8FC}
.modo-pub{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:2px solid var(--borde);border-radius:18px;padding:14px 18px}
.modo-pub.activo{border-color:#9FE7DC;background:#F2FCFA}
.modo-pub div{display:flex;flex-direction:column;gap:2px}.modo-pub span{color:var(--gris);font-size:14px}
.interruptor{flex:none;width:62px;height:34px;border-radius:999px;border:0;background:#CBD4E6;position:relative;cursor:pointer;transition:background .2s}
.interruptor i{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:left .2s}
.interruptor[aria-checked=true]{background:var(--verde)}.interruptor[aria-checked=true] i{left:32px}
/* Fórmulas y fracciones en lecciones */
.formula{background:#F6F8FC;border:2px solid var(--borde);border-radius:14px;padding:12px 16px;text-align:center;font-size:18px;font-weight:700;overflow-x:auto;white-space:nowrap}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 4px;font-size:.88em}
.frac>span:first-child{border-bottom:2px solid currentColor;padding:0 4px 1px}.frac>span:last-child{padding:1px 4px 0}
/* Posición de Sabi flotante según la página */
body.app{--sabi-abajo:94px}body.leccion-pag{--sabi-abajo:96px}body.portada{--sabi-abajo:18px}
@media (min-width:1080px){body.app:has(> .app-nav){--sabi-abajo:20px}}
/* Tarjeta de Sabi en Logros */
.sabi-config{background:#fff;border:2px solid var(--borde);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sabi-config header{display:flex;justify-content:space-between;align-items:center;gap:10px}.sabi-config h2{font-size:22px}
.sabi-config p{margin:0;color:var(--gris)}.sabi-config .fila{gap:8px}
/* Problemas paso a paso */
.lec-pasos{grid-template-columns:repeat(6,1fr)}
.problema{border:2px solid var(--borde);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 0 var(--borde)}
.problema.resuelto{border-color:#9FE7DC;box-shadow:0 4px 0 #9FE7DC}
.problema header span{font-size:12px;font-weight:800;letter-spacing:1.5px;color:#B86E00}.problema h2{font-size:21px}.problema .enun{margin:0;font-size:16px}
.etapas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.etapa{background:#F6F8FC;border:2px solid var(--borde);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.etapa.lista{background:#F2FCFA;border-color:#9FE7DC}.etapa .preg{margin:0;font-weight:700}
.fila-etapa{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fila-etapa input{flex:1;min-width:140px;font:inherit;font-weight:700;font-size:17px;padding:10px 12px;border:2px solid #CBD4E6;border-radius:12px}
.fila-etapa input.ok{border-color:var(--verde);background:#DDF6F2}.fila-etapa input.mal{border-color:#E26A3F;background:#FDE6E0}
.fila-etapa .unidad{font-weight:800;color:var(--gris)}.fila-etapa .btn{padding:10px 16px;font-size:15px}
.op-etapa{display:flex;flex-wrap:wrap;gap:8px}.op-etapa .btn-mini{font-size:15px;padding:9px 14px}
.op-etapa .btn-mini.ok{background:#DDF6F2;border-color:var(--verde)}.op-etapa .btn-mini.mal{background:#FDE6E0;border-color:#E26A3F}
.exp-etapa{margin:0;background:#fff;border-left:4px solid var(--verde);border-radius:8px;padding:8px 12px;font-weight:600}
.etapa .pista{margin:0}
.cierre{background:#DDF6F2;color:#0B4A43;border-radius:12px;padding:10px 14px}
.sacude{animation:sacudir .4s}@keyframes sacudir{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (max-width:520px){.lec-pasos span{font-size:9px}}
.hero .globo{color:var(--tinta)}