/* ============================================================
   TEMARIUS REX — Piezas sueltas
   Componentes que sólo aparecen en una o dos páginas y no
   encajaban en los bloques anteriores.
   ============================================================ */

/* ---- Formulario del panel: campo a ancho completo ---- */
.ft-full { grid-column: 1 / -1; }

/* ---- Listas con marca de verificación (curso y home) ---- */
.split-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.split-list li {
    display: flex; align-items: flex-start; gap: var(--s-3);
    margin: 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
/* El marcado ya trae su propio icono: sólo se pone la marca cuando
   NO hay ninguno, o si no salen dos checks seguidos. */
.split-list li:not(:has(i, svg))::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--accent-strong); font-size: 11px; margin-top: 5px; flex-shrink: 0;
}
.split-list li > i { color: var(--accent-strong); font-size: 13px; margin-top: 4px; flex-shrink: 0; }

/* ---- Semana tipo de la home de la academia ---- */
.semana-card {
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}
.semana-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    font-size: var(--fs-caption); font-weight: var(--fw-semi);
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted);
}
.semana-item {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.semana-item:last-child { border-bottom: 0; }
.semana-item.done { color: var(--ink-muted); }
.semana-item.done .semana-check { background: var(--ok-wash); color: var(--ok-600); border-color: transparent; }
.semana-item.now { background: var(--accent-wash); color: var(--ink); font-weight: var(--fw-med); }
.semana-item.now .semana-check { background: var(--accent); color: var(--navy-900); border-color: transparent; }
/* Orden real del marcado: check · texto · día. El día se empuja a la derecha. */
.semana-item > :not(.semana-check):not(.semana-dia) { flex: 1; min-width: 0; }
.semana-dia {
    flex-shrink: 0; margin-left: auto;
    font-size: var(--fs-micro); font-weight: var(--fw-bold);
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.semana-item.now .semana-dia { color: var(--accent-strong); }
.semana-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    font-size: 10px; color: var(--ink-faint);
}
.semana-foot {
    padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line);
    font-size: var(--fs-caption); color: var(--ink-muted); text-align: center;
}

/* ---- Opciones de plan en la home de tests ---- */
.plan-options { display: flex; flex-direction: column; gap: var(--s-3); }

/* ---- Resumen de resultado: cifras en fila ---- */
.result-summary .rs-item, .rs-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0 var(--s-5); min-width: 92px;
    border-left: 1px solid var(--line-invert);
}
.rs-item:first-of-type { border-left: 0; padding-left: 0; }
.rs-item strong, .rs-item > span:first-child {
    font-size: var(--fs-h4); font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums; color: var(--ink-invert);
}
.rs-item small, .rs-item > span:last-child { font-size: var(--fs-caption); color: var(--ink-invert-muted); }
.rs-item.time strong { color: var(--gold-400); }
@media (max-width: 620px) {
    .rs-item { border-left: 0; padding: 0; }
}

/* ---- Anillo de nota del resultado ---- */
.score-progress { transition: stroke-dashoffset var(--dur) var(--ease-out); }
.score-ring circle, .score-circle circle { transition: stroke-dashoffset var(--dur) var(--ease-out); }

/* ---- Gráficas ---- */
.progreso-chart { position: relative; min-height: 200px; }
.insight-body { flex: 1; min-width: 0; }

/* ---- Pregunta activa durante el test ---- */
.test-active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-wash); }

