/* ============================================================
   SABER+ — El aula (/aula?c=slug)
   Pantalla oscura: es donde se estudia, no donde se vende.
   ============================================================ */
body.aula{background:var(--tinta-950);color:rgba(255,255,255,.86);min-height:100vh;display:flex;flex-direction:column}
body.aula ::selection{background:var(--oro);color:var(--tinta-950)}

/* ---------- Barra superior ---------- */
.aula-nav{position:sticky;top:0;z-index:100;background:rgba(8,13,40,.92);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.1);padding:11px 0}
.aula-nav-in{display:flex;align-items:center;gap:20px}
.aula-nav .marca{color:#fff;font-size:18px}
.aula-nav .curso-act{display:flex;flex-direction:column;padding-left:20px;margin-left:4px;border-left:1px solid rgba(255,255,255,.14);min-width:0}
.aula-nav .curso-act b{font-size:14.4px;font-weight:650;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aula-nav .curso-act span{font-size:11.8px;color:rgba(255,255,255,.5)}
.aula-nav .der{margin-left:auto;display:flex;align-items:center;gap:14px}
.progreso-mini{display:flex;align-items:center;gap:10px;font-size:12.8px;color:rgba(255,255,255,.62);white-space:nowrap}
.progreso-mini .barra{width:104px;height:6px;border-radius:4px;background:rgba(255,255,255,.13);overflow:hidden}
.progreso-mini .barra i{display:block;height:100%;background:var(--oro);border-radius:4px;transition:width .6s var(--curva)}
@media(max-width:820px){.aula-nav .curso-act,.progreso-mini{display:none}}

/* ---------- Estructura ---------- */
.aula-cuerpo{display:grid;grid-template-columns:330px minmax(0,1fr);flex:1;align-items:start}
.aula-cuerpo > *{min-width:0}
.lateral{position:sticky;top:63px;height:calc(100vh - 63px);overflow-y:auto;padding:24px 18px 40px;
  border-right:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.18)}
.lateral::-webkit-scrollbar{width:7px}
.lateral::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.lateral h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:22px 0 10px;padding:0 8px}
.lateral h4:first-child{margin-top:0}
.mod-t{display:flex;align-items:center;gap:9px;padding:9px 10px;font-size:13.4px;font-weight:700;color:rgba(255,255,255,.9);
  font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.01em}
.mod-t .n{width:22px;height:22px;flex:none;border-radius:7px;background:rgba(255,255,255,.09);display:grid;place-items:center;font-size:11px}
.lec{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:10px;font-size:13.2px;
  color:rgba(255,255,255,.58);line-height:1.4;transition:background .25s,color .25s;cursor:default;position:relative}
.lec .est{width:15px;height:15px;flex:none;border-radius:50%;border:1.6px solid currentColor;margin-top:1px;
  display:grid;place-items:center}
.lec .est svg{width:9px;height:9px;stroke:var(--tinta-950);stroke-width:3.4;fill:none;opacity:0}
.lec .min{margin-left:auto;font-size:11.4px;opacity:.6;white-space:nowrap;padding-left:6px}
.lec.abierta{background:rgba(245,179,26,.13);color:var(--oro-claro);font-weight:650;cursor:pointer}
.lec.abierta:hover{background:rgba(245,179,26,.2)}
.lec.hecha{color:rgba(255,255,255,.4)}
.lec.hecha .est{background:var(--menta);border-color:var(--menta)}
.lec.hecha .est svg{opacity:1}
.lec.bloqueada{color:rgba(255,255,255,.3);padding-right:30px}
.lec.bloqueada .est{border-style:dashed}
.lec.bloqueada::after{content:"";position:absolute;right:10px;top:11px;width:11px;height:11px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='2.4'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.lec.bloqueada .min{display:none}

/* ---------- Área principal ---------- */
.principal{padding:30px 42px 70px;max-width:900px;margin-inline:auto;width:100%}
.mig-lec{font-size:12.8px;color:rgba(255,255,255,.5);margin-bottom:12px}
.mig-lec b{color:var(--oro)}
.principal h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,3.4vw,40px);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;color:#fff;margin-bottom:14px}
.lec-resumen{font-size:16.4px;color:rgba(255,255,255,.66);line-height:1.6;margin-bottom:26px;max-width:64ch}

