/* ============ TOKENS ============ */
:root{
  --page:#F8F5F1;
  --card:#FFFFFF;
  --cardAlt:#F2EEE9;
  --dark:#2E2E2E;
  --dark2:#3C3A38;
  --ink:#2E2E2E;
  --body:#4A4846;
  --muted:#6E6A66;        /* gris secundario: contraste 4.9 sobre marfil */
  --line:#E7E4E0;
  --lineStrong:#D9D4CE;
  --rose:#B99F9D;         /* acento decorativo: líneas, íconos, fondos */
  --roseTexto:#7B5E5C;    /* el mismo rosa, pero legible como texto (5.4) */
  --roseDeep:#8B6B69;
  --roseLt:#CFBEBE;
  --roseSoft:#F1EAE9;
  --onRose:#F8F5F1;
  --onDark:#D8D5D1;
  --ok:#5B7A63;
  --okSoft:#EAF0EB;
  --warn:#A8783F;
  --warnSoft:#F6EEE3;
  --bad:#9C5A52;
  --badSoft:#F5E8E6;
  --shadow:0 1px 2px rgba(46,46,46,.04), 0 8px 24px -12px rgba(46,46,46,.14);
  --shadowUp:0 2px 4px rgba(46,46,46,.05), 0 18px 40px -18px rgba(46,46,46,.22);
  --r:14px;
  --serif:"Cormorant", "Hoefler Text", Georgia, serif;
  --sans:"Quicksand", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#201F1E;
    --card:#2A2927;
    --cardAlt:#333130;
    --dark:#161515;
    --dark2:#232221;
    --ink:#F2EEE9;
    --body:#D8D5D1;
    --muted:#A8A29C;
    --line:#3A3836;
    --lineStrong:#4A4745;
    --rose:#C6ADAB;
    --roseTexto:#D8C3C1;
    --roseDeep:#D4BFBD;
    --roseLt:#8E7674;
    --roseSoft:#332C2C;
    --onRose:#201F1E;
    --onDark:#D8D5D1;
    --ok:#8FB399;
    --okSoft:#27302A;
    --warn:#D4A15E;
    --warnSoft:#332C22;
    --bad:#CE938A;
    --badSoft:#332523;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadowUp:0 2px 4px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --page:#201F1E;
  --card:#2A2927;
  --cardAlt:#333130;
  --dark:#161515;
  --dark2:#232221;
  --ink:#F2EEE9;
  --body:#D8D5D1;
  --muted:#A8A29C;
  --line:#3A3836;
  --lineStrong:#4A4745;
  --rose:#C6ADAB;
  --roseTexto:#D8C3C1;
  --roseDeep:#D4BFBD;
  --roseLt:#8E7674;
  --roseSoft:#332C2C;
  --onRose:#201F1E;
  --onDark:#D8D5D1;
  --ok:#8FB399;
  --okSoft:#27302A;
  --warn:#D4A15E;
  --warnSoft:#332C22;
  --bad:#CE938A;
  --badSoft:#332523;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadowUp:0 2px 4px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.7);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--page);
  color:var(--body);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); margin:0; font-weight:600; text-wrap:balance; line-height:1.15}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--roseDeep)}
button{font-family:inherit; font-size:inherit; cursor:pointer}
input,select,textarea{font-family:inherit; font-size:inherit}
:focus-visible{outline:2px solid var(--rose); outline-offset:2px; border-radius:4px}
.num{font-variant-numeric:tabular-nums}

.eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--roseTexto); margin:0 0 10px;
}
.muted{color:var(--muted)}
.hidden{display:none !important}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--dark); background:var(--dark); color:var(--page);
  padding:11px 22px; border-radius:999px; font-weight:600; font-size:13.5px;
  letter-spacing:.02em; transition:opacity .15s, transform .15s;
}
.btn:hover{opacity:.86}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.35; cursor:not-allowed; transform:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--lineStrong)}
.btn-ghost:hover{border-color:var(--rose); opacity:1}
.btn-rose{background:var(--roseDeep); border-color:var(--roseDeep); color:var(--onRose)}
.btn-sm{padding:7px 15px; font-size:12.5px}

