/* ============================================================
   TEMARIUS REX — Área de alumno y panel del tutor
   ============================================================ */

.academia-wrap, .admin-section { padding-block: var(--s-7) var(--s-8); }

/* ============================================================
   CABECERA DEL ÁREA
   ============================================================ */
/* Cabecera de pagina, sin caja.
   Antes era un bloque navy macizo: ocupaba muchisimo, aplastaba lo de
   debajo y desentonaba con el resto del sitio. Ahora es tipografia con
   aire y un filete de separacion, como las cabeceras de seccion. */
.area-hero {
    display: grid; align-items: end;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "saludo cifras" "progreso progreso";
    gap: var(--s-4) var(--s-7);
    padding: 0 0 var(--s-5);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ink-body);
    position: relative;
}
.area-hero-saludo   { grid-area: saludo; }
.area-hero-cifras   { grid-area: cifras; display: flex; gap: var(--s-6); flex-wrap: wrap; }
.area-hero-progreso { grid-area: progreso; }
@media (max-width: 760px) {
    .area-hero { grid-template-columns: 1fr; grid-template-areas: "saludo" "cifras" "progreso"; padding: var(--s-5); }
    .area-hero-cifras { gap: var(--s-5); }
}

/* Cifra suelta dentro de la cabecera */
.ahc { display: flex; flex-direction: column; gap: 1px; }
.ahc strong {
    font-size: 30px; font-weight: var(--fw-light); line-height: 1.05;
    letter-spacing: var(--ls-display); color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ahc strong span { font-size: 16px; font-weight: var(--fw-reg); color: var(--ink-muted); }
.ahc > span {
    font-size: var(--fs-micro); text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow); color: var(--ink-faint);
}
/* El circulo dorado de adorno vivia sobre el fondo navy; sobre blanco
   solo ensuciaba, asi que fuera. */
.area-hero h1 {
    margin: 0 0 6px;
    font-size: clamp(30px, 4.2vw, 46px); font-weight: var(--fw-light);
    letter-spacing: var(--ls-display); line-height: 1.08;
    color: var(--ink);
}
.area-hero p { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.area-hero strong { color: var(--accent-strong); font-weight: var(--fw-semi); }

.area-hero .progress-bar { background: var(--surface-sunken); height: 6px; }
.area-hero .progress-bar > span { background: var(--accent); }
.area-hero .progress-label { color: var(--ink-muted); }

/* ============================================================
   AVISOS DEL ÁREA
   ============================================================ */
.area-alert {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.area-alert:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); color: var(--ink-body); }
.area-alert > i:first-child { color: var(--accent-strong); }
.area-alert > i:last-child { margin-left: auto; color: var(--ink-faint); }
.area-alert.chat { border-left-color: var(--ok-600); }
.area-alert.chat > i:first-child { color: var(--ok-600); }

.demo-banner {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
    background: var(--accent-wash);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.demo-banner > i { color: var(--accent-strong); }
.demo-banner > div { flex: 1; min-width: 220px; }
.demo-banner strong { color: var(--ink); }

.demo-switch {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    margin-bottom: var(--s-5);
    font-size: var(--fs-caption); color: var(--ink-muted);
}

.premium-cta {
    text-align: center; padding: var(--s-8) var(--s-6);
    background: var(--surface-card);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
}
.premium-cta > i { font-size: 34px; color: var(--accent); margin-bottom: var(--s-4); display: block; }
.premium-cta h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h4); font-weight: var(--fw-semi); }
.premium-cta p { max-width: 52ch; margin: 0 auto var(--s-5); color: var(--ink-muted); font-size: var(--fs-sm); }

/* ============================================================
   RETÍCULAS DEL ÁREA
   ============================================================ */
.area-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s-6); align-items: start; }
@media (max-width: 980px) { .area-layout { grid-template-columns: 1fr; } }

.plan-admin-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 1100px) { .plan-admin-layout { grid-template-columns: 1fr; } }