/* ---- Revisión de respuestas ---- */
.review-option {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.review-option.correct, .review-option.is-correct { border-color: var(--ok-600); background: var(--ok-wash); color: var(--ok-600); }
.review-option.wrong { border-color: var(--bad-600); background: var(--bad-wash); color: var(--bad-600); }
.review-option.blank { opacity: .55; }

/* ---- Utilidades de estado sueltas ---- */
.total { font-weight: var(--fw-semi); color: var(--ink); }
.vueltas .rj-t { font-variant-numeric: tabular-nums; }
.now { color: var(--accent-strong); }
.time { font-variant-numeric: tabular-nums; }
.active { }

/* ============================================================
   CASOS PRÁCTICOS
   ============================================================ */
.caso-media {
    display: flex; flex-direction: column; align-items: flex-end;
    padding: var(--s-3) var(--s-5);
    background: var(--ok-wash); border-radius: var(--r-md);
}
.caso-media strong { font-size: 28px; font-weight: var(--fw-semi); color: var(--ok-600); line-height: 1; }
.caso-media span { font-size: var(--fs-caption); color: var(--ok-600); }

.caso-panel .panel-head h2 { font-size: var(--fs-body); }
.caso-enunciado {
    margin-top: var(--s-4); padding: var(--s-4);
    background: var(--surface-subtle); border-radius: var(--r-md);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.caso-bloque {
    margin-top: var(--s-5); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}
.caso-bloque-tit {
    display: flex; align-items: center; gap: 7px; margin-bottom: var(--s-3);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
}
.caso-bloque-tit i { color: var(--accent-strong); }
.caso-bloque.corregido .caso-bloque-tit i { color: var(--ok-600); }
.caso-bloque.corregido .caso-correccion {
    background: var(--ok-wash); border-left: 2px solid var(--ok-600);
}
.caso-form {
    display: flex; flex-direction: column; gap: var(--s-3);
    margin-top: var(--s-5); padding-top: var(--s-4);
    border-top: 1px dashed var(--line-strong);
}
.caso-form label { display: flex; flex-direction: column; gap: 6px; }
.caso-form label > span { font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink); }
.caso-form label > span small { font-weight: var(--fw-reg); color: var(--ink-muted); }
.caso-form button { align-self: flex-start; }

/* ============================================================
   VÍDEO DE LA LECCIÓN
   ============================================================ */
.video-embed {
    display: block; width: 100%; aspect-ratio: 16/9;
    border: 0; border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface-inverse); margin-bottom: var(--s-5);
}
/* El iframe de YouTube/Vimeo no hereda el tamaño del contenedor */
.video-embed iframe, iframe.video-embed { width: 100%; height: 100%; border: 0; display: block; }
video.video-embed { object-fit: contain; }

/* ============================================================
   LECCIÓN — con vídeo o sólo temario
   ============================================================ */
.lec-cabecera { margin-bottom: var(--s-5); }
.lec-cabecera h1 { font-size: clamp(24px, 3.2vw, 34px); margin: 0; }
.lec-mod {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    margin-bottom: var(--s-3);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
}
.lec-tipo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: var(--r-full);
    letter-spacing: .04em; font-size: var(--fs-micro);
}
.lec-tipo.video { background: var(--danger-soft); color: var(--bad-600); }
.lec-tipo.texto { background: var(--accent-wash); color: var(--accent-strong); }

/* El temario que lee el alumno */
.lec-texto {
    font-size: var(--fs-lg); line-height: var(--lh-relaxed);
    color: var(--ink-body); max-width: 68ch;
}
.lec-texto strong { color: var(--ink); }

.leccion-item.actual { background: var(--accent-wash); }
.leccion-item.actual .lec-title { color: var(--accent-strong); font-weight: var(--fw-semi); }
.leccion-ico.texto { background: var(--accent-wash); color: var(--accent-strong); }
.lec-vacio { color: var(--ink-faint); font-style: italic; }

/* ============================================================
   PANEL DEL TUTOR — escribir el temario
   ============================================================ */
.temas-escritura { max-height: 620px; overflow-y: auto; }
.tema-fila {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm); color: var(--ink-body); text-decoration: none;
}
.tema-fila:last-child { border-bottom: 0; }
.tema-fila:hover { background: var(--surface-subtle); color: var(--ink); }
.tema-fila.activa { background: var(--accent-wash); }
.tema-fila.activa .tema-fila-nom { color: var(--accent-strong); font-weight: var(--fw-semi); }
.tema-fila-cod {
    flex-shrink: 0; min-width: 34px; padding: 1px 7px; border-radius: var(--r-xs);
    background: var(--surface-subtle); border: 1px solid var(--line);
    font-size: var(--fs-micro); font-weight: var(--fw-bold); text-align: center;
}
.tema-fila-nom {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tema-fila-est { flex-shrink: 0; display: flex; gap: 6px; color: var(--ink-faint); font-size: var(--fs-caption); }
.tema-fila-est .ok { color: var(--ok-600); }

/* ============================================================
   TEMARIO CON FORMATO
   ============================================================ */
.lec-texto h3 {
    margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-h4);
    font-weight: var(--fw-semi); letter-spacing: var(--ls-tight);
}
.lec-texto h3:first-child { margin-top: 0; }
.lec-texto h4 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.lec-texto p { margin: 0 0 var(--s-4); }
.lec-texto ul, .lec-texto ol { margin: 0 0 var(--s-4); padding-left: 1.4em; }
.lec-texto li { margin-bottom: var(--s-2); }
.lec-texto blockquote {
    margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5);
    background: var(--surface-subtle); border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-body); color: var(--ink-body);
}
.lec-texto strong { color: var(--ink); font-weight: var(--fw-semi); }
/* Referencias normativas: se ven pero no gritan */
.ref-norma {
    background: var(--accent-wash); color: var(--accent-strong);
    padding: 0 5px; border-radius: 4px;
    font-weight: var(--fw-med); white-space: nowrap;
}