/* ---------- Reproductor ---------- */
.repro{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.11);background:#0E1435;margin-bottom:12px}
.repro-pantalla{aspect-ratio:16/9;position:relative;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tinta-800),var(--tinta-600) 55%,var(--menta));overflow:hidden}
.repro-pantalla::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 70% at 50% 38%,rgba(255,255,255,.22),transparent 72%)}
.repro-pantalla::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:44px 44px}
.repro-centro{position:relative;z-index:4;text-align:center;padding:24px}
.repro-play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.95);border:0;cursor:pointer;
  display:grid;place-items:center;margin:0 auto 16px;transition:transform .35s var(--curva),box-shadow .35s var(--curva);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
.repro-play:hover{transform:scale(1.07)}
.repro-play svg{width:26px;height:26px;fill:var(--tinta-900);margin-left:4px}
.repro-play.pausa svg{margin-left:0}
.repro-centro b{display:block;color:#fff;font-size:17px;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;
  letter-spacing:-.02em;max-width:26ch;margin:0 auto}
.repro-centro span{display:block;color:rgba(255,255,255,.72);font-size:12.8px;margin-top:7px}
.repro-barra{display:flex;align-items:center;gap:13px;padding:12px 16px;background:rgba(0,0,0,.28)}
.repro-barra .pista{flex:1;height:5px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;cursor:pointer}
.repro-barra .pista i{display:block;height:100%;width:0;background:var(--oro);border-radius:4px}
.repro-barra .t{font-size:12.2px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;white-space:nowrap}
.repro-nota{font-size:12.4px;color:rgba(255,255,255,.45);margin-bottom:30px;display:flex;align-items:center;gap:8px}
.repro-nota svg{width:14px;height:14px;stroke:var(--oro);fill:none;stroke-width:2;flex:none}

/* ---------- Pestañas ---------- */
.pestanas{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.11);margin-bottom:28px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pestanas::-webkit-scrollbar{display:none}
.pest{background:none;border:0;padding:13px 19px;font-size:14.4px;font-weight:650;color:rgba(255,255,255,.55);
  cursor:pointer;position:relative;transition:color .25s;white-space:nowrap}
.pest:hover{color:#fff}
.pest.act{color:#fff}
.pest.act::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--oro);border-radius:2px}
.pest .cont{font-size:11.5px;opacity:.6;margin-left:5px}

/* ---------- Contenido de la clase ---------- */
.panel{display:none;animation:entra .4s var(--curva)}
.panel.act{display:block}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.texto p{font-size:17px;line-height:1.75;color:rgba(255,255,255,.8);margin-bottom:20px}
.texto .destacado{border-left:3px solid var(--oro);padding:16px 22px;background:rgba(245,179,26,.08);
  border-radius:0 var(--r-md) var(--r-md) 0;margin-bottom:22px;font-size:17.5px;line-height:1.6;color:#fff;font-weight:600}
.texto .lista{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);
  padding:22px 24px;margin-bottom:22px}
.texto .lista h4{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:13px;letter-spacing:-.02em}
.texto .lista ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.texto .lista li{display:flex;gap:12px;font-size:15.4px;line-height:1.55;color:rgba(255,255,255,.78)}
.texto .lista li i{width:6px;height:6px;border-radius:50%;background:var(--oro);flex:none;margin-top:9px}

/* ---------- Recursos ---------- */
.recurso{display:flex;align-items:center;gap:15px;padding:16px 19px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);margin-bottom:11px;transition:.3s var(--curva)}
.recurso:hover{background:rgba(255,255,255,.08);transform:translateX(4px)}
.recurso .ic{width:42px;height:42px;flex:none;border-radius:12px;background:rgba(245,179,26,.15);display:grid;place-items:center}
.recurso .ic svg{width:19px;height:19px;stroke:var(--oro);fill:none;stroke-width:1.8}
.recurso b{display:block;font-size:15px;color:#fff;font-weight:650}
.recurso span{display:block;font-size:12.6px;color:rgba(255,255,255,.5)}
.recurso .bajar{margin-left:auto;font-size:13px;font-weight:650;color:var(--oro);white-space:nowrap}

/* ---------- Quiz ---------- */
.quiz-p{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
  padding:26px 28px;margin-bottom:16px}
.quiz-p .n{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);font-weight:700;margin-bottom:10px}
.quiz-p h4{font-size:18.5px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:18px;font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.op{width:100%;text-align:left;display:flex;align-items:flex-start;gap:13px;padding:14px 17px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);color:rgba(255,255,255,.82);
  cursor:pointer;margin-bottom:9px;font-size:15.2px;line-height:1.45;transition:.25s}