.modulos-grid, .mod-lista, .dashboard-grid, .progreso-grid {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.modulo-card {
    display: flex; gap: var(--s-4);
    padding: var(--s-5);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: var(--transition);
}
a.modulo-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }
.modulo-card.locked { opacity: .62; }
.mc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--accent-wash); color: var(--accent-strong);
    font-size: var(--fs-lg);
}
.modulo-card.locked .mc-icon { background: var(--surface-sunken); color: var(--ink-faint); }
.mc-body { flex: 1; min-width: 0; }
.mc-body h3 {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 4px; font-size: var(--fs-sm); font-weight: var(--fw-semi);
    color: var(--ink); letter-spacing: 0;
}
.mc-body p { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--ink-muted); }
.mc-ext { font-size: 10px; color: var(--ink-faint); }
.mc-locktag {
    display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s-3);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    color: var(--accent-strong);
}

/* ---- Continuar donde lo dejaste ---- */
.continuar {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5); text-decoration: none;
}
.continuar:hover { background: var(--surface-subtle); }
.continuar-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-full);
    background: var(--surface-inverse); color: var(--ink-invert); font-size: var(--fs-caption);
}
.continuar small { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.continuar strong { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }

/* ---- Temas pendientes ---- */
.pend-lista { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; }
.pend-item {
    display: flex; align-items: baseline; gap: var(--s-3);
    padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.pend-item:last-child { border-bottom: 0; }
.pend-item:hover { background: var(--surface-subtle); color: var(--ink); }
.pend-cod {
    flex-shrink: 0; padding: 1px 7px; border-radius: var(--r-xs);
    background: var(--accent-wash); color: var(--accent-strong);
    font-size: var(--fs-micro); font-weight: var(--fw-bold);
}

/* ============================================================
   CALENDARIO
   ============================================================ */
.cal-layout { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-month { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cal-month-head {
    padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; padding: var(--s-3); }
.cal-dow {
    text-align: center; padding: 6px 0;
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: .08em; color: var(--ink-faint);
}
.cal-cell {
    position: relative; aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: var(--r-sm); font-size: var(--fs-caption); color: var(--ink-body);
}
.cal-cell.empty { visibility: hidden; }
.cal-cell.has-task { background: var(--surface-subtle); font-weight: var(--fw-semi); color: var(--ink); }
.cal-cell.today { background: var(--surface-inverse); color: var(--ink-invert); font-weight: var(--fw-bold); }
.cal-num { line-height: 1; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.cal-cell.today .cal-dot { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.cal-tasks { min-width: 0; }

/* ============================================================
   CASOS PRÁCTICOS
   ============================================================ */
.caso-item { display: flex; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.caso-item:last-child { border-bottom: 0; }
.caso-body { flex: 1; min-width: 0; }
.caso-meta { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-caption); color: var(--ink-muted); }
.caso-correccion {
    margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
    background: var(--surface-subtle); border-radius: var(--r-sm);
    font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.caso-nota, .nota-badge {
    background: var(--ok-wash); color: var(--ok-600);
    font-weight: var(--fw-bold); font-size: var(--fs-sm);
    padding: 3px 11px; border-radius: var(--r-full);
}

/* ============================================================
   LECCIÓN
   ============================================================ */
.leccion-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; }
@media (max-width: 980px) { .leccion-layout { grid-template-columns: 1fr; } }
.leccion-main, .lec-sidebar { min-width: 0; }
.video-placeholder {
    position: relative; aspect-ratio: 16/9;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4);
    background: var(--surface-inverse); border-radius: var(--r-lg);
    color: var(--ink-invert-muted); margin-bottom: var(--s-5);
}
.play-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: var(--r-full);
    background: var(--gold-500); color: var(--navy-900); font-size: var(--fs-lg);
}
.vp-label { font-size: var(--fs-caption); }
.lec-pane { display: none; }
.lec-pane.active { display: block; }
.lec-nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.lec-mod, .ls-mod { font-size: var(--fs-caption); color: var(--ink-muted); }
.ls-head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.lec-material { display: flex; flex-direction: column; gap: var(--s-2); }

.curso-detail-header {
    padding: 0 0 var(--s-5);
    margin-bottom: var(--s-6);
    background: none;
    border-bottom: 1px solid var(--line);
    color: var(--ink-body);
}
.curso-detail-header h1 {
    margin: 0 0 var(--s-3);
    font-size: clamp(30px, 4.6vw, 50px); font-weight: var(--fw-light);
    letter-spacing: var(--ls-display); line-height: 1.06;
    color: var(--ink);
}
.curso-detail-header h1 i { color: var(--accent-strong); }
.cd-sub {
    margin: 0; max-width: 62ch;
    font-size: var(--fs-lg); font-weight: var(--fw-light);
    line-height: var(--lh-relaxed); color: var(--ink-muted);
}
.curso-detail-header .progress-bar { background: var(--surface-sunken); height: 6px; }
.curso-detail-header .progress-bar > span { background: var(--accent); }
.curso-detail-header .progress-label { color: var(--ink-muted); }

/* ============================================================
   PANEL DEL TUTOR
   ============================================================ */
.admin-nav {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
}

.plan-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-5); flex-wrap: wrap;
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-4);
}
.plan-alumno { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.plan-alumno label { font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink-muted); white-space: nowrap; }
.plan-alumno select { width: auto; max-width: 320px; }
.plan-progreso-mini { flex: 1; min-width: 200px; max-width: 320px; }
.plan-progreso-mini span { display: block; margin-top: 5px; font-size: var(--fs-caption); color: var(--ink-muted); }

/* ============================================================
   PERFIL
   ============================================================ */
.perfil-hero {
    display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
    padding: var(--s-6);
    background: var(--surface-inverse); border-radius: var(--r-lg);
    color: var(--ink-invert-muted); margin-bottom: var(--s-6);
}
.perfil-avatar { width: 72px; height: 72px; font-size: var(--fs-h4); background: var(--gold-500); color: var(--navy-900); }
.perfil-identidad h1 { color: var(--ink-invert); margin-bottom: 4px; }
/* Estas dos clases también se usan fuera de la cabecera: por defecto
   van en tinta normal y sólo se aclaran dentro de .perfil-hero. */
.perfil-sub { font-size: var(--fs-sm); color: var(--ink-body); }
.perfil-sub-nota { font-size: var(--fs-caption); color: var(--ink-muted); }
.perfil-hero .perfil-sub { color: var(--ink-invert-muted); }
.perfil-hero .perfil-sub-nota { color: rgba(255,255,255,.5); }
.perfil-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.perfil-tag-soft { background: rgba(255,255,255,.1); border-color: var(--line-invert); color: var(--ink-invert); }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); align-items: start; }
.profile-section { margin-bottom: var(--s-6); }
.profile-info { display: flex; flex-direction: column; gap: var(--s-3); }