/* ============ LAYOUT SHELL ============ */
.wrap{max-width:1180px; margin:0 auto; padding-inline:20px}

/* ---- Portada / registro ---- */
#vista-portada{min-height:100%;}
.hero{
  background:var(--dark); color:var(--onDark);
  padding-block:56px 64px;
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto -10% -55% 55%;
  height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(185,159,157,.28), transparent 62%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:1; display:grid; gap:40px; grid-template-columns:1.15fr .85fr; align-items:center}
.hero img.logo{width:190px; height:auto; display:block; margin-bottom:34px}
.hero h1{color:#F8F5F1; font-size:clamp(38px,6vw,60px); letter-spacing:.01em}
.hero .lead{color:var(--onDark); font-size:16px; max-width:46ch; margin-top:18px}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(216,213,209,.28); border-radius:999px;
  padding:6px 14px; font-size:12px; color:var(--onDark); font-weight:500;
}
.chip b{font-weight:700; color:#F8F5F1}

/* tarjeta de registro */
.registro{
  background:var(--card); border-radius:var(--r); padding:28px;
  box-shadow:var(--shadowUp); border:1px solid var(--line);
}
.registro h2{font-size:27px; margin-bottom:4px}
.campo{display:block; margin-bottom:14px}
.campo span{display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.campo input, .campo select{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px;
  background:var(--page); color:var(--ink);
}
.campo input:focus, .campo select:focus{border-color:var(--rose); outline:none}
.form-error{color:var(--bad); font-size:12.5px; margin-top:-6px; margin-bottom:12px}

/* temario de portada */
.temario-previo{padding-block:56px 70px}
.mods-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:26px}
.mod-card{border-top:2px solid var(--rose); padding-top:16px}
.mod-card .n{font-size:11px; font-weight:700; color:var(--rose); letter-spacing:.18em}
.mod-card h3{font-size:20px; margin:6px 0 6px}
.mod-card p{font-size:13.5px; color:var(--muted)}

/* ============ APP (curso) ============ */
.topbar{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:16px; padding-block:12px; max-width:1180px; margin:0 auto; padding-inline:20px}
.topbar img.logo{height:26px; width:auto}
.topbar .spacer{flex:1}
.avance-mini{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); font-weight:600}
.riel{width:120px; height:5px; border-radius:999px; background:var(--line); overflow:hidden}
.riel > i{display:block; height:100%; background:var(--rose); border-radius:999px; transition:width .5s cubic-bezier(.4,0,.2,1)}
.icon-btn{
  border:1px solid var(--line); background:transparent; color:var(--body);
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center; font-size:14px;
}
.icon-btn:hover{border-color:var(--rose); color:var(--ink)}

.curso{display:grid; grid-template-columns:290px 1fr; gap:34px; padding-block:30px 70px; align-items:start}

/* ---- sidebar temario ---- */
.side{position:sticky; top:70px}
.side-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px}
.side-head h3{font-size:19px}
.pct{font-size:12px; font-weight:700; color:var(--rose)}
.mod{margin-bottom:6px; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden}
.mod.lock{background:transparent; border-style:dashed; opacity:.72}
.mod-head{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 13px; background:transparent; border:0; color:var(--ink);
}
.mod-head .mn{
  width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:10.5px; font-weight:700; background:var(--roseSoft); color:var(--roseDeep);
}
.mod.done .mn{background:var(--ok); color:var(--page)}
.mod-head .mt{flex:1; font-size:13px; font-weight:600; line-height:1.3}
.mod-head .caret{font-size:10px; color:var(--muted); transition:transform .2s}
.mod.open .caret{transform:rotate(90deg)}
.mod-lecs{display:none; padding:0 8px 8px}
.mod.open .mod-lecs{display:block}
.lec-btn{
  display:flex; gap:9px; align-items:center; width:100%; text-align:left;
  background:transparent; border:0; padding:8px; border-radius:8px; cursor:pointer;
  color:var(--body); font-size:12.5px; line-height:1.4; transition:background .15s;
}
.lec-btn:hover{background:var(--cardAlt)}
.lec-btn.activa{background:var(--roseSoft); color:var(--ink); font-weight:600}
.lec-btn .tick{
  width:19px; height:19px; flex:none; border-radius:50%;
  border:1.5px solid var(--lineStrong); display:grid; place-items:center;
  font-size:9.5px; font-weight:700; color:var(--muted); background:var(--card);
}
.lec-btn.vista .tick{background:var(--ok); border-color:var(--ok); color:var(--page)}
.lec-btn.quiz .tick{border-radius:6px; border-style:solid; border-color:var(--roseSoft)}
.lec-btn.quiz.vista .tick{background:var(--rose); border-color:var(--rose)}
.lb-txt{flex:1; min-width:0}
.lb-flecha{flex:none; font-size:16px; color:var(--muted); opacity:0; transform:translateX(-3px); transition:opacity .15s, transform .15s}
.lec-btn:hover .lb-flecha, .lec-btn.activa .lb-flecha{opacity:1; transform:translateX(0); color:var(--roseDeep)}

