:root {
    --bg:#f8fafc;--bg2:#ffffff;--bg3:#f1f5f9;--bg4:#e2e8f0;
    --border:#e2e8f0;--border2:#cbd5e1;
    --text:#0f172a;--text2:#475569;--text3:#94a3b8;
    --primary:#6366f1;--primary-bg:rgba(99,102,241,.08);--primary-lt:#818cf8;
    --success:#16a34a;--success-bg:rgba(22,163,74,.08);
    --danger:#dc2626;--danger-bg:rgba(220,38,38,.08);
    --warning:#d97706;--warning-bg:rgba(217,119,6,.08);
    --info:#0284c7;--info-bg:rgba(2,132,199,.08);
    --shadow:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
    --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
    --shadow-lg:0 10px 25px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.06);
    --radius:10px;--radius-sm:6px;--radius-lg:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* NAV */
.nav{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 28px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--text);text-decoration:none}
.nav-logo:hover{text-decoration:none}
.nav-logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-user{font-size:13px;color:var(--text2)}
.nav-user span{color:var(--text);font-weight:500}
.nav-menu{display:flex;align-items:center;gap:2px}
.nav-link{font-size:13px;color:var(--text2);padding:6px 12px;border-radius:6px;transition:all .18s;text-decoration:none;font-weight:500}
.nav-link:hover{background:var(--bg3);color:var(--text);text-decoration:none}
.nav-link.active{background:var(--primary-bg);color:var(--primary)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .18s;border:none;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.25)}
.btn-primary:hover{opacity:.88;box-shadow:0 4px 12px rgba(99,102,241,.35)}
.btn-outline{background:var(--bg2);border:1px solid var(--border2);color:var(--text2)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.btn-success:hover{opacity:.88}
.btn-danger{background:var(--danger-bg);border:1px solid rgba(220,38,38,.2);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-ghost{background:none;border:none;color:var(--text2);padding:6px 10px}
.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-lg{padding:12px 28px;font-size:15px}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-body{padding:24px}
.card-header{padding:18px 24px;border-bottom:1px solid var(--border);font-size:15px;font-weight:600}

/* FORM */
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:9px 12px;font-size:14px;color:var(--text);font-family:inherit;transition:border-color .18s,box-shadow .18s;outline:none;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1);background:var(--bg2)}
.field select option{background:var(--bg2)}
.field-hint{font-size:11px;color:var(--text3);margin-top:4px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* ALERTS */
.alert{padding:11px 16px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:16px;display:flex;align-items:flex-start;gap:8px}
.alert-error{background:var(--danger-bg);border:1px solid rgba(220,38,38,.2);color:var(--danger)}
.alert-success{background:var(--success-bg);border:1px solid rgba(22,163,74,.2);color:var(--success)}
.alert-warning{background:var(--warning-bg);border:1px solid rgba(217,119,6,.2);color:var(--warning)}
.alert-info{background:var(--info-bg);border:1px solid rgba(2,132,199,.2);color:var(--info)}

/* BADGES */
.badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 9px;border-radius:20px}
.badge-draft{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.badge-published{background:var(--success-bg);color:var(--success);border:1px solid rgba(22,163,74,.2)}
.badge-admin{background:var(--primary-bg);color:var(--primary);border:1px solid rgba(99,102,241,.2)}
.badge-author{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}

/* SPINNER */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border2);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.spinner-sm{width:13px;height:13px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 20px;font-size:13px;color:var(--text2);z-index:9999;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;box-shadow:var(--shadow-md)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-color:rgba(22,163,74,.3);color:var(--success)}
.toast.error{border-color:rgba(220,38,38,.3);color:var(--danger)}

/* SECTION TITLE */
.section-title{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}