.ficha { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-5); }
.ficha-head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.ficha-body { padding: var(--s-4) var(--s-5); }
.ficha-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.ficha-row:last-child { border-bottom: 0; }
.ficha-row > span:first-child { color: var(--ink-muted); font-size: var(--fs-caption); }

/* ============================================================
   PROGRESO POR BLOQUES (compartido con la web de tests)
   ============================================================ */
.progreso-bloques, .bloque-list { display: flex; flex-direction: column; gap: var(--s-3); }
.bloque-prog { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3) 0; }
.bloque-prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0; font-size: var(--fs-sm); }
.bloque-pct { font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); color: var(--ink); }
.bloque-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.bloque-row:last-child { border-bottom: 0; }
.bloque-select-all { font-size: var(--fs-caption); }


/* ============================================================
   ACCESO DEL TUTOR dentro del área de alumno
   ============================================================ */
.aviso-tutor {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
}
.aviso-tutor > div:first-of-type { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.aviso-tutor strong { font-size: var(--fs-sm); color: var(--ink); }
.aviso-tutor span { font-size: var(--fs-caption); color: var(--ink-muted); }
.aviso-tutor-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-md);
    background: var(--accent-wash); color: var(--accent-strong); font-size: var(--fs-body);
}
.aviso-tutor-acciones { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ============================================================
   AVISOS EN FILA
   ============================================================ */
.avisos { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: var(--s-5); }
.avisos .area-alert { margin-bottom: 0; }
.area-alert > span { flex: 1; }
.area-alert.urgente { border-left-color: var(--bad-600); }
.area-alert.urgente > i:first-child { color: var(--bad-600); }

/* ============================================================
   LA SEMANA EN LA PORTADA DEL ÁREA
   ============================================================ */
.semana-nota {
    display: flex; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: var(--accent-wash);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.semana-nota > i { color: var(--accent-strong); flex-shrink: 0; margin-top: 3px; }
.panel-foot {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--line);
    background: var(--surface-subtle);
    font-size: var(--fs-caption); color: var(--ink-muted);
}
.panel-foot .progress-bar { flex: 0 1 200px; }

/* ============================================================
   CONTINUAR: una sola pieza, no un panel entero
   ============================================================ */
.continuar-card {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6);
    background: var(--surface-card);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    text-decoration: none; transition: var(--transition);
}
.continuar-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.continuar-txt { flex: 1; min-width: 0; }
.continuar-txt small {
    display: block; font-size: var(--fs-micro); text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-faint);
}
.continuar-txt strong { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink); }
.continuar-card > i:last-child { color: var(--ink-faint); }

