/* ================================================================
   MATEMÁTICAS ACTIVA — materia.css  (rediseño completo)
================================================================ */
:root{
    --navy:#0f172a;--navy2:#1e293b;--blue:#2563eb;--blue2:#1d4ed8;
    --purple:#7c3aed;--gold:#f59e0b;--green:#16a34a;
    --gray50:#f8fafc;--gray100:#f1f5f9;--gray200:#e2e8f0;
    --gray400:#94a3b8;--gray600:#475569;--gray800:#1e293b;
    --radius:12px;--radius-lg:20px;
    --shadow:0 4px 24px rgba(0,0,0,.10);--shadow-lg:0 12px 48px rgba(0,0,0,.18);
    --font:'Poppins',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;
    --navbar-h:64px;
}
/* Dark mode */
body.dark{
    --white:#0f172a;--gray50:#0f172a;--gray100:#1e293b;--gray200:#334155;
    --gray400:#94a3b8;--gray600:#cbd5e1;--gray800:#f1f5f9;
    --shadow:0 4px 24px rgba(0,0,0,.30);--shadow-lg:0 12px 48px rgba(0,0,0,.40);
    color-scheme:dark;
}
body.dark .mat-main{background:var(--gray50)}
body.dark .mat-section{background:var(--gray100);border-color:var(--gray200)}
body.dark .mat-card,body.dark .ej-card,body.dark .subtema-panel{background:var(--gray100);border-color:var(--gray200);color:var(--gray800)}
body.dark .mat-visor-panel{background:var(--gray100);color:var(--gray800)}
body.dark input,body.dark select,body.dark textarea{background:var(--gray100);border-color:var(--gray200);color:var(--gray800)}
body.dark .mat-footer{background:#080e1c}
body.dark .acc-pill{background:var(--gray100);border-color:var(--gray200);color:var(--gray800)}
body.dark .acc-panel{background:var(--gray100);border-color:var(--gray200)}
body.dark .ej-opcion{background:var(--gray100);border-color:var(--gray200);color:var(--gray800)}
body.dark .subtema-overlay{background:rgba(0,0,0,.7)}
body.dark .subtema-archivo{border-color:var(--gray200)}
body.dark .subtema-archivo.disponible{background:var(--gray100)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--gray50);color:var(--gray800);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}

