/* ════════════════════════════════════════════════════════
   HogarFeliz LMS v2.0 — Full-Screen + Improved UI
   ════════════════════════════════════════════════════════ */

/* ── Full-Screen Breakout ── */
body.hf-fullpage { overflow-x:hidden !important; padding:0 !important; }
body.hf-fullpage header, body.hf-fullpage .site-header,
body.hf-fullpage .header-area { display:none !important; }

.hf-wrap {
    width:100vw !important; max-width:100vw !important;
    position:relative !important;
    left:50% !important; right:50% !important;
    margin-left:-50vw !important; margin-right:-50vw !important;
    padding:0 !important; box-sizing:border-box !important;
    min-height:100vh !important; font-family:'Segoe UI',-apple-system,sans-serif;
}
/* Override ALL known theme containers */
.elementor-widget-shortcode,.elementor-widget-container,.elementor-column-wrap,
.elementor-section,.elementor-container,.wp-block-shortcode,
.entry-content,.post-content,.site-content,#content,#main,
.container,.container-fluid,.wp-site-blocks,.is-layout-constrained>*,
.page-content,.main-container,.content-area { 
    padding:0 !important; margin:0 !important; 
    max-width:100% !important; width:100% !important; 
}

:root {
    --hf-purple:#7C3AED; --hf-indigo:#4F46E5; --hf-blue:#0891B2;
    --hf-green:#059669; --hf-orange:#D97706; --hf-red:#DC2626;
    --hf-pink:#DB2777; --hf-bg:#F8F7FF; --hf-white:#fff;
    --hf-border:#E5E7EB; --hf-text:#1E1B4B; --hf-muted:#6B7280;
    --hf-radius:12px; --hf-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* ── Header ── */
.hf-header {
    display:flex; align-items:center; justify-content:space-between;
    background:#1E1B4B; padding:10px 20px;
    position:sticky; top:0; z-index:200; height:52px; box-sizing:border-box;
}
.hf-header-left { display:flex; align-items:center; gap:8px; }
.hf-logo { font-size:1.5rem; }
.hf-logo-text { color:white; font-weight:800; font-size:1rem; }
.hf-role-pill { padding:4px 12px; border-radius:999px; font-size:.78rem; font-weight:700; }
.hf-role-admin       { background:#6366F1; color:white; }
.hf-role-coordinator { background:#7C3AED; color:white; }
.hf-role-teacher     { background:#0891B2; color:white; }
.hf-role-student     { background:#059669; color:white; }
.hf-header-right { display:flex; align-items:center; gap:10px; }
.hf-user-name { color:rgba(255,255,255,.8); font-size:.85rem; }

/* ── Layout ── */
.hf-layout { display:flex; height:calc(100vh - 52px); overflow:hidden; }
.hf-sidebar {
    width:210px; background:white; border-right:1px solid var(--hf-border);
    display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto;
    height:calc(100vh - 52px); position:sticky; top:52px;
}
.hf-main {
    flex:1; overflow-y:auto; padding:22px;
    background:var(--hf-bg); height:calc(100vh - 52px);
}
.hf-nav-btn {
    display:flex; align-items:center; gap:8px; width:100%;
    padding:9px 12px; border:none; border-radius:7px; cursor:pointer;
    font-size:.84rem; font-weight:400; background:transparent;
    color:#4B5563; margin-bottom:2px; text-align:left; transition:all .15s;
}
.hf-nav-btn:hover { background:#F3F4F6; color:var(--hf-text); }
.hf-nav-btn.active { background:var(--hf-purple); color:white; font-weight:700; }
.hf-sidebar-logo { padding:14px 16px; border-bottom:1px solid var(--hf-border); }
.hf-sidebar-logo-title { font-size:1rem; font-weight:800; color:var(--hf-text); }
.hf-sidebar-logo-sub { font-size:.66rem; color:#9CA3AF; }
.hf-sidebar-user { padding:10px 14px; border-bottom:1px solid var(--hf-border); background:#FAFAFA; }
nav.hf-nav-items { padding:6px; flex:1; }
.hf-sidebar-footer { padding:8px 12px; border-top:1px solid var(--hf-border); }
.hf-sidebar-footer small { font-size:.65rem; color:#9CA3AF; display:block; text-align:center; }

/* ── Tabs ── */
.hf-tab-content { display:none; }
.hf-tab-content.active { display:block; }
.hf-page-title { font-size:1.5rem; font-weight:800; color:var(--hf-text); margin:0 0 20px; }
.hf-page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }

/* ── Stats ── */
.hf-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.hf-stat { background:white; border-radius:var(--hf-radius); padding:15px; box-shadow:var(--hf-shadow); text-align:center; }
.hf-stat-icon { font-size:1.6rem; margin-bottom:4px; }
.hf-stat-val { font-size:1.8rem; font-weight:800; line-height:1.1; }
.hf-stat-label { font-size:.72rem; color:var(--hf-muted); margin-top:2px; }
.hf-stat-purple .hf-stat-val { color:var(--hf-purple); }
.hf-stat-indigo .hf-stat-val { color:var(--hf-indigo); }
.hf-stat-blue .hf-stat-val { color:var(--hf-blue); }
.hf-stat-green .hf-stat-val { color:var(--hf-green); }
.hf-stat-orange .hf-stat-val { color:var(--hf-orange); }

/* ── Cards ── */
.hf-card { background:white; border-radius:var(--hf-radius); padding:18px; box-shadow:var(--hf-shadow); margin-bottom:14px; }
.hf-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.hf-card-head h3 { margin:0; font-size:.95rem; font-weight:700; }
.hf-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── Buttons ── */
.hf-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:7px; border:none; cursor:pointer; font-size:.82rem; font-weight:600; background:#F3F4F6; color:#374151; transition:all .15s; text-decoration:none; line-height:1.2; }
.hf-btn:hover { opacity:.85; }
.hf-btn-primary { background:var(--hf-purple); color:white; }
.hf-btn-blue { background:var(--hf-blue); color:white; }
.hf-btn-green { background:var(--hf-green); color:white; }
.hf-btn-danger { background:#FEE2E2; color:var(--hf-red); }
.hf-btn-orange { background:#FEF3C7; color:var(--hf-orange); }
.hf-btn-sm { padding:4px 10px; font-size:.78rem; }
.hf-btn-xs { padding:2px 7px; font-size:.72rem; }
.hf-btn-lg { padding:11px 24px; font-size:.92rem; }
.hf-quick-btn { display:block; width:100%; background:#F9FAFB; border:1.5px solid var(--hf-border); border-radius:8px; padding:10px 14px; cursor:pointer; text-align:left; font-size:.85rem; font-weight:600; color:#374151; margin-bottom:7px; transition:all .15s; }
.hf-quick-btn:hover { border-color:var(--hf-purple); color:var(--hf-purple); background:#F5F3FF; }

/* ── Avatars & Badges ── */
.hf-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; }
.hf-av-purple { background:#EDE9FE; color:var(--hf-purple); }
.hf-av-blue   { background:#E0F2FE; color:var(--hf-blue); }
.hf-av-green  { background:#D1FAE5; color:var(--hf-green); }
.hf-av-sm { width:28px; height:28px; font-size:.72rem; }
.hf-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.68rem; font-weight:700; }
.hf-badge-purple { background:#EDE9FE; color:#5B21B6; }
.hf-badge-blue   { background:#E0F2FE; color:#0369A1; }
.hf-badge-green  { background:#D1FAE5; color:#065F46; }
.hf-badge-orange { background:#FEF3C7; color:#92400E; }
.hf-badge-red    { background:#FEE2E2; color:var(--hf-red); }

/* ── Progress ── */
.hf-prog-bar-wrap { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.hf-prog-bar { flex:1; background:#F3F4F6; border-radius:999px; height:7px; overflow:hidden; }
.hf-prog-fill { height:100%; border-radius:999px; transition:width .5s; }
.hf-prog-pct { font-size:.78rem; font-weight:700; color:var(--hf-muted); min-width:36px; text-align:right; }
.hf-progress-row { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid #F3F4F6; }
.hf-prog-info { flex:1; }

/* ── Tables ── */
.hf-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.hf-table th { padding:8px 10px; text-align:left; background:#F9FAFB; color:var(--hf-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.hf-table td { padding:8px 10px; border-bottom:1px solid #F3F4F6; vertical-align:middle; }
.hf-table tr:last-child td { border-bottom:none; }
.hf-table tr:hover td { background:#FAFAFA; }

/* ── Inner tabs ── */
.hf-tabs-inner { display:flex; gap:3px; background:white; padding:3px; border-radius:9px; width:fit-content; box-shadow:var(--hf-shadow); margin-bottom:16px; }
.hf-inner-tab { padding:6px 14px; border:none; border-radius:7px; cursor:pointer; font-size:.82rem; font-weight:500; background:transparent; color:var(--hf-muted); }
.hf-inner-tab.active { background:var(--hf-purple); color:white; font-weight:700; }
.hf-inner-content { display:none; }
.hf-inner-content.active { display:block; }

/* ── Course Cards ── */
.hf-course-card { background:white; border-radius:var(--hf-radius); padding:14px 16px; box-shadow:var(--hf-shadow); margin-bottom:10px; transition:box-shadow .2s; }
.hf-course-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.12); }
.hf-course-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.hf-course-actions { display:flex; gap:6px; flex-shrink:0; }
.hf-course-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; display:inline-block; }

/* ── Module/Topic Rows ── */
.hf-module-row { display:flex; align-items:center; gap:8px; padding:9px 10px; background:#FAFAFA; border-radius:7px; margin-bottom:4px; border:1px solid var(--hf-border); cursor:pointer; transition:all .15s; }
.hf-module-row:hover { border-color:var(--hf-purple); background:#F5F3FF; }
.hf-mod-num { width:24px; height:24px; background:#EDE9FE; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:var(--hf-purple); flex-shrink:0; }
.hf-mod-info { flex:1; }
.hf-mod-acts { display:flex; gap:4px; }
.hf-topic-row { display:flex; align-items:center; gap:6px; padding:6px 10px 6px 36px; font-size:.8rem; color:#4B5563; border-bottom:1px solid #F3F4F6; cursor:pointer; transition:background .15s; }
.hf-topic-row:hover { background:#EDE9FE; }
.hf-topic-dot { color:var(--hf-purple); font-size:.7rem; flex-shrink:0; }
.hf-add-topic-btn { display:block; width:100%; text-align:center; padding:6px; border:1.5px dashed #D1D5DB; border-radius:6px; background:none; cursor:pointer; color:var(--hf-muted); font-size:.78rem; margin-top:6px; transition:all .15s; }
.hf-add-topic-btn:hover { border-color:var(--hf-purple); color:var(--hf-purple); }

/* ── Modules toggle panel ── */
.hf-modules-toggle { display:none; padding:12px 14px 14px; background:#F9FAFB; border-top:1px solid var(--hf-border); border-radius:0 0 10px 10px; }
.hf-modules-toggle.visible { display:block; }

/* ── Permissions ── */
.hf-perm-card { margin-bottom:14px; }
.hf-perm-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hf-perm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hf-perm-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; padding:8px; border:1.5px solid var(--hf-border); border-radius:8px; transition:border-color .15s; }
.hf-perm-toggle:hover { border-color:var(--hf-purple); }
.hf-perm-toggle input { display:none; }
.hf-perm-switch { width:38px; height:20px; background:#D1D5DB; border-radius:999px; position:relative; flex-shrink:0; transition:background .2s; }
.hf-perm-switch::after { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; background:white; border-radius:50%; transition:left .2s; }
.hf-perm-toggle input:checked + .hf-perm-switch { background:var(--hf-purple); }
.hf-perm-toggle input:checked + .hf-perm-switch::after { left:20px; }
.hf-perm-label { font-size:.8rem; color:#374151; }

/* ── Class tabs ── */
.hf-class-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.hf-class-tab { padding:5px 14px; border-radius:999px; border:2px solid var(--hf-border); background:white; cursor:pointer; font-weight:700; font-size:.84rem; color:#4B5563; transition:all .15s; }
.hf-class-tab.active { border-color:var(--hf-blue); background:var(--hf-blue); color:white; }
.hf-class-panel { display:none; }
.hf-class-panel.active { display:block; }
.hf-class-badge { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:#E0F2FE; border-radius:7px; font-weight:800; font-size:.82rem; color:var(--hf-blue); flex-shrink:0; }
.hf-class-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #F3F4F6; }

/* ── Upload ── */
.hf-upload-zone { border:2px dashed var(--hf-purple); border-radius:12px; padding:28px; text-align:center; cursor:pointer; background:#FAFAFA; margin-bottom:14px; transition:background .2s; }
.hf-upload-zone:hover { background:#F5F3FF; }
.hf-upload-icon { font-size:2rem; margin-bottom:8px; }
.hf-file-name { margin-top:8px; font-size:.8rem; color:var(--hf-purple); font-weight:600; }
.hf-file-icon { font-size:1.2rem; flex-shrink:0; }

/* ── User rows ── */
.hf-user-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #F3F4F6; }
.hf-user-row:last-child { border-bottom:none; }
.hf-user-info { flex:1; display:flex; flex-direction:column; }
.hf-user-info strong { font-size:.87rem; }
.hf-user-info small { font-size:.72rem; color:var(--hf-muted); }
.hf-user-perms { display:flex; gap:4px; flex-wrap:wrap; }
.hf-list-item { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--hf-border); border-radius:8px; margin-bottom:6px; }
.hf-list-info { flex:1; display:flex; flex-direction:column; }
.hf-list-info strong { font-size:.87rem; }
.hf-list-info small { font-size:.72rem; color:var(--hf-muted); }

/* ── Student Hero ── */
.hf-hero-card { background:linear-gradient(135deg,#7C3AED,#4F46E5); border-radius:16px; padding:20px 24px; margin-bottom:18px; color:white; display:flex; justify-content:space-between; align-items:center; }
.hf-hero-card h1 { font-size:1.35rem; margin:0 0 4px; font-weight:800; }
.hf-hero-card p { margin:0; opacity:.85; font-size:.88rem; }
.hf-hero-num { font-size:2.8rem; font-weight:900; line-height:1; }
.hf-student-course-card { background:white; border-radius:var(--hf-radius); padding:14px 16px; box-shadow:var(--hf-shadow); margin-bottom:10px; cursor:pointer; transition:all .2s; }
.hf-student-course-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.hf-scc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.hf-scc-pct { font-size:1.5rem; font-weight:900; line-height:1; }

/* ── Module accordion (student) ── */
.hf-module-accordion { border:1.5px solid var(--hf-border); border-radius:9px; margin-bottom:8px; overflow:hidden; transition:border-color .2s; }
.hf-module-accordion.open { border-color:var(--hf-purple); }
.hf-mod-acc-head { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; background:white; user-select:none; }
.hf-mod-acc-head:hover { background:#F9FAFB; }
.hf-mod-acc-head strong { flex:1; font-size:.875rem; }
.hf-acc-arrow { margin-left:auto; color:var(--hf-muted); transition:transform .2s; }
.hf-module-accordion.open .hf-acc-arrow { transform:rotate(180deg); }
.hf-mod-acc-body { display:none; border-top:1px solid #F3F4F6; }
.hf-module-accordion.open .hf-mod-acc-body { display:block; }
.hf-topic-item { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid #F9FAFB; font-size:.84rem; transition:background .15s; }
.hf-topic-item:hover { background:#F9FAFB; }
.hf-topic-item.hf-done { background:#F0FDF4; }
.hf-topic-name { flex:1; }
.hf-topic-dur { font-size:.72rem; color:var(--hf-muted); }
.hf-materials-row { background:#FAFAFA; gap:6px; flex-wrap:wrap; }
.hf-complete-btn { font-size:.75rem; }
.hf-done-check { font-size:.9rem; }

/* ── Eval ── */
.hf-eval-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.hf-eval-status { text-align:right; flex-shrink:0; }
.hf-teacher-notes { background:#FEF3C7; border-radius:8px; padding:8px 12px; font-size:.82rem; margin-top:8px; }
.hf-eval-card { background:white; border-radius:10px; border:1.5px solid var(--hf-border); margin-bottom:10px; overflow:hidden; }
.hf-eval-card-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:linear-gradient(to right,#F5F3FF,white); border-bottom:1px solid var(--hf-border); }

/* ── Modal ── */
.hf-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; align-items:flex-start; justify-content:center; padding-top:40px; }
.hf-modal-overlay.open { display:flex; }
.hf-modal { background:white; border-radius:16px; width:90%; max-width:540px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.hf-modal-lg  { max-width:720px; }
.hf-modal-xl  { max-width:900px; width:95vw; }
.hf-modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 12px; border-bottom:1px solid var(--hf-border); position:sticky; top:0; background:white; z-index:1; }
.hf-modal-head h3 { margin:0; font-size:1rem; }
.hf-modal-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--hf-muted); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.hf-modal-close:hover { background:#F3F4F6; }
.hf-modal-body { padding:16px 20px; }
.hf-modal-foot { display:flex; gap:8px; padding:14px 20px 18px; border-top:1px solid var(--hf-border); }

/* ── Forms ── */
.hf-form-row { margin-bottom:14px; }
.hf-form-row label { display:block; font-size:.8rem; font-weight:700; color:#374151; margin-bottom:4px; }
.hf-form-row input,.hf-form-row select,.hf-form-row textarea { width:100%; padding:8px 10px; border:1.5px solid var(--hf-border); border-radius:8px; font-size:.85rem; font-family:inherit; box-sizing:border-box; transition:border-color .15s; }
.hf-form-row input:focus,.hf-form-row select:focus,.hf-form-row textarea:focus { outline:none; border-color:var(--hf-purple); }
.hf-form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.hf-form-row-2 label { display:block; font-size:.8rem; font-weight:700; color:#374151; margin-bottom:4px; }
.hf-form-row-2 input,.hf-form-row-2 select { width:100%; padding:8px 10px; border:1.5px solid var(--hf-border); border-radius:8px; font-size:.85rem; box-sizing:border-box; }
.hf-form-row-2 input:focus,.hf-form-row-2 select:focus { outline:none; border-color:var(--hf-purple); }
.hf-form-label-row { font-size:.8rem; font-weight:700; color:#374151; margin-bottom:4px; display:block; }

/* ── Content editor toolbar ── */
.hf-editor-toolbar { display:flex; gap:3px; background:#F3F4F6; padding:6px 8px; border-radius:7px 7px 0 0; border:1.5px solid var(--hf-border); border-bottom:none; flex-wrap:wrap; }
.hf-editor-btn { background:white; border:1px solid #E5E7EB; border-radius:4px; padding:3px 7px; font-size:.75rem; cursor:pointer; font-weight:600; color:#374151; }
.hf-editor-btn:hover { background:#EDE9FE; border-color:var(--hf-purple); color:var(--hf-purple); }
.hf-content-editor { width:100%; min-height:220px; padding:10px 12px; border:1.5px solid var(--hf-border); border-radius:0 0 8px 8px; font-size:.85rem; resize:vertical; font-family:inherit; box-sizing:border-box; line-height:1.6; }
.hf-content-editor:focus { outline:none; border-color:var(--hf-purple); }

/* ── Eval take modal ── */
.hf-eval-timer-bar { display:flex; justify-content:space-between; align-items:center; padding:13px 20px; background:#1E1B4B; border-radius:16px 16px 0 0; color:white; }
.hf-timer { font-size:1.3rem; font-weight:900; font-family:monospace; color:#34D399; }
.hf-timer.warning { color:#FBBF24; }
.hf-timer.danger  { color:#F87171; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.hf-eval-question-card { padding:18px 20px; }
.hf-eval-question-text { font-size:.97rem; font-weight:600; color:var(--hf-text); margin-bottom:16px; line-height:1.55; }
.hf-eval-option { display:flex; align-items:center; gap:10px; padding:9px 13px; border:2px solid var(--hf-border); border-radius:9px; margin-bottom:7px; cursor:pointer; transition:all .15s; }
.hf-eval-option:hover { border-color:var(--hf-purple); background:#FAFAFA; }
.hf-eval-option.selected { border-color:var(--hf-purple); background:#F5F3FF; }
.hf-eval-option-dot { width:18px; height:18px; border:2px solid #D1D5DB; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.hf-eval-option-dot.radio-style { border-radius:50%; }
.hf-eval-option-dot.check-style { border-radius:3px; }
.hf-eval-option.selected .hf-eval-option-dot { border-color:var(--hf-purple); background:var(--hf-purple); }
.hf-eval-option.selected .hf-eval-option-dot::after { content:'✓'; color:white; font-size:.63rem; font-weight:900; }
.hf-eval-written { width:100%; min-height:130px; padding:10px 12px; border:1.5px solid var(--hf-border); border-radius:9px; font-size:.9rem; resize:vertical; font-family:inherit; box-sizing:border-box; }
.hf-eval-written:focus { outline:none; border-color:var(--hf-purple); }
.hf-eval-match-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.hf-eval-match-left { flex:1; background:#EDE9FE; padding:8px 12px; border-radius:8px; font-size:.85rem; color:#4C1D95; font-weight:600; }
.hf-eval-match-right { flex:1; }
.hf-eval-match-right select { width:100%; padding:8px; border:1.5px solid var(--hf-border); border-radius:8px; font-size:.85rem; }
.hf-eval-nav { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--hf-border); }
.hf-eval-progress-dots { display:flex; gap:4px; padding:0 20px 8px; }
.hf-eval-dot { width:26px; height:7px; border-radius:3px; background:#F3F4F6; transition:background .2s; }
.hf-eval-dot.answered { background:var(--hf-purple); }
.hf-eval-dot.current { background:#A78BFA; }
.hf-eval-info-row { display:flex; justify-content:center; gap:20px; margin:14px 0; font-size:.85rem; color:var(--hf-muted); }
.hf-eval-warn { background:#FEF3C7; border-radius:8px; padding:9px 14px; font-size:.82rem; color:#92400E; margin:14px 0; }
.hf-eval-result { text-align:center; padding:28px 20px; }
.hf-eval-result-score { font-size:4rem; font-weight:900; line-height:1; margin-bottom:4px; }
.hf-eval-result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px auto; max-width:320px; }
.hf-eval-result-item { background:#F9FAFB; border-radius:9px; padding:10px; text-align:center; }
.hf-eval-result-val { font-size:1.05rem; font-weight:800; color:var(--hf-text); }
.hf-eval-result-lbl { font-size:.7rem; color:var(--hf-muted); }

/* ── Topic content display ── */
.hf-topic-content { line-height:1.75; color:#374151; font-size:.93rem; }
.hf-topic-content h3 { color:var(--hf-purple); margin:18px 0 8px; font-size:1.05rem; border-bottom:2px solid #EDE9FE; padding-bottom:4px; }
.hf-topic-content h4 { color:#1E1B4B; margin:14px 0 6px; font-size:.95rem; }
.hf-topic-content blockquote { border-left:4px solid var(--hf-purple); background:#F5F3FF; padding:10px 16px; border-radius:0 8px 8px 0; margin:12px 0; font-style:italic; color:#4C1D95; }
.hf-topic-content ul,.hf-topic-content ol { padding-left:22px; margin:8px 0; }
.hf-topic-content li { margin-bottom:6px; }
.hf-verse { background:linear-gradient(135deg,#1E1B4B,#312E81); color:white; padding:14px 18px; border-radius:10px; margin:14px 0; font-size:.9rem; font-style:italic; line-height:1.5; }
.hf-highlight-box { background:#FFFBEB; border:1.5px solid #FCD34D; border-radius:9px; padding:12px 16px; margin:12px 0; }
.hf-exercise-box { background:#F0FDF4; border:1.5px solid #A7F3D0; border-radius:9px; padding:14px 18px; margin:14px 0; }

/* ── Login ── */
.hf-login-box { max-width:400px; margin:60px auto; background:white; border-radius:16px; padding:36px; box-shadow:0 4px 20px rgba(0,0,0,.1); text-align:center; }
.hf-login-logo { font-size:3rem; margin-bottom:8px; }
.hf-login-box h2 { color:var(--hf-text); margin:0 0 6px; }
.hf-login-sub { color:var(--hf-muted); font-size:.88rem; margin-bottom:22px; }
.hf-login-box .login-form { text-align:left; }
.hf-login-box .login-username,.hf-login-box .login-password { margin-bottom:12px; }
.hf-login-box .login-username label,.hf-login-box .login-password label { display:block; font-size:.8rem; font-weight:700; margin-bottom:4px; color:#374151; }
.hf-login-box input[type="text"],.hf-login-box input[type="password"] { width:100%; padding:9px 11px; border:1.5px solid var(--hf-border); border-radius:8px; font-size:.9rem; box-sizing:border-box; }
.hf-login-box input[type="submit"] { width:100%; background:var(--hf-purple); color:white; border:none; border-radius:8px; padding:11px; font-size:.95rem; font-weight:700; cursor:pointer; margin-top:6px; }
.hf-login-box input[type="submit"]:hover { background:#6D28D9; }
.hf-login-forgot { margin-top:14px; font-size:.82rem; }
.hf-login-forgot a { color:var(--hf-purple); }

/* ── Toast ── */
.hf-toast { position:fixed; bottom:20px; right:20px; background:#1E1B4B; color:white; padding:11px 18px; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.25); font-size:.87rem; font-weight:600; z-index:99999; border-left:4px solid #10B981; max-width:340px; animation:slideInRight .3s ease; }
.hf-toast.hf-toast-err { border-left-color:#EF4444; }
@keyframes slideInRight { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Misc ── */
.hf-muted { color:var(--hf-muted); }
.hf-small { font-size:.78rem; }
.hf-mb-10 { margin-bottom:10px; }
.hf-ml-auto { margin-left:auto; }
.hf-flex-cell { display:flex; align-items:center; gap:6px; }
.hf-empty { color:var(--hf-muted); font-size:.85rem; padding:8px 0; }
.hf-empty-state { text-align:center; padding:40px; background:white; border-radius:var(--hf-radius); box-shadow:var(--hf-shadow); color:var(--hf-muted); }
.hf-info { color:var(--hf-blue); }
.hf-error { color:var(--hf-red); }
.hf-clickable { cursor:pointer; }

/* ── Alerts ── */
.hf-alert { padding:10px 14px; border-radius:8px; font-size:.85rem; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.hf-alert-success { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
.hf-alert-info    { background:#DBEAFE; color:#1E40AF; border:1px solid #BAE6FD; }
.hf-alert-warning { background:#FEF3C7; color:#92400E; border:1px solid #FCD34D; }

/* ── Responsive ── */
@media (max-width:900px) {
    .hf-stats-row { grid-template-columns:repeat(2,1fr) !important; }
    .hf-grid-2    { grid-template-columns:1fr !important; }
    .hf-perm-grid { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:640px) {
    .hf-sidebar   { width:48px !important; }
    .hf-nav-btn span { display:none !important; }
    .hf-header-mid { display:none !important; }
    .hf-main { padding:12px; }
}

/* ════════════════════════════════════════════════════════
   v3.0 — Componentes nuevos
   ════════════════════════════════════════════════════════ */

/* Campana de notificaciones */
.hf-bell { position:relative; cursor:pointer; padding:4px 6px; }
.hf-bell-icon { font-size:1.2rem; filter:grayscale(.2); }
.hf-bell-badge {
    position:absolute; top:-2px; right:-2px; background:var(--hf-red); color:#fff;
    border-radius:999px; font-size:.6rem; font-weight:800; min-width:16px; height:16px;
    line-height:16px; text-align:center; padding:0 3px;
}
.hf-notif-panel {
    display:none; position:absolute; right:0; top:34px; width:340px; max-height:440px;
    overflow-y:auto; background:#fff; border:1px solid var(--hf-border); border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.18); z-index:500; color:var(--hf-text); cursor:default;
}
.hf-notif-panel.open { display:block; }
.hf-notif-head {
    display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
    border-bottom:1px solid var(--hf-border); font-weight:700; font-size:.9rem;
}
.hf-notif-head a { font-size:.72rem; color:var(--hf-blue); font-weight:600; text-decoration:none; }
.hf-notif-item { padding:11px 14px; border-bottom:1px solid #f1f1f4; font-size:.82rem; cursor:pointer; }
.hf-notif-item:hover { background:#f8fafc; }
.hf-notif-item.unread { background:#ecfeff; border-left:3px solid var(--hf-blue); }
.hf-notif-item strong { display:block; color:var(--hf-text); }
.hf-notif-msg { color:var(--hf-muted); margin:2px 0; line-height:1.4; }
.hf-notif-item small { color:#9ca3af; font-size:.68rem; }
.hf-notif-empty { padding:24px 14px; text-align:center; color:var(--hf-muted); font-size:.82rem; }

/* Asistencia en vivo */
.hf-live-dot {
    display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--hf-red);
    margin:0 5px; animation:hfpulse 1.2s infinite;
}
@keyframes hfpulse { 0%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(1.4);} 100%{opacity:1;transform:scale(1);} }
.hf-roster { display:flex; flex-direction:column; gap:8px; }
.hf-roster-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; background:#f8fafc; border-radius:10px; border:1px solid var(--hf-border);
}
.hf-roster-name { font-weight:600; }
.hf-roster-btns { display:flex; gap:6px; }
.hf-att-btn {
    border:1px solid var(--hf-border); background:#fff; border-radius:8px; padding:5px 11px;
    font-size:.74rem; font-weight:700; cursor:pointer; transition:.15s; color:var(--hf-muted);
}
.hf-att-btn:hover { transform:translateY(-1px); }
.hf-att-p.on { background:var(--hf-green); color:#fff; border-color:var(--hf-green); }
.hf-att-l.on { background:var(--hf-orange); color:#fff; border-color:var(--hf-orange); }
.hf-att-a.on { background:var(--hf-red); color:#fff; border-color:var(--hf-red); }

/* Cronograma */
.hf-sched-item { display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid #f1f1f4; }
.hf-card.hf-sched-item { padding:14px; margin-bottom:10px; border-bottom:1px solid var(--hf-border); }
.hf-sched-date {
    background:linear-gradient(135deg,var(--hf-blue),#0e7490); color:#fff; border-radius:10px;
    padding:8px 12px; text-align:center; min-width:92px; font-weight:700; font-size:.82rem;
}
.hf-sched-date small { display:block; font-weight:500; opacity:.9; font-size:.7rem; }
.hf-sched-body { flex:1; }
.hf-sched-body strong { display:inline; }

/* Stat row compacto */
.hf-stat-row { display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 16px; }
.hf-stat-row .hf-stat { flex:1; min-width:110px; }
.hf-stat-row .hf-stat b { display:block; font-size:1.5rem; font-weight:800; color:var(--hf-text); }
.hf-stat-row .hf-stat span { font-size:.74rem; color:var(--hf-muted); }
.hf-stat-green b { color:var(--hf-green); }
.hf-stat-red b   { color:var(--hf-red); }
.hf-stat-amber b { color:var(--hf-orange); }

/* Badges extra */
.hf-badge-amber { background:#fef3c7; color:#92400e; }

/* Tareas / entregas / salones */
.hf-asg-item, .hf-room-item { padding:12px; border:1px solid var(--hf-border); border-radius:10px; margin-bottom:10px; background:#fff; }
.hf-subs { margin-top:8px; }
.hf-submit-form { display:flex; flex-direction:column; gap:7px; margin-top:10px; background:#f8fafc; padding:10px; border-radius:10px; }
.hf-submit-form textarea, .hf-submit-form input { width:100%; box-sizing:border-box; }
.hf-feedback { background:#ecfeff; border-left:3px solid var(--hf-blue); padding:8px 10px; border-radius:6px; margin:6px 0; font-size:.85rem; }
.hf-link-del { background:none; border:none; color:var(--hf-red); font-size:.72rem; cursor:pointer; text-decoration:underline; }
.hf-btn-success { background:var(--hf-green) !important; color:#fff !important; }
.hf-check { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--hf-muted); margin:6px 0; cursor:pointer; }
.hf-check input { width:auto; }

/* ════════════════════════════════════════════════════════════
   v4.0 — Cuadrícula de cursos (Hotmart) + Reproductor (Skool)
   ════════════════════════════════════════════════════════════ */
.hf-course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.hf-cgrid-card { background:#fff; border:1px solid var(--hf-border); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s; }
.hf-cgrid-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.14); }
.hf-cgrid-cover { position:relative; height:140px; display:flex; align-items:center; justify-content:center; }
.hf-cgrid-cover img { width:100%; height:100%; object-fit:cover; }
.hf-cgrid-emoji { font-size:3rem; filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.hf-cgrid-badge { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.55); color:#fff; font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:999px; }
.hf-cgrid-body { padding:14px 16px 16px; }
.hf-cgrid-body h3 { margin:0 0 6px; font-size:1rem; color:var(--hf-text); line-height:1.3; }
.hf-cgrid-meta { font-size:.74rem; color:var(--hf-muted); margin-bottom:10px; }
.hf-cgrid-cta { width:100%; margin-top:12px; }

/* Overlay del reproductor */
.hf-player-overlay { position:fixed; inset:0; background:#0f1115; z-index:99999; display:none; flex-direction:column; color:#e5e7eb; }
.hf-player-overlay.open { display:flex; }
.hf-player-topbar { display:flex; align-items:center; gap:16px; padding:12px 18px; background:#16181d; border-bottom:1px solid #24262d; }
.hf-player-exit { background:#24262d; color:#e5e7eb; border:none; border-radius:8px; padding:8px 14px; font-weight:700; cursor:pointer; }
.hf-player-exit:hover { background:#34373f; }
.hf-player-ctitle { font-weight:700; font-size:1rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hf-player-topprog { display:flex; align-items:center; gap:8px; min-width:160px; }
.hf-player-topprog { position:relative; height:8px; background:#24262d; border-radius:999px; width:160px; }
.hf-player-topprog span#hf-player-topfill { position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); border-radius:999px; transition:width .3s; }
.hf-player-topprog em { position:absolute; right:-34px; top:-5px; font-style:normal; font-size:.72rem; color:#9ca3af; }
.hf-player-main { flex:1; display:flex; min-height:0; }
.hf-player-side { width:330px; background:#16181d; border-right:1px solid #24262d; overflow-y:auto; padding:14px; }
.hf-player-stage { flex:1; overflow-y:auto; padding:0; background:#0f1115; }

.hf-pl-prog { margin-bottom:14px; }
.hf-pl-prog-bar { height:8px; background:#24262d; border-radius:999px; overflow:hidden; }
.hf-pl-prog-bar span { display:block; height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); }
.hf-pl-prog small { color:#9ca3af; font-size:.72rem; }
.hf-pl-mod { margin-bottom:8px; }
.hf-pl-mod-head { display:flex; justify-content:space-between; font-weight:700; font-size:.82rem; color:#cbd5e1; padding:9px 8px; border-bottom:1px solid #24262d; }
.hf-pl-mod-head span { color:#6b7280; font-weight:600; }
.hf-pl-lesson { display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:8px; cursor:pointer; font-size:.84rem; color:#cbd5e1; }
.hf-pl-lesson:hover { background:#1f2228; }
.hf-pl-lesson.active { background:#2563eb; color:#fff; }
.hf-pl-ic { width:18px; text-align:center; }
.hf-pl-lt { flex:1; line-height:1.3; }
.hf-pl-dur { font-size:.68rem; color:#6b7280; }
.hf-pl-lesson.active .hf-pl-dur { color:#bfdbfe; }
.hf-pl-mats { padding:8px; font-size:.78rem; }
.hf-pl-mats b { display:block; color:#9ca3af; margin-bottom:4px; font-size:.72rem; }
.hf-pl-mats a { display:block; color:#60a5fa; text-decoration:none; padding:3px 0; }

/* Escenario (contenido derecho) */
.hf-stage-inner { max-width:860px; margin:0 auto; padding:28px 30px 60px; }
.hf-stage-crumb { color:#6b7280; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.hf-stage-title { color:#f3f4f6; font-size:1.7rem; margin:6px 0 18px; line-height:1.2; }
.hf-video { position:relative; width:100%; padding-top:56.25%; border-radius:14px; overflow:hidden; background:#000; margin-bottom:22px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.hf-video iframe, .hf-video video { position:absolute; inset:0; width:100%; height:100%; border:0; }
.hf-video-link { margin-bottom:22px; }
.hf-stage-content { color:#d1d5db; font-size:1.02rem; line-height:1.75; }
.hf-stage-content h2,.hf-stage-content h3,.hf-stage-content h4 { color:#f3f4f6; margin:22px 0 10px; }
.hf-stage-content p { margin:0 0 14px; }
.hf-stage-content ul,.hf-stage-content ol { margin:0 0 14px; padding-left:22px; }
.hf-stage-content li { margin-bottom:7px; }
.hf-stage-content strong { color:#fff; }
.hf-stage-content blockquote { border-left:4px solid #2563eb; background:#16181d; margin:16px 0; padding:12px 18px; border-radius:0 10px 10px 0; color:#cbd5e1; font-style:italic; }
.hf-stage-content img { max-width:100%; border-radius:10px; margin:10px 0; }
.hf-stage-content a { color:#60a5fa; }
.hf-stage-res { margin-top:24px; padding:16px; background:#16181d; border-radius:12px; }
.hf-stage-res h4 { color:#f3f4f6; margin:0 0 10px; }
.hf-stage-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; padding-top:20px; border-top:1px solid #24262d; flex-wrap:wrap; }
.hf-stage-done { color:#22c55e; font-weight:700; }

/* Catálogo público [hf_course_catalog] */
.hf-catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.hf-cat-card { background:#fff; border:1px solid var(--hf-border); border-radius:16px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.hf-cat-cover { height:150px; display:flex; align-items:center; justify-content:center; }
.hf-cat-cover img { width:100%; height:100%; object-fit:cover; }
.hf-cat-cover-emoji { font-size:3.2rem; }
.hf-cat-body { padding:16px 18px 18px; }
.hf-cat-body h3 { margin:0 0 8px; font-size:1.08rem; }
.hf-cat-meta { font-size:.76rem; color:var(--hf-muted); margin:8px 0 14px; }
.hf-cat-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hf-cat-price { font-size:1.3rem; font-weight:800; color:var(--hf-text); }
.hf-cat-price.hf-free { color:var(--hf-green); }

@media (max-width:760px){
  .hf-player-side { width:100%; position:absolute; inset:48px 0 auto 0; max-height:42vh; z-index:5; }
  .hf-player-stage { padding-top:42vh; }
  .hf-stage-inner { padding:18px; }
}

/* Cajas de contenido didáctico dentro del reproductor (tema oscuro) */
.hf-stage-content .hf-verse {
    border-left:4px solid #a78bfa; background:#1c1a2e; color:#e9d5ff;
    padding:14px 18px; border-radius:0 12px 12px 0; margin:18px 0; font-style:italic; font-size:1.02rem;
}
.hf-stage-content .hf-highlight-box {
    background:linear-gradient(135deg,#1e293b,#172033); border:1px solid #2dd4bf33;
    border-left:4px solid #2dd4bf; padding:16px 18px; border-radius:12px; margin:18px 0; color:#cbd5e1;
}
.hf-stage-content .hf-exercise-box {
    background:#13212e; border:1px dashed #38bdf8; padding:16px 18px; border-radius:12px; margin:18px 0; color:#bae6fd;
}
.hf-stage-content .hf-highlight-box strong,
.hf-stage-content .hf-exercise-box strong { color:#fff; }