/* ============================================================
   ACCESOS — la navegación del área, compacta
   Antes eran ocho tarjetas grandes con descripción y competían
   con el contenido de verdad.
   ============================================================ */
.accesos {
    display: grid; gap: var(--s-2);
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    margin-bottom: var(--s-5);
}
.acceso {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-card);
    border: 1px solid var(--line); border-radius: var(--r-md);
    text-decoration: none; transition: var(--transition);
}
.acceso:hover { border-color: var(--accent); background: var(--accent-wash); }
.acceso-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm);
    background: var(--surface-subtle); color: var(--ink-muted); font-size: var(--fs-sm);
    transition: var(--transition);
}
.acceso:hover .acceso-ico { background: var(--accent); color: var(--navy-900); }
.acceso-nombre {
    display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
    font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink);
}

.accesos-bloqueados {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-subtle); border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    font-size: var(--fs-caption); color: var(--ink-muted);
}
.accesos-bloqueados .bloq {
    padding: 2px 9px; border-radius: var(--r-full);
    background: var(--surface-card); border: 1px solid var(--line);
    color: var(--ink-muted);
}
.accesos-bloqueados a { margin-left: auto; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* Dato suelto bajo la barra de avance */
.avance-extra {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    margin-top: var(--s-4); padding-top: var(--s-3);
    border-top: 1px solid var(--line);
    font-size: var(--fs-caption); color: var(--ink-muted);
}
.avance-extra strong { color: var(--ink); font-size: var(--fs-sm); }


/* ============================================================
   MI MATRÍCULA
   ------------------------------------------------------------
   Qué tiene contratado el alumno, en qué estado está y qué puede
   pedir. Se ve también estando de baja, así que los estados no son
   decorativos: son la información principal de la página.
   ============================================================ */

/* ---- Tonos, como utilidad suelta ----
   .estado-tag ya tenía .ok/.warn/.info, pero aquí hacen falta en
   textos, iconos y avisos, no sólo en pastillas. */
.tono-ok   { color: var(--ok-600); }
.tono-warn { color: var(--warn-600); }
.tono-bad  { color: var(--bad-600); }
.tono-info { color: var(--info-600); }

.estado-tag.tono-ok   { background: var(--ok-wash);   border-color: transparent; }
.estado-tag.tono-warn { background: var(--warn-wash); border-color: transparent; }
.estado-tag.tono-bad  { background: var(--bad-wash);  border-color: transparent; }
.estado-tag.tono-info { background: var(--info-wash); border-color: transparent; }

.demo-banner.tono-warn { background: var(--warn-wash); border-color: transparent; }
.demo-banner.tono-bad  { background: var(--bad-wash);  border-color: transparent; }

/* ---- Utilidades que faltaban ---- */
.ink-faint { color: var(--ink-faint); font-weight: var(--fw-reg); }
.panel-meta {
    margin-left: auto;
    padding: 2px 9px; border-radius: var(--r-full);
    background: var(--surface-subtle); color: var(--ink-muted);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
}
.mini-dato {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-caption); color: var(--ink-muted);
}
.mini-dato:last-of-type { border-bottom: 0; }
.mini-dato strong { font-size: var(--fs-sm); color: var(--ink); text-align: right; }

