[hidden]{display:none!important}

:root{
  --ground:#EFF1EE; --surface:#FFFFFF; --surface2:#F6F8F5; --surface3:#E9EDE9;
  --ink:#131A17; --ink2:#4A5651; --ink3:#7A8781;
  --line:#DCE3DD; --line2:#C7D1CA;
  --accent:#00873F; --accent-ink:#0B4D22; --accent-soft:#DCF1E4;
  --live:#C62A32; --live-soft:#F7E0E1;
  --gold:#9A7420; --gold-soft:#F3EBD6;
  --shadow:0 1px 2px rgba(19,26,23,.06), 0 8px 24px -12px rgba(19,26,23,.18);
  --r:10px;
  --f-ui:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-read:'Source Serif 4', Georgia, serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1412; --surface:#161F1B; --surface2:#1C2622; --surface3:#243029;
    --ink:#E6EDE8; --ink2:#A5B2AB; --ink3:#7C8A83;
    --line:#293632; --line2:#35443E;
    --accent:#4FBE8C; --accent-ink:#77D2A8; --accent-soft:#173328;
    --live:#F0555C; --live-soft:#3A1D1F;
    --gold:#D2A94F; --gold-soft:#332A16;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1412; --surface:#161F1B; --surface2:#1C2622; --surface3:#243029;
  --ink:#E6EDE8; --ink2:#A5B2AB; --ink3:#7C8A83;
  --line:#293632; --line2:#35443E;
  --accent:#4FBE8C; --accent-ink:#77D2A8; --accent-soft:#173328;
  --live:#F0555C; --live-soft:#3A1D1F;
  --gold:#D2A94F; --gold-soft:#332A16;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.015em}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3);
}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- barra superior ---------- */
.proto{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:14px;
  padding:0 16px; height:46px; background:var(--surface); border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:thin;
}
.proto-marca{display:flex; align-items:center; gap:8px; flex:none; padding-right:12px; border-right:1px solid var(--line)}
.proto-marca b{font-size:13.5px; letter-spacing:-.02em}
.proto-marca span{font-size:10px; color:var(--ink3); letter-spacing:.08em; text-transform:uppercase}
.proto-tabs{display:flex; gap:2px; flex:none}
.proto-tabs button{
  padding:5px 11px; border-radius:99px; font-size:12.5px; color:var(--ink2); white-space:nowrap;
  transition:background .15s, color .15s;
}
.proto-tabs button:hover{background:var(--surface3)}
.proto-tabs button[aria-current="true"]{background:var(--ink); color:var(--surface)}
.proto-nota{margin-left:auto; flex:none; font-size:11.5px; color:var(--ink3); padding-left:16px}

/* ---------- armazón ---------- */
.marco{display:flex; min-height:calc(100vh - 46px)}
.rail{
  flex:none; width:66px; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 0;
}
.rail .logo{
  width:36px; height:36px; border-radius:10px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:15px; margin-bottom:14px; letter-spacing:-.03em;
}
.rail-b{
  width:46px; height:44px; border-radius:9px; display:grid; place-items:center; color:var(--ink3);
  position:relative;
}
.rail-b:hover{background:var(--surface3); color:var(--ink)}
.rail-b[aria-current="true"]{background:var(--accent-soft); color:var(--accent-ink)}
.rail-b svg{width:19px; height:19px}
.rail-b i{
  position:absolute; inset:auto auto 6px 50%; transform:translateX(-50%);
  font-style:normal; font-size:8.5px; letter-spacing:.03em;
}
.rail-sep{flex:1}
.rail-avatar{
  width:34px; height:34px; border-radius:99px; background:var(--surface3); color:var(--ink2);
  display:grid; place-items:center; font-size:12px; font-weight:600; border:1px solid var(--line2);
}
.lienzo{flex:1; min-width:0; display:flex; flex-direction:column}

.pantalla{display:none; flex:1; min-width:0}
.pantalla[data-activa]{display:flex; flex-direction:column}

/* ---------- cabecera de pantalla ---------- */
.cab{
  display:flex; align-items:flex-end; gap:20px; padding:22px 30px 18px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.cab h1{font-size:22px}
.cab .sub{color:var(--ink2); font-size:13px; margin-top:3px}
.cab .der{margin-left:auto; display:flex; gap:8px; align-items:center}

.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:500; border:1px solid var(--line2); background:var(--surface);
  transition:background .15s, border-color .15s;
}
.btn:hover{background:var(--surface2)}
.btn-p{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-p:hover{background:var(--accent-ink)}
.btn svg{width:15px; height:15px}

.cuerpo{padding:26px 30px 60px; overflow-y:auto; flex:1}
.ancho{max-width:1180px}

/* ---------- tarjetas ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.rejilla{display:grid; gap:16px}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.r2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1080px){.r4{grid-template-columns:repeat(2,1fr)} .r3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.r4,.r3,.r2{grid-template-columns:1fr}}

.seccion{margin-bottom:34px}
.seccion-cab{display:flex; align-items:baseline; gap:12px; margin-bottom:13px}
.seccion-cab h2{font-size:15px}
.seccion-cab a{margin-left:auto; font-size:12.5px; color:var(--accent-ink); text-decoration:none; font-weight:500}
.seccion-cab a:hover{text-decoration:underline}

/* ficha de cifra */
.cifra{padding:16px 18px 18px}
.cifra .v{font-family:var(--f-mono); font-size:30px; letter-spacing:-.03em; line-height:1.05; margin:9px 0 2px; font-variant-numeric:tabular-nums}
.cifra .d{font-size:12px; color:var(--ink2)}
.cifra .chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 7px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink)}

/* pastilla en vivo */
.env{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border-radius:99px;
  background:var(--live-soft); color:var(--live); font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.punto{width:7px; height:7px; border-radius:99px; background:var(--live); animation:latir 1.6s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.8)}}

/* ---------- próxima clase ---------- */
.proxima{
  display:flex; gap:24px; align-items:center; padding:20px 22px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  border-left:3px solid var(--live);
}
.proxima .reloj{
  flex:none; width:104px; text-align:center; padding-right:22px; border-right:1px solid var(--line);
}
.proxima .reloj .h{font-family:var(--f-mono); font-size:26px; letter-spacing:-.03em}
.proxima .reloj .d{font-size:11px; color:var(--ink3); text-transform:uppercase; letter-spacing:.07em; margin-top:2px}
.proxima h3{font-size:16px; margin-bottom:5px}
.proxima .meta{font-size:12.5px; color:var(--ink2); display:flex; gap:14px; flex-wrap:wrap}
.proxima .acc{margin-left:auto; display:flex; flex-direction:column; gap:7px; align-items:flex-end}
.cuenta{font-family:var(--f-mono); font-size:12px; color:var(--ink3)}
@media (max-width:760px){.proxima{flex-wrap:wrap} .proxima .acc{margin-left:0; width:100%; align-items:stretch}}