/* PREVIEW BLOCKS — tema claro para el alumno */
.pb-text{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:22px;margin-bottom:14px}
.pb-text h2{font-size:17px;font-weight:600;color:#0f172a;margin-bottom:12px}
.pb-text p{color:#475569;line-height:1.8;margin-bottom:10px}
.pb-text ul,.pb-text ol{color:#475569;padding-left:20px;line-height:1.8;margin-bottom:10px}
.pb-text strong{color:#0f172a}

.pb-infographic{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:22px;margin-bottom:14px}
.pb-infographic h2{font-size:17px;font-weight:600;color:#0f172a;margin-bottom:16px;text-align:center}
.pb-infographic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pb-info-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px;text-align:center}
.pb-info-icon{font-size:26px;margin-bottom:6px}
.pb-info-title{font-size:12px;font-weight:600;color:#0f172a;margin-bottom:3px}
.pb-info-text{font-size:11px;color:#64748b;line-height:1.5}

.pb-video{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;margin-bottom:14px}
.pb-video iframe{width:100%;height:220px;border:none;display:block}
.pb-video-placeholder{background:#f1f5f9;height:160px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;flex-direction:column;gap:8px}

.pb-accordion{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;margin-bottom:14px}
.pb-accordion-title{font-size:15px;font-weight:600;color:#0f172a;padding:16px 20px;border-bottom:1px solid #e2e8f0}
.pb-acc-item{border-bottom:1px solid #e2e8f0}
.pb-acc-item:last-child{border-bottom:none}
.pb-acc-header{padding:13px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;color:#0f172a;transition:background .18s;user-select:none}
.pb-acc-header:hover{background:#f8fafc}
.pb-acc-header.open{background:#f0f4ff;color:#6366f1}
.pb-acc-arrow{transition:transform .25s;font-size:12px;color:#94a3b8}
.pb-acc-header.open .pb-acc-arrow{transform:rotate(180deg)}
.pb-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:13px;color:#475569;line-height:1.7}
.pb-acc-body.open{max-height:600px}
.pb-acc-body-inner{padding:12px 20px 16px}

.pb-flashcards{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;margin-bottom:14px;text-align:center}
.pb-flashcards h2{font-size:15px;font-weight:600;color:#0f172a;margin-bottom:16px}
.pb-fc-wrap{perspective:800px;height:130px;margin-bottom:12px;cursor:pointer}
.pb-fc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s}
.pb-fc-inner.flipped{transform:rotateY(180deg)}
.pb-fc-front,.pb-fc-back{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border-radius:8px;padding:16px;font-size:14px;font-weight:500}
.pb-fc-front{background:#f0f4ff;color:#4338ca;border:1px solid rgba(99,102,241,.2)}
.pb-fc-back{background:#f0fdf4;color:#15803d;border:1px solid rgba(22,163,74,.2);transform:rotateY(180deg)}
.pb-fc-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:8px}
.pb-fc-btn{background:none;border:1px solid #e2e8f0;border-radius:6px;padding:5px 14px;font-size:12px;cursor:pointer;color:#475569;font-family:inherit;transition:all .18s}
.pb-fc-btn:hover{border-color:#6366f1;color:#6366f1}
.pb-fc-counter{font-size:12px;color:#94a3b8}
.pb-fc-hint{font-size:11px;color:#94a3b8;margin-top:6px}

.pb-cards{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;margin-bottom:14px}
.pb-cards h2{font-size:15px;font-weight:600;color:#0f172a;margin-bottom:14px}
.pb-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pb-card-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px;text-align:center;cursor:pointer;transition:all .2s}
.pb-card-item:hover{border-color:#6366f1;background:#f0f4ff}
.pb-card-icon{font-size:24px;margin-bottom:6px}
.pb-card-title{font-size:13px;font-weight:600;color:#0f172a;margin-bottom:4px}
.pb-card-text{font-size:12px;color:#64748b;line-height:1.5}

.pb-quiz{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:22px;margin-bottom:14px}
.pb-quiz h2{font-size:15px;font-weight:600;color:#0f172a;margin-bottom:18px}
.pb-q-block{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #f1f5f9}
.pb-q-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.pb-q-num{font-size:11px;color:#6366f1;font-weight:600;margin-bottom:5px}
.pb-q-text{font-size:14px;color:#0f172a;margin-bottom:10px;line-height:1.6}
.pb-option{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid #e2e8f0;border-radius:7px;margin-bottom:6px;cursor:pointer;transition:all .2s;font-size:13px;color:#475569}
.pb-option:hover{border-color:#6366f1;color:#4338ca;background:#f0f4ff}
.pb-option.selected{border-color:#6366f1;background:#f0f4ff;color:#4338ca}
.pb-option.correct{border-color:#16a34a;background:#f0fdf4;color:#15803d}
.pb-option.wrong{border-color:#dc2626;background:#fef2f2;color:#dc2626}
.pb-exp{font-size:12px;color:#64748b;margin-top:8px;padding:8px 12px;background:#f8fafc;border-radius:6px;display:none}
.pb-submit{width:100%;padding:11px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;margin-top:16px;font-family:inherit}
.pb-result{text-align:center;padding:18px;border-radius:8px;margin-top:14px}
.pb-result.pass{background:#f0fdf4;border:1px solid rgba(22,163,74,.2)}
.pb-result.fail{background:#fef2f2;border:1px solid rgba(220,38,38,.2)}
.pb-result-score{font-size:36px;font-weight:700;color:#0f172a}
.pb-result-label{font-size:13px;color:#475569;margin-top:4px}

/* INDEX SEPE */
.sepe-index{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;margin-bottom:20px}
.sepe-index-title{font-size:14px;font-weight:600;color:#0f172a;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sepe-index ol{padding-left:20px;font-size:13px;color:#475569;line-height:2}
.sepe-index li{cursor:pointer;transition:color .18s}
.sepe-index li:hover{color:#6366f1}
.sepe-index .unit-ref{font-size:11px;color:#94a3b8;margin-left:6px}