.op:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.op:disabled{cursor:default}
.op .letra{width:25px;height:25px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);
  display:grid;place-items:center;font-size:12.4px;font-weight:700}
.op.bien{background:rgba(15,158,120,.16);border-color:var(--menta);color:#fff}
.op.bien .letra{background:var(--menta);color:var(--tinta-950)}
.op.mal{background:rgba(226,76,52,.14);border-color:var(--cayena);color:#fff}
.op.mal .letra{background:var(--cayena);color:#fff}
.porque{margin-top:14px;padding:15px 18px;border-radius:var(--r-md);font-size:14.6px;line-height:1.6;display:none}
.porque.on{display:block;animation:entra .35s var(--curva)}
.porque.ok{background:rgba(15,158,120,.12);border:1px solid rgba(15,158,120,.28);color:rgba(255,255,255,.86)}
.porque.no{background:rgba(226,76,52,.1);border:1px solid rgba(226,76,52,.26);color:rgba(255,255,255,.86)}
.porque b{color:#fff}
.quiz-final{padding:26px 28px;border-radius:var(--r-lg);background:rgba(245,179,26,.09);
  border:1px solid rgba(245,179,26,.25);display:none;align-items:center;gap:20px;flex-wrap:wrap}
.quiz-final.on{display:flex;animation:entra .4s var(--curva)}
.quiz-final b{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;color:#fff;letter-spacing:-.02em}
.quiz-final p{font-size:14.6px;color:rgba(255,255,255,.7);margin-top:4px}

/* ---------- Pie de la clase ---------- */
.lec-pie{margin-top:38px;padding-top:28px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lec-pie .btn-hecho{background:var(--menta);color:#fff}
.lec-pie .btn-hecho:hover{transform:translateY(-3px)}
.lec-pie .btn-hecho.ya{background:rgba(15,158,120,.18);color:var(--menta-claro);cursor:default;transform:none}
.lec-pie .sig{margin-left:auto;font-size:13.6px;color:rgba(255,255,255,.5);text-align:right}
.lec-pie .sig b{display:block;color:rgba(255,255,255,.8);font-size:14.4px}

/* ---------- Aviso de bosquejo ---------- */
.aviso-aula{margin-top:32px;padding:18px 22px;border-radius:var(--r-md);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);font-size:13.6px;color:rgba(255,255,255,.6);line-height:1.6}
.aviso-aula b{color:var(--oro-claro)}

/* ---------- Sin muestra ---------- */
.sin-muestra{padding:90px 24px;text-align:center;max-width:560px;margin:0 auto}
.sin-muestra h1{margin-bottom:14px}
.sin-muestra p{color:rgba(255,255,255,.62);margin-bottom:26px;font-size:16.4px;line-height:1.65}

/* En móvil el temario arranca plegado: la clase debe quedar de primera. */
.abrir-temario{display:none;width:100%;align-items:center;gap:10px;padding:15px 18px;background:rgba(255,255,255,.05);
  border:0;border-bottom:1px solid rgba(255,255,255,.09);color:#fff;font-size:14.4px;font-weight:650;cursor:pointer}
.abrir-temario svg{width:18px;height:18px;stroke:var(--oro);fill:none;stroke-width:2;transition:transform .35s var(--curva)}
.abrir-temario .cuantas{margin-left:auto;font-size:12.6px;color:rgba(255,255,255,.5);font-weight:500}
.abrir-temario.on svg{transform:rotate(180deg)}

@media(max-width:1000px){
  .aula-cuerpo{grid-template-columns:minmax(0,1fr)}
  .abrir-temario{display:flex}
  .lateral{position:static;height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.09);
    max-height:0;padding:0 16px;overflow:hidden;transition:max-height .45s var(--curva),padding .45s var(--curva)}
  .lateral.desplegado{max-height:62vh;overflow-y:auto;padding:18px 16px}
  .principal{padding:26px 22px 60px}
}