/* ---- La tarjeta principal ---- */
.matricula-card {
    padding: var(--s-5);
    margin-bottom: var(--s-4);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--r-lg);
}
.matricula-card.estado-activo  { border-left-color: var(--ok-600); }
.matricula-card.estado-pausado { border-left-color: var(--warn-600); }
.matricula-card.estado-baja    { border-left-color: var(--bad-600); }

.matricula-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
}
.matricula-eyebrow {
    display: block; margin-bottom: 4px;
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--ink-faint);
}
.matricula-card-top h2 {
    margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-tight); color: var(--ink);
}
.matricula-card-top h2 i { color: var(--accent-strong); margin-right: 6px; }
.matricula-card-top > div > p {
    margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-muted);
}
.matricula-estado {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 5px 12px; border-radius: var(--r-full);
    background: var(--surface-subtle);
    font-size: var(--fs-caption); font-weight: var(--fw-semi);
}
.matricula-estado.tono-ok   { background: var(--ok-wash); }
.matricula-estado.tono-warn { background: var(--warn-wash); }
.matricula-estado.tono-bad  { background: var(--bad-wash); }

.matricula-nota {
    margin: var(--s-4) 0 0;
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}

.matricula-datos {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-top: var(--s-5); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}
.matricula-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.matricula-datos span   { font-size: var(--fs-micro); text-transform: uppercase;
                          letter-spacing: var(--ls-eyebrow); color: var(--ink-faint); }
.matricula-datos strong { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }

.matricula-alerta {
    display: flex; align-items: flex-start; gap: var(--s-3);
    margin-top: var(--s-4); padding: var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed);
}
.matricula-alerta.tono-warn { background: var(--warn-wash); color: var(--warn-600); }
.matricula-alerta.tono-info { background: var(--info-wash); color: var(--info-600); }
.matricula-alerta i { margin-top: 2px; flex-shrink: 0; }

/* ---- Qué incluye ---- */
.matricula-incluye {
    display: grid; gap: var(--s-2);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 0; padding: 0; list-style: none;
}
.matricula-incluye li {
    display: flex; align-items: flex-start; gap: var(--s-3);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.matricula-incluye i { margin-top: 4px; flex-shrink: 0; color: var(--ok-600); font-size: 11px; }

.matricula-intro, .matricula-pie {
    font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ink-muted);
}
.matricula-intro { margin: 0 0 var(--s-4); }
.matricula-pie   { margin: var(--s-4) 0 0; }

/* ---- El formulario de solicitud ---- */
/* Ojo con el nombre: .matricula-form ya existía en el panel para el
   selector de tutor, que va en línea. Este es otro formulario. */
.solicitud-form { max-width: 560px; }
.solicitud-form .form-group { margin-bottom: var(--s-4); }
.solicitud-form [hidden] { display: none; }
.solicitud-form textarea { width: 100%; }