/* ---- panel lección ---- */
.panel{
  scroll-margin-top:72px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3.4vw,40px); box-shadow:var(--shadow); min-width:0;
}
.lec-head{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:24px}
.lec-head h2{font-size:clamp(26px,3.6vw,36px); margin-bottom:8px}
.lec-head .sub{font-size:13.5px; color:var(--muted)}
.contenido{max-width:66ch}
.contenido h3{font-size:22px; margin:30px 0 10px}
.contenido h3:first-child{margin-top:0}
.contenido ul{padding-left:18px; margin:0 0 1em}
.contenido li{margin-bottom:7px}
.contenido li::marker{color:var(--rose)}
.contenido strong{color:var(--ink); font-weight:600}

.video.sin{aspect-ratio:auto; height:78px; background:var(--cardAlt); border-style:dashed}
.video.sin .placeholder{color:var(--muted)}
.video.sin .placeholder .pl-ico{font-size:16px}
.video{
  position:relative; aspect-ratio:16/9; max-width:100%; border-radius:12px; overflow:hidden;
  background:var(--dark2); margin-bottom:26px; border:1px solid var(--line);
}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video .placeholder{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px;
  color:var(--onDark); text-align:center; padding:20px;
}
.video .placeholder .pl-ico{font-size:26px; opacity:.5}
.video .placeholder small{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.65}

/* ---- reproductor controlado ---- */
.video.vplayer{margin-bottom:0; border-radius:12px 12px 0 0}
.video.vplayer iframe, .video.vplayer > div{position:absolute; inset:0; width:100%; height:100%; border:0}
.vshield{position:absolute; inset:0; cursor:pointer; background:transparent}
.video.vplayer:fullscreen{aspect-ratio:auto; height:100%; border-radius:0}
.vctrl{
  display:flex; align-items:center; gap:10px;
  background:var(--dark2); border-radius:0 0 12px 12px;
  padding:9px 13px; margin-bottom:10px;
}
.vbtn{
  border:1px solid rgba(216,213,209,.22); background:transparent; color:#E8E4DF;
  min-width:34px; height:30px; padding:0 9px; border-radius:999px;
  font-size:12px; font-weight:700; display:grid; place-items:center;
}
.vbtn:hover{border-color:var(--rose); color:#fff}
.vriel{
  flex:1; height:6px; border-radius:999px; background:rgba(216,213,209,.18);
  position:relative; cursor:pointer; min-width:60px;
}
.vriel > i{position:absolute; inset:0 auto 0 0; width:0; background:var(--rose); border-radius:999px}
.vriel > b{
  position:absolute; top:-3px; width:2px; height:12px; background:rgba(216,213,209,.55);
  border-radius:2px; left:0;
}
.vtime{font-size:11.5px; color:#C9C5C1; font-weight:600; white-space:nowrap}
.vnota{font-size:11.5px; color:var(--muted); margin:0 0 24px; transition:color .2s}
.vnota.alerta{color:var(--bad); font-weight:700}
.gate-msg{font-size:12px; color:var(--muted); font-weight:600}
.ed-check{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--body); margin:0 0 14px; cursor:pointer}
.ed-check input{accent-color:var(--rose); width:16px; height:16px; flex:none}

.nota{
  display:flex; gap:13px; background:var(--roseSoft); border-radius:12px;
  padding:15px 17px; margin:24px 0; font-size:13.5px; color:var(--body);
}
.nota .nb{
  flex:none; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--roseDeep); padding-top:3px; writing-mode:horizontal-tb;
}