/* ---- Barra de formato del editor ---- */
.editor-barra {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 6px; margin-bottom: -1px;
    background: var(--surface-subtle);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.editor-barra button {
    min-width: 32px; height: 30px; padding: 0 8px;
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-xs); cursor: pointer;
    font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink-body);
    transition: var(--transition);
}
.editor-barra button:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-strong); }
.editor-ayuda { margin-left: auto; font-size: var(--fs-micro); color: var(--ink-muted); }
.editor-ayuda code { background: var(--surface-card); padding: 1px 5px; border-radius: 4px; }
.editor-barra + textarea { border-radius: 0 0 var(--r-sm) var(--r-sm); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }

/* ============================================================
   APUNTES Y BUSCADOR
   ============================================================ */
.apunte { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.apunte:last-child { border-bottom: 0; }
.apunte-cab {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3);
}
.apunte-cab a { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-body); }
.apunte-cab a:hover { color: var(--accent-strong); }
.apunte-fecha { font-size: var(--fs-micro); color: var(--ink-faint); }
.apunte-texto {
    padding: var(--s-4); background: var(--surface-subtle);
    border-left: 2px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
    white-space: pre-wrap;
}

.resultado {
    display: flex; align-items: flex-start; gap: var(--s-4);
    padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
    text-decoration: none;
}
.resultado:last-child { border-bottom: 0; }
.resultado:hover { background: var(--surface-subtle); }
.resultado > i:last-child { color: var(--ink-faint); font-size: var(--fs-caption); margin-top: 4px; }
.resultado-cuerpo { flex: 1; min-width: 0; }
.resultado-tit { display: block; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink); }
.resultado-txt {
    display: block; margin-top: 4px;
    font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--ink-muted);
}
.resultado mark { background: var(--accent-wash); color: var(--accent-strong); font-weight: var(--fw-semi); }

/* En la barra, el buscador es sólo el icono salvo en móvil */
.solo-movil { display: none; }
@media (max-width: 1024px) { .solo-movil { display: inline; } }

@media print {
    .apunte-texto { background: none; border-left: 2px solid #999; }
    .modulo-body { display: block !important; }
}

/* ============================================================
   MODO CLARO / OSCURO
   Control flotante abajo a la derecha, fuera del menú: no compite
   con la navegación y está a mano en cualquier página.
   ============================================================ */
.theme-toggle {
    position: fixed; left: 20px; bottom: 20px; z-index: 95;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0;
    background: var(--surface-card); color: var(--ink-muted);
    border: 1px solid var(--line); border-radius: var(--r-full);
    box-shadow: var(--sh-md); cursor: pointer; font-size: var(--fs-sm);
    transition: var(--transition);
}
.theme-toggle:hover {
    background: var(--surface-inverse); color: var(--gold-400);
    border-color: var(--surface-inverse); transform: translateY(-2px);
}
@media print { .theme-toggle { display: none !important; } }

/* ============================================================
   WHATSAPP FLOTANTE
   ------------------------------------------------------------
   A la derecha, que es donde la gente lo busca, y en su verde de
   siempre: teñirlo con el dorado de la marca lo haría más bonito y
   menos reconocible, y aquí lo que importa es que se identifique de un
   vistazo.
   ============================================================ */
.wa-flotante {
    position: fixed; right: 20px; bottom: 20px; z-index: 96;
    display: inline-flex; align-items: center; gap: 0;
    height: 54px; padding: 0 15px;
    background: #25D366; color: #fff;
    border-radius: var(--r-full);
    box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
    font-size: 26px; line-height: 1;
    text-decoration: none;
    transition: gap var(--dur) var(--ease), padding var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wa-flotante:hover, .wa-flotante:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .5);
    gap: 10px; padding-right: 20px;
}
/* El texto sólo se despliega al acercarse: en reposo es un círculo */
.wa-texto {
    max-width: 0; overflow: hidden; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    transition: max-width var(--dur) var(--ease);
}
.wa-flotante:hover .wa-texto, .wa-flotante:focus-visible .wa-texto { max-width: 120px; }

/* El botón de volver arriba, encima del de WhatsApp */
.back-to-top { bottom: 86px; }