/* ---------- curso ---------- */
.curso{overflow:hidden; display:flex; flex-direction:column; text-align:left; width:100%}
.curso:hover{border-color:var(--line2)}
.curso .lam{
  height:104px; position:relative; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--accent) 0%, var(--accent-ink) 100%);
}
.curso .lam.b{background:linear-gradient(140deg,#2E5D8A 0%,#1B3A5A 100%)}
.curso .lam.c{background:linear-gradient(140deg,#8A5A2E 0%,#5A3A1B 100%)}
.curso .lam.d{background:linear-gradient(140deg,#5C3A78 0%,#3A2350 100%)}
.curso .lam span{
  font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,.9);
  letter-spacing:.16em; text-transform:uppercase;
}
.curso .lam .nivel{
  position:absolute; top:9px; left:10px; font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:rgba(0,0,0,.28); padding:2px 7px; border-radius:99px;
}
.curso .txt{padding:14px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1}
.curso h3{font-size:14.5px; line-height:1.3}
.curso .des{font-family:var(--f-read); font-size:13px; color:var(--ink2); line-height:1.45}
.curso .pie{margin-top:auto; display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--ink3); padding-top:4px}

/* barra de avance */
.barra{height:5px; border-radius:99px; background:var(--surface3); overflow:hidden}
.barra i{display:block; height:100%; border-radius:99px; background:var(--accent)}

/* ---------- lista de lecciones ---------- */
.lecc{display:flex; flex-direction:column}
.lecc-i{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line);
  text-align:left; width:100%;
}
.lecc-i:last-child{border-bottom:0}
.lecc-i:hover{background:var(--surface2)}
.lecc-i[aria-current="true"]{background:var(--accent-soft)}
.lecc-i .ic{
  flex:none; width:26px; height:26px; border-radius:99px; display:grid; place-items:center;
  background:var(--surface3); color:var(--ink2);
}
.lecc-i[aria-current="true"] .ic{background:var(--accent); color:#fff}
.lecc-i .ic svg{width:12px; height:12px}
.lecc-i .t{font-size:13px; flex:1; min-width:0}
.lecc-i .t small{display:block; color:var(--ink3); font-size:11.5px}
.lecc-i .dur{font-family:var(--f-mono); font-size:11.5px; color:var(--ink3); flex:none}

/* ---------- reproductor ---------- */
.repro{background:#0B100E; border-radius:var(--r); overflow:hidden; position:relative}
.repro .marco-v{aspect-ratio:16/9; display:grid; place-items:center; position:relative; background:radial-gradient(120% 90% at 50% 30%, #1D2B25 0%, #0B100E 70%)}
.repro .play{
  width:66px; height:66px; border-radius:99px; background:rgba(255,255,255,.13); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.24); display:grid; place-items:center; color:#fff;
}
.repro .play:hover{background:rgba(255,255,255,.22)}
.repro .play svg{width:24px; height:24px; margin-left:3px}
.repro .ctrl{display:flex; align-items:center; gap:12px; padding:11px 14px; background:#12100E00; background:#0F1613; color:#DCE6E0}
.repro .lin{flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.16); position:relative}
.repro .lin i{position:absolute; inset:0 62% 0 0; background:var(--accent); border-radius:99px}
.repro .lin b{position:absolute; left:38%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:99px; background:#fff}
.repro .t{font-family:var(--f-mono); font-size:11.5px; color:#9FB0A8}
.repro .cap{
  position:absolute; left:16px; bottom:16px; right:16px; color:#fff;
}
.repro .cap h3{font-size:16px}
.repro .cap p{font-size:12px; color:rgba(255,255,255,.7); margin-top:2px}

/* ---------- AULA EN VIVO (cromo oscuro propio) ---------- */
.aula{
  --a-fondo:#0B100E; --a-panel:#141C18; --a-panel2:#1C2621; --a-linea:#27332D;
  --a-ink:#E8EFEA; --a-ink2:#9AA9A2; --a-ink3:#6F7E77;
  background:var(--a-fondo); color:var(--a-ink); display:flex; flex-direction:column; height:calc(100vh - 46px);
}
.aula-top{
  display:flex; align-items:center; gap:16px; padding:0 18px; height:54px; flex:none;
  border-bottom:1px solid var(--a-linea); background:var(--a-panel);
}
.aula-top h2{font-size:14.5px}
.aula-top .ruta{font-size:11.5px; color:var(--a-ink3)}
.aula-top .env{background:rgba(240,85,92,.14); color:#FF7B81}
.aula-top .punto{background:#FF7B81}
.aula-top .cron{font-family:var(--f-mono); font-size:13px; color:var(--a-ink2); font-variant-numeric:tabular-nums}
.aula-top .der{margin-left:auto; display:flex; align-items:center; gap:10px}
.aula-top .grab{display:flex; align-items:center; gap:6px; font-size:11.5px; color:#FF7B81}

.aula-mid{flex:1; display:flex; min-height:0}
.escena{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; padding:14px}
.orador{
  flex:1; min-height:0; border-radius:12px; position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 25%, #21322B 0%, #0E1512 75%);
  border:2px solid var(--accent); display:grid; place-items:center;
}
.iniciales{
  width:96px; height:96px; border-radius:99px; display:grid; place-items:center;
  font-size:31px; font-weight:600; letter-spacing:-.02em; color:#fff;
  background:linear-gradient(140deg,#17795A,#0C4F3A);
}
.orador{padding:0}
.doc{
  position:absolute; inset:0; margin:52px 26px 26px; background:#F6F7F4; color:#171C19;
  border-radius:6px; box-shadow:0 10px 40px -10px rgba(0,0,0,.6); display:flex; flex-direction:column;
  overflow:hidden; max-width:820px; left:50%; transform:translateX(-50%); width:calc(100% - 52px);
}
.doc-cab{
  display:flex; align-items:center; padding:9px 18px; background:#E8EBE5; border-bottom:1px solid #D3D8CE;
  font-size:11.5px; color:#4E574F;
}
.doc-p{margin-left:auto}
.doc-cuerpo{padding:26px 34px; overflow:hidden}
.doc-cuerpo h4{font-family:var(--f-read); font-size:19px; margin-bottom:14px; color:#171C19}
.doc-cuerpo p{font-family:var(--f-read); font-size:14.5px; line-height:1.68; color:#2C332E; margin-bottom:11px; max-width:64ch}
.doc-cuerpo mark{background:#FCE7A0; color:inherit; padding:0 2px}
.doc-marca{display:flex; flex-direction:column; gap:9px; margin-top:20px}
.doc-marca span{height:9px; border-radius:3px; background:#E2E6DE}
.doc-marca span:first-child{width:88%}
.doc-marca span:last-child{width:54%}
.pip-prof{
  position:absolute; right:16px; bottom:16px; width:150px; height:98px; border-radius:9px;
  background:radial-gradient(120% 100% at 50% 30%, #21322B 0%, #0E1512 75%);
  border:2px solid var(--accent); display:grid; place-items:center; overflow:hidden;
}
.ini-pip{width:48px; height:48px; border-radius:99px; display:grid; place-items:center; font-size:17px; font-weight:600; color:#fff; background:linear-gradient(140deg,#17795A,#0C4F3A)}
.pip-nom{position:absolute; left:8px; bottom:7px; font-size:10.5px; color:#DCE6E0; display:flex; align-items:center; gap:4px}
.pip-nom svg{width:11px; height:11px; color:#79D9AC}
@media (max-width:900px){.pip-prof{width:104px; height:70px} .doc-cuerpo{padding:18px 20px}}
.placa{
  position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:99px; background:rgba(8,12,10,.72); backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:500;
}
.placa svg{width:13px; height:13px; color:#79D9AC}
.placa small{color:var(--a-ink3); font-weight:400}
.etiq-comp{
  position:absolute; right:14px; top:14px; font-size:11px; padding:5px 10px; border-radius:99px;
  background:rgba(8,12,10,.72); color:var(--a-ink2); display:flex; align-items:center; gap:6px;
}
.tira{display:flex; gap:10px; flex:none; height:112px; overflow-x:auto; padding-bottom:2px}
.mosaico{
  flex:none; width:170px; border-radius:10px; position:relative; overflow:hidden;
  background:var(--a-panel2); border:1px solid var(--a-linea); display:grid; place-items:center;
}
.mosaico .ini2{
  width:46px; height:46px; border-radius:99px; display:grid; place-items:center;
  font-size:15px; font-weight:600; color:#fff; background:#2C3B34;
}
.mosaico .nom{
  position:absolute; left:8px; bottom:7px; font-size:11px; color:var(--a-ink2);
  display:flex; align-items:center; gap:5px;
}
.mosaico .nom svg{width:11px; height:11px}
.mosaico .mano{
  position:absolute; right:7px; top:7px; width:22px; height:22px; border-radius:99px;
  background:#C9A227; color:#1A1400; display:grid; place-items:center; font-size:12px;
}
.mosaico.habla{border-color:var(--accent)}
.mosaico .mudo{color:#FF7B81}

.panel-l{
  flex:none; width:322px; border-left:1px solid var(--a-linea); background:var(--a-panel);
  display:flex; flex-direction:column; min-height:0;
}
.panel-tabs{display:flex; flex:none; border-bottom:1px solid var(--a-linea)}
.panel-tabs button{
  flex:1; padding:12px 6px; font-size:12.5px; color:var(--a-ink3); border-bottom:2px solid transparent;
}
.panel-tabs button:hover{color:var(--a-ink)}
.panel-tabs button[aria-current="true"]{color:var(--a-ink); border-bottom-color:var(--accent)}
.panel-cuerpo{flex:1; overflow-y:auto; padding:14px}
.panel-pest{display:none}
.panel-pest[data-activa]{display:block}
.msj{margin-bottom:14px}
.msj .q{font-size:12px; margin-bottom:2px}
.msj .q b{font-weight:600}
.msj .q span{color:var(--a-ink3); font-family:var(--f-mono); font-size:11px; margin-left:6px}
.msj .c{font-size:13px; color:var(--a-ink2); line-height:1.5}
.msj.mio .c{color:var(--a-ink)}
.msj.prof .q b{color:#79D9AC}
.pregunta{
  border-left:2px solid var(--gold); padding-left:10px; margin-bottom:14px;
}
.pregunta .v{display:flex; align-items:center; gap:6px; font-size:11px; color:#D2A94F; margin-top:4px}
.part-i{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--a-linea)}
.part-i .ini3{width:30px; height:30px; border-radius:99px; background:#2C3B34; color:#fff; display:grid; place-items:center; font-size:11.5px; font-weight:600; flex:none}
.part-i .n{font-size:12.5px; flex:1; min-width:0}
.part-i .n small{display:block; color:var(--a-ink3); font-size:11px}
.part-i .est{display:flex; gap:7px; color:var(--a-ink3)}
.part-i .est svg{width:14px; height:14px}
.mat-i{display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; background:var(--a-panel2); margin-bottom:8px; width:100%; text-align:left}
.mat-i:hover{background:#232F29}
.mat-i .ext{font-family:var(--f-mono); font-size:9.5px; padding:4px 6px; border-radius:5px; background:#2E3D36; color:var(--a-ink2); flex:none}
.mat-i .t{font-size:12.5px; flex:1}
.mat-i .t small{display:block; color:var(--a-ink3); font-size:11px}
.entrada{
  flex:none; padding:12px; border-top:1px solid var(--a-linea); display:flex; gap:8px; align-items:center;
}
.entrada input{
  flex:1; background:var(--a-panel2); border:1px solid var(--a-linea); color:var(--a-ink);
  border-radius:8px; padding:9px 12px; font:inherit; font-size:13px;
}
.entrada input::placeholder{color:var(--a-ink3)}
.entrada button{width:36px; height:36px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none}
.entrada button svg{width:16px; height:16px}

.aula-bar{
  flex:none; height:74px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--a-panel); border-top:1px solid var(--a-linea); padding:0 18px; position:relative;
}
.ctrl-b{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 12px; border-radius:10px;
  color:var(--a-ink2); min-width:66px;
}
.ctrl-b:hover{background:var(--a-panel2); color:var(--a-ink)}
.ctrl-b svg{width:20px; height:20px}
.ctrl-b span{font-size:10.5px}
.ctrl-b.off{color:#FF7B81}
.ctrl-b.act{background:var(--accent-soft); color:#79D9AC}
.ctrl-salir{
  position:absolute; right:18px; background:#B02730; color:#fff; padding:10px 18px; border-radius:9px;
  font-size:13px; font-weight:500;
}
.ctrl-salir:hover{background:#8E1E26}
@media (max-width:1000px){.panel-l{display:none} .ctrl-b span{display:none} .ctrl-b{min-width:auto}}

/* ---------- tablas ---------- */
.tabla{width:100%; border-collapse:collapse; font-size:13px}
.tabla th{
  text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3);
  font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tabla td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--surface2)}
.tabla .n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right}
.envoltura{overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); background:var(--surface)}
.estado{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px}
.e-ok{background:var(--accent-soft); color:var(--accent-ink)}
.e-esp{background:var(--gold-soft); color:var(--gold)}
.e-no{background:var(--surface3); color:var(--ink3)}

/* ---------- gráfica de avance por territorio ---------- */
.terr{display:flex; flex-direction:column; gap:2px; padding:6px 4px 4px}
.terr-f{display:grid; grid-template-columns:150px 1fr 62px; align-items:center; gap:14px; padding:7px 12px; border-radius:7px}
.terr-f:hover{background:var(--surface2)}
.terr-f .p{font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.terr-f .pista{height:14px; background:var(--surface3); border-radius:4px; position:relative}
.terr-f .pista i{display:block; height:100%; background:var(--accent); border-radius:4px}
.terr-f .v{font-family:var(--f-mono); font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums}
.terr-pie{display:flex; gap:18px; padding:12px 12px 4px; margin-top:6px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink3)}
@media (max-width:640px){.terr-f{grid-template-columns:96px 1fr 52px; gap:9px}}

/* ---------- formulario ---------- */
.campo{display:flex; flex-direction:column; gap:5px; margin-bottom:15px}
.campo label{font-size:12px; font-weight:500; color:var(--ink2)}
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:13.5px; padding:9px 11px; border-radius:8px; border:1px solid var(--line2);
  background:var(--surface); color:var(--ink);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.campo .ayuda{font-size:11.5px; color:var(--ink3)}
.fila{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){.fila{grid-template-columns:1fr}}

/* ---------- acceso ---------- */
.acceso{flex:1; display:grid; place-items:center; padding:50px 20px; background:var(--ground)}
.acceso .caja{width:100%; max-width:392px}
.acceso .marca{display:flex; align-items:center; gap:11px; margin-bottom:26px}
.acceso .marca .logo{width:42px; height:42px; border-radius:11px; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:17px}
.acceso .marca b{font-size:19px; letter-spacing:-.025em; display:block}
.acceso .marca span{font-size:11.5px; color:var(--ink3)}
.acceso .card{padding:26px}
.acceso h1{font-size:18px; margin-bottom:5px}
.acceso .lead{font-family:var(--f-read); font-size:14px; color:var(--ink2); margin-bottom:22px; line-height:1.5}
.acceso .btn-p{width:100%; justify-content:center; margin-top:4px}
.acceso .pie{text-align:center; font-size:12px; color:var(--ink3); margin-top:18px; line-height:1.6}

/* ---------- certificado ---------- */
.cert{
  border:1px solid var(--gold); background:var(--gold-soft); border-radius:var(--r);
  padding:18px 20px; display:flex; gap:16px; align-items:center;
}
.cert .sello{
  width:52px; height:52px; border-radius:99px; border:2px solid var(--gold); color:var(--gold);
  display:grid; place-items:center; flex:none;
}
.cert .sello svg{width:24px; height:24px}
.cert h3{font-size:14px}
.cert p{font-size:12.5px; color:var(--ink2); margin-top:2px}
.cert .cod{font-family:var(--f-mono); font-size:11px; color:var(--gold); margin-top:5px}

/* ---------- ROBOT ---------- */
.robot-lanza{
  position:fixed; right:22px; bottom:22px; z-index:70; width:66px; height:66px;
  display:grid; place-items:center; border-radius:99px; border:0; padding:0;
  background:linear-gradient(150deg, var(--accent) 0%, var(--accent-ink) 100%);
  box-shadow:0 6px 22px -6px rgba(0,135,63,.6), 0 2px 6px rgba(0,0,0,.18);
  animation:flotar 3.4s ease-in-out infinite;
}
.robot-lanza:hover{transform:translateY(-3px)}
body[data-vista="aula"] .robot-lanza{bottom:5px; left:18px; right:auto; width:62px; height:62px}
body[data-vista="aula"] .robot-panel{bottom:84px; left:18px; right:auto}
body[data-vista="aula"] .robot-lanza .globo{right:auto; left:70px; transform:translateX(-8px)}
body[data-vista="aula"] .robot-lanza:hover .globo{transform:translateX(0)}
body[data-vista="aula"] .robot-lanza .pip{border-color:#141C18}
@keyframes flotar{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.robot-lanza svg{width:38px; height:38px}
.robot-lanza .globo{
  position:absolute; right:74px; top:12px; white-space:nowrap; background:var(--surface);
  border:1px solid var(--line); color:var(--ink); font-size:12.5px; padding:7px 12px; border-radius:99px;
  box-shadow:var(--shadow); opacity:0; transform:translateX(8px); transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.robot-lanza:hover .globo, .robot-lanza:focus-visible .globo{opacity:1; transform:translateX(0)}
.robot-lanza .pip{
  position:absolute; right:2px; top:2px; width:16px; height:16px; border-radius:99px;
  background:var(--live); color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--ground);
}
.ojo{transform-origin:center; animation:parpadeo 4.6s infinite}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.12)}}

.robot-panel{
  position:fixed; right:22px; bottom:100px; z-index:71; width:352px; max-width:calc(100vw - 44px);
  max-height:min(560px, calc(100vh - 150px)); display:none; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px -14px rgba(0,0,0,.35);
  overflow:hidden;
}
.robot-panel[data-abierto]{display:flex}
.robot-cab{display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line); background:var(--surface2)}
.robot-cab .av{width:34px; height:34px; border-radius:10px; background:var(--accent); display:grid; place-items:center; flex:none}
.robot-cab .av svg{width:22px; height:22px}
.robot-cab b{font-size:13.5px; display:block}
.robot-cab span{font-size:11px; color:var(--ink3); display:flex; align-items:center; gap:5px}
.robot-cab span i{width:6px; height:6px; border-radius:99px; background:var(--accent); display:block}
.robot-cab .x{margin-left:auto; color:var(--ink3); padding:4px}
.robot-cab .x:hover{color:var(--ink)}
.robot-hilo{flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:12px}
.burb{max-width:86%; padding:10px 13px; border-radius:13px; font-size:13px; line-height:1.5}
.burb.bot{background:var(--surface2); border:1px solid var(--line); border-bottom-left-radius:4px; align-self:flex-start}
.burb.yo{background:var(--accent); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
.burb ul{margin:7px 0 0; padding-left:17px}
.burb li{margin-bottom:4px}
.robot-sug{display:flex; flex-wrap:wrap; gap:6px; padding:0 15px 12px}
.robot-sug button{
  font-size:11.5px; padding:6px 11px; border-radius:99px; border:1px solid var(--line2);
  color:var(--ink2); background:var(--surface);
}
.robot-sug button:hover{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.robot-ent{display:flex; gap:8px; padding:12px 13px; border-top:1px solid var(--line); background:var(--surface2)}
.robot-ent input{flex:1; font:inherit; font-size:13px; padding:9px 12px; border-radius:9px; border:1px solid var(--line2); background:var(--surface); color:var(--ink)}
.robot-ent button{width:36px; height:36px; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none}
.robot-ent button svg{width:16px; height:16px}
.escribiendo{display:flex; gap:4px; padding:12px 14px}
.escribiendo i{width:6px; height:6px; border-radius:99px; background:var(--ink3); animation:reb 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}
.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes reb{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}

.nota-proto{
  margin-top:28px; padding:14px 16px; border-radius:var(--r); border:1px dashed var(--line2);
  background:var(--surface2); font-size:12.5px; color:var(--ink2); line-height:1.6;
}
.nota-proto b{color:var(--ink)}


.dos-col{grid-template-columns:1fr 380px}
@media (max-width:1080px){
  .pantalla[data-pantalla="curso"] .ancho{grid-template-columns:1fr!important}
  .dos-col{grid-template-columns:1fr!important}
}

/* ---------- estados de carga y avisos ---------- */
.cargando{position:fixed; inset:0; display:grid; place-items:center; background:var(--ground); z-index:90}
.giro{width:30px; height:30px; border-radius:99px; border:2.5px solid var(--line2); border-top-color:var(--accent); animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.aviso{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:95;
  background:var(--ink); color:var(--ground); padding:11px 18px; border-radius:99px;
  font-size:13px; box-shadow:var(--shadow); max-width:calc(100vw - 40px);
}
.aviso.malo{background:var(--live); color:#fff}
.vacio{padding:40px 20px; text-align:center; color:var(--ink3); font-size:13.5px}
button.rail-avatar{cursor:pointer}
button.rail-avatar:hover{border-color:var(--accent); color:var(--ink)}
.robot-cab em{font-style:normal}
.marco{min-height:100vh}
.aula{height:100vh}
.lecc-i.bloq{opacity:.55; cursor:not-allowed}
.curso[disabled]{opacity:.6; cursor:not-allowed}
.cab .volver{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink3);
  margin-bottom:6px;
}
.cab .volver:hover{color:var(--accent-ink)}
.orador.sin-video{display:grid; place-items:center}
.orador video, .mosaico video, .pip-prof video{width:100%; height:100%; object-fit:cover; display:block}
.orador video{border-radius:10px}
.mosaico video{position:absolute; inset:0}
.tira .mosaico .ini2{z-index:1}
.mosaico.con-video .ini2, .mosaico.con-video .nom{z-index:2}
.mosaico.con-video .ini2{display:none}
.conectando{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,12,10,.8);
  color:#DCE6E0; font-size:13px; z-index:5; gap:10px; grid-auto-flow:row;
}
.entrada input:disabled{opacity:.5}
.env.programada{background:var(--gold-soft); color:var(--gold)}
.env.programada .punto{background:var(--gold); animation:none}
.env.terminada{background:var(--surface3); color:var(--ink3)}
.env.terminada .punto{background:var(--ink3); animation:none}
.fuentes{margin-top:9px; padding-top:8px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:5px}
.fuente{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink3)}
.fuente b{color:var(--accent-ink); font-family:var(--f-mono); font-weight:500}
.burb.yo .fuentes{border-top-color:rgba(255,255,255,.3)}

/* ---------- el destacado ocupa todo el escenario ---------- */
.orador .mosaico{
  position:absolute; inset:0; width:auto; border:0; border-radius:0; background:transparent;
}
.orador .mosaico .ini2{width:96px; height:96px; font-size:31px; background:linear-gradient(140deg,#17795A,#0C4F3A)}
.orador .mosaico .nom{
  left:14px; bottom:14px; font-size:12.5px; color:var(--a-ink); padding:6px 12px;
  border-radius:99px; background:rgba(8,12,10,.72); backdrop-filter:blur(8px);
}
.orador .mosaico .nom svg{width:13px; height:13px; color:#79D9AC}
.orador .mosaico .mano{right:14px; top:14px; width:30px; height:30px}
.orador.sin-nadie{border-color:var(--a-linea)}
.mosaico .micro.mudo{color:#FF7B81}
.pregunta .v{background:none; border:0; padding:0; cursor:pointer}
.pregunta .v:hover{text-decoration:underline}

.tira:empty{display:none}
.orador .mosaico .nom svg.mudo{color:#FF7B81}

/* ================= PORTADA PÚBLICA ================= */
.portada{background:var(--surface); min-height:100vh}
.p-top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px;
  padding:0 clamp(18px,4vw,44px); height:68px; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.p-marca{display:flex; align-items:center; gap:11px; flex:none}
.p-marca .logo{
  width:38px; height:38px; border-radius:10px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; letter-spacing:-.02em; flex:none;
}
.p-marca b{font-size:14.5px; letter-spacing:-.02em; display:block; line-height:1.25}
.p-marca span{font-size:11px; color:var(--ink3)}
.p-nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.p-nav a{
  padding:7px 13px; border-radius:8px; font-size:13px; color:var(--ink2); text-decoration:none;
}
.p-nav a:hover{background:var(--surface2); color:var(--ink)}
.p-nav .btn-p{margin-left:8px; text-decoration:none}
@media (max-width:800px){.p-nav a:not(.btn-p){display:none} .p-marca b{font-size:13px}}

.p-hero{
  background:var(--accent); color:#fff; position:relative; overflow:hidden;
  padding:clamp(48px,7vw,88px) clamp(18px,4vw,44px) clamp(52px,7vw,84px);
}
.p-hero::after{
  content:''; position:absolute; right:-14%; top:-34%; width:62%; aspect-ratio:1;
  border-radius:50%; background:rgba(255,255,255,.055); pointer-events:none;
}
.p-hero::before{
  content:''; position:absolute; right:6%; bottom:-46%; width:46%; aspect-ratio:1;
  border-radius:50%; background:rgba(0,0,0,.09); pointer-events:none;
}
.p-hero-int{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.35fr .85fr; gap:clamp(28px,5vw,58px); align-items:center; position:relative; z-index:1}
@media (max-width:900px){.p-hero-int{grid-template-columns:1fr}}
.p-hero .eyebrow{color:rgba(255,255,255,.62); margin-bottom:16px}
.p-hero h1{
  font-family:var(--f-read); font-weight:600; font-size:clamp(31px,5vw,50px); line-height:1.08;
  letter-spacing:-.02em; margin-bottom:18px;
}
.p-hero .lead{
  font-size:clamp(15px,1.5vw,17.5px); line-height:1.62; color:rgba(255,255,255,.86); max-width:56ch;
}
.p-hero .acciones{display:flex; flex-wrap:wrap; gap:11px; margin-top:28px}
.p-hero .btn-claro{
  background:#fff; color:var(--accent-ink); border:0; padding:12px 22px; border-radius:9px;
  font-size:14px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.p-hero .btn-claro:hover{background:#EEF4F0}
.p-hero .btn-linea{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); padding:12px 20px;
  border-radius:9px; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.p-hero .btn-linea:hover{background:rgba(255,255,255,.1)}

.p-clase{
  background:rgba(255,255,255,.095); border:1px solid rgba(255,255,255,.2); border-radius:13px;
  padding:20px; backdrop-filter:blur(6px);
}
.p-clase .eyebrow{color:rgba(255,255,255,.6); margin-bottom:12px}
.p-clase-i{padding:11px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.p-clase-i:last-child{border-bottom:0; padding-bottom:0}
.p-clase-i b{font-size:13.5px; display:block; line-height:1.35}
.p-clase-i span{font-size:11.5px; color:rgba(255,255,255,.62); display:block; margin-top:3px}
.p-clase .env{background:rgba(255,255,255,.22); color:#fff; margin-bottom:6px}
.p-clase .env .punto{background:#FF9AA0}

.p-secretarias{
  background:var(--surface2); border-bottom:1px solid var(--line);
  padding:20px clamp(18px,4vw,44px);
}
.p-secretarias .int{
  max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px 30px; align-items:center;
  font-size:12.5px; color:var(--ink2);
}
.p-secretarias .et{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}
.p-secretarias .s{display:flex; align-items:center; gap:8px}
.p-secretarias .s i{width:5px; height:5px; border-radius:99px; background:var(--accent); display:block}

.p-seccion{padding:clamp(44px,6vw,74px) clamp(18px,4vw,44px)}
.p-seccion.gris{background:var(--surface2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.p-int{max-width:1120px; margin:0 auto}
.p-cab{max-width:60ch; margin-bottom:34px}
.p-cab h2{font-family:var(--f-read); font-size:clamp(23px,3vw,31px); font-weight:600; letter-spacing:-.02em; line-height:1.18}
.p-cab p{margin-top:11px; font-size:15px; color:var(--ink2); line-height:1.6}

.p-modulos{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:920px){.p-modulos{grid-template-columns:1fr}}
.p-mod{
  background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:24px;
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
}
.p-mod::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.p-mod .n{
  font-family:var(--f-mono); font-size:11.5px; color:var(--accent-ink); letter-spacing:.1em;
}
.p-mod h3{font-size:18px; line-height:1.24; letter-spacing:-.015em}
.p-mod .res{font-family:var(--f-read); font-size:14.5px; color:var(--ink2); line-height:1.55}
.p-mod .dir{
  font-size:12.5px; color:var(--ink3); padding-top:12px; margin-top:auto;
  border-top:1px solid var(--line); line-height:1.5;
}
.p-mod .dir b{color:var(--ink2); font-weight:600}
.p-mod .datos{display:flex; gap:16px; font-size:11.5px; color:var(--ink3); font-family:var(--f-mono)}

.p-como{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:760px){.p-como{grid-template-columns:1fr}}
.p-paso{display:flex; gap:15px; align-items:flex-start}
.p-paso .ic{
  flex:none; width:40px; height:40px; border-radius:10px; background:var(--accent-soft);
  color:var(--accent-ink); display:grid; place-items:center;
}
.p-paso .ic svg{width:19px; height:19px}
.p-paso h3{font-size:15px; margin-bottom:5px}
.p-paso p{font-size:13.5px; color:var(--ink2); line-height:1.58; max-width:46ch}

.p-cifras{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
@media (max-width:700px){.p-cifras{grid-template-columns:repeat(2,1fr)}}
.p-cifra{background:var(--surface); padding:22px 20px}
.p-cifra .v{font-family:var(--f-mono); font-size:28px; letter-spacing:-.03em; line-height:1}
.p-cifra .d{font-size:12px; color:var(--ink3); margin-top:6px}

.p-faq{border-top:1px solid var(--line)}
.p-faq details{border-bottom:1px solid var(--line)}
.p-faq summary{
  padding:17px 0; cursor:pointer; font-size:15px; font-weight:500; list-style:none;
  display:flex; align-items:center; gap:12px;
}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary::after{
  content:'+'; margin-left:auto; color:var(--ink3); font-size:19px; font-weight:400; line-height:1;
}
.p-faq details[open] summary::after{content:'−'}
.p-faq summary:hover{color:var(--accent-ink)}
.p-faq p{
  padding:0 0 18px 0; font-family:var(--f-read); font-size:14.5px; color:var(--ink2);
  line-height:1.62; max-width:64ch;
}

.p-cierre{
  background:var(--ink); color:var(--ground); padding:clamp(40px,6vw,64px) clamp(18px,4vw,44px);
  text-align:center;
}
.p-cierre h2{font-family:var(--f-read); font-size:clamp(22px,3vw,30px); font-weight:600; margin-bottom:12px}
.p-cierre p{font-size:14.5px; color:rgba(255,255,255,.62); max-width:52ch; margin:0 auto 24px}
:root[data-theme="dark"] .p-cierre p, :root:not([data-theme="light"]) .p-cierre p{color:var(--ink2)}
.p-pie{
  padding:26px clamp(18px,4vw,44px); border-top:1px solid var(--line); background:var(--surface);
  font-size:12px; color:var(--ink3);
}
.p-pie .int{max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center}
.p-pie a{color:var(--accent-ink); text-decoration:none}

/* ================= PANEL DE LA INSTITUCIÓN ================= */
.adm-tabs{display:flex; gap:2px; padding:0 30px; background:var(--surface); border-bottom:1px solid var(--line)}
.adm-tabs button{
  padding:12px 15px; font-size:13px; color:var(--ink3); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.adm-tabs button:hover{color:var(--ink)}
.adm-tabs button[aria-current="true"]{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:500}

.arbol{display:flex; flex-direction:column; gap:12px}
.arb-ruta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.arb-cab{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface2); border-bottom:1px solid var(--line)}
.arb-cab .cod{font-family:var(--f-mono); font-size:11px; padding:3px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent-ink); flex:none}
.arb-cab h3{font-size:15px; flex:1; min-width:0}
.arb-cab h3 small{display:block; font-size:12px; color:var(--ink3); font-weight:400; margin-top:2px}
.arb-acc{display:flex; gap:6px; flex:none}
.mini{
  padding:5px 10px; border-radius:7px; font-size:12px; border:1px solid var(--line2);
  background:var(--surface); color:var(--ink2);
}
.mini:hover{background:var(--surface3); color:var(--ink)}
.mini.peligro:hover{background:var(--live-soft); color:var(--live); border-color:var(--live)}
.arb-curso{border-bottom:1px solid var(--line)}
.arb-curso:last-child{border-bottom:0}
.arb-curso-cab{display:flex; align-items:center; gap:11px; padding:11px 16px; cursor:pointer}
.arb-curso-cab:hover{background:var(--surface2)}
.arb-curso-cab .cod{font-family:var(--f-mono); font-size:10.5px; color:var(--ink3); flex:none; width:34px}
.arb-curso-cab .t{font-size:13.5px; flex:1; min-width:0}
.arb-curso-cab .t small{display:block; color:var(--ink3); font-size:11.5px}
.arb-curso-cab .fl{color:var(--ink3); font-size:11px; transition:transform .15s}
.arb-curso[data-abierto] .arb-curso-cab .fl{transform:rotate(90deg)}
.arb-lecciones{display:none; padding:4px 16px 14px 60px; background:var(--surface2)}
.arb-curso[data-abierto] .arb-lecciones{display:block}
.arb-lec{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line)}
.arb-lec:last-of-type{border-bottom:0}
.arb-lec .tipo{font-family:var(--f-mono); font-size:9.5px; padding:2px 6px; border-radius:4px; background:var(--surface3); color:var(--ink3); flex:none; width:74px; text-align:center}
.arb-lec .t{font-size:12.5px; flex:1; min-width:0}
.arb-lec .dur{font-family:var(--f-mono); font-size:11px; color:var(--ink3)}
.arb-lec .tr{font-size:10px; color:var(--accent-ink); font-family:var(--f-mono)}

.hoja{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(19,26,23,.45); backdrop-filter:blur(2px);
}
.hoja-caja{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; width:100%;
  max-width:560px; max-height:min(88vh,760px); display:flex; flex-direction:column; box-shadow:0 24px 60px -18px rgba(0,0,0,.4);
}
.hoja-cab{display:flex; align-items:center; gap:12px; padding:17px 20px; border-bottom:1px solid var(--line)}
.hoja-cab h3{font-size:15.5px; flex:1}
.hoja-cab .x{color:var(--ink3); font-size:17px; padding:2px 6px}
.hoja-cab .x:hover{color:var(--ink)}
.hoja-cuerpo{padding:20px; overflow-y:auto; flex:1}
.hoja-pie{display:flex; gap:9px; padding:15px 20px; border-top:1px solid var(--line); background:var(--surface2)}
.hoja-pie .btn-p{margin-left:auto}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip-b{
  padding:6px 12px; border-radius:99px; border:1px solid var(--line2); font-size:12.5px;
  background:var(--surface); color:var(--ink2);
}
.chip-b[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500}
.pastilla-rol{font-family:var(--f-mono); font-size:10.5px; padding:2px 7px; border-radius:5px; background:var(--surface3); color:var(--ink2)}
.pastilla-rol.instructor{background:var(--accent-soft); color:var(--accent-ink)}
.pastilla-rol.admin{background:var(--gold-soft); color:var(--gold)}
.buscador{
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:9px;
  border:1px solid var(--line2); background:var(--surface); max-width:340px;
}
.buscador input{flex:1; border:0; background:none; font:inherit; font-size:13px; color:var(--ink); outline:none}
.muestra-color{width:34px; height:34px; border-radius:8px; border:1px solid var(--line2); padding:0; cursor:pointer}
.previa-marca{display:flex; align-items:center; gap:12px; padding:16px; border-radius:var(--r); background:var(--surface2); border:1px solid var(--line)}
.previa-marca .logo{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:16px}
.aviso-pin{
  padding:14px 16px; border-radius:var(--r); background:var(--gold-soft); border:1px solid var(--gold);
  color:var(--gold); font-size:13px; margin-bottom:16px;
}
.aviso-pin b{font-family:var(--f-mono); font-size:16px; letter-spacing:.08em}

.p-nav a.btn-p{color:#fff; background:var(--accent); border-color:var(--accent); font-weight:500}
.p-nav a.btn-p:hover{background:var(--accent-ink); color:#fff}

/* ================= BANNER ================= */
.banner{
  --do-azul:#0C3462; --do-rojo:#CE1126;
  position:relative; overflow:hidden; color:#fff; background:#0B4D22;
  background-image:url('/img/fp-fondo.jpg');
  background-size:cover; background-position:center;
  min-height:clamp(330px,34vw,430px); display:flex; align-items:center;
  padding:clamp(30px,4vw,46px) clamp(18px,4vw,44px);
}
/* franja tricolor arriba, para rematar */
.banner .filo{position:absolute; top:0; left:0; right:0; height:5px; display:flex; z-index:4}
.banner .filo i{flex:1}
.banner .filo i:nth-child(1){background:#002D62}
.banner .filo i:nth-child(2){background:#fff}
.banner .filo i:nth-child(3){background:var(--do-rojo)}

.banner-int{
  position:relative; z-index:2; max-width:1120px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:clamp(200px,25%,290px) minmax(0,1fr); gap:clamp(20px,4vw,48px);
  align-items:center;
}
.banner-texto{max-width:37rem; margin-inline:auto}
@media (max-width:900px){
  .banner-int{grid-template-columns:clamp(140px,23%,200px) minmax(0,1fr); gap:22px}
  .banner-texto{margin-inline:0}
  .banner h1{font-size:clamp(26px,4.2vw,38px)}
  .banner{padding-bottom:46px}   /* que el pie no toque los botones */
}

.banner .cinta{
  display:inline-block; margin-bottom:15px; padding:5px 13px; border-radius:99px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.94);
}
.banner h1{
  font-family:var(--f-read); font-weight:600; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(28px,4.4vw,50px); margin-bottom:12px; text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,30,12,.45);
}
.banner .anos{
  display:flex; align-items:center; gap:13px; margin-bottom:16px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.18em; color:rgba(255,255,255,.68);
}
.banner .anos::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.3); max-width:120px}
.banner .frase{
  font-family:var(--f-read); font-size:clamp(14.5px,1.5vw,17px); line-height:1.58;
  color:rgba(255,255,255,.9); max-width:46ch; text-shadow:0 1px 10px rgba(0,30,12,.4);
}
.banner .acciones{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.banner .b-blanco{
  background:#fff; color:#06361A; border:0; padding:12px 22px; border-radius:9px;
  font-size:14.5px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5);
}
.banner .b-blanco:hover{background:#E4F4EA}
.banner .b-linea{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.5);
  padding:12px 20px; border-radius:9px; font-size:14.5px; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px;
}
.banner .b-linea:hover{background:rgba(255,255,255,.2)}

/* el retrato, recortado y a sangre por abajo */
.banner-retrato{position:relative; order:1; align-self:end; margin-bottom:calc(-1 * clamp(30px,4vw,46px))}
.banner-texto{order:2}
.banner-retrato img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 18px 34px rgba(0,28,10,.55));
}
.banner-retrato .marco-vacio{
  aspect-ratio:4/5; border-radius:8px 8px 0 0; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35);
  color:rgba(255,255,255,.7); font-size:11.5px; text-align:center; padding:16px;
}
.banner-pie{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  font-size:11px; color:rgba(255,255,255,.6); line-height:1.5;
  pointer-events:none;
}
.banner-pie span.dentro{
  display:block; max-width:1120px; margin:0 auto; padding:0 clamp(18px,4vw,44px);
  text-shadow:0 1px 8px rgba(0,30,12,.6); text-align:right;
}
.banner-pie b{color:rgba(255,255,255,.92); font-weight:600}
.banner-pie .credito{color:rgba(255,255,255,.42)}

@media (max-width:680px){
  /* En el teléfono el banner se apila. Importante: .banner es flex, y .banner-pie
     es hermano de .banner-int — si se deja estático en fila, se coloca AL LADO
     del texto en vez de debajo. De ahí la columna. */
  .banner{
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    min-height:0; background-position:68% center;
    padding:26px clamp(18px,5vw,26px) 24px;
  }
  .banner::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,110,52,.55) 0%, rgba(6,54,26,.8) 100%);
  }
  /* display:contents disuelve la rejilla y deja que el orden mande:
     texto → pie → retrato, así el retrato sale a sangre por abajo. */
  .banner-int{display:contents}
  /* al disolver la rejilla, los hijos pierden el z-index del contenedor
     y la capa oscura les pasaba por encima */
  .banner-texto, .banner-retrato, .banner-pie{position:relative; z-index:2}
  .banner-texto{order:2; max-width:none; margin-inline:0}
  .banner h1{font-size:clamp(25px,7.2vw,34px); margin-bottom:10px}
  .banner .anos{margin-bottom:14px}
  .banner .frase{max-width:none; font-size:14.5px}
  .banner .acciones{margin-top:20px; gap:9px}
  .banner .acciones a{flex:1 1 100%; justify-content:center; padding:13px 16px}
  .banner-retrato{
    order:1; display:block; width:min(52%,196px); margin:0 auto 4px 0; align-self:flex-start;
  }
  /* el recorte termina en el pecho: se desvanece para que no se vea el corte */
  .banner-retrato img{
    filter:drop-shadow(0 12px 24px rgba(0,28,10,.5));
    -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  }
  .banner-pie{order:3; position:static; margin-top:18px}
  .banner-pie span.dentro{text-align:left}
  .banner-pie span.dentro{padding:0; max-width:none}
}

/* tira de próximas clases, bajo el banner */
.p-tira-clases{
  background:var(--surface2); border-bottom:1px solid var(--line);
  padding:16px clamp(18px,4vw,44px);
}
.p-tira-clases .int{max-width:1120px; margin:0 auto; display:flex; gap:20px; align-items:center}
.p-tira-clases .et{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); flex:none;
}
.p-tira-clases .lista{display:flex; gap:10px; overflow-x:auto; flex:1; padding-bottom:2px}
.tira-clase{
  flex:none; min-width:262px; max-width:330px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 13px;
  display:flex; flex-direction:column; gap:3px;
}
.tira-clase:hover{border-color:var(--accent)}
.tira-clase b{font-size:13px; line-height:1.32}
.tira-clase .de{font-size:11.5px; color:var(--ink3)}
.tira-clase .cu{font-size:10.5px; color:var(--ink3); font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.06em}
.tira-clase .env{align-self:flex-start; font-size:9.5px}
.vacio-tira{font-size:12.5px; color:var(--ink3)}
@media (max-width:760px){.p-tira-clases .int{flex-direction:column; align-items:stretch; gap:10px}}

.retrato-admin{display:flex; gap:14px; align-items:flex-start}
.retrato-mini{
  flex:none; width:78px; aspect-ratio:4/5; border-radius:6px 6px 40px 40px; overflow:hidden;
  border:2px solid var(--line2); background:var(--surface2); display:grid; place-items:center;
}
.retrato-mini img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.retrato-mini .sin-foto{font-size:10px; color:var(--ink3); text-align:center; padding:0 6px; line-height:1.3}

/* ================= REPRODUCTOR DE VIDEO ================= */
.repro-real{
  background:#0B100E; border-radius:var(--r); overflow:hidden; position:relative;
  box-shadow:var(--shadow);
}
.repro-real video{width:100%; display:block; aspect-ratio:16/9; background:#0B100E}
.repro-barra{
  display:flex; align-items:center; gap:14px; padding:11px 15px;
  background:#0F1613; color:#DCE6E0; font-size:12.5px; flex-wrap:wrap;
}
.repro-barra .t{font-family:var(--f-mono); font-size:11.5px; color:#9FB0A8; font-variant-numeric:tabular-nums}
.repro-barra .sep{flex:1}
.repro-barra button{
  border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:4px 10px;
  font-size:11.5px; color:#DCE6E0; font-family:var(--f-mono);
}
.repro-barra button:hover{background:rgba(255,255,255,.12)}
.repro-barra button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.repro-vistos{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:#9FB0A8;
}
.repro-vistos .pista{width:96px; height:5px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden}
.repro-vistos .pista i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s}
.repro-hecha{color:#79D9AC; display:flex; align-items:center; gap:5px}
.repro-hecha svg{width:13px; height:13px}

.sin-video{
  aspect-ratio:16/9; display:grid; place-items:center; gap:12px; text-align:center;
  background:radial-gradient(120% 90% at 50% 30%, #1D2B25 0%, #0B100E 70%);
  color:#9FB0A8; font-size:13.5px; padding:24px;
}
.sin-video .ic{width:46px; height:46px; opacity:.5}
.sin-video a{color:#79D9AC}

/* ---- subida en el panel ---- */
.subidor{
  border:1px dashed var(--line2); border-radius:var(--r); padding:16px; background:var(--surface2);
  display:flex; gap:14px; align-items:center;
}
.subidor .previa{
  flex:none; width:118px; aspect-ratio:16/9; border-radius:7px; overflow:hidden;
  background:var(--surface3); display:grid; place-items:center; border:1px solid var(--line);
}
.subidor .previa img{width:100%; height:100%; object-fit:cover}
.subidor .previa span{font-size:10.5px; color:var(--ink3); text-align:center; padding:0 6px; line-height:1.3}
.subidor .datos{flex:1; min-width:0}
.subidor .datos b{font-size:13px; display:block; word-break:break-all}
.subidor .datos small{color:var(--ink3); font-size:11.5px}
.barra-subida{height:6px; border-radius:99px; background:var(--surface3); overflow:hidden; margin-top:9px}
.barra-subida i{display:block; height:100%; background:var(--accent); width:0; transition:width .25s}
.subidor .acc{display:flex; gap:7px; margin-top:10px}

/* ================= EVALUACIONES ================= */
.examen{max-width:760px}
.ex-cab{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; margin-bottom:20px; box-shadow:var(--shadow);
}
.ex-cab h2{font-size:19px; margin-bottom:6px}
.ex-cab p{font-size:14px; color:var(--ink2); line-height:1.55; max-width:60ch}
.ex-datos{display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; padding-top:15px; border-top:1px solid var(--line)}
.ex-datos div{font-size:12.5px; color:var(--ink3)}
.ex-datos b{display:block; font-family:var(--f-mono); font-size:17px; color:var(--ink); margin-top:2px}

.pregunta-caja{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; margin-bottom:14px;
}
.pregunta-caja .num{
  font-family:var(--f-mono); font-size:11px; color:var(--ink3); letter-spacing:.08em;
}
.pregunta-caja h3{font-size:15.5px; line-height:1.45; margin:7px 0 4px; font-weight:600}
.pregunta-caja .ayuda-p{font-size:12.5px; color:var(--ink3); margin-bottom:12px}
.opciones-lista{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.opcion{
  display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:9px;
  border:1px solid var(--line2); cursor:pointer; background:var(--surface);
  font-size:14px; line-height:1.45; transition:border-color .12s, background .12s;
}
.opcion:hover{border-color:var(--accent); background:var(--surface2)}
.opcion input{margin-top:2px; flex:none; accent-color:var(--accent)}
.opcion.elegida{border-color:var(--accent); background:var(--accent-soft)}
.opcion.buena{border-color:var(--accent); background:var(--accent-soft)}
.opcion.mala{border-color:var(--live); background:var(--live-soft)}
.opcion .marca{margin-left:auto; font-size:11.5px; font-weight:600; flex:none}
.opcion.buena .marca{color:var(--accent-ink)}
.opcion.mala .marca{color:var(--live)}

.ex-pie{
  position:sticky; bottom:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 18px; display:flex; align-items:center; gap:14px;
  box-shadow:0 -4px 20px -8px rgba(0,0,0,.2); margin-top:18px;
}
.ex-pie .cuenta{font-size:13px; color:var(--ink2)}
.ex-pie .btn-p{margin-left:auto}

.ex-resultado{
  border-radius:var(--r); padding:24px; margin-bottom:20px; text-align:center;
  border:1px solid var(--line); background:var(--surface);
}
.ex-resultado.aprobado{border-color:var(--accent); background:var(--accent-soft)}
.ex-resultado.reprobado{border-color:var(--gold); background:var(--gold-soft)}
.ex-resultado .nota{font-family:var(--f-mono); font-size:46px; line-height:1; letter-spacing:-.03em}
.ex-resultado.aprobado .nota{color:var(--accent-ink)}
.ex-resultado.reprobado .nota{color:var(--gold)}
.ex-resultado h2{font-size:17px; margin:10px 0 5px}
.ex-resultado p{font-size:13.5px; color:var(--ink2); max-width:52ch; margin:0 auto}
.ex-resultado .acc{display:flex; gap:10px; justify-content:center; margin-top:18px}

.ex-historial{font-size:12.5px; color:var(--ink3)}
.ex-historial table{width:100%; border-collapse:collapse; margin-top:8px}
.ex-historial td{padding:6px 0; border-bottom:1px solid var(--line)}
.ex-historial .n{font-family:var(--f-mono); text-align:right}

/* editor de preguntas */
.op-editor{display:flex; align-items:center; gap:9px; margin-bottom:8px}
.op-editor input[type=text]{flex:1}
.op-editor .quitar{color:var(--ink3); padding:4px 7px; font-size:15px}
.op-editor .quitar:hover{color:var(--live)}
.op-editor label{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); white-space:nowrap}

/* ================= anfitrión de video ================= */
.anf-capa{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(8,12,10,.62); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:20px;
}
.anf-capa.abierta{display:flex}
.anf-caja{
  position:relative; width:min(940px,100%); max-height:min(620px,92vh);
  display:grid; grid-template-columns:1.15fr .85fr;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
}
.anf-x{
  position:absolute; top:10px; right:12px; z-index:4;
  width:30px; height:30px; border-radius:50%; font-size:14px;
  background:rgba(8,12,10,.5); color:#fff; line-height:1;
}
.anf-video{position:relative; background:#0B100E; min-height:300px}
.anf-video video{width:100%; height:100%; object-fit:cover; display:block}
.anf-espera{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px;
  color:#CFD9D3; text-align:center; padding:24px; font-size:13px;
}
.anf-rueda{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:anf-gira .8s linear infinite;
}
@keyframes anf-gira{to{transform:rotate(360deg)}}
.anf-etiq{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--gold-soft); color:var(--gold);
  font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
}
.anf-tiempo{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.16)}
.anf-tiempo i{display:block; height:100%; width:100%; background:var(--accent); transition:width 1s linear}
.anf-tiempo.poco i{background:var(--live)}

.anf-lado{display:flex; flex-direction:column; min-height:0; background:var(--surface)}
.anf-cab{padding:16px 18px 12px; border-bottom:1px solid var(--line)}
.anf-cab b{display:block; font-size:14.5px}
.anf-cab span{display:block; font-size:11.5px; color:var(--ink3); margin-top:2px}
.anf-hilo{flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:11px}
.anf-b span{display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin-bottom:3px}
.anf-b p{font-size:13.5px; line-height:1.55; color:var(--ink2)}
.anf-b.bot p{font-family:var(--f-read); font-size:14.5px; color:var(--ink)}
.anf-pie{padding:12px 18px 16px; border-top:1px solid var(--line)}
.anf-nota{font-size:11.5px; color:var(--ink3); margin-bottom:9px; line-height:1.45}
.anf-ent{display:flex; gap:7px; align-items:center}
.anf-ent input{
  flex:1; min-width:0; padding:9px 11px; font:inherit; font-size:13px;
  background:var(--surface2); color:var(--ink);
  border:1px solid var(--line); border-radius:9px;
}
.anf-ent input:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.anf-ent button{
  width:36px; height:36px; flex:none; display:grid; place-content:center;
  border:1px solid var(--line); border-radius:9px; background:var(--surface2);
}
.anf-ent button svg{width:16px; height:16px; fill:currentColor}
.anf-mic.on{background:var(--accent); border-color:var(--accent); color:#fff}
.anf-fin{
  width:100%; margin-top:10px; padding:8px; border-radius:9px;
  border:1px solid var(--line); font-size:12.5px; color:var(--live);
}
.anf-fin:hover{border-color:var(--live)}

/* llamada a la bienvenida */
.anf-invita{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:16px;
  background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:var(--r);
}
.anf-invita p{flex:1; min-width:220px; font-size:13px; color:var(--accent-ink); line-height:1.5}
.anf-invita p b{display:block; font-size:14px; color:var(--ink); margin-bottom:2px}
.anf-invita button{
  padding:8px 14px; border-radius:9px; font-size:13px; font-weight:600;
  background:var(--accent); color:#fff; white-space:nowrap;
}
.anf-invita .anf-no{background:none; color:var(--accent-ink); font-weight:400; padding:8px 4px}

@media (max-width:800px){
  .anf-capa{padding:0}
  .anf-caja{grid-template-columns:1fr; grid-template-rows:auto 1fr; max-height:100vh; height:100vh; border-radius:0; border:0}
  .anf-video{min-height:0; height:38vh}
  .anf-hilo{padding:12px 14px}
  .anf-pie{padding:10px 14px 14px}
}
.anf-sonido{
  position:absolute; z-index:4; left:50%; bottom:16px; transform:translateX(-50%);
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--accent); color:#fff; box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
}

/* ================= lecciones de texto y actividades ================= */
.lee{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:26px 28px 24px; box-shadow:var(--shadow);
}
.lee-borrador{
  margin:-6px 0 18px; padding:8px 12px; border-radius:8px;
  background:var(--gold-soft); color:var(--gold);
  font-size:11.5px; font-weight:600; line-height:1.45;
}
.lee-cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--ink3); margin-bottom:10px;
}
.lee > h2{font-size:26px; line-height:1.2; margin-bottom:18px; max-width:26ch}
.lee-cuerpo{max-width:64ch}
.lee-cuerpo p{
  font-family:var(--f-read); font-size:16.5px; line-height:1.72;
  color:var(--ink2); margin-bottom:16px;
}
.lee-cuerpo h3{
  font-size:16px; margin:26px 0 10px; color:var(--ink);
  letter-spacing:.005em;
}
.lee-pausa{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 10px 10px 0; padding:14px 16px; margin:20px 0;
}
.lee-pausa b{display:block; font-size:12px; color:var(--accent-ink); margin-bottom:4px}
.lee-pausa p{font-family:var(--f-read); font-size:15.5px; line-height:1.6; color:var(--ink2); margin:0}
.lee > .btn{margin-top:24px}

.lee-caja{
  width:100%; min-height:190px; margin-top:20px; padding:14px 16px;
  font-family:var(--f-read); font-size:15.5px; line-height:1.7;
  color:var(--ink); background:var(--surface2);
  border:1px solid var(--line); border-radius:11px; resize:vertical;
}
.lee-caja:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.lee-acciones{display:flex; align-items:center; gap:9px; margin-top:12px; flex-wrap:wrap}
.lee-cuenta{font-size:11.5px; color:var(--ink3); margin-left:auto}
.lee-enviada{
  margin-top:20px; padding:16px 18px; border-radius:11px;
  background:var(--surface2); border:1px solid var(--line);
}
.lee-enviada b{font-size:12px; color:var(--ink3); display:block; margin-bottom:7px}
.lee-enviada p{font-family:var(--f-read); font-size:15.5px; line-height:1.7; white-space:pre-wrap; color:var(--ink2)}
.lee-nota{
  display:flex; gap:16px; align-items:flex-start; margin-top:20px;
  padding:16px 18px; border-radius:11px;
  background:var(--accent-soft); border:1px solid var(--accent);
}
.lee-nota .n{font-size:30px; font-weight:600; color:var(--accent-ink); line-height:1; white-space:nowrap}
.lee-nota .n small{font-size:13px; color:var(--ink3); font-weight:400}
.lee-nota b{display:block; font-size:12px; color:var(--accent-ink); margin-bottom:4px}
.lee-nota p{font-family:var(--f-read); font-size:15px; line-height:1.65; color:var(--ink2)}

/* revisión de entregas en el panel del instructor */
.ent-f{border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; background:var(--surface)}
.ent-f .cab{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:9px}
.ent-f .cab b{font-size:14.5px}
.ent-f .cab span{font-size:11.5px; color:var(--ink3)}
.ent-f .txt{
  font-family:var(--f-read); font-size:15px; line-height:1.7; color:var(--ink2);
  white-space:pre-wrap; max-height:230px; overflow-y:auto;
  padding:12px 14px; background:var(--surface2); border-radius:9px; margin-bottom:12px;
}
.ent-f .fila{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.ent-f input[type=number]{width:86px}
.ent-f input, .ent-f textarea{
  padding:8px 11px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--surface2); border:1px solid var(--line); border-radius:9px;
}
.ent-f textarea{flex:1; min-width:220px; min-height:38px; resize:vertical}
@media (max-width:700px){ .lee{padding:20px 18px} .lee > h2{font-size:22px} }

/* Nova se aparta cuando el robot de soporte compartido está en la página */
body.con-nexo .robot-lanza{bottom:104px}
body.con-nexo .robot-panel{bottom:174px}
body.con-nexo[data-vista="aula"] .robot-lanza{bottom:5px}
body.con-nexo[data-vista="aula"] .robot-panel{bottom:84px}

/* ================= quiz de comprobación ================= */
.quiz{
  margin-top:28px; padding:20px 22px;
  background:var(--surface2); border:1px solid var(--line); border-radius:13px;
}
.quiz-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px}
.quiz-cab b{font-size:15px}
.quiz-cab span{font-size:11.5px; color:var(--ink3)}
.quiz-p{
  border:1px solid var(--line); border-radius:11px; padding:14px 16px;
  margin-bottom:11px; background:var(--surface);
}
/* El <legend> nativo deja que el borde del fieldset lo cruce cuando el
   enunciado ocupa dos líneas. Sacándolo del flujo del borde con float se
   comporta como un título normal. */
.quiz-p legend{
  float:left; width:100%; padding:0; margin-bottom:2px;
  font-size:14.5px; font-weight:600; line-height:1.45;
}
.quiz-p::after{content:''; display:block; clear:both}
.quiz-pista{font-size:12px; color:var(--ink3); margin:7px 0 0; line-height:1.5}
.quiz-ops{display:grid; gap:5px; margin-top:11px}
.quiz-ops label{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:9px 11px; border-radius:9px; border:1px solid transparent;
  font-size:14px; line-height:1.5; color:var(--ink2);
}
.quiz-ops label:hover{background:var(--surface2)}
.quiz-ops input{margin-top:3px; accent-color:var(--accent); flex:none}
.quiz-ops label.era-esta{
  border-color:var(--accent); background:var(--accent-soft); color:var(--ink);
}
.quiz-p.bien{border-color:var(--accent)}
.quiz-p.mal{border-color:var(--live)}
.quiz-fb{
  margin-top:11px; padding:9px 12px; border-radius:9px;
  font-family:var(--f-read); font-size:14.5px; line-height:1.6;
}
.quiz-fb.ok{background:var(--accent-soft); color:var(--accent-ink)}
.quiz-fb.no{background:var(--live-soft); color:var(--live)}
.quiz-pie{display:flex; align-items:center; gap:12px; margin-top:14px}
.quiz-pie span{font-size:13px; font-weight:600; color:var(--ink3)}
@media (max-width:700px){ .quiz{padding:16px 14px} }

/* campo de la pausa de reflexión */
.pausa-campo{
  display:block; width:100%; margin-top:11px; padding:11px 13px; min-height:78px;
  font-family:var(--f-read); font-size:15px; line-height:1.65; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:9px; resize:vertical;
}
.pausa-campo:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.pausa-guardado{display:block; margin-top:5px; font-size:11px; color:var(--ink3); min-height:14px}

/* lo que uno anotó, recogido en la actividad final */
.notas{
  margin-top:20px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface2); overflow:hidden;
}
.notas summary{
  cursor:pointer; padding:12px 16px; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:9px;
}
.notas summary span{
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-ink);
}
.notas-i{padding:0 16px 14px}
.notas-i b{display:block; font-size:12px; color:var(--ink3); margin-bottom:4px}
.notas-i p{font-family:var(--f-read); font-size:15px; line-height:1.65; color:var(--ink2); white-space:pre-wrap}

/* micrófono y altavoz de Nova */
#robot-mic.on{background:var(--live); border-color:var(--live); color:#fff}
#robot-voz.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* ================= presentación narrada ================= */
body[data-vista="presentacion"] .lienzo{padding:0}
.pres{
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  background:linear-gradient(160deg, #0E1F19 0%, #08120E 62%, #0B1A22 100%);
  color:#EAF2ED;
}
.pres-cab{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 34px; border-bottom:1px solid rgba(255,255,255,.09);
}
.pres-marca{display:flex; align-items:center; gap:13px}
.pres-logo{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em;
}
.pres-marca b{display:block; font-size:15px; letter-spacing:-.01em}
.pres-marca span{display:block; font-size:11.5px; color:#8FA69B; margin-top:2px}
.pres-estado{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#7FD8A8; border:1px solid rgba(127,216,168,.35); border-radius:999px; padding:5px 13px;
}

.pres-cuerpo{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:36px clamp(34px, 8vw, 130px);
}
.pres-num{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em;
  color:#6E8F80; margin-bottom:18px;
}
.pres-cuerpo h1{
  font-size:clamp(34px, 5.2vw, 62px); line-height:1.05; letter-spacing:-.025em;
  margin-bottom:34px; max-width:20ch; color:#fff;
}
.pres-clave{list-style:none; padding:0; margin:0; max-width:60ch}
.pres-clave li{
  position:relative; padding-left:30px; margin-bottom:17px;
  font-size:clamp(16px, 1.65vw, 21px); line-height:1.5; color:#C7D6CE;
  opacity:0; animation:pres-entra .55s ease forwards;
}
.pres-clave li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:11px; height:2px; background:var(--accent-ink); border-radius:2px;
}
@keyframes pres-entra{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

/* Lámina con captura: el texto se estrecha y la pantalla del proyecto ocupa la
   derecha. Sin captura, el texto se queda con la lámina entera y no cambia nada. */
.pres-doble{display:block}
.pres-cuerpo.con-foto .pres-doble{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,46%);
  gap:clamp(26px, 4vw, 60px); align-items:center;
}
.pres-cuerpo.con-foto h1{font-size:clamp(28px, 3.4vw, 44px); margin-bottom:26px; max-width:16ch}
.pres-cuerpo.con-foto .pres-clave li{font-size:clamp(14.5px, 1.25vw, 18px); margin-bottom:13px}
.pres-cuerpo.con-foto .pres-num{margin-bottom:14px}

.pres-foto{margin:0; display:flex; flex-direction:column; align-items:center; gap:9px}
.pres-foto img{
  display:block; width:100%; height:auto; max-height:62vh; object-fit:contain;
  border-radius:13px; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 64px rgba(0,0,0,.55); cursor:zoom-in; background:#0B1A14;
}
.pres-foto.movil img{max-width:min(300px, 100%); border-radius:26px}
.pres-foto figcaption{
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#6E8F80;
}

.pres-lupa{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:rgba(4,10,8,.93); padding:3vh 3vw; cursor:zoom-out;
}
.pres-lupa img{max-width:100%; max-height:94vh; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.6)}

@media (max-width:900px){
  .pres-cuerpo.con-foto .pres-doble{grid-template-columns:1fr; gap:20px}
  .pres-foto img{max-height:34vh}
}

.pres-pie{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 34px; border-top:1px solid rgba(255,255,255,.09);
}
.pres-pasos{display:flex; gap:6px; flex-wrap:wrap}
.pres-pasos i{width:26px; height:3px; border-radius:2px; background:rgba(255,255,255,.16)}
.pres-pasos i.visto{background:rgba(127,216,168,.5)}
.pres-pasos i.ahora{background:#7FD8A8}
.pres-mandos{display:flex; gap:8px; align-items:center}
.pres-b{
  min-width:44px; height:40px; padding:0 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.05);
  color:#EAF2ED; font-size:16px; line-height:1;
}
.pres-b:hover{background:rgba(255,255,255,.12)}
.pres-b.on{background:var(--accent); border-color:var(--accent); color:#fff}
#pres-mic.on{background:var(--live); border-color:var(--live)}
.pres-preguntar{
  background:var(--accent); border-color:var(--accent); color:#fff;
  font-size:14px; font-weight:600; padding:0 20px;
}
.pres-preguntar:hover{background:var(--accent-ink)}

.pres-pregunta{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:rgba(4,10,8,.72); backdrop-filter:blur(4px); padding:24px;
}
.pres-pregunta-caja{
  width:min(760px,100%); max-height:86vh; overflow-y:auto;
  background:#12211B; border:1px solid rgba(255,255,255,.13);
  border-radius:16px; padding:26px 28px;
}
.pres-pregunta-caja > b{font-size:17px; display:block; margin-bottom:6px}
.pres-pregunta-caja > p{font-size:13px; color:#8FA69B; margin-bottom:14px}
.pres-pregunta-caja textarea{
  width:100%; padding:13px 15px; font:inherit; font-size:16px; line-height:1.5;
  color:#EAF2ED; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.17); border-radius:11px; resize:vertical;
}
.pres-pregunta-caja textarea:focus{outline:2px solid rgba(127,216,168,.35); border-color:#7FD8A8}
.pres-pregunta-mandos{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap}
.pres-respuesta{
  margin-top:18px; padding:17px 19px; border-radius:12px;
  background:rgba(127,216,168,.1); border:1px solid rgba(127,216,168,.28);
}
.pres-respuesta b{display:block; font-size:12.5px; color:#7FD8A8; margin-bottom:8px}
.pres-respuesta p{font-family:var(--f-read); font-size:17px; line-height:1.62; color:#DCE9E2}
.pres-pensando{font-size:15px; color:#8FA69B}

@media (max-width:760px){
  .pres-cab,.pres-pie{padding:13px 18px}
  .pres-cuerpo{padding:24px 20px}
  .pres-estado{display:none}
}

/* Nova dentro del aula en vivo */
.ctrl-nova svg{fill:currentColor}
.ctrl-b.ctrl-nova{color:var(--accent-ink)}
.ctrl-b.ctrl-nova.on{background:var(--live); color:#fff}

/* ---------------- archivador de presentaciones ---------------- */
.arch-grupo{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--a-ink3);
  margin:26px 0 12px; font-weight:700;
}
.arch-rejilla{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px}
.arch-ficha{
  background:var(--a-caja); border:1px solid var(--a-linea); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
.arch-lamina{
  position:relative; aspect-ratio:16/9; background:linear-gradient(150deg,#0E1F19,#0B1A22);
  display:grid; place-items:center; overflow:hidden;
}
.arch-lamina img{width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.92}
.arch-sin{font-size:12px; color:#6E8F80}
.arch-tipo{
  position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:rgba(18,185,129,.92); color:#062016;
}
.arch-tipo.tut{background:rgba(255,255,255,.9); color:#0B1A14}
.arch-cuerpo{padding:14px 15px 15px; display:flex; flex-direction:column; gap:8px; flex:1}
.arch-cuerpo h3{font-size:15.5px; line-height:1.25; letter-spacing:-.01em}
.arch-cuerpo p{font-size:12.5px; color:var(--a-ink2); line-height:1.45}
.arch-datos{display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--a-ink3)}
.arch-datos span{border:1px solid var(--a-linea); border-radius:999px; padding:3px 9px}
.arch-datos span.malo{color:var(--live); border-color:rgba(220,80,80,.4)}
.arch-mandos{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px}
.arch-mandos .btn{font-size:12.5px; padding:7px 13px}
.arch-cod{font-size:11.5px; color:var(--a-ink3)}
.arch-cod b{color:var(--a-ink); font-family:var(--f-mono)}
.arch-nota{margin-top:26px; font-size:12px; color:var(--a-ink3)}
.arch-nota code{font-family:var(--f-mono); font-size:11.5px}
.arch-subir{
  margin:0 15px 15px; padding:11px 13px; border:1px dashed var(--a-linea); border-radius:11px;
  display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--a-ink3);
}
.arch-subir.encima{border-color:var(--accent); background:rgba(18,185,129,.07)}
.arch-subir b{font-size:12px; color:var(--live)}
.arch-subir code{font-family:var(--f-mono); font-size:11px}
.arch-subir i{font-style:normal; color:var(--accent-ink)}
.arch-subir i.malo{color:var(--live)}
.arch-lupa{
  position:fixed; inset:0; z-index:80; background:rgba(6,14,11,.9);
  display:grid; place-items:center; padding:4vh 4vw;
}
.arch-guiones-caja{
  background:var(--a-caja); border:1px solid var(--a-linea); border-radius:16px;
  max-width:820px; width:100%; max-height:88vh; overflow-y:auto; padding:20px 22px;
}
.arch-guiones-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.arch-guiones-cab b{font-size:16px}
.arch-guion{border-top:1px solid var(--a-linea); padding:12px 0}
.arch-guion-cab{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px}
.arch-guion-cab span{font-size:12px; color:var(--a-ink3); font-weight:600}
.arch-guion p{font-family:var(--f-read); font-size:14.5px; line-height:1.6; color:var(--a-ink2)}

/* La presentación metida dentro de una lección: mismo componente, pero deja de
   ser una capa a pantalla completa y se comporta como el reproductor de video. */
.pres.dentro{
  position:relative; inset:auto; z-index:auto;
  height:min(78vh, 860px); min-height:520px; border-radius:14px; overflow:hidden;
  border:1px solid var(--a-linea);
}
.pres.dentro .pres-cab{padding:13px 20px}
.pres.dentro .pres-cuerpo{padding:22px clamp(20px, 3vw, 40px)}
.pres.dentro .pres-cuerpo h1{font-size:clamp(24px, 2.4vw, 34px); margin-bottom:18px}
.pres.dentro .pres-cuerpo.con-foto h1{font-size:clamp(20px, 1.9vw, 27px); margin-bottom:14px}
.pres.dentro .pres-clave li{font-size:clamp(13px, 1.1vw, 16px); margin-bottom:11px}
.pres.dentro .pres-foto img{max-height:40vh}
.pres.dentro .pres-pie{padding:11px 18px}
.pres.dentro .pres-lupa{position:fixed}

@media (max-width: 760px){
  .pres.dentro{height:auto; min-height:420px; max-width:100%}
  .pres.dentro .pres-cuerpo{padding:16px 16px 10px}
  .pres.dentro .pres-cuerpo h1{font-size:22px; margin-bottom:12px}
  .pres.dentro .pres-cuerpo.con-foto h1{font-size:19px}
  .pres.dentro .pres-clave li{font-size:13.5px; margin-bottom:9px}
  .pres.dentro .pres-foto img{max-height:24vh}
  .pres.dentro .pres-cab{padding:10px 14px}
  .pres.dentro .pres-pie{padding:9px 12px; flex-wrap:wrap; gap:8px}
  .pres.dentro .pres-estado{display:none}
}

/* ===== presentación: pantalla completa, chat y cierre ===== */

.pres-b svg{width:17px; height:17px; display:block}
.pres-preguntar{display:inline-flex; align-items:center; gap:8px; position:relative}
.pres-preguntar svg{width:16px; height:16px}
.pres-globo{
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#fff; color:var(--accent-ink); font-size:10.5px; font-weight:700;
  display:inline-grid; place-items:center; font-family:var(--f-mono);
}

/* La franja de en medio: la lámina y, si se abre, el chat a su lado. */
.pres-medio{flex:1; min-height:0; display:flex; align-items:stretch}
.pres-medio > .pres-cuerpo{flex:1; min-width:0}

/* ---- pantalla completa ----
   Se aplica tanto si el navegador concede la pantalla completa de verdad como
   si no: en los dos casos la presentación se come la ventana entera. Los
   tamaños van en vmin para que en un monitor ancho la letra no se dispare. */
.pres.completa, .pres.dentro.completa,
.pres:fullscreen, .pres:-webkit-full-screen{
  position:fixed; inset:0; width:100vw; height:100vh; height:100dvh;
  max-width:none; max-height:none; min-height:0;
  z-index:200; border:0; border-radius:0; overflow:hidden;
  background:linear-gradient(160deg, #0E1F19 0%, #08120E 62%, #0B1A22 100%);
}
.pres.completa .pres-cab{padding:clamp(14px, 1.8vmin, 22px) clamp(20px, 3vw, 40px)}
.pres.completa .pres-cuerpo{
  padding:clamp(20px, 3.4vmin, 44px) clamp(26px, 5vw, 96px);
}
.pres.completa .pres-num{font-size:clamp(11px, 1.4vmin, 14px); margin-bottom:clamp(10px, 1.6vmin, 20px)}
.pres.completa .pres-cuerpo h1{
  font-size:clamp(26px, 5.4vmin, 54px); line-height:1.06;
  margin-bottom:clamp(16px, 2.8vmin, 32px); max-width:20ch;
}
.pres.completa .pres-cuerpo.con-foto h1{font-size:clamp(22px, 4.2vmin, 40px); max-width:15ch}
.pres.completa .pres-clave li{
  font-size:clamp(14px, 2.1vmin, 22px); line-height:1.45;
  margin-bottom:clamp(9px, 1.5vmin, 17px);
}
.pres.completa .pres-cuerpo.con-foto .pres-clave li{font-size:clamp(13px, 1.8vmin, 18px)}
.pres.completa .pres-foto img{max-height:min(58vh, 640px); max-width:100%}
.pres.completa .pres-foto.movil img{max-width:min(300px, 100%)}
.pres.completa .pres-pie{padding:clamp(10px, 1.6vmin, 18px) clamp(20px, 3vw, 40px)}
.pres.completa .pres-lupa{position:absolute}
body.pres-completa{overflow:hidden}
/* El robot de soporte estorba encima de la lámina: en grande sobra. */
body.pres-completa .robot-lanza, body.pres-completa #robot-p{display:none !important}

/* ---- la invitación a preguntar ---- */
.pres-invita{
  position:absolute; right:22px; bottom:84px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 17px; border-radius:999px;
  border:1px solid rgba(127,216,168,.4);
  background:rgba(18,33,27,.92); color:#CFE6DA;
  font-size:13px; font-weight:500;
  box-shadow:0 12px 34px rgba(0,0,0,.42);
  animation:pres-latir 3.4s ease-in-out infinite;
  cursor:pointer;
}
.pres-invita::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:#7FD8A8; box-shadow:0 0 0 4px rgba(127,216,168,.18);
}
.pres-invita:hover{background:#16281F; color:#EAF2ED; border-color:#7FD8A8}
.pres-invita.fuera{display:none}
@keyframes pres-latir{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.pres.dentro .pres-invita{bottom:72px; right:16px; font-size:12.5px; padding:9px 15px}
@media (max-width:760px){
  .pres-invita{right:10px; bottom:76px; font-size:11.5px; padding:8px 13px; max-width:calc(100% - 20px)}
}

/* ---- el chat, igual que el de los salones ---- */
.pres-chat{
  width:min(360px, 42vw); flex:none; display:flex; flex-direction:column;
  border-left:1px solid rgba(255,255,255,.1); background:rgba(6,14,11,.55);
  min-height:0;
}
.pres-chat-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.09);
}
.pres-chat-cab b{font-size:13px; letter-spacing:-.01em; color:#EAF2ED}
.pres-chat-x{
  border:0; background:none; color:#8FA69B; font-size:15px; line-height:1;
  padding:4px 6px; border-radius:7px; cursor:pointer;
}
.pres-chat-x:hover{background:rgba(255,255,255,.09); color:#EAF2ED}
.pres-chat-hilo{
  flex:1; min-height:0; overflow-y:auto; padding:14px 16px;
  display:flex; flex-direction:column; gap:11px;
}
.pres-chat-vacio{font-size:12.5px; color:#7D9187; line-height:1.6; padding:6px 0}
.pres-msj{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:11px; padding:9px 12px 10px;
}
.pres-msj .q{display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap}
.pres-msj .q b{font-size:12px; color:#CFE6DA}
.pres-msj .q span{font-size:10.5px; color:#7D9187; font-family:var(--f-mono)}
.pres-msj .q .lam{
  font-size:9.5px; color:#8FA69B; border:1px solid rgba(255,255,255,.14);
  border-radius:5px; padding:1px 5px; font-family:var(--f-mono);
}
.pres-msj .c{font-size:13.5px; line-height:1.55; color:#DCE9E2; word-break:break-word}
.pres-msj.mio{background:rgba(127,216,168,.09); border-color:rgba(127,216,168,.22)}
.pres-msj.staff .q b{color:#7FD8A8}
.pres-msj.nexo{background:rgba(96,165,250,.08); border-color:rgba(150,190,255,.22)}
.pres-msj.nexo .q b{color:#9FC4F5}
.pres-msj.pensando .c, .pres-msj.pensando{opacity:.7}
.pres-chat-pie{padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.09)}
.pres-chat-pie textarea{
  width:100%; padding:10px 12px; font:inherit; font-size:14px; line-height:1.5;
  color:#EAF2ED; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.17); border-radius:10px; resize:vertical;
}
.pres-chat-pie textarea:focus{outline:2px solid rgba(127,216,168,.3); border-color:#7FD8A8}
.pres-chat-mandos{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap}
.pres-chat-mandos .pres-b{height:36px; font-size:13px; padding:0 12px; min-width:38px}
.pres-chat-mandos .pres-preguntar{flex:1; justify-content:center; font-size:12.5px}
#pres-mic.on{background:var(--live); border-color:var(--live)}

@media (max-width:820px){
  .pres-chat{
    position:absolute; inset:auto 0 0 0; width:100%; height:62%;
    border-left:0; border-top:1px solid rgba(255,255,255,.14);
    background:#0B1712; z-index:6;
  }
  .pres-medio{position:relative}
}

/* ---- el cierre, con el comentario a mano ---- */
.pres-final{
  position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(4,10,8,.82); backdrop-filter:blur(5px); padding:22px;
}
.pres-final-caja{
  width:min(560px, 100%); max-height:88%; overflow-y:auto; text-align:center;
  background:#12211B; border:1px solid rgba(255,255,255,.13);
  border-radius:16px; padding:26px 28px 24px;
}
.pres-final-ok{
  width:44px; height:44px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-size:20px;
  background:rgba(127,216,168,.16); color:#7FD8A8; border:1px solid rgba(127,216,168,.4);
}
.pres-final-caja h2{font-size:19px; letter-spacing:-.015em; margin-bottom:7px; color:#EAF2ED}
.pres-final-caja > p{font-size:13.5px; line-height:1.6; color:#8FA69B; margin-bottom:16px}
.pres-final-caja textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:14.5px; line-height:1.55;
  color:#EAF2ED; background:rgba(255,255,255,.05); text-align:left;
  border:1px solid rgba(255,255,255,.17); border-radius:11px; resize:vertical;
}
.pres-final-caja textarea:focus{outline:2px solid rgba(127,216,168,.3); border-color:#7FD8A8}
.pres-final-mandos{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap; justify-content:center}
.pres-final-gracias{margin-top:14px; font-size:13.5px; color:#7FD8A8}

/* ===== comentarios de la lección ===== */
.coment-cab{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap}
.coment-cab .cuenta{font-family:var(--f-mono); font-size:11.5px; color:var(--ink3)}
.coment-form{display:flex; flex-direction:column; gap:10px; margin-bottom:20px}
.coment-form textarea{
  width:100%; min-height:84px; padding:13px 15px; resize:vertical;
  font:inherit; font-size:14.5px; line-height:1.55; color:var(--ink);
  background:var(--surface2); border:1px solid var(--line); border-radius:11px;
}
.coment-form textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.coment-form .pie{display:flex; align-items:center; justify-content:space-between; gap:12px}
.coment-form .pie small{font-size:11.5px; color:var(--ink3)}
.coment-lista{display:flex; flex-direction:column; gap:2px}
.coment-i{
  display:flex; gap:13px; padding:14px 0; border-top:1px solid var(--line);
}
.coment-i:first-child{border-top:0}
.coment-ini{
  width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--surface3); color:var(--ink2);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.coment-i.staff .coment-ini{background:var(--accent); color:#fff}
.coment-cuerpo{flex:1; min-width:0}
.coment-quien{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px}
.coment-quien b{font-size:13.5px}
.coment-quien .marca{
  font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent-ink);
}
.coment-quien time{font-size:11.5px; color:var(--ink3); font-family:var(--f-mono)}
.coment-texto{
  font-family:var(--f-read); font-size:14.5px; line-height:1.62; color:var(--ink2);
  white-space:pre-wrap; word-break:break-word;
}
.coment-quitar{
  border:0; background:none; color:var(--ink3); font-size:11.5px; padding:2px 4px; cursor:pointer;
}
.coment-quitar:hover{color:var(--live)}

/* ===== las siete fichas de las plataformas ===== */
.plat-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:16px;
}
.plat-i{
  display:grid; grid-template-rows:auto 1fr auto; gap:12px;
  padding:18px 19px 16px; text-align:left; min-height:172px;
}
.plat-i:hover{border-color:var(--accent); transform:translateY(-2px)}
.plat-n{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  color:var(--accent-ink); background:var(--accent-soft);
  padding:4px 8px; border-radius:6px; justify-self:start;
}
.plat-t b{display:block; font-size:15.5px; letter-spacing:-.01em; margin-bottom:6px}
.plat-t small{
  display:block; font-family:var(--f-read); font-size:13px; line-height:1.55; color:var(--ink3);
}
.plat-pie{display:flex; align-items:center; gap:10px}
.plat-pie .barra{flex:1}
.plat-pie .num{font-family:var(--f-mono); font-size:11px; color:var(--ink3)}

/* ===== panel de audiencia ===== */
.aud-cifras{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:22px}
.aud-cifra{padding:15px 17px}
.aud-cifra b{display:block; font-family:var(--f-mono); font-size:27px; letter-spacing:-.02em}
.aud-cifra small{display:block; font-size:11.5px; color:var(--ink3); margin-top:3px}
.aud-tabla{width:100%; border-collapse:collapse; font-size:13px}
.aud-tabla th{
  text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--line);
}
.aud-tabla td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.aud-tabla tr:hover td{background:var(--surface2)}
.aud-tabla .mono{font-family:var(--f-mono); font-size:12px; color:var(--ink2)}
.aud-envoltura{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.aud-pista{display:flex; align-items:center; gap:9px; min-width:132px}
.aud-pista .barra{flex:1}
.aud-pista span{font-family:var(--f-mono); font-size:11px; color:var(--ink3); min-width:34px; text-align:right}


/* ===== la franja del reproductor =====
   Una presentación encajonada en una columna de 1180px se lee como una
   miniatura. Cuando la lección es una presentación, la franja se come el ancho
   entero de la pantalla y el chat va pegado a su derecha, a la vista. */
.franja-repro{max-width:1180px}
.franja-repro.grande{max-width:min(1780px, 100%)}
.franja-repro.grande .pres.dentro{height:min(80vh, 900px)}
.franja-repro.grande .pres.dentro .pres-cuerpo{padding:30px clamp(26px, 3.4vw, 64px)}
.franja-repro.grande .pres.dentro .pres-cuerpo h1{font-size:clamp(28px, 2.9vw, 46px); margin-bottom:24px}
.franja-repro.grande .pres.dentro .pres-cuerpo.con-foto h1{font-size:clamp(23px, 2.2vw, 34px); margin-bottom:18px}
.franja-repro.grande .pres.dentro .pres-clave li{font-size:clamp(14.5px, 1.25vw, 19px); margin-bottom:13px}
.franja-repro.grande .pres.dentro .pres-foto img{max-height:52vh}

/* El chat se queda a la vista al lado de la lámina, no escondido. */
.pres.dentro .pres-chat{width:min(340px, 32vw)}
.franja-repro.grande .pres.dentro .pres-chat{width:min(380px, 28vw)}

@media (max-width:1079px){
  .franja-repro.grande{max-width:100%}
}

body.con-pres .robot-lanza, body.con-pres #robot-p{display:none !important}

/* ---- Fuerza del Pueblo ---- */
.logo-fp{font-size:0 !important; overflow:hidden}
.logo-fp img{width:62%; height:62%; object-fit:contain; display:block}
.banner-logo{display:block; width:clamp(170px,19vw,240px); height:auto; margin:0 0 18px;
  filter:drop-shadow(0 2px 10px rgba(0,30,12,.35))}
.banner .anos{text-transform:none; letter-spacing:.06em; font-family:var(--f-ui); font-size:12.5px; color:rgba(255,255,255,.82)}
.banner.sin-retrato .banner-int{grid-template-columns:minmax(0,1fr)}
.banner.sin-retrato .banner-texto{margin-inline:0; max-width:44rem}
@media (max-width:680px){
  .banner-logo{width:min(62%,210px); margin-bottom:16px}
}