/* ---- Solicitudes ---- */
.solicitud-pendiente {
    padding: var(--s-4);
    background: var(--warn-wash);
    border-radius: var(--r-md);
}
.solicitud-cab {
    display: flex; align-items: center; gap: var(--s-3);
    font-size: var(--fs-sm);
}
.solicitud-cab > i { font-size: var(--fs-body); color: var(--ink-muted); flex-shrink: 0; }
.solicitud-cab > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.solicitud-cab strong { color: var(--ink); }
.solicitud-cab span:not(.estado-tag) { font-size: var(--fs-caption); color: var(--ink-muted); }

.solicitud-pendiente p { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--ink-body); }
.solicitud-pendiente blockquote, .solicitud-lista blockquote {
    margin: var(--s-3) 0 0; padding-left: var(--s-4);
    border-left: 2px solid var(--line-strong);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}

.solicitud-lista { margin: 0; padding: 0; list-style: none; }
.solicitud-lista > li {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
}
.solicitud-lista > li:first-child { padding-top: 0; }
.solicitud-lista > li:last-child  { padding-bottom: 0; border-bottom: 0; }

@media (max-width: 640px) {
    .matricula-card-top { flex-direction: column; }
    .matricula-estado { align-self: flex-start; }
}


/* ============================================================
   AJUSTES DE PERFIL: foto y presentación
   ============================================================ */
.perfil-avatar-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--gold-500); color: var(--navy-900);
    font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: .03em;
}

.foto-ajuste {
    display: flex; align-items: center; gap: var(--s-4);
    flex-wrap: wrap;
}
.foto-ajuste-acciones {
    display: flex; align-items: flex-end; gap: var(--s-3);
    flex-wrap: wrap; flex: 1; min-width: 220px;
}
.foto-ajuste-acciones form {
    display: flex; flex-direction: column; gap: var(--s-2);
}
.foto-ajuste-acciones input[type="file"] {
    max-width: 100%;
    font-size: var(--fs-caption);
}
.ajuste-label {
    font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink);
}
.ajuste-nota {
    margin: var(--s-3) 0 0;
    font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ink-muted);
}

/* La presentación del tutor, tal y como la ve el alumno */
.tutor-bio {
    margin: var(--s-3) 0 0;
    font-size: var(--fs-caption); line-height: var(--lh-relaxed);
    color: var(--ink-muted);
}


/* El acceso secundario del tutor al área del alumno: es una
   previsualización, no "su" sitio, así que no compite con el botón
   del panel. */
.ba-ver {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-caption); color: var(--ink-invert-muted);
    text-decoration: none; white-space: nowrap;
}
.ba-ver:hover { color: var(--ink-invert); }

.demo-banner.tono-info { background: var(--info-wash); border-color: transparent; }


/* A qué grupo pertenece el alumno, sobre su lista de clases */
.grupo-aviso {
    display: flex; align-items: flex-start; gap: var(--s-3);
    margin-bottom: 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);
}
.grupo-aviso i { margin-top: 3px; flex-shrink: 0; color: var(--accent-strong); }
.grupo-aviso strong { color: var(--ink); }


/* ============================================================
   CHAT DEL GRUPO
   ============================================================ */
.chat-selector {
    display: flex; align-items: center; gap: var(--s-2);
    flex-wrap: wrap; margin-bottom: var(--s-4);
    font-size: var(--fs-caption); color: var(--ink-muted);
}

.chat-hilo {
    display: flex; flex-direction: column; gap: var(--s-4);
    max-height: 58vh; overflow-y: auto;
    padding-right: var(--s-2); margin-bottom: var(--s-5);
}

/* Separador de día */
.chat-dia { display: flex; align-items: center; gap: var(--s-3); }
.chat-dia::before, .chat-dia::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
}
.chat-dia span {
    font-size: var(--fs-micro); text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow); color: var(--ink-faint);
}