@media (max-width: 640px) {
    .wa-flotante { height: 50px; padding: 0 13px; font-size: 24px; }
    .theme-toggle { width: 38px; height: 38px; }
}
@media print { .wa-flotante { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .wa-flotante, .wa-texto { transition: none; }
}

/* ============================================================
   BARRA DE ACCESOS
   Por encima del menú: el alumno y el tutor entran a sitios
   distintos y tiene que verse desde la primera pantalla.
   ============================================================ */
.barra-acceso {
    background: var(--surface-inverse);
    color: var(--ink-invert-muted);
    border-bottom: 1px solid var(--line-invert);
}
.barra-acceso-inner {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--s-3); flex-wrap: wrap;
    max-width: var(--wrap-wide); margin-inline: auto;
    padding: 7px var(--s-5);
    min-height: 44px;
}
.ba-etiqueta, .ba-hola {
    margin-right: auto;
    font-size: var(--fs-caption); color: var(--ink-invert-muted);
    display: inline-flex; align-items: center; gap: 7px;
}
.ba-hola { color: var(--ink-invert); font-weight: var(--fw-med); }

.ba-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 14px;
    border-radius: var(--r-full);
    font-size: var(--fs-caption); font-weight: var(--fw-semi);
    white-space: nowrap; border: 1px solid transparent;
    transition: var(--transition);
}
.ba-btn i { font-size: .9em; }
/* Alumno: el acceso principal, en dorado */
.ba-alumno { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.ba-alumno:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); }
/* Tutor: secundario, en contorno claro */
.ba-tutor { background: transparent; color: var(--ink-invert); border-color: rgba(255,255,255,.28); }
.ba-tutor:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: var(--ink-invert); }

.ba-salir {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-caption); color: rgba(255,255,255,.55);
}
.ba-salir:hover { color: var(--ink-invert); }

/* Con la barra arriba, el navbar ya no necesita flotar tan separado */
.barra-acceso + .navbar { top: 8px; margin-top: 8px; }

@media (max-width: 560px) {
    .barra-acceso-inner { justify-content: center; padding: 8px var(--s-4); }
    .ba-etiqueta { display: none; }
    .ba-hola { margin-right: 0; }
    .ba-btn { flex: 1; justify-content: center; }
}
@media print { .barra-acceso { display: none !important; } }

/* ============================================================
   HOME — BLOQUES CUADRADOS
   ------------------------------------------------------------
   Tres arreglos que venían del rediseño:
     · Las fichas del temario heredaban el estilo de acordeón y el
       número se salía de la tarjeta.
     · Los pasos del método no cabían en una fila y el quinto se
       quedaba solo.
     · Las preguntas frecuentes son <details> nativos y mi CSS las
       dejaba sin abrirse NUNCA.
   ============================================================ */

/* ---- Los fondos de sección, con esquinas redondeadas ---- */
.sec-alt {
    background: var(--surface-card);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
}
.cifras, .social-proof {
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    border-block: 1px solid var(--line);
    margin-inline: var(--gutter);
}
@media (max-width: 640px) {
    .sec-alt, .cifras, .social-proof { border-radius: var(--r-lg); }
}

/* ============================================================
   CÓMO TRABAJAMOS — los 5 pasos, todos iguales y en una fila
   ============================================================ */
.pasos {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    grid-auto-rows: 1fr;                  /* todas la misma altura */
    align-items: stretch;
}
.paso {
    display: flex; flex-direction: column;
    padding: var(--s-5);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: var(--transition);
}
.paso:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }

/* El número y el icono eran dos círculos seguidos: se juntan en uno */
.paso-ico {
    position: relative;
    width: 44px; height: 44px; margin: 0 0 var(--s-4);
    border-radius: var(--r-md);
    background: var(--accent-wash); color: var(--accent-strong);
    font-size: var(--fs-lg);
}
.paso-num {
    position: absolute; top: -7px; left: -7px;
    width: 22px; height: 22px; min-width: 0;
    border-radius: var(--r-full);
    background: var(--surface-inverse); color: var(--ink-invert);
    border: 2px solid var(--surface-card);
    font-size: 10px; font-weight: var(--fw-bold);
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 1;
}
/* El número va antes que el icono en el marcado: se recoloca sin tocar el HTML */
.paso { position: relative; }
.paso > .paso-num { position: absolute; top: var(--s-5); left: var(--s-5); transform: translate(-7px, -7px); }

.paso h3 {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-body); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-tight);
}
.paso p {
    margin: 0; font-size: var(--fs-caption); line-height: var(--lh-relaxed);
    color: var(--ink-muted);
}

/* ============================================================
   EL TEMARIO — las 7 fichas de bloque
   Aquí .bloque-card NO es un acordeón: es una ficha estática.
   ============================================================ */
