:root{
  --bg:#f4f5ef; --surface:#ffffff; --surface-2:#eceee3; --ink:#1f241f; --muted:#5c6358;
  --saffron:#c96a16; --saffron-ink:#8a4a0f; --pine:#2f5d52; --pine-tint:#e4ede9;
  --line:#dcded2; --line-strong:#c7cabb; --bad:#a3402e; --bad-tint:#f6e6e1; --good:#2f6d4f; --good-tint:#e4efe6;
  --shadow:0 1px 2px rgba(31,36,31,.06), 0 8px 24px -12px rgba(31,36,31,.18);
  --radius:14px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#15181a; --surface:#1b1f1c; --surface-2:#232823; --ink:#ece8dd; --muted:#a6ac9d;
  --saffron:#e2954a; --saffron-ink:#f0b074; --pine:#5fa192; --pine-tint:#1d2c27;
  --line:#2e332c; --line-strong:#3c4238; --bad:#d97a63; --bad-tint:#2c1f1b; --good:#6fbf93; --good-tint:#1c2a21;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15181a; --surface:#1b1f1c; --surface-2:#232823; --ink:#ece8dd; --muted:#a6ac9d;
    --saffron:#e2954a; --saffron-ink:#f0b074; --pine:#5fa192; --pine-tint:#1d2c27;
    --line:#2e332c; --line-strong:#3c4238; --bad:#d97a63; --bad-tint:#2c1f1b; --good:#6fbf93; --good-tint:#1c2a21;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px; line-height:1.6;
}
h1,h2,h3,h4{font-family:"Spectral",Georgia,serif; font-weight:600; color:var(--ink); margin:0}
a{color:var(--pine)}
.eyebrow{font-family:"Karla",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--saffron-ink)}

.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px; height:60px; padding:0 16px; background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-brand{display:flex; align-items:center; min-width:0; margin-right:auto}
.topbar-brand img{height:32px; width:auto; max-width:100%; display:block}
.topbar-brand img.lightonly{display:block}
.topbar-brand img.darkonly{display:none}
:root[data-theme="dark"] .topbar-brand img.lightonly{display:none}
:root[data-theme="dark"] .topbar-brand img.darkonly{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topbar-brand img.lightonly{display:none}
  :root:not([data-theme="light"]) .topbar-brand img.darkonly{display:block}
}
.icon-btn{border:1px solid var(--line); background:var(--surface-2); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex:0 0 auto; padding:0}
.icon-btn:hover{border-color:var(--line-strong)}
.icon-btn svg{width:18px; height:18px}
.icon-btn:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--pine); outline-offset:2px}

.shell{display:flex; min-height:calc(100vh - 60px)}
.sidebar{
  width:280px; flex:0 0 280px; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:60px; align-self:flex-start; height:calc(100vh - 60px); overflow-y:auto;
  padding:4px 0 20px 0; transition:margin-left .25s ease, transform .25s ease, visibility .25s;
}
.sidebar-head{padding:14px 20px 16px; border-bottom:1px solid var(--line)}
.nav-backdrop{display:none}
.brand-sub{font-size:.68rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}

.theme-toggle{border:1px solid var(--line); background:var(--surface-2); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex:0 0 auto; padding:0}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle svg{width:18px; height:18px}