.recursos{margin-top:30px; border-top:1px solid var(--line); padding-top:20px}
.recursos h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-family:var(--sans); font-weight:700; margin-bottom:12px}
.rec-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  border:1px solid var(--line); background:var(--page); border-radius:10px;
  padding:10px 14px; margin-bottom:8px; color:var(--ink); font-size:13px; font-weight:600;
}
.rec-item:hover{border-color:var(--rose)}
.rec-item .rico{color:var(--rose); font-size:15px}
.rec-item .rsz{margin-left:auto; font-size:11.5px; color:var(--muted); font-weight:500}
.rec-vacio{font-size:13px; color:var(--muted); font-style:italic}

.lec-nav{display:flex; align-items:center; gap:12px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap}
.lec-nav .spacer{flex:1}

/* ---- quiz ---- */
.quiz-intro{text-align:center; padding:10px 0 4px}
.quiz-intro .big{font-family:var(--serif); font-size:52px; color:var(--rose); line-height:1}
.preg{border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:14px; background:var(--page)}
.preg.mal{border-color:var(--bad); background:var(--badSoft)}
.preg.bien{border-color:var(--ok); background:var(--okSoft)}
.preg .q{font-weight:600; color:var(--ink); margin-bottom:14px; font-size:14.5px; line-height:1.45}
.preg .q .qn{color:var(--rose); font-weight:700; margin-right:7px}
.opt{display:flex; gap:11px; align-items:flex-start; padding:9px 11px; border-radius:9px; cursor:pointer; font-size:13.5px; line-height:1.5}
.opt:hover{background:var(--cardAlt)}
.opt input{margin:3px 0 0; accent-color:var(--rose); flex:none}
.opt.correcta{background:var(--okSoft); font-weight:600; color:var(--ink)}
.feedback{font-size:12.5px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--lineStrong); color:var(--muted)}
.resultado{
  display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:12px; margin-bottom:22px;
}
.resultado.ok{background:var(--okSoft)}
.resultado.no{background:var(--badSoft)}
.resultado .score{font-family:var(--sans); font-weight:700; font-size:36px; line-height:1}
.resultado.ok .score{color:var(--ok)}
.resultado.no .score{color:var(--bad)}
.resultado h3{font-size:21px; margin-bottom:2px}
.resultado p{font-size:13px; color:var(--body); margin:0}

/* ---- diploma ---- */
.dip-wrap{text-align:center; padding-block:10px}
.dip-canvas-box{
  margin:26px auto 0; max-width:820px; border-radius:10px; overflow:hidden;
  box-shadow:var(--shadowUp); border:1px solid var(--line); background:#fff;
}
.dip-canvas-box canvas{display:block; width:100%; height:auto}
.dip-acciones{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.folio{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:14px}

/* ---- admin ---- */
.admin-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:24px}
.admin-head h2{font-size:30px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:26px}
.stat{border:1px solid var(--line); border-radius:12px; padding:15px 17px; background:var(--card)}
.stat .v{font-size:29px; font-weight:700; color:var(--ink); line-height:1.1}
.stat .l{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:3px}
.tabla-box{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:660px; font-size:13px}
th{
  text-align:left; padding:11px 14px; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--body); vertical-align:middle}