.bloques-grid {
    display: grid; gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
    /* Todas las filas a la altura de la más alta: si no, la fila con un
       título de tres líneas descuadra el bloque entero. */
    grid-auto-rows: 1fr;
    align-items: stretch;
}
.bloques-grid .bloque-card {
    display: flex; align-items: flex-start; gap: var(--s-4);
    padding: var(--s-5);
    margin: 0;                              /* el acordeón metía margen */
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: visible;
    transition: var(--transition);
}
.bloques-grid .bloque-card:hover {
    border-color: var(--accent);
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
}
.bloques-grid .bloque-num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    background: var(--surface-inverse); color: var(--ink-invert);
    font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.bloques-grid .bloque-card > div { flex: 1; min-width: 0; }
.bloques-grid .bloque-card h3 {
    margin: 0 0 4px;
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    line-height: 1.35; letter-spacing: var(--ls-tight);
    color: var(--ink);
}
.bloques-grid .bloque-card p {
    margin: 0; font-size: var(--fs-caption); color: var(--ink-muted);
}

/* ============================================================
   PREGUNTAS FRECUENTES
   Son <details> nativos: el navegador ya abre y cierra solo. El
   CSS anterior ocultaba el cuerpo salvo con una clase .open que
   nadie añadía, así que no se abrían nunca.
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--s-3); }

details.faq-item {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
details.faq-item:hover { border-color: var(--line-strong); }
details.faq-item[open] { border-color: var(--accent); box-shadow: var(--sh-sm); }

details.faq-item > summary {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    cursor: pointer; list-style: none;
    font-size: var(--fs-body); font-weight: var(--fw-med);
    line-height: 1.45; color: var(--ink);
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::marker { content: ''; }
details.faq-item > summary:hover { background: var(--surface-subtle); }

/* La flecha, dibujada aparte para poder girarla */
details.faq-item > summary::after {
    content: "\f078";                      /* chevron-down */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: auto; flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full);
    background: var(--surface-subtle); color: var(--ink-muted);
    font-size: 11px;
    transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
details.faq-item[open] > summary::after {
    transform: rotate(180deg);
    background: var(--accent); color: var(--navy-900);
}

/* El cuerpo se muestra solo: aquí sólo se le da forma */
details.faq-item > .faq-body {
    display: block;
    padding: 0 var(--s-5) var(--s-5);
    margin-left: 0;
    border-top: 0;
    font-size: var(--fs-sm); line-height: var(--lh-relaxed);
    color: var(--ink-body);
    max-width: 78ch;
}
details.faq-item[open] > .faq-body { animation: faqAbre var(--dur) var(--ease-out); }
@keyframes faqAbre { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { details.faq-item[open] > .faq-body { animation: none; } }

/* ============================================================
   PANELES SUELTOS
   ------------------------------------------------------------
   Estos reciben el aspecto de panel pero su contenido NO va dentro
   de un .panel-body, así que se quedaban sin margen interior y el
   texto tocaba el borde: estadísticas, dashboard, importar y perfil.
   ============================================================ */
.stats-panel, .dashboard-panel, .admin-panel, .profile-card, .tema-panel-head {
    padding: var(--s-5);
}
/* Si alguno sí usa la estructura cabecera + cuerpo, manda esa */
:is(.stats-panel, .dashboard-panel, .admin-panel, .profile-card):has(> .panel-head),
:is(.stats-panel, .dashboard-panel, .admin-panel, .profile-card):has(> .panel-body) {
    padding: 0;
}
:is(.stats-panel, .dashboard-panel, .admin-panel, .profile-card, .tema-panel-head) > h3 {
    display: flex; align-items: center; gap: var(--s-3);
    margin: 0 0 var(--s-4);
    font-size: var(--fs-lg); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-tight); color: var(--ink);
}
:is(.stats-panel, .dashboard-panel, .admin-panel, .profile-card) > h3 > i { color: var(--accent-strong); font-size: var(--fs-sm); }
/* Las listas internas ya llevan su propio padding: se compensa */
:is(.stats-panel, .dashboard-panel) > :is(.bloque-list, .falladas-list, .test-list, .history-table-container) {
    margin-inline: calc(var(--s-5) * -1);
}
:is(.stats-panel, .dashboard-panel) > :last-child { margin-bottom: 0; }


/* ============================================================
   PANEL · MATRÍCULAS
   ------------------------------------------------------------
   Fichas plegables de alumno, solicitudes pendientes y recibos.
   Las fichas son <details> nativos: el navegador ya las abre y
   cierra, aquí sólo se les da forma.
   ============================================================ */

/* ---- Utilidades de formulario del panel ---- */
.campo-linea {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.campo-linea select, .campo-linea input { flex: 1; min-width: 150px; margin: 0; }
.campo-nota {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ink-muted);
}
.inline-form { display: inline; }
.acciones-celda { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }

.alumno-tags     { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.alumno-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* ---- Solicitud pendiente, en el panel ---- */
.solicitud-admin {
    padding: var(--s-4);
    margin-top: var(--s-4);
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn-600);
    border-radius: var(--r-md);
}
.solicitud-admin:first-of-type { margin-top: var(--s-3); }
.solicitud-que {
    margin: var(--s-3) 0 0;
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.solicitud-acciones { margin-top: var(--s-4); }
.solicitud-acciones textarea { width: 100%; margin-bottom: var(--s-3); }
.solicitud-botones { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.solicitud-pie {
    margin: var(--s-3) 0 0;
    font-size: var(--fs-caption); color: var(--ink-muted);
}

/* ---- Ficha plegable de alumno ---- */
details.matricula-admin {
    margin-bottom: var(--s-3);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
details.matricula-admin[open] { border-color: var(--line-strong); box-shadow: var(--sh-sm); }

details.matricula-admin > summary {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    cursor: pointer; list-style: none;
}
details.matricula-admin > summary::-webkit-details-marker { display: none; }
details.matricula-admin > summary::marker { content: ''; }
details.matricula-admin > summary:hover { background: var(--surface-subtle); }

.matricula-admin-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.matricula-admin-quien strong { font-size: var(--fs-sm); color: var(--ink); }
.matricula-admin-quien span   { font-size: var(--fs-caption); color: var(--ink-muted); }

.matricula-admin-body {
    padding: var(--s-5);
    border-top: 1px solid var(--line);
}
.matricula-admin-fila {
    display: grid; gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.matricula-admin-fila label {
    display: block; margin-bottom: 6px;
    font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink);
}
.matricula-admin-sub {
    display: flex; align-items: center; gap: var(--s-3);
    margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink);
}
.matricula-admin-sub i { color: var(--accent-strong); }

.recibo-form { margin-top: var(--s-4); }
.recibo-campos {
    display: grid; gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: var(--s-3);
}
.recibo-campos label {
    display: block; margin-bottom: 4px;
    font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink);
}
.recibo-campos input { width: 100%; margin: 0; }

.matricula-admin-pie {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-top: var(--s-5); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
    details.matricula-admin > summary { flex-wrap: wrap; }
    .matricula-admin-quien { flex-basis: 100%; order: -1; }
}


/* ============================================================
   PANEL · GRUPOS
   ============================================================ */
details.grupo-card {
    margin-bottom: var(--s-3);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
details.grupo-card[open] { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
details.grupo-card.inactivo { opacity: .72; }
details.grupo-card.grupo-nuevo { border-style: dashed; background: none; }

details.grupo-card > summary {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    cursor: pointer; list-style: none;
}
details.grupo-card > summary::-webkit-details-marker { display: none; }
details.grupo-card > summary::marker { content: ''; }
details.grupo-card > summary:hover { background: var(--surface-subtle); }

.grupo-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--accent-wash); color: var(--accent-strong);
}
.grupo-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.grupo-quien strong { font-size: var(--fs-sm); color: var(--ink); }
.grupo-quien span   { font-size: var(--fs-caption); color: var(--ink-muted); }

.grupo-body { padding: var(--s-5); border-top: 1px solid var(--line); }

/* Sus alumnos */
.grupo-alumnos, .sin-grupo-lista { list-style: none; margin: 0; padding: 0; }
.grupo-alumnos > li, .sin-grupo-lista > li {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.grupo-alumnos > li:last-child, .sin-grupo-lista > li:last-child { border-bottom: 0; }
.ga-quien, .sin-grupo-lista > li > span:first-child {
    flex: 1; min-width: 160px; display: flex; flex-direction: column;
}
.ga-quien strong, .sin-grupo-lista strong { font-size: var(--fs-sm); color: var(--ink); }
.ga-quien small, .sin-grupo-lista small   { font-size: var(--fs-caption); color: var(--ink-muted); }

/* La ficha del grupo */
.grupo-campos {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.grupo-campos .gc-ancho { grid-column: 1 / -1; }
.grupo-campos label {
    display: block; margin-bottom: 4px;
    font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink);
}
.grupo-campos input, .grupo-campos select, .grupo-campos textarea { width: 100%; margin: 0; }
.grupo-campos .form-check { display: flex; align-items: flex-start; gap: var(--s-3); }
.grupo-campos .form-check input { width: auto; margin-top: 3px; }

.grupo-acciones { margin-top: var(--s-4); }
.grupo-borrar {
    margin-top: var(--s-5); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
    details.grupo-card > summary { flex-wrap: wrap; }
    .grupo-quien { flex-basis: 100%; order: -1; }
}

/* ============================================================
   EL CHAT FLOTANTE DE REXY
   ------------------------------------------------------------
   Ocupa el sitio del botón de WhatsApp dentro del área: abajo a la
   derecha, que es donde la gente busca un chat. El WhatsApp no se
   pierde, baja a la página donde se escribe al tutor y allí apunta a
   su móvil, que es a quien de verdad quieres escribir cuando ya estás
   matriculado.
   ============================================================ */
.rexy-chat { position: fixed; right: 20px; bottom: 20px; z-index: 97; }

.rexy-burbuja {
    display: inline-flex; align-items: center; gap: 0;
    height: 58px; padding: 0 7px;
    background: var(--surface-inverse); color: var(--ink-invert);
    border: 0; border-radius: var(--r-full);
    box-shadow: 0 6px 22px rgba(15, 26, 46, .34);
    cursor: pointer; line-height: 1;
    transition: gap var(--dur) var(--ease), padding var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.rexy-burbuja:hover, .rexy-burbuja:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 26, 46, .44);
    gap: 10px; padding-right: 18px;
}
/* La cara de Rexy, recortada en redondo dentro del botón */
.rexy-burbuja-cara {
    width: 44px; height: 44px; border-radius: var(--r-full);
    overflow: hidden; background: var(--gold-100); flex-shrink: 0;
}
.rexy-burbuja-cara img { width: 100%; height: 100%; object-fit: cover; }
/* El texto sólo se despliega al acercarse: en reposo es un círculo,
   igual que el de WhatsApp al que sustituye. */
.rexy-burbuja-txt {
    max-width: 0; overflow: hidden; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    transition: max-width var(--dur) var(--ease);
}
.rexy-burbuja:hover .rexy-burbuja-txt,
.rexy-burbuja:focus-visible .rexy-burbuja-txt { max-width: 160px; }
.rexy-chat.abierto .rexy-burbuja { display: none; }

/* ---- El panel ---- */
.rexy-panel {
    display: flex; flex-direction: column;
    width: min(380px, calc(100vw - 40px));
    height: min(560px, calc(100vh - 120px));
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 50px rgba(15, 26, 46, .28);
    overflow: hidden;
}
.rexy-panel[hidden] { display: none; }

.rexy-panel-head {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-inverse); color: var(--ink-invert);
    flex-shrink: 0;
}
.rexy-panel-cara {
    width: 34px; height: 34px; border-radius: var(--r-full);
    overflow: hidden; background: var(--gold-100); flex-shrink: 0;
}
.rexy-panel-cara img { width: 100%; height: 100%; object-fit: cover; }
.rexy-panel-quien { flex: 1; min-width: 0; line-height: 1.25; }
/* El color explícito no sobra: hay una regla global que pinta los
   <strong> del color del texto normal, y sobre la cabecera azul
   oscuro "Rexy" se quedaba en azul oscuro sobre azul oscuro. */
