[hidden]{display:none!important}

:root{
  --ground:#EFF1EE; --surface:#FFFFFF; --surface2:#F6F8F5; --surface3:#E9EDE9;
  --ink:#131A17; --ink2:#4A5651; --ink3:#7A8781;
  --line:#DCE3DD; --line2:#C7D1CA;
  --accent:#0F6B49; --accent-ink:#0B573B; --accent-soft:#DCEDE4;
  --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(15,107,73,.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}