.gmsg { display: flex; align-items: flex-start; gap: var(--s-3); }
.gmsg-cuerpo {
    flex: 1; min-width: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-subtle);
    border-radius: var(--r-md);
}
/* Los propios, del otro lado y con el acento de marca */
.gmsg.propio { flex-direction: row-reverse; }
.gmsg.propio .gmsg-cuerpo { background: var(--accent-wash); }
.gmsg.propio .gmsg-quien  { justify-content: flex-end; }
.gmsg.propio p            { text-align: right; }
/* Los del tutor, marcados: en un grupo importa quién responde */
.gmsg.del-tutor .gmsg-cuerpo { border-left: 3px solid var(--accent); }

.gmsg-quien {
    display: flex; align-items: center; gap: var(--s-2);
    flex-wrap: wrap; margin-bottom: 2px;
    font-size: var(--fs-caption);
}
.gmsg-quien strong { color: var(--ink); }
.gmsg-quien time   { color: var(--ink-faint); font-size: var(--fs-micro); }
.gmsg-cuerpo p {
    margin: 0; font-size: var(--fs-sm);
    line-height: var(--lh-relaxed); color: var(--ink-body);
    overflow-wrap: anywhere;
}

.btn-icono-mini { padding: 2px 5px; font-size: 11px; }

.chat-escribir textarea { width: 100%; margin-bottom: var(--s-3); }
.chat-escribir-pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
}
.chat-escribir-pie .ajuste-nota { margin: 0; }


/* ============================================================
   REXY, la mascota
   ============================================================ */
.rexy { display: inline-block; line-height: 0; flex-shrink: 0; }
.rexy img { max-width: 100%; height: auto; display: block; }

/* Rexy con un bocadillo al lado */
.rexy-dice {
    display: flex; align-items: center; gap: var(--s-4);
    flex-wrap: wrap;
}
.rexy-bocadillo {
    position: relative; flex: 1; min-width: 200px;
    padding: var(--s-4) var(--s-5);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}

/* En los estados vacíos sustituye al icono, así que hereda su sitio.
   Ojo: .empty-dino venía de cuando aquí había un icono de fuente y
   llevaba opacity:.3 heredado. A la mascota eso la dejaba en un
   fantasma gris; se le devuelve el color y se le pone suelo, igual
   que en las páginas públicas. */
.vacio .rexy, .empty-dino .rexy, .empty-state .rexy {
    display: block; margin: 0 auto var(--s-3);
    position: relative; opacity: 1;
    filter: drop-shadow(0 4px 6px rgba(15, 26, 46, .10));
}
.empty-dino { color: inherit; opacity: 1; }
.vacio .rexy::before, .empty-dino .rexy::before, .empty-state .rexy::before {
    content: ""; position: absolute;
    left: 6%; right: 6%; bottom: calc(var(--s-3) + 2px); height: 20px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(15, 26, 46, .22), rgba(15, 26, 46, 0));
}

.demo-bienvenida { align-items: center; }
.demo-bienvenida .rexy { margin-right: var(--s-2); }

/* ---- El asistente ---- */
.rexy-saludo {
    display: flex; align-items: center; gap: var(--s-5);
    flex-wrap: wrap; margin-bottom: var(--s-5);
}
.rexy-saludo > div { flex: 1; min-width: 240px; }
/* Mismo criterio que en las páginas públicas: la mascota se apoya en
   algo. Sin la elipse queda recortada y pegada sobre el panel. */
.rexy-saludo .rexy {
    position: relative; align-self: flex-end;
    filter: drop-shadow(0 4px 6px rgba(15, 26, 46, .10));
}
.rexy-saludo .rexy::before {
    content: ""; position: absolute;
    left: 6%; right: 6%; bottom: 2px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(15, 26, 46, .20), rgba(15, 26, 46, 0));
}
.rexy-saludo h2 {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-h4); font-weight: var(--fw-light);
    letter-spacing: var(--ls-tight); color: var(--ink);
}
.rexy-saludo p { margin: 0 0 var(--s-3); font-size: var(--fs-sm);
                 line-height: var(--lh-relaxed); color: var(--ink-body); }