.rexy-panel-quien strong {
    display: block; font-size: var(--fs-sm);
    color: var(--ink-invert);
}
.rexy-panel-quien span {
    display: block; font-size: 11px; color: var(--ink-invert-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rexy-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    background: transparent; color: var(--ink-invert-muted);
    border: 0; border-radius: var(--r-sm);
    cursor: pointer; font-size: var(--fs-sm);
    transition: var(--transition);
}
.rexy-icono:hover, .rexy-icono:focus-visible {
    background: rgba(255, 255, 255, .12); color: var(--gold-400);
}

/* ---- El hilo ---- */
.rexy-panel-hilo {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface-subtle);
}
.rexy-panel-hilo .rmsg { display: flex; max-width: 100%; }
.rexy-panel-hilo .rmsg.propio { justify-content: flex-end; }
.rexy-panel-hilo .rmsg-cuerpo {
    max-width: 88%;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed);
}
.rexy-panel-hilo .propio .rmsg-cuerpo {
    background: var(--surface-inverse); color: var(--ink-invert);
    border-color: var(--surface-inverse);
}
.rexy-panel-hilo .rmsg-cuerpo p { margin: 0; }
.rexy-panel-hilo .rexy-fuente {
    margin-top: var(--s-3); padding-top: var(--s-3);
    border-top: 1px dashed var(--line);
}
.rexy-panel-hilo .rf-cab {
    display: flex; align-items: center; gap: var(--s-2);
    flex-wrap: wrap; margin-bottom: 5px;
}
.rexy-panel-hilo .rf-cab a { font-size: var(--fs-caption); font-weight: var(--fw-semi); }
.rexy-panel-hilo blockquote {
    margin: 0; padding-left: var(--s-3);
    border-left: 2px solid var(--accent);
    font-size: var(--fs-caption); color: var(--ink-muted);
}
.rexy-panel-hilo .btn-xs { margin-top: var(--s-3); }

