/* ===========================================================
   Academia ERP — sistema de diseño e-learning
   =========================================================== */
:root{
  --bg:#f6f8fb; --surface:#ffffff; --surface-2:#fbfcfe;
  --ink:#0f1729; --ink-2:#283248; --muted:#616c80; --faint:#8b94a6;
  --line:#e6e9f1; --line-2:#eef1f7;
  --brand:#059669; --brand-2:#10b981; --brand-ink:#065f46;
  --accent:#059669; --accent-2:#34d399; --accent-soft:#ecfdf5; --accent-ink:#065f46;
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(15,23,41,.06), 0 1px 3px rgba(15,23,41,.05);
  --shadow:0 10px 30px -12px rgba(15,23,41,.18);
  --shadow-lg:0 28px 60px -24px rgba(15,23,41,.32);
  --ring:0 0 0 4px rgba(5,150,105,.16);
  --maxw:1180px;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Lexend","Inter",ui-sans-serif,system-ui,sans-serif;
}

/* color de cada curso/area */
.c-emerald{--accent:#059669;--accent-2:#34d399;--accent-soft:#ecfdf5;--accent-ink:#065f46}
.c-amber{--accent:#d97706;--accent-2:#fbbf24;--accent-soft:#fffbeb;--accent-ink:#92400e}
.c-sky{--accent:#0284c7;--accent-2:#38bdf8;--accent-soft:#f0f9ff;--accent-ink:#075985}
.c-indigo{--accent:#4f46e5;--accent-2:#818cf8;--accent-soft:#eef2ff;--accent-ink:#3730a3}
.c-violet{--accent:#7c3aed;--accent-2:#a78bfa;--accent-soft:#f5f3ff;--accent-ink:#5b21b6}
.c-rose{--accent:#e11d48;--accent-2:#fb7185;--accent-soft:#fff1f2;--accent-ink:#9f1239}
.c-teal{--accent:#0d9488;--accent-2:#2dd4bf;--accent-soft:#f0fdfa;--accent-ink:#115e59}
.c-cyan{--accent:#0891b2;--accent-2:#22d3ee;--accent-soft:#ecfeff;--accent-ink:#155e75}
.c-fuchsia{--accent:#c026d3;--accent-2:#e879f9;--accent-soft:#fdf4ff;--accent-ink:#86198f}
.c-lime{--accent:#65a30d;--accent-2:#a3e635;--accent-soft:#f7fee7;--accent-ink:#3f6212}
.c-slate{--accent:#475569;--accent-2:#94a3b8;--accent-soft:#f3f5f9;--accent-ink:#1e293b}
.c-orange{--accent:#ea580c;--accent-2:#fb923c;--accent-soft:#fff7ed;--accent-ink:#9a3412}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display);line-height:1.18;letter-spacing:-.02em;margin:0 0 .4em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.section{padding:54px 0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:12px;background:#fff;padding:8px 14px;border-radius:8px;z-index:200}

/* ---------------- Top bar ---------------- */
.topbar{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:var(--maxw);margin-inline:auto;padding:12px 22px;
  display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.12rem;flex-shrink:0}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:1.05rem;
  box-shadow:0 6px 16px -6px rgba(5,150,105,.7)}
.brand-text strong{color:var(--brand)}
.topbar-search{position:relative;flex:1;max-width:520px;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  box-shadow:var(--shadow-sm);transition:.2s}
.topbar-search:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.topbar-search>i{color:var(--faint)}
.topbar-search input{border:0;background:none;outline:none;flex:1;font:inherit;color:var(--ink)}
.topbar-search kbd{font-family:var(--sans);font-size:.72rem;color:var(--muted);background:var(--line-2);
  border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.topbar-nav{display:flex;align-items:center;gap:20px;margin-left:auto;flex-shrink:0}
.topbar-nav a{font-weight:600;color:var(--ink-2);font-size:.95rem;padding:4px 2px;border-bottom:2px solid transparent}
.topbar-nav a:hover{color:var(--brand)}
.topbar-nav a.is-active{color:var(--brand);border-color:var(--brand)}
.nav-progress{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);
  background:var(--accent-soft);padding:5px 11px;border-radius:999px}
.nav-progress i{color:var(--brand)}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;width:42px;height:42px;
  border-radius:12px;color:var(--ink);font-size:1rem;cursor:pointer}

/* ---------------- Resultados de búsqueda ---------------- */
.search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;
  max-height:60vh;overflow:auto;z-index:120}
.search-results .sr-item{display:flex;flex-direction:column;gap:2px;padding:10px 13px;border-radius:11px}
.search-results .sr-item:hover,.search-results .sr-item.is-active{background:var(--accent-soft)}
.search-results .sr-item strong{font-size:.96rem}
.search-results .sr-item small{color:var(--muted);font-size:.82rem}
.search-results .sr-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.search-results .sr-empty{padding:18px;text-align:center;color:var(--muted)}
.search-results .sr-ai-loading,.search-results .sr-ai-error{padding:18px;text-align:center;color:var(--muted);font-size:.95rem}
.search-results .sr-ai-error{color:#b91c1c}
.search-results .sr-ai-answer{padding:6px 4px}
.search-results .sr-ai-head{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;color:var(--accent);margin-bottom:10px}
.search-results .sr-ai-body{color:var(--ink-2);font-size:.95rem;line-height:1.55}
.search-results .sr-ai-body a{color:var(--accent);font-weight:600;text-decoration:underline}
.search-results .sr-ai-sources{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.search-results .sr-ai-sources a{display:inline-block;margin:4px 8px 0 0;color:var(--accent);font-weight:600}
mark{background:var(--accent-soft);color:var(--accent-ink);padding:0 2px;border-radius:4px}

/* ---------------- Hero ---------------- */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(1200px 520px at 80% -10%,rgba(16,185,129,.16),transparent 60%),
             radial-gradient(900px 500px at 0% 0%,rgba(56,189,248,.14),transparent 55%),
             linear-gradient(180deg,#0b1220 0%,#0d1830 58%,#0b1424 100%);
  color:#eaf0f7;padding:78px 0 92px}
.hero-glow{position:absolute;inset:0;
  background:radial-gradient(600px 300px at 70% 110%,rgba(124,58,237,.22),transparent 60%);
  pointer-events:none}
.hero-inner{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:22px;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;
  color:#a7f3d0;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.28);
  padding:7px 15px;border-radius:999px}
.hero-title{font-size:clamp(2.3rem,5.4vw,4rem);margin:22px 0 0;color:#fff;font-weight:800}
.hero-title .grad{background:linear-gradient(100deg,#34d399,#38bdf8 60%,#a78bfa);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:640px;margin:20px auto 0;color:#b9c4d4;font-size:1.12rem;line-height:1.6}
.hero-search-wrap{max-width:660px;margin:34px auto 0}
.hero-search-modes{display:inline-flex;gap:8px;margin-bottom:12px;background:rgba(255,255,255,.08);padding:5px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.hero-mode{border:0;background:transparent;color:#cbd5e1;font:inherit;font-size:.84rem;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.hero-mode.is-active{background:#fff;color:var(--ink);box-shadow:0 8px 24px -12px rgba(0,0,0,.45)}
.hero-search{position:relative;display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 24px 50px -18px rgba(0,0,0,.55)}
.hero-search>i{color:var(--faint)}
.hero-search input{flex:1;border:0;outline:none;font:inherit;font-size:1.02rem;color:var(--ink);min-width:0}
.hero-search-btn{flex-shrink:0;border:0;cursor:pointer;font:inherit;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#10b981,#059669);padding:13px 26px;border-radius:999px;
  box-shadow:0 10px 22px -10px rgba(5,150,105,.9)}
.hero-search-btn:hover{filter:brightness(1.05)}
.hero-search .search-results{text-align:left}
.hero-quick{margin-top:18px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center;font-size:.9rem}
.hero-quick>span{color:#94a3b8}
.hero-quick a{color:#dbe6f2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  padding:6px 13px;border-radius:999px}
.hero-quick a:hover{background:rgba(255,255,255,.16)}

/* ---------------- Encabezados de sección ---------------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}
.section-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.section-head h2{font-size:clamp(1.6rem,3vw,2.15rem);margin:0}
.section-head p{margin:8px 0 0;color:var(--muted);max-width:60ch}

/* ---------------- Roles ---------------- */
.role-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.role-tab{cursor:pointer;font:inherit;font-weight:600;font-size:.93rem;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 18px;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.role-tab i{color:var(--faint)}
.role-tab:hover{border-color:var(--brand);color:var(--brand)}
.role-tab.is-active{background:linear-gradient(135deg,#10b981,#059669);border-color:transparent;color:#fff}
.role-tab.is-active i{color:#fff}
.role-panel{display:none}
.role-panel.is-active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.role-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.role-cat{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:15px;padding:15px 16px;box-shadow:var(--shadow-sm);transition:.2s}
.role-cat:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.rc-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;color:var(--accent);background:var(--accent-soft);flex-shrink:0}
.rc-body{flex:1}.rc-body strong{display:block;font-family:var(--display);font-size:1.02rem}
.rc-body small{color:var(--muted)}
.rc-go{color:var(--faint);transition:.2s}.role-cat:hover .rc-go{color:var(--accent);transform:translateX(3px)}

/* ---------------- Cursos ---------------- */
.course-group{margin-bottom:34px}
.course-group.advanced{margin-top:8px;padding-top:30px;border-top:1px dashed var(--line)}
.group-title{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:1.05rem;color:var(--ink)}
.group-title small{color:var(--faint);font-weight:500;font-family:var(--sans);font-size:.86rem}
.group-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--brand-ink);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  padding:7px 15px;border-radius:999px}
.group-pill i{color:var(--brand)}
.group-pill.adv{color:#5b21b6;background:#f5f3ff;border-color:#ddd6fe}
.group-pill.adv i{color:#7c3aed}
.course-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.course-card{grid-column:span 4;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:.22s;position:relative;overflow:hidden}
.course-card--featured{grid-column:span 12;padding:28px 32px;
  background:linear-gradient(135deg,var(--surface) 0%,color-mix(in srgb,var(--accent) 6%,var(--surface)) 100%)}
.course-card--featured h3{font-size:1.35rem}
.course-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.cc-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:1.4rem;color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 10px 22px -10px var(--accent)}
.course-card h3{font-size:1.2rem;margin:0 0 6px}
.cc-blurb{color:var(--muted);font-size:.92rem;margin:0 0 18px;flex:1}
.cc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-2);padding-top:13px;font-size:.83rem}
.cc-role{color:var(--accent-ink);font-weight:600}.cc-role i{color:var(--accent)}
.cc-count{color:var(--muted)}

/* anillo de progreso */
.cc-ring{position:relative;width:46px;height:46px;display:grid;place-items:center}
.cc-ring.big{width:96px;height:96px}
.cc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cc-ring circle{fill:none;stroke-width:3.4}
.cc-ring .ring-bg{stroke:var(--line)}
.cc-ring .ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:97.4;transition:stroke-dashoffset .6s}
.cc-ring em{position:absolute;font-style:normal;font-weight:700;font-size:.66rem;color:var(--accent-ink)}
.cc-ring.big em{font-size:1.1rem;font-family:var(--display)}

/* ---------------- Tareas ---------------- */
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:13px}
.task-chip{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);font-weight:600;transition:.18s}
.task-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand)}
.task-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--brand);background:var(--accent-soft);flex-shrink:0}
.task-chip>span:not(.task-ic){flex:1;font-size:.93rem}
.task-go{color:var(--faint);font-size:.8rem}.task-chip:hover .task-go{color:var(--brand)}

/* ---------------- CTA ---------------- */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0d1830,#10243f);color:#fff;border-radius:var(--radius-lg);padding:38px 40px;margin-bottom:10px;
  background-image:linear-gradient(120deg,#0d1830,#10243f),radial-gradient(500px 200px at 90% 0%,rgba(16,185,129,.25),transparent)}
.cta-band h2{color:#fff;margin:0 0 6px}.cta-band p{margin:0;color:#bcc8d8}
.btn-primary{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#10b981,#059669);padding:14px 26px;border-radius:999px;
  box-shadow:0 14px 28px -12px rgba(5,150,105,.9);transition:.18s}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ---------------- Migas de pan ---------------- */
.crumbs{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted);padding-top:22px}
.crumbs a:hover{color:var(--brand)}.crumbs i{font-size:.66rem;color:var(--faint)}
.crumbs span{color:var(--ink-2);font-weight:600}

/* ---------------- Hero de curso ---------------- */
.course-hero{margin-top:16px;background:
   radial-gradient(700px 320px at 88% -30%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),
   linear-gradient(180deg,#0c1424,#0d1830);color:#e8eef6;padding:46px 0 50px;position:relative;overflow:hidden}
.course-hero-inner{display:flex;justify-content:space-between;gap:34px;align-items:center;flex-wrap:wrap}
.ch-left{display:flex;gap:22px;align-items:flex-start}
.ch-icon{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;font-size:1.9rem;color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 16px 34px -14px var(--accent);flex-shrink:0}
.ch-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--accent-2)}
.course-hero h1{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin:8px 0 6px}
.course-hero p{color:#b8c4d4;margin:0;max-width:54ch}
.ch-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:.9rem;color:#cdd8e6}
.ch-stats i{color:var(--accent-2);margin-right:5px}
.ch-ring{display:flex;flex-direction:column;align-items:center;gap:16px}
.ch-ring .cc-ring .ring-bg{stroke:rgba(255,255,255,.18)}
.ch-ring .cc-ring .ring-fg{stroke:var(--accent-2)}
.ch-ring .cc-ring em{color:#fff}
.btn-on-color{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--accent-ink);
  background:#fff;padding:12px 22px;border-radius:999px;box-shadow:0 12px 26px -12px rgba(0,0,0,.5);transition:.18s}
.btn-on-color:hover{transform:translateY(-2px)}

/* ---------------- Curriculum ---------------- */
.curriculum{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:c}
.curr-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);transition:.18s}
.curr-item:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.curr-link{display:flex;align-items:center;gap:18px;padding:17px 20px}
.curr-num{width:42px;height:42px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;position:relative;
  font-family:var(--display);font-weight:700;color:var(--accent);background:var(--accent-soft)}
.curr-num i{position:absolute;opacity:0;color:#fff;font-size:.9rem}
.curr-item.done .curr-num{background:var(--accent);color:#fff}
.curr-item.done .curr-num .n{opacity:0}.curr-item.done .curr-num i{opacity:1}
.curr-body{flex:1;min-width:0}
.curr-body strong{font-family:var(--display);font-size:1.06rem;display:block}
.curr-body small{color:var(--muted);font-size:.88rem;display:block;margin:3px 0 9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.curr-badges{display:flex;flex-wrap:wrap;gap:8px}
.badge-soft{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--ink-2);
  background:var(--line-2);border-radius:999px;padding:4px 11px}
.badge-soft i{color:var(--accent)}
.curr-go{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--accent);
  background:var(--accent-soft);flex-shrink:0;transition:.2s}
.curr-item:hover .curr-go{background:var(--accent);color:#fff;transform:translateX(2px)}

/* ---------------- Estado vacío ---------------- */
.empty-state{text-align:center;padding:60px 20px}
.empty-state i{font-size:2.4rem;color:var(--faint)}
.empty-state h1{margin:16px 0 6px}.empty-state p{color:var(--muted);margin:0 0 22px}

/* ---------------- Footer ---------------- */
.site-footer{margin-top:40px;background:#0c1424;color:#aeb9c9;padding:42px 0}
.site-footer-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:22px;
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
.foot-brand{display:flex;gap:14px;align-items:center;max-width:430px}
.foot-brand strong{color:#fff;font-family:var(--display);font-size:1.05rem}
.foot-brand p{margin:3px 0 0;font-size:.9rem;color:#90a0b4}
.foot-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:.88rem}
.foot-meta i{color:#34d399;margin-right:6px}

/* ---------------- Volver arriba ---------------- */
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:1rem;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;z-index:80}
.to-top.show{opacity:1;pointer-events:auto;transform:none}

/* ================= Vista de lección ================= */
.lesson-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start;padding:26px 22px 60px}
.lesson-aside{position:sticky;top:84px}
.aside-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm)}
.aside-course{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;background:var(--accent-soft);margin-bottom:12px}
.ac-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));flex-shrink:0}
.aside-course small{color:var(--accent-ink);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.aside-course strong{display:block;font-family:var(--display);font-size:.96rem;color:var(--ink);line-height:1.2}
.aside-progress{display:flex;align-items:center;gap:9px;padding:0 6px 12px}
.ap-bar{flex:1;height:7px;border-radius:999px;background:var(--line-2);overflow:hidden}
.ap-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .5s}
.aside-progress>span{font-size:.78rem;font-weight:700;color:var(--accent-ink)}
.aside-nav{display:flex;flex-direction:column;gap:1px;max-height:62vh;overflow:auto;margin:0 -4px;padding:0 4px}
.aside-link{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;font-size:.9rem;color:var(--ink-2);font-weight:500}
.aside-link:hover{background:var(--line-2)}
.aside-link.is-current{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.al-state{width:23px;height:23px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;position:relative;
  font-size:.72rem;font-weight:700;color:var(--muted);background:var(--line-2)}
.al-state i{position:absolute;opacity:0;color:#fff;font-size:.66rem}
.aside-link.is-current .al-state{background:var(--accent);color:#fff}
.aside-link.done .al-state{background:var(--accent);color:#fff}
.aside-link.done .al-state em{opacity:0}.aside-link.done .al-state i{opacity:1}
.al-title{flex:1;line-height:1.3}

/* contenido central */
.lesson-main{min-width:0;max-width:860px;margin-inline:auto;width:100%}
.lesson-head{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:30px}
.lesson-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--accent)}
.lesson-head h1{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:12px 0 14px}
.lesson-badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.complete-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:inherit;font-weight:700;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  padding:11px 20px;border-radius:999px;transition:.18s}
.complete-btn:hover{box-shadow:var(--ring)}
.complete-btn .fa-circle-check{display:none}
.complete-btn.is-done{background:var(--accent);border-color:var(--accent);color:#fff}
.complete-btn.is-done .fa-circle{display:none}.complete-btn.is-done .fa-circle-check{display:inline}

.toc-mobile{display:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 16px;margin-bottom:22px}
.toc-mobile summary{cursor:pointer;font-weight:700;padding:10px 0;list-style:none}
.toc-mobile summary i{color:var(--accent);margin-right:8px}
.toc-mobile ol{margin:4px 0 12px;padding-left:20px;color:var(--ink-2)}
.toc-mobile a{font-size:.92rem}.toc-mobile a:hover{color:var(--brand)}

/* Índice como panel lateral (oculto por defecto) */
.toc-fab{position:fixed;right:22px;bottom:80px;z-index:82;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font:inherit;font-family:var(--display);font-weight:700;font-size:.92rem;color:#fff;border:0;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));padding:12px 18px;border-radius:999px;
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 75%,transparent);transition:.18s}
.toc-fab:hover{transform:translateY(-2px);filter:brightness(1.04)}
.toc-backdrop{position:fixed;inset:0;background:rgba(15,23,41,.42);backdrop-filter:blur(2px);
  z-index:108;opacity:0;pointer-events:none;transition:opacity .25s}
body.toc-open .toc-backdrop{opacity:1;pointer-events:auto}
.lesson-toc{position:fixed;top:0;right:0;height:100vh;width:340px;max-width:88vw;background:#fff;
  border-left:1px solid var(--line);box-shadow:var(--shadow-lg);transform:translateX(102%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:110;overflow:auto;overscroll-behavior:contain}
body.toc-open .lesson-toc{transform:none}
.lesson-toc .toc-card{border:0;padding:20px}
.toc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.toc-title{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.toc-title i{color:var(--accent)}
.toc-close{width:36px;height:36px;flex-shrink:0;border:1px solid var(--line);background:#fff;border-radius:10px;
  cursor:pointer;color:var(--muted);font-size:1rem;display:grid;place-items:center;transition:.15s}
.toc-close:hover{background:var(--line-2);color:var(--ink)}
.toc-nav{display:flex;flex-direction:column;gap:1px}
.toc-nav a{font-size:.9rem;color:var(--ink-2);padding:9px 12px;border-radius:9px;border-left:2px solid transparent;line-height:1.4}
.toc-nav a:hover{background:var(--line-2);color:var(--ink)}
.toc-nav a.is-active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;border-color:var(--accent)}

/* paginador */
.lesson-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.pager{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--line);
  border-radius:15px;padding:16px 20px;box-shadow:var(--shadow-sm);transition:.18s}
.pager:hover{box-shadow:var(--shadow);border-color:var(--brand);transform:translateY(-2px)}
.pager small{color:var(--muted);font-size:.8rem}.pager strong{font-family:var(--display);font-size:1rem}
.pager.next{text-align:right}.pager i{color:var(--accent)}

/* videos */
.lesson-videos{margin:0 0 28px}
.lesson-content>.lesson-videos:first-child{margin-top:0}
.lv-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.lv-head i{font-size:1.5rem;color:var(--accent)}.lv-head h2{margin:0;font-size:1.35rem}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}
.video-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.18s;cursor:pointer}
.video-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.video-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.video-thumb{position:relative;width:100%;aspect-ratio:16/9;display:grid;place-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,#000),var(--accent-ink));color:#fff;font-size:1.4rem}
.video-thumb .video-num{position:absolute;top:10px;left:12px;font-family:var(--display);font-weight:700;opacity:.6;font-size:.9rem}
.video-thumb i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(3px)}
.video-meta{padding:13px 15px}.video-meta h4{margin:0 0 3px;font-size:.98rem}
.video-meta p{margin:0;color:var(--muted);font-size:.85rem}
.video-card.unavailable{opacity:.65;cursor:not-allowed}
.video-card.unavailable .video-thumb{background:var(--line);color:var(--faint)}
.lv-note{margin-top:14px;font-size:.84rem;color:var(--muted)}
.lv-note i{color:var(--accent)}.lv-note code{background:var(--line-2);padding:1px 6px;border-radius:5px}

/* modal de video */
body.video-modal-open{overflow:hidden}
.video-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px}
.video-modal[hidden]{display:none!important}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.72);backdrop-filter:blur(2px)}
.video-modal-dialog{position:relative;z-index:1;width:min(920px,100%);background:var(--surface);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.video-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--line-2)}
.video-modal-head h3{margin:0;font-size:1.05rem;font-family:var(--display)}
.video-modal-close{border:0;background:transparent;width:36px;height:36px;border-radius:10px;cursor:pointer;color:var(--muted);font-size:1.1rem}
.video-modal-close:hover{background:var(--line);color:var(--ink)}
.video-modal-body{padding:0;background:#000}
.video-modal-player{width:100%;display:block;max-height:min(70vh,520px);background:#000}
.video-modal-error{margin:0;padding:18px 20px;background:var(--surface);color:var(--muted);font-size:.92rem}
.video-modal-error i{color:var(--accent);margin-right:6px}
.video-modal-error code{background:var(--line-2);padding:1px 6px;border-radius:5px}

/* ================= Contenido extraído del ERP ================= */
.erp-content{font-size:1.02rem;color:var(--ink-2)}
.erp-content [id],.erp-content .ayuda-section{scroll-margin-top:88px}
.erp-content p{margin:0 0 14px}
.erp-content h2,.erp-content h3,.erp-content h4,.erp-content h5{color:var(--ink)}
.erp-content h4,.erp-content h5{font-size:1.04rem;margin:20px 0 8px;font-family:var(--display)}
.erp-content ul,.erp-content ol{margin:0 0 14px;padding-left:24px}
.erp-content li{margin:5px 0}
.erp-content strong{color:var(--ink);font-weight:700}
.erp-content hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.erp-content a:not(.ref-link){color:var(--accent-ink);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.ref-link{color:var(--accent-ink);font-weight:600}

/* neutralizar grid de bootstrap */
.erp-content .row{display:block;margin:0}
.erp-content [class*="col-"]{width:auto;max-width:100%;padding:0;min-width:0}
.erp-content .ayuda-section{margin-bottom:6px}
.erp-content .col-md-12:empty,.erp-content .row:empty{display:none}

/* tarjetas -> paneles de sección */
.erp-content .card{--cc:var(--accent);background:#fff;border:1px solid var(--line);border-left:4px solid var(--cc);
  border-radius:14px;box-shadow:var(--shadow-sm);margin:0 0 20px;overflow:hidden}
.erp-content .card-primary{--cc:var(--accent)}
.erp-content .card-success{--cc:#059669}
.erp-content .card-info{--cc:#0284c7}
.erp-content .card-warning{--cc:#d97706}
.erp-content .card-danger{--cc:#e11d48}
.erp-content .card-secondary{--cc:#64748b}
.erp-content .card-header{padding:14px 20px;background:color-mix(in srgb,var(--cc) 7%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--cc) 16%,var(--line-2))}
.erp-content .card-title{margin:0;font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:9px}
.erp-content .card-title i{color:var(--cc)}
.erp-content .card-body{padding:18px 20px}
.erp-content .card-body>:last-child{margin-bottom:0}

/* alertas / callouts */
.erp-content .alert{border-radius:13px;padding:15px 17px;border:1px solid;margin:0 0 18px;display:block}
.erp-content .alert>:last-child{margin-bottom:0}
.erp-content .alert h5{margin:0 0 7px;display:flex;align-items:center;gap:8px}
.erp-content .alert-info{background:#f0f9ff;border-color:#bae6fd;color:#0c4a6e}
.erp-content .alert-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.erp-content .alert-warning{background:#fffbeb;border-color:#fde68a;color:#854d0e}
.erp-content .alert-danger{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.erp-content .alert-secondary,.erp-content .alert-light{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}

/* tablas */
.erp-content table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.92rem;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.erp-content thead th{background:var(--surface-2);text-align:left;font-family:var(--display);
  color:var(--ink);font-weight:700;padding:11px 13px;border-bottom:2px solid var(--line)}
.erp-content td,.erp-content th{padding:10px 13px;vertical-align:top}
.erp-content tbody tr+tr td{border-top:1px solid var(--line-2)}
.erp-content .table-bordered td,.erp-content .table-bordered th{border:1px solid var(--line)}
.erp-content tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,#fff)}

/* badges / etiquetas */
.erp-content .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;line-height:1.5;color:#fff;white-space:nowrap;vertical-align:middle}
.erp-content .badge-info{background:#0284c7}.erp-content .badge-success{background:#059669}
.erp-content .badge-danger{background:#e11d48}.erp-content .badge-warning{background:#d97706}
.erp-content .badge-secondary{background:#64748b}.erp-content .badge-primary{background:var(--accent)}
.erp-content .badge-light{background:var(--line-2);color:var(--ink-2)}
.erp-content .badge-dark{background:#1e293b}

/* listas de definición */
.erp-content dl{margin:0 0 14px}
.erp-content dt{font-weight:700;color:var(--ink);font-family:var(--display);margin-top:12px}
.erp-content dd{margin:2px 0 0;color:var(--muted)}

/* código */
.erp-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--line-2);color:var(--accent-ink);padding:2px 7px;border-radius:6px}
.erp-content pre{background:#0f1729;color:#e2e8f0;padding:16px 18px;border-radius:12px;overflow:auto;font-size:.86rem;margin:0 0 16px}
.erp-content pre code{background:none;color:inherit;padding:0}

/* botones inertes dentro del contenido */
.erp-content .btn:not(.btn-link){display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;
  background:var(--line-2);color:var(--ink-2);padding:5px 13px;border-radius:9px;border:1px solid var(--line)}

/* acordeones (FAQ y similares) */
.erp-content .collapse{display:none}
.erp-content .collapse.show{display:block}
.erp-content [data-toggle="collapse"],.erp-content [data-bs-toggle="collapse"]{position:relative}
.erp-content .card-header h5{margin:0}
.erp-content .btn-link{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;font:inherit;font-family:var(--display);font-weight:600;font-size:1rem;text-align:left;
  color:var(--ink);background:none;border:0;padding:14px 18px;text-decoration:none}
.erp-content .btn-link::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:.8rem;color:var(--accent);transition:transform .25s;flex-shrink:0}
.erp-content .btn-link.collapsed::after{transform:rotate(-90deg)}
.erp-content .accordion>.card,.erp-content [id^="accordion"]>.card,.erp-content [id^="faq"]>.card{
  margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.erp-content .accordion,.erp-content [id^="accordion"],.erp-content [id^="faq"]{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin:0 0 16px}
.erp-content .accordion .card-header,.erp-content [id^="accordion"] .card-header,.erp-content [id^="faq"] .card-header{
  padding:0;background:#fff;border-bottom:0}
.erp-content .accordion .card-body,.erp-content [id^="faq"] .card-body{background:var(--surface-2);color:var(--muted);padding:4px 18px 16px}

/* iconos sueltos del contenido */
.erp-content .fa,.erp-content .fas,.erp-content .far,.erp-content .fa-solid{color:var(--accent)}
.erp-content .alert .fa,.erp-content .alert i,.erp-content .badge i{color:inherit}
.erp-content .extract-error{color:var(--muted);font-style:italic}

/* ================= Responsive ================= */
@media (max-width:1040px){
  .lesson-layout{grid-template-columns:minmax(0,1fr)}
  .lesson-aside{display:none}
  .course-card{grid-column:span 6}
  .course-card--featured{grid-column:span 12}
}
@media (max-width:760px){
  .topbar-nav{display:none}
  .topbar-search{display:none}
  .nav-toggle{display:inline-grid;place-items:center;margin-left:auto}
  body.search-open .topbar-search{display:flex;position:fixed;top:70px;left:14px;right:14px;max-width:none;z-index:95}
  .section{padding:40px 0}
  .section-head{flex-direction:column;align-items:flex-start}
  .hero{padding:56px 0 64px}
  .hero-search{flex-wrap:wrap;border-radius:20px;padding:14px}
  .hero-search input{flex:1 1 100%;padding:6px 4px}
  .hero-search-btn{flex:1 1 100%;justify-content:center}
  .course-hero-inner{flex-direction:column;align-items:flex-start}
  .ch-ring{flex-direction:row;align-self:stretch;justify-content:space-between;width:100%}
  .lesson-pager{grid-template-columns:1fr}
  .cta-band{padding:28px 24px}
  .course-card{grid-column:span 12}
  .course-card--featured{padding:22px}
}
@media (max-width:460px){
  .ch-left{flex-direction:column}
  .hero-quick{display:none}
  .hero-search-modes{display:flex;flex-wrap:wrap;justify-content:center;border-radius:16px}
}

/* ---------------- Asistente IA — panel lateral derecho ---------------- */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:82;display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  font:inherit;font-weight:700;color:#fff;background:linear-gradient(135deg,#10b981,#059669);padding:14px 18px;border-radius:999px;
  box-shadow:0 16px 40px -14px rgba(5,150,105,.75);transition:transform .2s, box-shadow .2s, opacity .2s}
.ai-fab:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(5,150,105,.85)}
.ai-fab span{font-size:.92rem}
body.ai-open .ai-fab{opacity:0;pointer-events:none;transform:translateY(8px) scale(.94)}
.ai-backdrop{position:fixed;inset:0;background:rgba(15,23,41,.45);backdrop-filter:blur(3px);
  z-index:118;opacity:0;pointer-events:none;transition:opacity .25s}
body.ai-open .ai-backdrop{opacity:1;pointer-events:auto}
body.ai-open{overflow:hidden}
.ai-sidebar{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(440px,100vw);background:#fff;
  border-left:1px solid var(--line);box-shadow:var(--shadow-lg);transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:120;display:flex;flex-direction:column;overflow:hidden}
body.ai-open .ai-sidebar{transform:none}
.ai-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;flex-shrink:0;
  background:linear-gradient(135deg,#ecfdf5,#f0f9ff);border-bottom:1px solid var(--line)}
.ai-panel-head strong{display:block;font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.ai-panel-head small{display:block;color:var(--muted);font-size:.8rem;margin-top:3px;line-height:1.35}
.ai-panel-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ai-panel-clear,.ai-panel-close{border:0;background:#fff;width:36px;height:36px;border-radius:10px;color:var(--muted);cursor:pointer}
.ai-panel-clear:hover{color:#b91c1c;background:#fff1f2}
.ai-panel-close:hover{color:var(--ink);background:var(--line-2)}
.ai-log{flex:1;overflow:auto;padding:18px 20px;min-height:0;background:var(--surface-2);overscroll-behavior:contain}
.ai-msg{margin-bottom:14px}
.ai-msg-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-bottom:4px}
.ai-msg-user .ai-msg-body{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:.94rem}
.ai-msg-assistant .ai-msg-body{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:.94rem;line-height:1.55}
.ai-msg-assistant .ai-msg-body a{color:var(--accent);font-weight:600}
.ai-msg-error .ai-msg-body{border-color:#fecdd3;background:#fff1f2;color:#9f1239}
.ai-sources{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:.78rem;color:var(--muted)}
.ai-sources a{display:inline-block;margin:4px 8px 0 0;color:var(--accent);font-weight:600}
.ai-muted{color:var(--muted);font-size:.86rem}
.ai-panel-foot{padding:14px 18px 18px;border-top:1px solid var(--line);background:#fff;flex-shrink:0}
.ai-panel-foot textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;
  resize:none;outline:none;min-height:72px}
.ai-panel-foot textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
.ai-foot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.ai-status{font-size:.78rem;color:var(--muted);min-height:1.2em}
.ai-send{border:0;cursor:pointer;font:inherit;font-weight:700;color:#fff;background:var(--brand);
  padding:10px 18px;border-radius:10px}
.ai-send:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:760px){
  .ai-fab{right:14px;bottom:14px}
  .ai-fab span{display:none}
  .ai-fab{padding:14px 16px;border-radius:16px}
  .to-top{bottom:78px}
  .ai-sidebar{width:100vw;max-width:100vw}
}