.head-tools{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.lang-menu{position:relative}
.lang-btn,.lang-opt{display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:999px; font:700 .95rem/1 "Karla",sans-serif; letter-spacing:.02em; color:var(--ink); text-decoration:none; user-select:none}
.lang-btn{list-style:none; height:36px; cursor:pointer; background:var(--surface-2); border:1px solid var(--line)}
.lang-btn::-webkit-details-marker{display:none}
.lang-btn:hover{border-color:var(--line-strong)}
.lang-btn:focus-visible,.lang-opt:focus-visible{outline:2px solid var(--pine); outline-offset:2px}
.lang-flag{width:26px; height:26px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:block}
.lang-list{position:absolute; right:0; top:calc(100% + 6px); z-index:50; margin:0; padding:4px; list-style:none; min-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow)}
.lang-opt:hover{background:var(--surface-2)}
.lang-opt.is-current{opacity:.55}
:root[data-theme="dark"] .lang-btn{background:#0e100f; color:#fff; border-color:#2a2f2a}
:root[data-theme="dark"] .lang-btn:hover{border-color:#3c4238}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lang-btn{background:#0e100f; color:#fff; border-color:#2a2f2a}
}

.progress-wrap{margin-top:14px}
.progress-row{display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-bottom:6px}
.progress-bar{height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.progress-fill{height:100%; background:var(--saffron); border-radius:4px}

.nav{padding:10px 10px 10px}
.nav a{display:block; margin:1px 0; padding:9px 12px; border-radius:10px; font-weight:700; font-size:.88rem; color:var(--ink); text-decoration:none}
.nav a:hover{background:var(--surface-2)}
.nav a.active{background:var(--pine-tint); color:var(--pine)}
details.bloque{margin-bottom:2px}
details.bloque > summary{list-style:none; cursor:pointer; padding:9px 12px; border-radius:10px; display:flex; gap:10px; align-items:baseline; font-weight:700; font-size:.85rem; color:var(--ink)}
details.bloque > summary::-webkit-details-marker{display:none}
details.bloque > summary:hover{background:var(--surface-2)}
details.bloque > summary .num{color:var(--saffron-ink); font-family:"Spectral",serif}
.tema-list{list-style:none; margin:2px 0 8px; padding:0 0 0 14px; display:flex; flex-direction:column; gap:1px}
.tema-list a{display:flex; gap:8px; align-items:flex-start; padding:6px 10px; border-radius:8px; text-decoration:none; color:var(--muted); font-size:.82rem; font-weight:400}
.tema-list a:hover{background:var(--surface-2); color:var(--ink)}
.tema-list a.active{color:var(--pine); background:var(--pine-tint); font-weight:700}
.tema-list a.locked{opacity:.55}
.tema-check{flex:0 0 auto; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-strong); margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:.58rem; color:var(--surface)}
.tema-check.done{background:var(--good); border-color:var(--good)}
.tema-check.lock{border-color:var(--line-strong); color:var(--muted)}

.main{flex:1; min-width:0}
.view{padding:48px 32px 100px; max-width:760px; width:100%; margin:0 auto}
@media (min-width:901px){
  html.nav-closed .sidebar{margin-left:-280px; visibility:hidden}
}
@media (max-width:900px){
  .shell{display:block; min-height:0}
  .sidebar{position:fixed; top:60px; left:0; bottom:0; height:auto; align-self:stretch; width:min(86vw,320px); flex:none; z-index:35; transform:translateX(-104%); visibility:hidden; box-shadow:var(--shadow)}
  html.nav-open .sidebar{transform:none; visibility:visible}
  .nav-backdrop{position:fixed; inset:60px 0 0 0; z-index:30; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; display:block}
  html.nav-open .nav-backdrop{opacity:1; pointer-events:auto}
  html.nav-open body{overflow:hidden}
  .view{padding:28px 18px 80px}
}
@media (max-width:480px){
  .topbar{gap:8px; padding:0 10px}
  .topbar-brand img{height:26px}
}

.flash{padding:12px 16px; border-radius:10px; margin-bottom:20px; font-size:.9rem; font-weight:600}
.flash.info{background:var(--pine-tint); color:var(--pine)}
.flash.error{background:var(--bad-tint); color:var(--bad)}
.flash.success{background:var(--good-tint); color:var(--good)}

.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:10px; font-weight:700; font-size:.92rem; text-decoration:none; cursor:pointer; border:1px solid transparent; font-family:"Karla",sans-serif}
.btn-primary{background:var(--saffron); color:#241400}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:7px 13px; font-size:.82rem}

input[type=text], input[type=email], input[type=password], select, textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:inherit; font-size:.92rem; background:var(--bg); color:var(--ink);
}
label{display:block; font-size:.78rem; font-weight:700; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em}
.field{margin-bottom:16px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.auth-card{max-width:380px; margin:60px auto}
.auth-mark{display:block; width:110px; height:auto; margin:0 auto 14px}
.auth-mark.darkonly{display:none}
:root[data-theme="dark"] .auth-mark.lightonly{display:none}
:root[data-theme="dark"] .auth-mark.darkonly{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-mark.lightonly{display:none}
  :root:not([data-theme="light"]) .auth-mark.darkonly{display:block}
}

.hero{position:relative}
.hero::before{
  content:""; position:absolute; top:-20px; right:-40px; width:320px; height:320px;
  background:url('/assets/img/brand/logo-sanniasi-light-v2.png') no-repeat center/contain;
  opacity:.22; pointer-events:none; z-index:0;
}
:root[data-theme="dark"] .hero::before{background-image:url('/assets/img/brand/logo-sanniasi-dark.png'); opacity:.16}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero::before{background-image:url('/assets/img/brand/logo-sanniasi-dark.png'); opacity:.16}
}
.hero > *{position:relative; z-index:1}
@media (max-width:700px){ .hero::before{display:none} }