/* ── HEADER ── */
.mat-header{
    background:linear-gradient(135deg,var(--navy) 0%,#1a1050 60%,#0d2060 100%);
    color:white;display:flex;align-items:center;justify-content:space-between;
    padding:0 20px;height:var(--navbar-h);gap:12px;
    position:sticky;top:0;z-index:100;
    box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.mat-brand{display:flex;align-items:center;gap:8px;color:white;text-decoration:none;flex-shrink:0;}
.mat-brand-icon{width:36px;height:36px;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:white;font-family:var(--font);flex-shrink:0;}
.mat-brand-text{font-family:var(--font);font-size:15px;font-weight:600;white-space:nowrap;display:none;}
.mat-brand-text strong{color:#60a5fa;}
.mat-header h1{
    font-family:var(--font);font-size:clamp(16px,2.5vw,22px);font-weight:800;
    text-align:center;letter-spacing:-.5px;white-space:nowrap;
    flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.mat-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.mat-back{
    color:rgba(255,255,255,.8);font-size:13px;font-weight:600;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    padding:7px 14px;border-radius:100px;white-space:nowrap;
    transition:all .2s;
}
.mat-back:hover{background:rgba(255,255,255,.22);color:white;}

/* Buscador inline */
.mat-search-wrap{position:relative;display:flex;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:0 10px;gap:6px;transition:background .2s;}
.mat-search-wrap:focus-within{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);}
.mat-search-icon{font-size:14px;flex-shrink:0;}
#mat-buscador{background:none;border:none;outline:none;color:white;font-size:13px;font-family:var(--font-body);padding:7px 0;width:140px;}
#mat-buscador::placeholder{color:rgba(255,255,255,.5);}
.mat-buscador-resultados{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:280px;background:white;border:1px solid var(--gray200);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);overflow:hidden;display:none;z-index:200;}
.mat-buscador-resultados.activo{display:block;}
.mat-buscador-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #f1f5f9;color:#0f172a;font-size:13px;transition:background .15s;}
.mat-buscador-item:hover{background:#f8fafc;}
.mat-buscador-item:last-child{border-bottom:none;}

/* Puntos del ranking */
.mat-nav-puntos{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f59e0b,#dc2626);color:white;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap;}

/* ── NAVBAR SESION ── */
#mat-navbar-sesion{display:flex;align-items:center;gap:8px;font-size:13px;color:white;}
.mat-nav-btn{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    color:white;padding:7px 14px;border-radius:100px;cursor:pointer;
    font-size:13px;font-weight:600;font-family:var(--font-body);
    transition:all .2s;
}
.mat-nav-btn:hover{background:rgba(255,255,255,.25);}

/* ── MAIN ── */
.mat-main{max-width:1100px;margin:0 auto;padding:40px 24px;display:flex;flex-direction:column;gap:32px;}

/* ── SECCIONES ── */
.mat-section{background:white;border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow);border:1px solid var(--gray200);}
.mat-section-title{font-family:var(--font);font-size:22px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.mat-section-desc{font-size:14px;color:var(--gray400);margin-bottom:24px;}
.mat-premium-section{border:2px solid #fcd34d;background:linear-gradient(180deg,#fffbeb 0%,white 60%);}

/* ── GRID ── */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;}

/* ── TARJETAS ── */
.mat-card{
    background:white;border:1.5px solid var(--gray200);border-radius:var(--radius-lg);
    padding:16px;display:flex;flex-direction:column;gap:10px;
    transition:transform .25s,box-shadow .25s;box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.mat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.mat-thumb-img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--gray200);}
.mat-thumb-icon{height:90px;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--gray100);border-radius:10px;}
.mat-thumb-text{background:var(--gray100);border-radius:10px;padding:10px;font-size:11px;color:var(--gray400);max-height:80px;overflow:hidden;line-height:1.5;}
.mat-card-titulo{font-family:var(--font);font-size:15px;font-weight:700;color:var(--navy);}
.mat-card-desc{font-size:12px;color:var(--gray400);line-height:1.5;}

/* ── BOTONES ── */
.mat-btn{
    display:inline-block;padding:9px 16px;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    color:white;border:none;border-radius:8px;font-size:13px;font-weight:700;
    font-family:var(--font);cursor:pointer;transition:all .2s;text-align:center;
    margin-top:auto;
}
.mat-btn:hover{opacity:.9;transform:translateY(-2px);}
.mat-btn-premium{background:linear-gradient(135deg,var(--gold),#d97706);}
.mat-vacio{color:var(--gray400);font-size:14px;font-style:italic;}

/* ── PREMIUM BANNER ── */
.mat-premium-banner{
    background:linear-gradient(135deg,var(--navy),#1a1050);
    color:white;border-radius:var(--radius-lg);padding:28px;
    text-align:center;display:flex;flex-direction:column;
    align-items:center;gap:14px;max-width:500px;
}
.mat-premium-banner p{font-size:15px;opacity:.9;line-height:1.6;}

/* ── ESTADOS ── */
.mat-estado-activa{
    display:flex;align-items:center;gap:10px;
    background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(124,58,237,.15));
    border:1px solid rgba(37,99,235,.3);
    color:var(--navy);border-radius:var(--radius);
    padding:14px 18px;font-size:14px;font-weight:700;
    margin-bottom:16px;flex-wrap:wrap;
}
.mat-estado-inactiva{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--gray50);border:1.5px solid var(--gray200);
    border-radius:var(--radius);padding:14px 18px;
    margin-bottom:12px;flex-wrap:wrap;
}

/* ── CUOTA ── */
#mat-cuota-info{margin-bottom:16px;}

/* ── FOOTER ── */
.mat-footer{
    background:var(--navy);color:white;text-align:center;
    padding:32px 24px 24px;font-size:13px;color:rgba(255,255,255,.5);
    margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.mat-footer-contacto{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:4px;}
.mat-footer-link{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;transition:all .2s;}
.mat-footer-link.wa{background:rgba(37,211,102,.15);color:#25d366;}
.mat-footer-link.wa:hover{background:rgba(37,211,102,.25);}
.mat-footer-link.ig{background:rgba(225,48,108,.12);color:#e1306c;}
.mat-footer-link.ig:hover{background:rgba(225,48,108,.22);}
.mat-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.mat-footer-links a{color:rgba(255,255,255,.5);font-size:12px;padding:4px 8px;border-radius:6px;transition:color .2s;}
.mat-footer-links a:hover{color:white;}

/* ── RESPONSIVE ── */
@media(min-width:768px){
    .mat-brand-text{display:inline;}
    #mat-buscador{width:180px;}
}
@media(max-width:600px){
    .mat-header{padding:0 12px;gap:8px;}
    .mat-header h1{font-size:14px;}
    .mat-search-wrap{display:none;}
    .mat-card{width:100%;}
    .mat-grid{grid-template-columns:1fr 1fr;}
    .mat-section{padding:20px 16px;}
    .mat-main{padding:24px 12px;}
    .mat-footer-contacto{flex-direction:column;align-items:center;}
}
@media(max-width:380px){
    .mat-grid{grid-template-columns:1fr;}
}


/* === Acordeón de categorías (estilo Matemóvil) === */
.acc-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.acc-pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;border-radius:12px;
    border:2px solid var(--gray200);background:white;
    font-family:var(--font);font-size:14px;font-weight:600;color:var(--purple);
    cursor:pointer;transition:all .2s;
}
.acc-pill:hover{border-color:var(--purple);background:#f5f3ff;}
.acc-pill.acc-activo{border-color:var(--purple);background:var(--purple);color:white;}
.acc-pill-count{font-size:11px;font-weight:700;background:var(--gray100);color:var(--gray400);padding:2px 7px;border-radius:99px;}
.acc-pill.acc-activo .acc-pill-count{background:rgba(255,255,255,.25);color:white;}
.acc-pill-arrow{font-size:12px;transition:transform .25s;opacity:.6;}
.acc-pill.acc-activo .acc-pill-arrow{transform:rotate(180deg);opacity:1;}

/* Panel expandible */
.acc-panel{
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .35s ease,opacity .25s ease,margin .25s ease;
    margin-bottom:0;
}
.acc-panel.acc-abierto{
    max-height:2000px;opacity:1;margin-bottom:20px;
}
.acc-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-radius:12px 12px 0 0;border:1px solid #e2e8f0;border-bottom:none;}
.acc-panel-titulo{font-family:var(--font);font-size:16px;font-weight:700;color:#1e1b4b;margin:0;}
.acc-panel-nivel{font-size:11px;font-weight:700;color:var(--purple);background:white;padding:3px 10px;border-radius:99px;}

/* Lista de temas dentro del panel */
.acc-temas-lista{list-style:none;padding:0;margin:0;border:1px solid #e2e8f0;border-radius:0 0 12px 12px;overflow:hidden;}
.acc-tema-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 18px;border-bottom:1px solid #f1f5f9;
    font-size:14px;color:#475569;transition:background .15s;
}
.acc-tema-item:last-child{border-bottom:none;}
.acc-tema-item.disponible{cursor:pointer;color:#1e293b;}
.acc-tema-item.disponible:hover{background:#f8fafc;}
.acc-tema-nombre{font-weight:500;}
.acc-tema-item.disponible .acc-tema-nombre{color:var(--blue);}
.acc-tema-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;}
.acc-tema-badge.disp{background:#f0fdf4;color:#16a34a;}
.acc-tema-badge.pend{background:#f8fafc;color:#94a3b8;}

@media(max-width:600px){
    .acc-pills{gap:8px;}
    .acc-pill{padding:8px 14px;font-size:13px;}
    .acc-tema-item{padding:10px 14px;font-size:13px;}
}

/* === Temas clickeables === */
.mat-categoria-temas li.tema-clickable{cursor:pointer;padding:8px 12px;border-radius:8px;transition:background .15s}
.mat-categoria-temas li.tema-clickable:hover{background:#eff6ff;color:#2563eb}
.tema-flecha{float:right;color:#94a3b8;font-weight:700;transition:transform .15s,color .15s}
.mat-categoria-temas li.tema-clickable:hover .tema-flecha{color:#2563eb;transform:translateX(3px)}

/* === Modal de subtema === */
.subtema-overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);display:none;align-items:flex-start;justify-content:center;z-index:9000;padding:24px 12px;overflow-y:auto}
.subtema-overlay.activo{display:flex}
.subtema-panel{background:white;border-radius:18px;max-width:780px;width:100%;padding:28px 28px 24px;box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative}
.subtema-close{position:absolute;top:14px;right:18px;background:transparent;border:none;font-size:24px;color:#94a3b8;cursor:pointer;line-height:1}
.subtema-close:hover{color:#dc2626}
.subtema-eyebrow{font-size:11px;font-weight:700;letter-spacing:.05em;color:#2563eb;text-transform:uppercase;margin-bottom:6px}
.subtema-titulo{font-size:24px;font-weight:800;color:#0f172a;margin:0 0 8px;line-height:1.2}
.subtema-desc{font-size:14px;color:#475569;line-height:1.55;margin:0 0 18px}
.subtema-archivos-titulo{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#334155;margin:6px 0 10px;border-top:1px solid #e2e8f0;padding-top:14px}
.subtema-archivos{display:grid;grid-template-columns:1fr;gap:10px}
.subtema-archivo{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;transition:transform .12s,box-shadow .12s}
.subtema-archivo.disponible{cursor:pointer}
.subtema-archivo.disponible:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,99,235,.12);border-color:#bfdbfe}
.subtema-archivo-icon{font-size:30px;line-height:1;width:46px;text-align:center;flex-shrink:0}
.subtema-archivo-body{flex:1;min-width:0}
.subtema-archivo-titulo{font-size:14px;font-weight:700;color:#0f172a;margin:0 0 2px}
.subtema-archivo-sub{font-size:12px;color:#64748b;margin:0}
.subtema-archivo-cta{flex-shrink:0;font-size:13px;font-weight:700;padding:8px 14px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.subtema-archivo-cta.abrir{background:#2563eb;color:white}
.subtema-archivo-cta.abrir:hover{background:#1d4ed8}
.subtema-archivo.bloqueado{opacity:.78;background:#fff7ed;border-color:#fed7aa}
.subtema-archivo-cta.bloqueado{background:#ea580c;color:white}
.subtema-archivo-cta.bloqueado:hover{background:#c2410c}
.subtema-archivo.pendiente{opacity:.7;background:#f1f5f9}
.subtema-archivo.pendiente .subtema-archivo-cta{background:#cbd5e1;color:#64748b;cursor:not-allowed}
.subtema-plan-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:#eff6ff;color:#2563eb;margin-left:6px;vertical-align:middle}
.subtema-plan-badge.basico{background:#f0fdf4;color:#16a34a}
.subtema-plan-badge.premium{background:#f5f3ff;color:#7c3aed}

/* Sección explicativa dentro del subtema */
.subtema-explicacion{background:#f0f9ff;border:1px solid #bae6fd;border-radius:14px;padding:20px 22px;margin:0 0 18px}
.subtema-intro{font-size:15px;color:#0c4a6e;line-height:1.65;margin:0 0 14px}
.subtema-puntos-clave{margin:0 0 12px}
.subtema-puntos-clave h4{font-size:14px;font-weight:700;color:#0369a1;margin:0 0 8px}
.subtema-puntos-clave ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.subtema-puntos-clave li{font-size:13px;color:#1e3a5f;padding:6px 10px 6px 28px;background:white;border-radius:8px;position:relative;line-height:1.5;border:1px solid #e0f2fe}
.subtema-puntos-clave li::before{content:'•';position:absolute;left:12px;color:#0284c7;font-weight:900}
.subtema-tip{display:flex;align-items:flex-start;gap:8px;background:linear-gradient(135deg,#fefce8,#fef9c3);border:1px solid #fde68a;border-radius:10px;padding:12px 14px;font-size:13px;color:#854d0e;line-height:1.5}
.subtema-tip-icon{font-size:18px;flex-shrink:0;line-height:1}

/* Contenido escrito por el admin (viewer) */
.subtema-contenido-viewer{
    padding:16px 20px;margin:0 0 18px;
    background:white;border:1px solid #e2e8f0;border-radius:14px;
    font-size:15px;color:#1e293b;line-height:1.75;
}
.subtema-contenido-viewer h2{font-size:20px;font-weight:700;color:#0f172a;margin:18px 0 8px;}
.subtema-contenido-viewer h3{font-size:17px;font-weight:700;color:#1e3a5f;margin:14px 0 6px;}
.subtema-contenido-viewer p{margin:0 0 12px;}
.subtema-contenido-viewer ul,.subtema-contenido-viewer ol{padding-left:24px;margin:0 0 12px;}
.subtema-contenido-viewer li{margin-bottom:4px;}
.subtema-contenido-viewer img{max-width:100%;height:auto;border-radius:10px;margin:12px 0;box-shadow:0 2px 12px rgba(0,0,0,.1);}
.subtema-contenido-viewer blockquote{border-left:4px solid #2563eb;padding:8px 16px;margin:12px 0;background:#eff6ff;border-radius:0 8px 8px 0;color:#1e40af;font-style:italic;}
.subtema-contenido-viewer pre{background:#1e293b;color:#e2e8f0;padding:14px;border-radius:8px;overflow-x:auto;font-size:13px;margin:12px 0;}
.subtema-contenido-viewer strong{color:#0f172a;}

/* Editor wrap (solo admin) */
.subtema-editor-wrap{margin:0 0 16px;border-top:1px dashed #cbd5e1;padding-top:12px;}
.subtema-editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.subtema-editor-toggle{background:#f1f5f9;border:1px solid #e2e8f0;color:#475569;font-size:13px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s;}
.subtema-editor-toggle:hover{background:#e2e8f0;}
.subtema-editor-save{background:linear-gradient(135deg,#16a34a,#15803d);border:none;color:white;font-size:13px;font-weight:700;padding:7px 16px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s;box-shadow:0 2px 8px rgba(22,163,74,.3);}
.subtema-editor-save:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,163,74,.4);}
#subtema-quill-container{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;margin-top:6px;box-shadow:0 2px 12px rgba(0,0,0,.06);}
#subtema-quill-editor{min-height:400px;font-size:15px;font-family:'Inter',system-ui,sans-serif;}
#subtema-quill-editor .ql-editor{min-height:400px;padding:20px 24px;line-height:1.8;}
#subtema-quill-editor .ql-editor h1{font-size:28px;font-weight:800;margin:24px 0 12px;color:#0f172a;font-family:'Poppins',sans-serif;}
#subtema-quill-editor .ql-editor h2{font-size:22px;font-weight:700;margin:20px 0 10px;color:#1e293b;font-family:'Poppins',sans-serif;}
#subtema-quill-editor .ql-editor h3{font-size:18px;font-weight:700;margin:16px 0 8px;color:#334155;font-family:'Poppins',sans-serif;}
#subtema-quill-editor .ql-editor h4{font-size:16px;font-weight:600;margin:14px 0 6px;color:#475569;font-family:'Poppins',sans-serif;}
#subtema-quill-editor .ql-editor blockquote{border-left:4px solid #2563eb;background:#eff6ff;padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0;color:#1e40af;font-style:normal;}
#subtema-quill-editor .ql-editor pre.ql-syntax{background:#1e293b;color:#e2e8f0;border-radius:8px;padding:16px;font-size:14px;overflow-x:auto;}
#subtema-quill-editor .ql-editor table{width:100%;border-collapse:collapse;margin:16px 0;border-radius:8px;overflow:hidden;}
#subtema-quill-editor .ql-editor table th,#subtema-quill-editor .ql-editor table td{border:1px solid #e2e8f0;padding:10px 14px;text-align:left;}
#subtema-quill-editor .ql-editor table th{background:#f1f5f9;font-weight:700;color:#0f172a;}
#subtema-quill-editor .ql-editor table tr:nth-child(even){background:#f8fafc;}
#subtema-quill-editor .ql-editor hr{border:none;border-top:2px solid #e2e8f0;margin:24px 0;}
#subtema-quill-editor .ql-editor img{max-width:100%;border-radius:8px;margin:12px 0;}
#subtema-quill-editor .ql-editor .math-formula{text-align:center;margin:16px 0;padding:12px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;}
/* ── Toolbar rediseñado ── */
#subtema-quill-container .ql-toolbar.ql-snow{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border-bottom:1px solid #e2e8f0;border-top:none;border-left:none;border-right:none;
  padding:10px 14px 8px;display:flex;flex-wrap:wrap;gap:4px 2px;
}
#subtema-quill-container .ql-toolbar .ql-formats{
  margin-right:4px;padding-right:8px;
  border-right:1px solid #e2e8f0;
  display:inline-flex;align-items:center;gap:2px;
}
#subtema-quill-container .ql-toolbar .ql-formats:last-child{border-right:none;padding-right:0;}
#subtema-quill-container .ql-toolbar button{
  width:30px;height:30px;border-radius:6px;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
}
#subtema-quill-container .ql-toolbar button:hover{background:#e8ecf2;box-shadow:0 1px 3px rgba(0,0,0,.06);}
#subtema-quill-container .ql-toolbar button.ql-active{
  background:linear-gradient(135deg,#2563eb,#3b82f6);color:white;
  box-shadow:0 2px 6px rgba(37,99,235,.3);
}
#subtema-quill-container .ql-toolbar button.ql-active .ql-stroke{stroke:white;}
#subtema-quill-container .ql-toolbar button.ql-active .ql-fill{fill:white;}
/* Pickers (header, font, size, color) */
#subtema-quill-container .ql-toolbar .ql-picker{height:30px;}
#subtema-quill-container .ql-toolbar .ql-picker-label{
  border-radius:6px;padding:3px 8px;border:1px solid #e2e8f0;
  font-size:12px;transition:all .15s;
}
#subtema-quill-container .ql-toolbar .ql-picker-label:hover{background:#e8ecf2;border-color:#cbd5e1;}
#subtema-quill-container .ql-toolbar .ql-picker.ql-expanded .ql-picker-label{
  border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15);
}
#subtema-quill-container .ql-toolbar .ql-picker-options{
  border-radius:10px;box-shadow:0 10px 32px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);
  border:1px solid #e2e8f0;padding:8px;max-height:320px;overflow-y:auto;
  background:white;
}
/* ── Color picker: grid 9 columnas (solo cuando está expandido) ── */
#subtema-quill-container .ql-snow .ql-color-picker.ql-expanded .ql-picker-options,
#subtema-quill-container .ql-snow .ql-background.ql-expanded .ql-picker-options{
  display:grid !important;
  grid-template-columns:repeat(9,1fr);
  gap:3px;padding:10px;width:auto;min-width:220px;
}
#subtema-quill-container .ql-snow .ql-color-picker .ql-picker-item,
#subtema-quill-container .ql-snow .ql-background .ql-picker-item{
  width:20px !important;height:20px !important;
  border-radius:4px;border:1px solid rgba(0,0,0,.1);
  margin:0 !important;padding:0 !important;
  transition:transform .12s,box-shadow .12s;
  cursor:pointer;
}
#subtema-quill-container .ql-snow .ql-color-picker .ql-picker-item:hover,
#subtema-quill-container .ql-snow .ql-background .ql-picker-item:hover{
  transform:scale(1.25);box-shadow:0 2px 8px rgba(0,0,0,.2);
  border-color:rgba(0,0,0,.25);z-index:1;position:relative;
}
#subtema-quill-container .ql-snow .ql-color-picker .ql-picker-item.ql-selected,
#subtema-quill-container .ql-snow .ql-background .ql-picker-item.ql-selected{
  border:2px solid #0f172a;transform:scale(1.15);
}
/* White swatch: visible border */
#subtema-quill-container .ql-snow .ql-color-picker .ql-picker-item[data-value="#ffffff"],
#subtema-quill-container .ql-snow .ql-background .ql-picker-item[data-value="#ffffff"]{
  border:1px solid #d1d5db;
}
/* ── Font & size picker items ── */
#subtema-quill-container .ql-toolbar .ql-picker-item{
  padding:4px 10px;border-radius:4px;font-size:13px;
  transition:background .12s;
}
#subtema-quill-container .ql-toolbar .ql-picker-item:hover{background:#eff6ff;}
#subtema-quill-container .ql-toolbar .ql-picker-item.ql-selected{
  background:#dbeafe;color:#1d4ed8;font-weight:600;
}
/* Container & editor border */
#subtema-quill-container .ql-container{border:none;}
/* Font size labels en el picker */
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before{content:'10px - Pequeño';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before{content:'12px';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before{content:'14px';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before{content:'16px - Normal';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before{content:'18px';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before{content:'20px - Grande';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before{content:'24px';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before{content:'28px';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before{content:'32px - Muy grande';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before{content:'36px';}
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before{content:'48px - Título';}
/* Font family labels */
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans-serif';}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before{content:'Serif';font-family:serif;}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before{content:'Monospace';font-family:monospace;}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before{content:'Arial';font-family:Arial;}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Georgia"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Georgia"]::before{content:'Georgia';font-family:Georgia;}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times New Roman"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times New Roman"]::before{content:'Times New Roman';font-family:'Times New Roman';}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Courier New"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Courier New"]::before{content:'Courier New';font-family:'Courier New';}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Verdana"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Verdana"]::before{content:'Verdana';font-family:Verdana;}
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Poppins"]::before,
#subtema-quill-container .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Poppins"]::before{content:'Poppins';font-family:'Poppins';}

/* ── EJERCICIOS INTERACTIVOS ── */
.mat-ejercicios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:12px;}
.ej-filtros-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.ej-filtros-row select{padding:8px 12px;border:1px solid var(--gray200);border-radius:8px;font-size:13px;font-family:var(--font-body);background:white;color:var(--gray800);cursor:pointer;}

.ej-card{background:white;border:1px solid var(--gray200);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px;transition:all .2s;position:relative;}
.ej-card:hover{box-shadow:var(--shadow);}
.ej-card.correcto{border-color:#16a34a;background:#f0fdf4;}
.ej-card.incorrecto{border-color:#dc2626;background:#fef2f2;}
.ej-card.bloqueado{opacity:.7;}
.ej-card-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ej-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;text-transform:capitalize;}
.ej-badge.facil{background:#dcfce7;color:#166534;}
.ej-badge.medio{background:#fef9c3;color:#854d0e;}
.ej-badge.dificil{background:#fee2e2;color:#991b1b;}
.ej-badge.premium{background:#fef3c7;color:#92400e;}
.ej-status{margin-left:auto;font-size:16px;}
.ej-titulo{font-family:var(--font);font-size:15px;font-weight:700;color:var(--navy);}
.ej-enunciado{font-size:14px;line-height:1.6;color:var(--gray600);}
.ej-opciones{display:flex;flex-direction:column;gap:6px;}
.ej-opcion{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--gray200);border-radius:8px;cursor:pointer;font-size:14px;transition:all .15s;background:white;}
.ej-opcion:hover:not(.disabled){background:#f0f7ff;border-color:var(--blue);}
.ej-opcion.disabled{cursor:default;pointer-events:none;}
.ej-opcion.correcta{background:#dcfce7;border-color:#16a34a;font-weight:600;}
.ej-opcion.incorrecta{background:#fee2e2;border-color:#dc2626;}
.ej-opcion input[type="radio"]{accent-color:var(--blue);width:16px;height:16px;flex-shrink:0;}
.ej-input-completar{padding:10px 14px;border:1px solid var(--gray200);border-radius:8px;font-size:14px;font-family:var(--font-body);width:100%;}
.ej-input-completar:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.ej-feedback{padding:12px;border-radius:8px;margin-top:4px;}
.ej-feedback-ok{color:#166534;font-weight:700;font-size:14px;margin:0;}
.ej-feedback-mal{color:#991b1b;font-weight:700;font-size:14px;margin:0;}
.ej-explicacion{font-size:13px;color:var(--gray600);margin:8px 0 0;line-height:1.6;padding-top:8px;border-top:1px solid var(--gray200);}
.ej-btn{padding:10px 18px;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all .2s;}
.ej-btn.responder{background:linear-gradient(135deg,var(--blue),var(--purple));color:white;width:100%;}
.ej-btn.responder:hover{opacity:.9;}
.ej-btn.bloqueado{background:var(--gray200);color:var(--gray600);text-align:center;display:block;width:100%;text-decoration:none;}
.ej-admin-actions{display:flex;gap:6px;margin-top:4px;}
.ej-btn-sm{padding:6px 12px;border:1px solid var(--gray200);background:white;border-radius:6px;cursor:pointer;font-size:13px;transition:all .15s;}
.ej-btn-sm:hover{background:var(--gray100);}
.ej-btn-sm.del:hover{background:#fee2e2;border-color:#fca5a5;}
@media(max-width:600px){.mat-ejercicios-grid{grid-template-columns:1fr;}}

/* ── ÍNDICE DE TEMAS (nuevo diseño) ── */
.nivel-section{margin-bottom:24px;}
.nivel-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:10px 16px;border-radius:10px;margin-bottom:12px;}
.nivel-header.sec{background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(251,191,36,.05));color:#b45309;border:1px solid rgba(251,191,36,.2);}
.nivel-header.uni{background:linear-gradient(135deg,rgba(129,140,248,.1),rgba(129,140,248,.05));color:#4338ca;border:1px solid rgba(129,140,248,.2);}
.nivel-header.otros{background:var(--gray100);color:var(--gray600);border:1px solid var(--gray200);}
.nivel-icon{font-size:16px;}
.temas-list{display:flex;flex-direction:column;gap:8px;}
.tema-card{background:white;border:1px solid var(--gray200);border-radius:var(--radius);padding:16px 20px;cursor:pointer;transition:all .2s;position:relative;}
.tema-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(37,99,235,.1);transform:translateY(-1px);}
.tema-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tema-card-nombre{font-family:var(--font);font-size:15px;font-weight:700;color:var(--navy);margin:0;flex:1;}
.tema-card-arrow{color:var(--gray400);font-size:18px;font-weight:700;transition:transform .2s,color .2s;flex-shrink:0;}
.tema-card:hover .tema-card-arrow{color:var(--blue);transform:translateX(3px);}
.tema-card-desc{font-size:13px;color:var(--gray600);line-height:1.5;margin:6px 0 0;}
.tema-card-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;margin-top:8px;display:inline-block;}
.tema-card-badge.has-content{background:#dcfce7;color:#166534;}
body.dark .tema-card{background:var(--gray100);border-color:var(--gray200);}
body.dark .tema-card-nombre{color:var(--gray800);}
body.dark .nivel-header.sec{background:rgba(251,191,36,.08);color:#fbbf24;}
body.dark .nivel-header.uni{background:rgba(129,140,248,.08);color:#818cf8;}
/* ── Dark mode: Editor Quill ── */
body.dark #subtema-quill-container{border-color:var(--gray200);box-shadow:0 2px 12px rgba(0,0,0,.2);}
body.dark #subtema-quill-container .ql-toolbar.ql-snow{background:linear-gradient(180deg,var(--gray100),var(--gray50));border-color:var(--gray200);}
body.dark #subtema-quill-container .ql-toolbar button:hover{background:var(--gray200);}
body.dark #subtema-quill-container .ql-toolbar button.ql-active{background:linear-gradient(135deg,#3b82f6,#60a5fa);}
body.dark #subtema-quill-container .ql-toolbar .ql-formats{border-color:var(--gray200);}
body.dark #subtema-quill-container .ql-toolbar .ql-picker-label{border-color:var(--gray200);color:var(--gray800);}
body.dark #subtema-quill-container .ql-toolbar .ql-picker-label:hover{background:var(--gray200);}
body.dark #subtema-quill-container .ql-toolbar .ql-picker-options{background:var(--gray100);border-color:var(--gray200);box-shadow:0 10px 32px rgba(0,0,0,.35);}
body.dark #subtema-quill-container .ql-toolbar .ql-picker-item:hover{background:var(--gray200);}
body.dark #subtema-quill-container .ql-toolbar .ql-picker-item.ql-selected{background:rgba(59,130,246,.2);color:#93c5fd;}
body.dark #subtema-quill-container .ql-toolbar .ql-stroke{stroke:var(--gray800);}
body.dark #subtema-quill-container .ql-toolbar .ql-fill{fill:var(--gray800);}
body.dark #subtema-quill-container .ql-toolbar .ql-picker-label .ql-stroke{stroke:var(--gray800);}
body.dark #subtema-quill-container .ql-editor{background:var(--gray100);color:var(--gray800);}
body.dark #subtema-quill-editor .ql-editor h1,body.dark #subtema-quill-editor .ql-editor h2{color:var(--gray800);}
body.dark #subtema-quill-editor .ql-editor h3,body.dark #subtema-quill-editor .ql-editor h4{color:#94a3b8;}
body.dark #subtema-quill-editor .ql-editor blockquote{background:rgba(37,99,235,.1);border-color:#3b82f6;color:#93c5fd;}
body.dark .subtema-editor-toggle{background:var(--gray100);border-color:var(--gray200);color:var(--gray800);}
body.dark .subtema-editor-toggle:hover{background:var(--gray200);}

/* Subtema overlay improvements */
.subtema-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.subtema-nivel-tag{font-size:11px;font-weight:700;padding:3px 12px;border-radius:99px;letter-spacing:.03em;flex-shrink:0;}
.subtema-nivel-tag.nivel-1{background:rgba(251,191,36,.12);color:#b45309;}
.subtema-nivel-tag.nivel-2{background:rgba(129,140,248,.12);color:#4338ca;}
.subtema-desc-curricular{font-size:14px;color:var(--gray600);line-height:1.6;margin:8px 0 16px;padding:12px 16px;background:var(--gray50);border-radius:10px;border-left:3px solid var(--blue);}

/* ── BUSCADOR MEJORADO ── */
.busq-seccion-titulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray400);padding:10px 16px 4px;border-top:1px solid var(--gray200);}
.busq-seccion-titulo:first-child{border-top:none;}
.busq-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;flex-shrink:0;}
.busq-badge.tema{color:#2563eb;background:#eff6ff;}
.busq-badge.video{color:#854d0e;background:#fef9c3;}
.busq-badge.pdf{color:#922b21;background:#fde8e8;}
.busq-badge.premium{color:#92400e;background:#fef3c7;}
.busq-badge.imagen{color:#166534;background:#dcfce7;}
.busq-badge.texto{color:#4a235a;background:#f3e8ff;}
.busq-badge.ej{color:#1e40af;background:#dbeafe;text-transform:capitalize;}
.busq-mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px;}
.busq-sin-resultado{padding:20px 16px;text-align:center;color:var(--gray400);font-size:13px;}
.busq-sugerencia{color:var(--blue);font-weight:600;text-decoration:underline;}
.busq-historial .busq-hist-icon{color:var(--gray400);font-size:14px;flex-shrink:0;}
.busq-limpiar{justify-content:center;padding:8px 16px !important;}
.mat-b