tr:last-child td{border-bottom:0}
td .nm{font-weight:600; color:var(--ink)}
td .em{font-size:11.5px; color:var(--muted)}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.03em}
.pill.cert{background:var(--okSoft); color:var(--ok)}
.pill.curso{background:var(--roseSoft); color:var(--roseDeep)}
.pill.nuevo{background:var(--cardAlt); color:var(--muted)}
.barra-t{display:flex; align-items:center; gap:8px; min-width:120px}
.barra-t .riel{width:70px}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto}
.tab{
  border:0; background:transparent; padding:10px 15px; font-size:13px; font-weight:600;
  color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;
}
.tab.on{color:var(--ink); border-bottom-color:var(--rose)}
.upl{border:1px dashed var(--lineStrong); border-radius:12px; padding:18px; background:var(--card); margin-bottom:14px}
.upl-row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.upl-row .campo{margin-bottom:0; flex:1; min-width:180px}

/* ---- editor de contenido ---- */
.ed-ayuda{
  background:var(--roseSoft); border-radius:12px; padding:15px 18px; font-size:13px;
  line-height:1.7; margin-bottom:20px; color:var(--body);
}
.ed-ayuda code{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px;
  background:var(--card); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--ink);
}
.ed-bloque{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:20px; margin-bottom:18px}
.ed-h{font-size:20px; margin-bottom:14px}
.ed-fila{display:flex; gap:12px; flex-wrap:wrap}
.ed-fila .campo{margin-bottom:14px}
.ed-cab{display:flex; align-items:center; gap:6px; margin-bottom:12px; flex-wrap:wrap}
.ed-badge{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:var(--dark); color:var(--page); padding:4px 11px; border-radius:999px;
}
.ed-mini{font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--rose)}
.ed-lec{border-left:2px solid var(--roseSoft); padding:4px 0 4px 16px; margin:16px 0}
.ed-quiz{background:var(--page); border-radius:12px; padding:16px 18px; margin-top:18px}
.ed-preg{border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:var(--card)}
.ed-nota{font-size:11.5px; color:var(--muted); margin:0 0 8px}
.ed-op{display:flex; align-items:center; gap:9px; margin-bottom:7px}
.ed-op input[type="radio"]{accent-color:var(--ok); flex:none; width:17px; height:17px}
.ed-op-txt{flex:1; min-width:0; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--page); color:var(--ink)}
.ed-op-txt:focus{border-color:var(--rose); outline:none}
.ed-min{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:7px}
.ed-min input{width:62px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--page); color:var(--ink); text-align:center}
.campo textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:9px;
  background:var(--page); color:var(--ink); line-height:1.6; resize:vertical; min-height:120px;
}
.campo textarea:focus{border-color:var(--rose); outline:none}
.icon-btn.sm{width:28px; height:28px; font-size:12px}
.icon-btn.danger:hover{border-color:var(--bad); color:var(--bad)}
.icon-btn[disabled]{opacity:.3; cursor:not-allowed}
.ed-barra{
  position:sticky; bottom:0; z-index:25; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:14px 4px; margin-top:10px; font-size:12.5px;
}

/* ---- estados / avisos ---- */
.aviso{
  display:flex; gap:12px; align-items:flex-start; border-radius:12px; padding:14px 16px;
  font-size:13px; margin-bottom:18px; border:1px solid var(--line); background:var(--cardAlt);
}
.aviso.warn{background:var(--warnSoft); border-color:transparent; color:var(--body)}
.cargando{padding:70px 20px; text-align:center; color:var(--muted); font-size:13.5px}
.dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--rose); margin:0 2px; animation:pulso 1.2s infinite}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
@keyframes pulso{0%,100%{opacity:.25}50%{opacity:1}}