.rexy-vacio { margin: auto; padding: var(--s-4); text-align: center; }
.rexy-vacio p { margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--ink-body); }
.rexy-vacio-nota { font-size: var(--fs-caption) !important; color: var(--ink-muted) !important; }

/* Los tres puntos mientras busca */
.rexy-puntos { display: inline-flex; gap: 4px; }
.rexy-puntos::before, .rexy-puntos::after,
.rexy-pensando .rmsg-cuerpo::after {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-muted);
    animation: rexLate 1.2s ease-in-out infinite;
}
.rexy-puntos::after { animation-delay: .2s; }
.rexy-pensando .rmsg-cuerpo::after { animation-delay: .4s; display: inline-block; margin-left: 4px; }
@keyframes rexLate { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---- Escribir ---- */
.rexy-panel-form {
    display: flex; gap: var(--s-2); align-items: center;
    padding: var(--s-3) var(--s-4) var(--s-2);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}
.rexy-panel-form input {
    flex: 1; min-width: 0; margin: 0; height: 40px;
    font-size: var(--fs-sm);
}
.rexy-enviar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--accent); color: var(--navy-900);
    border: 0; border-radius: var(--r-md);
    cursor: pointer; transition: var(--transition);
}
.rexy-enviar:hover { background: var(--accent-strong); }
.rexy-panel-pie {
    margin: 0; padding: 0 var(--s-4) var(--s-3);
    font-size: 11px; color: var(--ink-muted); line-height: 1.4;
    flex-shrink: 0;
}

/* ---- Conversaciones guardadas ---- */
.rexy-guardadas {
    max-height: 220px; overflow-y: auto; flex-shrink: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
}
.rexy-guardadas[hidden] { display: none; }
.rexy-guardadas-tit {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--ink-muted);
}
.rexy-guardadas ul { list-style: none; margin: 0; padding: 0; }
.rexy-guardada {
    display: flex; align-items: baseline; gap: var(--s-3);
    width: 100%; padding: 7px var(--s-2);
    background: transparent; border: 0; border-radius: var(--r-sm);
    text-align: left; cursor: pointer;
}
.rexy-guardada:hover { background: var(--surface-subtle); }
.rg-tit {
    flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rg-fecha { font-size: 11px; color: var(--ink-muted); flex-shrink: 0; }
.rexy-guardadas-vacio {
    padding: var(--s-2); font-size: var(--fs-caption); color: var(--ink-muted);
}

/* En el móvil el panel ocupa casi todo: un chat de 300px no se usa. */
@media (max-width: 560px) {
    .rexy-chat { right: 14px; bottom: 14px; left: 14px; }
    .rexy-panel { width: 100%; height: min(72vh, calc(100vh - 100px)); }
    .rexy-burbuja { height: 52px; float: right; }
}
@media print { .rexy-chat { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .rexy-burbuja, .rexy-burbuja-txt { transition: none; }
    .rexy-puntos::before, .rexy-puntos::after,
    .rexy-pensando .rmsg-cuerpo::after { animation: none; opacity: .5; }
}

/* Botón de WhatsApp dentro del área: en verde, que es lo que la gente
   reconoce sin leerlo. Se usa junto al chat del tutor. */
.btn-wa {
    background: #25D366; color: #fff; border: 1px solid #25D366;
}
.btn-wa:hover, .btn-wa:focus-visible {
    background: #1fb457; border-color: #1fb457; color: #fff;
}

/* ---- Conversaciones guardadas, en la página del asistente ---- */
.rexy-archivo { margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); }
.rexy-archivo > summary {
    cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semi);
    color: var(--ink-body);
}
.rexy-archivo > summary i { color: var(--accent-strong); margin-right: var(--s-2); }
.rexy-archivo-lista { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.rexy-archivo-lista li {
    display: flex; align-items: center; gap: var(--s-2);
    border-top: 1px solid var(--line);
}
.rexy-archivo-abrir { flex: 1; min-width: 0; }
.rexy-archivo-abrir button {
    display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
    width: 100%; padding: var(--s-3) var(--s-2);
    background: transparent; border: 0; border-radius: var(--r-sm);
    text-align: left; cursor: pointer;
}
.rexy-archivo-abrir button:hover { background: var(--surface-subtle); }
.ra-tit { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink); }
.ra-meta { font-size: var(--fs-caption); color: var(--ink-muted); flex-shrink: 0; }
.ra-borrar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    background: transparent; color: var(--ink-muted);
    border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.ra-borrar:hover { background: var(--danger-wash, #fee2e2); color: var(--danger, #b91c1c); }