.rexy-hilo {
    display: flex; flex-direction: column; gap: var(--s-4);
    max-height: 56vh; overflow-y: auto;
    padding-right: var(--s-2); margin-bottom: var(--s-5);
}
.rmsg { display: flex; align-items: flex-start; gap: var(--s-3); }
.rmsg.propio { flex-direction: row-reverse; }
.rmsg-cuerpo {
    flex: 1; min-width: 0;
    padding: var(--s-3) 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);
    overflow-wrap: anywhere;
}
.rmsg.propio .rmsg-cuerpo { background: var(--accent-wash); }
.rmsg-cuerpo > p:first-child { margin-top: 0; }
.rmsg-cuerpo > p:last-child  { margin-bottom: 0; }
.rexy-mini { align-self: flex-start; }

/* Cada fragmento que Rexy encuentra, con su procedencia */
.rexy-fuente {
    margin-top: var(--s-3); padding: var(--s-3);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.rf-cab {
    display: flex; align-items: center; gap: var(--s-2);
    flex-wrap: wrap; margin-bottom: var(--s-2);
    font-size: var(--fs-caption);
}
.rf-cab a { font-weight: var(--fw-semi); }
.rexy-fuente blockquote {
    margin: 0; padding-left: var(--s-3);
    border-left: 2px solid var(--line-strong);
    font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ink-muted);
}

.rexy-campo { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.rexy-campo input { flex: 1; min-width: 200px; margin: 0; }

@media (max-width: 640px) {
    .rexy-saludo { flex-direction: column; text-align: center; }
    .rexy-campo button { width: 100%; }
}

/* ============================================================
   NOTIFICACIONES
   ============================================================ */
.nav-campana { position: relative; }

.notif-filtros { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); }
.notif-filtro {
    padding: 6px 14px; border-radius: var(--r-full);
    border: 1px solid var(--line); background: var(--surface-card);
    font-size: var(--fs-sm); color: var(--ink-muted); text-decoration: none;
}
.notif-filtro:hover { border-color: var(--line-strong); color: var(--ink); }
.notif-filtro.activo {
    background: var(--surface-inverse); border-color: var(--surface-inverse);
    color: var(--ink-invert);
}

.notif-lista { list-style: none; margin: 0; padding: 0; }
.notif {
    display: flex; align-items: flex-start; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: var(--s-3);
}
/* Sin leer: una banda dorada a la izquierda. Se ve de un vistazo cuáles
   son nuevas sin tener que teñir la fila entera, que a los diez avisos
   convierte la lista en un semáforo. */
.notif.sin-leer {
    border-left: 3px solid var(--accent);
    background: var(--accent-wash);
}
.notif-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: var(--surface-subtle); color: var(--ink-muted);
    border-radius: var(--r-full); font-size: var(--fs-sm);
}
.notif.sin-leer .notif-ico { background: var(--surface-card); color: var(--accent-strong); }

.notif-cuerpo { flex: 1; min-width: 0; }
.notif-cab {
    display: flex; align-items: baseline; gap: var(--s-3);
    flex-wrap: wrap; margin-bottom: 2px;
}
.notif-cab strong { font-size: var(--fs-sm); color: var(--ink); }
.notif-cuando { font-size: var(--fs-caption); color: var(--ink-muted); white-space: nowrap; }
.notif-cuerpo p {
    margin: 0 0 var(--s-2); font-size: var(--fs-caption);
    color: var(--ink-muted); line-height: var(--lh-relaxed);
}
.notif-ir { display: inline-block; }

.notif-acciones { display: flex; gap: 4px; flex-shrink: 0; }
.notif-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: transparent; color: var(--ink-muted);
    border: 0; border-radius: var(--r-sm);
    cursor: pointer; font-size: var(--fs-caption);
}
.notif-btn:hover { background: var(--surface-subtle); color: var(--ink); }
.notif-btn-borrar:hover { background: #fee2e2; color: #b91c1c; }

@media (max-width: 560px) {
    .notif { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
    .notif-ico { width: 30px; height: 30px; }
}