:root{
  --sbw:248px;
  --bg:#f3f7f4; --card:#ffffff; --line:#e1e8e3; --line2:#cfd9d2;
  --ink:#0c1612; --ink2:#34443b; --ink3:#6f8076;
  --verde:#4c9a2a; --verde2:#6fb74c; --verde3:#9ee86d; --teal:#2fb5a0; --azul:#0b2a3d; --azul2:#12506a;
  --rojo:#c94b3a; --ambar:#b57a09;
  --g-marca:linear-gradient(135deg,#0b2a3d 0%,#14705f 55%,#6fb74c 100%);
  --g-verde:linear-gradient(135deg,#3f8a24,#6fb74c);
  --g-suave:linear-gradient(135deg,#e7f5dc,#dff3f0);
  --r:20px; --r2:14px;
  --sh:0 1px 2px rgba(12,22,18,.05),0 8px 24px -12px rgba(12,22,18,.14);
  --sh2:0 2px 4px rgba(12,22,18,.06),0 24px 48px -18px rgba(12,22,18,.28);
  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --seg:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.55 var(--sans);color:var(--ink2);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:linear-gradient(160deg,rgba(158,232,109,.16) 0%,transparent 34%),linear-gradient(20deg,rgba(47,181,160,.14) 0%,transparent 30%);background-attachment:fixed}
h1,h2,h3{color:var(--ink);margin:0;letter-spacing:-.02em}
a{color:inherit}
em,i{font-style:normal}
button,input,select,textarea{font:inherit;color:inherit}
.oculto{display:none!important}
.topbar,.tabbar{display:none}

/* ---------- estructura escritorio ---------- */
.lateral{position:fixed;inset:0 auto 0 0;width:var(--sbw);background:linear-gradient(175deg,#0b2a3d 0%,#0d3f4d 55%,#14705f 100%);color:#fff;display:flex;flex-direction:column;padding:22px 14px;z-index:20}
.marca{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:2px 8px 22px}
.marca img{display:block;width:150px;height:auto}
.marca span{font:700 10px var(--sans);letter-spacing:.32em;opacity:.7;padding-left:4px}
.nav{display:flex;flex-direction:column;gap:3px;overflow:auto}
.nav-tit{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.5;padding:16px 12px 7px}
.nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;text-decoration:none;color:rgba(255,255,255,.78);font-weight:500;transition:background .15s,color .15s}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav a.on{background:linear-gradient(135deg,rgba(111,183,76,.95),rgba(47,181,160,.85));color:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.nav svg{width:20px;height:20px;flex:none}
.pie-lat{margin-top:auto;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.pie-lat b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pie-lat span{font-size:11px;opacity:.6}
.pie-lat a{display:inline-block;margin-top:8px;font-size:12px;opacity:.8}
main{margin-left:var(--sbw);padding:28px 34px 60px;max-width:1280px}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cab h1{font-size:30px;font-weight:800}
.cab p{margin:4px 0 0;color:var(--ink3)}
.volver{display:inline-flex;align-items:center;gap:6px;color:var(--verde);font-weight:600;text-decoration:none;margin-bottom:10px;font-size:14px}
.volver svg{width:16px;height:16px}

/* ---------- héroe y cifras ---------- */
.heroe{background:var(--g-marca);color:#fff;border-radius:26px;padding:28px 30px;position:relative;overflow:hidden;box-shadow:var(--sh2);margin-bottom:24px}
.heroe::after{content:"";position:absolute;right:-60px;top:-40px;width:360px;height:260px;transform:skewX(-24deg);background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0));border-radius:28px}
.heroe h1{color:#fff;font-size:28px;font-weight:800;position:relative}
.heroe p{margin:6px 0 0;opacity:.88;position:relative;max-width:560px}
.cifras{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;position:relative}
.cifra{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:10px 16px;backdrop-filter:blur(6px)}
.cifra b{display:block;font-size:22px;font-weight:800}
.cifra span{font-size:11.5px;opacity:.85}

/* ---------- tarjetas de curso ---------- */
.grupo-tit{font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:26px 0 12px}
.cursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.curso{display:flex;flex-direction:column;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s}
.curso:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.portada{height:112px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden}
.portada::after{content:"";position:absolute;right:-30px;top:-20px;width:170px;height:150px;transform:skewX(-24deg);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,0));border-radius:20px}
.g0{background:linear-gradient(135deg,#0b2a3d,#14705f 60%,#6fb74c)}
.g1{background:linear-gradient(135deg,#14705f,#2fb5a0 60%,#9ee86d)}
.g2{background:linear-gradient(135deg,#0b2a3d,#12506a 60%,#2fb5a0)}
.g3{background:linear-gradient(135deg,#3f8a24,#6fb74c 60%,#9ee86d)}
.g4{background:linear-gradient(135deg,#12506a,#14705f 55%,#3f8a24)}
.g5{background:linear-gradient(135deg,#1a1f1b,#0d3f4d 55%,#4c9a2a)}
.etq{align-self:flex-start;font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);padding:4px 9px;border-radius:9px;position:relative;z-index:1}
.portada b{font-size:12px;opacity:.85;position:relative;z-index:1}
.curso .cu{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.curso h3{font-size:16.5px;line-height:1.3}
.curso p{margin:0;font-size:13px;color:var(--ink3)}
.barra{height:8px;border-radius:5px;background:#e8efe9;overflow:hidden}
.barra i{display:block;height:100%;background:var(--g-verde);border-radius:5px;transition:width .4s}
.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink3);margin-top:auto}
.pastilla{font:700 11px var(--sans);padding:5px 10px;border-radius:9px;background:var(--g-suave);color:#2c6a1c;white-space:nowrap}
.pastilla.ok{background:var(--g-verde);color:#fff}
.pastilla.venc{background:linear-gradient(135deg,#c94b3a,#e0734a);color:#fff}
.pastilla.aviso{background:#fbefd2;color:#7a5106}
.pastilla.gris{background:#eef3ef;color:var(--ink3)}

/* ---------- lecciones ---------- */
.dos{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:20px}
.card h2{font-size:16px;font-weight:700;margin-bottom:14px}
.temario{position:sticky;top:20px}
.mod-t{font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:16px 0 6px}
.mod-t:first-child{margin-top:0}
.les{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;text-decoration:none;color:var(--ink2);font-size:13.5px;font-weight:500}
.les:hover{background:#f3f8f1}
.les.on{background:var(--g-suave);color:var(--ink);font-weight:700}
.les .ck{width:20px;height:20px;border-radius:7px;border:2px solid var(--line2);flex:none;display:grid;place-items:center;color:#fff}
.les.hecha .ck{background:var(--g-verde);border-color:transparent}
.les .ck svg{width:12px;height:12px}
.les small{margin-left:auto;color:var(--ink3);font-size:11.5px;white-space:nowrap}
.texto{font-size:16px;line-height:1.7;color:var(--ink2)}
.texto h2{font-size:21px;margin:26px 0 8px}
.texto h3{font-size:17px;margin:20px 0 6px}
.texto p{margin:0 0 14px}
.texto ul,.texto ol{margin:0 0 14px;padding-left:22px}
.texto li{margin-bottom:6px}
.texto strong{color:var(--ink)}
.texto .caja{background:var(--g-suave);border:1px solid #c5eaa0;border-radius:14px;padding:12px 16px;margin:0 0 14px}
.texto a{color:var(--verde);font-weight:600}
.visor{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#0b2a3d;margin-bottom:16px}
video.visor{object-fit:contain}
iframe.pdf{width:100%;height:70vh;border:1px solid var(--line);border-radius:16px;margin-bottom:16px}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:center}
.por-confirmar{background:#fbefd2;border:1px solid #efd58f;border-radius:14px;padding:12px 16px;margin-bottom:16px;color:#6a4705;font-size:13.5px}

/* ---------- test ---------- */
.preg{margin-bottom:22px}
.preg h3{font-size:16.5px;line-height:1.4;margin-bottom:10px}
.preg small{color:var(--ink3);font-weight:500}
.op{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1.5px solid var(--line2);border-radius:14px;background:#fff;margin-bottom:8px;cursor:pointer;transition:border-color .12s,background .12s}
.op:hover{border-color:var(--verde2)}
.op input{position:absolute;opacity:0;pointer-events:none}
.op .ck{width:22px;height:22px;border-radius:7px;border:2px solid var(--line2);flex:none;margin-top:1px;display:grid;place-items:center;color:#fff}
.op .ck svg{width:13px;height:13px;opacity:0}
.op.sel{border-color:var(--verde2);background:#f3faee}
.op.sel .ck{background:var(--g-verde);border-color:transparent}
.op.sel .ck svg{opacity:1}
.op.bien{border-color:#4c9a2a;background:#e9f6df}
.op.mal{border-color:var(--rojo);background:#fbeceb}
.res{border-radius:var(--r);padding:22px;color:#fff;margin-bottom:20px;background:var(--g-marca)}
.res.no{background:linear-gradient(135deg,#7a2a20,#c94b3a)}
.res b{font-size:36px;display:block;letter-spacing:-.02em}
.expl{font-size:13px;color:var(--ink3);margin:6px 2px 0}

/* ---------- controles ---------- */
.btn{border:0;border-radius:14px;padding:12px 20px;font-weight:600;cursor:pointer;background:var(--g-verde);color:#fff;box-shadow:0 8px 16px -10px rgba(63,138,36,.9);transition:transform .12s,filter .12s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:14.5px}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.98)}
.btn.sec{background:#fff;color:var(--ink2);border:1px solid var(--line2);box-shadow:none}
.btn.peq{padding:7px 13px;font-size:12.5px;border-radius:11px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:17px;height:17px}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line2);border-radius:13px;background:#fff;outline:none;font-size:16px}
input:focus,select:focus,textarea:focus{border-color:var(--verde2);box-shadow:0 0 0 3px rgba(111,183,76,.2)}
textarea{min-height:100px;resize:vertical}
label.c{display:block;font:600 12px var(--sans);color:var(--ink2);margin:0 0 5px}
.campo{margin-bottom:14px}
.chk{display:flex;align-items:center;gap:8px;font-weight:500}
.chk input{width:auto}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fichas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.ficha{border:1px solid var(--line2);background:#fff;border-radius:12px;padding:8px 15px;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink2);text-decoration:none}
.ficha.on{background:var(--g-verde);color:#fff;border-color:transparent}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filtros select{width:auto;min-width:200px;flex:1}
.vacio{color:var(--ink3);padding:20px 6px;text-align:center}

/* ---------- tablas ---------- */
.tabla-w{overflow:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff;box-shadow:var(--sh)}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#1a1f1b;padding:11px 14px;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--line);white-space:nowrap}
tr:nth-child(even) td{background:#f9fbf8}
.acc{display:flex;gap:6px}

/* ---------- editor ---------- */
.ed-curso{margin-bottom:14px}
.ed-curso>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.ed-curso>summary::-webkit-details-marker{display:none}
.ed-curso[open]>summary{border-radius:var(--r) var(--r) 0 0}
.ed-cuerpo{padding:16px 18px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r)}
.ed-fila{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;margin-top:6px;background:#fbfdfb;font-size:13.5px}
.ed-fila b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ed-fila.arch{opacity:.5}

/* ---------- modal y aviso ---------- */
.modal{position:fixed;inset:0;background:rgba(11,42,61,.45);backdrop-filter:blur(4px);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.hoja{background:#fff;border-radius:24px;padding:24px;width:100%;max-width:640px;max-height:90vh;overflow:auto;box-shadow:var(--sh2)}
.hoja h2{margin-bottom:16px;font-size:20px}
#aviso{position:fixed;left:50%;bottom:calc(90px + var(--seg));transform:translateX(-50%);background:#0b2a3d;color:#fff;padding:12px 20px;border-radius:14px;z-index:80;box-shadow:var(--sh2);max-width:92vw;font-weight:600}
#aviso.mal{background:var(--rojo)}
.entra{max-width:440px;margin:12vh auto;text-align:center}

/* ---------- móvil: aspecto de app de iPhone ---------- */
@media (max-width:860px){
  .lateral{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:linear-gradient(135deg,#0b2a3d,#14705f);color:#fff}
  .top-tit{font:700 11px var(--sans);letter-spacing:.28em;text-transform:uppercase;opacity:.75}
  main{margin:0;padding:18px 16px calc(96px + var(--seg))}
  .cab h1{font-size:28px}
  .heroe{padding:22px 20px;border-radius:24px}
  .heroe h1{font-size:24px}
  .tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + var(--seg));z-index:40;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border:1px solid rgba(207,217,210,.8);border-radius:24px;padding:6px;box-shadow:var(--sh2)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:18px;text-decoration:none;color:var(--ink3);font:600 10.5px var(--sans)}
  .tabbar a svg{width:23px;height:23px}
  .tabbar a.on{background:var(--g-suave);color:var(--verde)}
  .dos{grid-template-columns:1fr}
  .temario{position:static}
  .cursos{grid-template-columns:1fr}
  .fila2{grid-template-columns:1fr}
  .modal{align-items:flex-end;padding:0}
  .hoja{border-radius:26px 26px 0 0;max-height:92vh;padding-bottom:calc(24px + var(--seg))}
  .btn{padding:14px 20px}
  .acciones .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}