.badges-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:20px}
.badges-row img{height:84px}
.badges-row img.darkonly{display:none}
:root[data-theme="dark"] .badges-row img.lightonly{display:none}
:root[data-theme="dark"] .badges-row img.darkonly{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badges-row img.lightonly{display:none}
  :root:not([data-theme="light"]) .badges-row img.darkonly{display:block}
}

.stat-row{display:flex; gap:28px; flex-wrap:wrap; margin-bottom:8px}
.stat .n{font-family:"Spectral",serif; font-size:1.7rem; font-weight:700}
.stat .l{font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em}

.bloque-cards{display:grid; grid-template-columns:1fr; gap:14px; margin-top:30px}
.bcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); text-decoration:none; display:block; color:var(--ink)}
.bcard h3{font-size:1.1rem; margin:4px 0 6px}
.bcard .meta{font-size:.78rem; color:var(--muted)}
.bcard .mini-progress{height:4px; border-radius:3px; background:var(--surface-2); margin-top:12px; overflow:hidden}
.bcard .mini-progress i{display:block; height:100%; background:var(--pine)}

.content p{margin:0 0 16px; max-width:65ch}
.content p.etymology{margin:-10px 0 16px; font-size:.85rem; font-style:italic; color:var(--muted)}
.content h3{font-size:1.32rem; margin:34px 0 12px; color:var(--pine)}
.content h4{font-size:1.05rem; margin:20px 0 8px}
.content ul{margin:0 0 16px; padding-left:22px}
.content img{display:block; width:100%; max-width:560px; height:340px; object-fit:contain; background:#fff; padding:10px; border-radius:10px; margin:18px 0; border:1px solid var(--line); cursor:zoom-in}
.content img:focus-visible{outline:2px solid var(--pine); outline-offset:3px}
@media (max-width:700px){ .content img{height:240px} }

.lb{position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; padding-top:62px; background:rgba(12,14,12,.93)}
.lb[hidden]{display:none}
.lb-bar{position:absolute; top:12px; right:12px; z-index:2; display:flex; align-items:center; gap:4px; padding:5px; border-radius:12px; background:rgba(34,38,34,.9); border:1px solid rgba(255,255,255,.14)}
.lb-bar button{width:34px; height:34px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:8px; background:transparent; color:#f1ede2; cursor:pointer}
.lb-bar button:hover{background:rgba(255,255,255,.14)}
.lb-bar button:focus-visible{outline:2px solid #e2954a; outline-offset:1px}
.lb-bar svg{width:18px; height:18px}
.lb-zoom{min-width:48px; text-align:center; font-size:.78rem; color:#d8d4c8; font-variant-numeric:tabular-nums}
.lb-stage{flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; cursor:zoom-in}
.lb-stage.zoomed{cursor:grab}
.lb-stage.dragging{cursor:grabbing}
.lb-img{flex:none; max-width:none; background:#fff; border-radius:6px; user-select:none; -webkit-user-drag:none; transform-origin:center center; will-change:transform; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-cap{padding:10px 70px 16px; text-align:center; color:#d8d4c8; font-size:.85rem; min-height:1.4em}
body.lb-open{overflow:hidden}

.section-divider{border:none; border-top:1px solid var(--line); margin:40px 0 30px}
.section-label{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.section-label h2{font-size:1.2rem}

.ficha-card{border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:18px 20px; margin-bottom:14px}
.ficha-card h4{font-size:1.02rem; margin:0 0 12px}
.ficha-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px}
@media (max-width:640px){.ficha-grid{grid-template-columns:1fr}}
.ficha-field label{margin-bottom:4px}
.ficha-field textarea{min-height:46px; resize:vertical; font-size:.87rem}
.ficha-save-note{font-size:.72rem; color:var(--muted); margin-top:6px; min-height:14px}

.kq-item{border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--surface); overflow:hidden}
.kq-item summary{padding:12px 16px; cursor:pointer; font-weight:700; font-size:.9rem; list-style:none}
.kq-item summary::-webkit-details-marker{display:none}
.kq-item .a{padding:0 16px 14px; font-size:.9rem; color:var(--muted)}

.quiz-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:20px 22px; box-shadow:var(--shadow)}
.q-block{margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.q-block:last-of-type{border-bottom:none; margin-bottom:10px}
.q-text{font-weight:700; font-size:.94rem; margin-bottom:10px}
.opt{display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:.9rem}
.opt:hover{background:var(--surface-2)}
.opt input{margin-top:3px}
.opt.correct{background:var(--good-tint); color:var(--good)}
.opt.incorrect{background:var(--bad-tint); color:var(--bad)}
.q-explain{font-size:.82rem; color:var(--muted); margin-top:6px; display:none}
.q-explain.show{display:block}
.quiz-foot{display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap}
.quiz-result{font-weight:700; font-size:.94rem}
.quiz-result.pass{color:var(--good)}
.quiz-result.fail{color:var(--bad)}

.tema-nav{display:flex; justify-content:space-between; gap:12px; margin-top:44px}
.tema-nav a{flex:1; max-width:48%; border:1px solid var(--line); border-radius:12px; padding:13px 15px; text-decoration:none; color:var(--ink)}
.tema-nav .dir{font-size:.7rem; color:var(--muted); text-transform:uppercase}
.tema-nav .ttl{font-weight:700; font-size:.86rem; margin-top:2px}
.tema-nav .next{text-align:right; margin-left:auto}

table.admin-table{width:100%; border-collapse:collapse; font-size:.86rem}
table.admin-table th, table.admin-table td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
table.admin-table th{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em}
.pill{display:inline-block; padding:3px 9px; border-radius:20px; font-size:.74rem; font-weight:700}
.pill.pagado{background:var(--good-tint); color:var(--good)}
.pill.pendiente{background:var(--bad-tint); color:var(--bad)}
.lock-note{font-size:.84rem; color:var(--muted); background:var(--surface-2); border-radius:10px; padding:14px 16px; margin-top:14px}

.member-card{
  position:relative; max-width:420px; border-radius:18px; padding:24px 26px 20px;
  background:
    radial-gradient(circle at 92% -10%, rgba(201,106,22,.35), transparent 55%),
    radial-gradient(circle at -10% 110%, rgba(47,93,82,.5), transparent 55%),
    linear-gradient(135deg, #1b2420, #111613 70%);
  color:#f3efe4; box-shadow:0 10px 30px -12px rgba(0,0,0,.45); overflow:hidden;
}
.member-card::before{
  content:""; position:absolute; right:-40px; bottom:-30px; width:220px; height:220px; opacity:.10; pointer-events:none;
  background-image:url('/assets/img/brand/logo-sanniasi-dark.png'); background-repeat:no-repeat;
  background-position:center; background-size:contain;
}
.member-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; position:relative}
.member-card-brand{height:22px; width:auto; display:block}
.member-card-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#c9b89a}
.member-card-name{font-family:"Spectral",serif; font-size:1.5rem; font-weight:700; margin-bottom:22px; position:relative}
.member-card-bottom{display:flex; align-items:flex-end; gap:22px; position:relative}
.member-card-eyebrow{font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:#c9b89a; margin-bottom:3px}
.member-card-plan{font-weight:700; font-size:.92rem}
.member-card-since{font-weight:700; font-size:.92rem; font-variant-numeric:tabular-nums}
.member-card-status{margin-left:auto; align-self:center; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 11px; border-radius:20px}
.member-card-status.pagado{background:rgba(111,191,147,.18); color:#8fd6ac}
.member-card-status.pendiente{background:rgba(217,122,99,.18); color:#e8a08c}
@media (max-width:480px){ .member-card{max-width:100%} }

/* Cursos independientes */
.chip{display:inline-block; font:700 .68rem/1 "Karla",sans-serif; letter-spacing:.05em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); text-decoration:none; white-space:nowrap}
.chip-ok{background:var(--pine-tint); color:var(--pine); border-color:transparent}
.course-card.is-soon{opacity:.6; cursor:default}
.course-card.is-soon:hover{transform:none; box-shadow:none}
.nav-course{margin-top:12px !important; font-family:"Spectral",serif; font-size:.95rem !important; color:var(--pine) !important}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.pill{padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:700; font-size:.82rem; text-decoration:none}
.pill:hover{background:var(--surface-2)}
.pill.is-active{background:var(--pine-tint); color:var(--pine); border-color:transparent}
.mycourses{list-style:none; margin:0; padding:0}
.mycourses li{padding:9px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.mycourses li:last-child{border-bottom:0}

.temario-tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 18px}
.temario-tools input[type=search]{flex:1 1 240px; max-width:380px}
.tm-bloque{margin:6px 0 !important}
.tm-tema a{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}