.pie{border-top:1px solid var(--line); margin-top:50px; padding-block:22px 34px; font-size:12px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.pie .spacer{flex:1}
.linkish{background:none; border:0; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; padding:0}
.linkish:hover{color:var(--rose)}

/* ---- modal ---- */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(46,46,46,.52); backdrop-filter:blur(3px)}
.modal-card{background:var(--card); border-radius:var(--r); padding:26px; max-width:400px; width:100%; box-shadow:var(--shadowUp)}
.modal-card h3{font-size:23px; margin-bottom:6px}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; gap:30px}
  .curso{grid-template-columns:1fr; gap:20px}
  .side{position:static}
  .side-scroll{max-height:none}
}
@media (max-width:560px){
  .hero{padding-block:36px 42px}
  .hero img.logo{width:150px; margin-bottom:24px}
  .topbar img.logo{height:22px}
  .avance-mini .riel{width:70px}
  .resultado{flex-direction:column; text-align:center; gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ============ AÑADIDOS DEL SITIO ============ */
.acceso .hero-inner{align-items:start}
.acc-alt{font-size:12.5px; color:var(--muted); margin:16px 0 0; text-align:center}
.logo-link{display:block; line-height:0}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px);
  background:var(--dark); color:var(--page); padding:11px 20px; border-radius:999px;
  font-size:13px; font-weight:600; z-index:99; box-shadow:var(--shadowUp);
  max-width:90vw; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.toast.visible{opacity:1; transform:translateX(-50%) translateY(0)}

/* menú del encabezado */
.menu{position:relative}
.menu-pop{
  position:absolute; right:0; top:42px; z-index:40; min-width:190px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadowUp); padding:6px; display:flex; flex-direction:column;
}
.menu-pop button{
  text-align:left; background:none; border:0; padding:9px 12px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--body);
}
.menu-pop button:hover{background:var(--cardAlt); color:var(--ink)}

/* tablero del alumno */
.tab-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.tab-mod{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:18px 20px; margin-bottom:14px}
.tab-mod.lock{opacity:.6; background:transparent; border-style:dashed}
.tab-mod-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.tab-mod-head h3{font-size:20px; margin:0 0 2px}
.tab-mod-head .mn{
  width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; background:var(--roseSoft); color:var(--roseDeep);
}
.tab-mod-head .mn.ok{background:var(--ok); color:var(--page)}
.tab-ayuda{font-size:12.5px; color:var(--muted); margin:-6px 0 18px}
.tab-lecs{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.tab-lec{
  display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--cardAlt); cursor:pointer; font-size:13.5px;
  transition:background .15s, border-color .15s, transform .08s;
}
.tab-lec:hover{background:var(--roseSoft); border-color:var(--roseSoft)}
.tab-lec:active{transform:scale(.99)}
.tab-lec:focus-visible{outline:2px solid var(--rose); outline-offset:2px}
.tab-lec.ok{background:transparent}
.tab-lec.ok:hover{background:var(--cardAlt)}
.tab-lec.siguiente{background:var(--roseSoft); border-color:var(--rose)}
.tab-lec.lock{cursor:not-allowed; opacity:.55; background:transparent; border-style:dashed}
.tab-lec.lock:hover{background:transparent; border-color:var(--line)}

.tl-badge{
  width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--card); border:1.5px solid var(--lineStrong); color:var(--muted);
}
.tab-lec.ok .tl-badge{background:var(--ok); border-color:var(--ok); color:var(--page)}
.tab-lec.siguiente .tl-badge{background:var(--rose); border-color:var(--rose); color:var(--page)}
.tab-lec.lock .tl-badge{background:transparent; border-style:dashed; font-size:12px}

.tl-cuerpo{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.tl-nombre{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35}
.tab-lec.lock .tl-nombre{color:var(--muted)}
.tl-nota{font-size:11.5px; color:var(--muted); font-weight:600}
.tab-lec.ok .tl-nota{color:var(--ok)}

.siguiente-pill{background:var(--rose); color:var(--page); flex:none; font-size:10px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.tl-reiniciar{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--muted); font-size:13px; display:grid; place-items:center;
}
.tl-reiniciar:hover{border-color:var(--rose); color:var(--roseDeep)}
.tl-flecha{flex:none; font-size:20px; color:var(--muted); line-height:1}
.tab-lec:hover .tl-flecha, .tab-lec.siguiente .tl-flecha{color:var(--roseDeep)}

.aviso.ok-aviso{background:var(--okSoft); border-color:transparent; align-items:center; gap:16px}
.aviso.ok-aviso span{flex:1}

.curso.solo{grid-template-columns:1fr; max-width:820px}
.ed-sub{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.mini-sel{
  padding:5px 8px; border:1px solid var(--line); border-radius:7px;
  background:var(--page); color:var(--ink); font-size:12px; margin-right:8px;
}
code{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px;
  background:var(--cardAlt); border-radius:5px; padding:1px 6px;
}