/* ============================================================
   TEMARIUS REX — Componentes compartidos
   Paneles, tarjetas, tablas, listas, sesiones, chat y rejillas.
   Los usan tanto el área de alumno como el panel del tutor.
   ============================================================ */

/* ============================================================
   PANEL — la superficie base de todo
   ============================================================ */
.panel, .card, .dashboard-panel, .admin-panel, .stats-panel, .profile-card, .tema-panel-head {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    margin-bottom: var(--s-5);
    overflow: hidden;
}
.panel-head {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 1px solid var(--line);
}
.panel-head > i { color: var(--accent-strong); font-size: var(--fs-sm); }
.panel-head h2, .panel-head h3 {
    margin: 0; flex: 1;
    font-size: var(--fs-lg); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-tight); color: var(--ink);
}
.panel-link {
    font-size: var(--fs-caption); font-weight: var(--fw-med);
    color: var(--ink-muted); white-space: nowrap;
}
a.panel-link:hover { color: var(--accent-strong); }
.panel-body { padding: var(--s-5); }
.panel-body.tight { padding: 0; }
.panel.destacado { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* ============================================================
   TABLAS
   ============================================================ */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.tabla-scroll, .history-table-container, .rejilla-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
}
.admin-table, .history-table, .tabla-comparativa {
    width: 100%; background: var(--surface-card);
}
.admin-table th, .history-table th, .tabla-comparativa th {
    padding: var(--s-3) var(--s-4);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: var(--fs-caption); font-weight: var(--fw-semi);
    letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted);
    white-space: nowrap;
}
.admin-table td, .history-table td, .tabla-comparativa td {
    padding: var(--s-4);
    border-bottom: 1px solid var(--line);
    color: var(--ink-body); vertical-align: middle;
}
.admin-table tr:last-child td, .history-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover, .history-table tbody tr:hover { background: var(--surface-subtle); }
/* La barra de color marca la fila entera, no cada celda: si se aplica a
   todos los <td> aparece una raya entre columna y columna. */
.row-pass td:first-child { box-shadow: inset 3px 0 0 var(--ok-600); }
.row-fail td:first-child { box-shadow: inset 3px 0 0 var(--bad-600); }

/* ============================================================
   CIFRAS — tarjetas de estadística
   ============================================================ */
.area-stats, .stats-cards, .stats-overview, .cifras-row, .admin-grid, .simulacro-stats-grid, .insight-grid, .stats-insight-row {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: var(--s-6);
}
.area-stat, .stat-card, .admin-stat, .cifra, .insight-card, .desglose-card, .sim-stat, .stat-big-card, .proof-item {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    transition: var(--transition);
}
a.area-stat, a.stat-card { text-decoration: none; }
a.area-stat:hover, a.stat-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); transform: translateY(-1px); }

.area-stat i, .stat-icon, .insight-icon, .stat-big-icon, .canal-ico, .na-ico, .feature-icon, .rule-icon, .paso-ico, .repaso-fallos-icon, .result-recommend-icon, .mod-head-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: var(--s-3);
    border-radius: var(--r-md);
    background: var(--accent-wash); color: var(--accent-strong);
    font-size: var(--fs-body); flex-shrink: 0;
}
.area-stat strong, .stat-number, .insight-value, .cifra strong, .stat-big-number, .sim-stat-number, .desglose-value, .proof-number, .score-value {
    font-size: 30px; font-weight: var(--fw-semi);
    letter-spacing: var(--ls-display); line-height: 1.15; color: var(--ink);
}
.area-stat span, .stat-label, .insight-label, .cifra span, .stat-big-label, .sim-stat-label, .desglose-label, .proof-label {
    font-size: var(--fs-caption); color: var(--ink-muted);
    letter-spacing: .02em;
}
.stat-info { display: flex; flex-direction: column; }
.stat-trend { font-size: var(--fs-caption); font-weight: var(--fw-semi); }
.stat-trend.up { color: var(--ok-600); }
.stat-trend.down { color: var(--bad-600); }

/* Racha encendida */
.stat-racha.on .stat-icon { background: var(--warn-wash); color: var(--warn-600); }

/* ============================================================
   BARRAS DE PROGRESO
   ============================================================ */
.progress-bar, .bloque-prog-bar, .tema-stat-bar, .bloque-bar, .test-progress-bar, .semana-barra {
    height: 6px; width: 100%;
    background: var(--surface-sunken);
    border-radius: var(--r-full);
    overflow: hidden;
}
.progress-bar > span, .bloque-prog-bar > span, .bloque-fill, .tema-stat-fill, .test-progress-bar > span {
    display: block; height: 100%;
    background: var(--accent);
    border-radius: var(--r-full);
    transition: width var(--dur) var(--ease-out);
}
.progress-label { margin-top: 6px; font-size: var(--fs-caption); color: var(--ink-muted); }

/* ============================================================
   ACORDEÓN DE BLOQUES (temario y material)
   ============================================================ */
/* Ojo: .bloque-card y .faq-item tienen su propio estilo en 60-resto.css
   cuando salen en la home; aquí sólo el acordeón del temario. */
.modulo, .bloque-group {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: var(--s-3);
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.modulo.open { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.modulo-head, .bloque-header {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    cursor: pointer; user-select: none;
    background: transparent; border: 0; width: 100%; text-align: left;
}
.modulo-head:hover, .bloque-header:hover { background: var(--surface-subtle); }
/* Cuadros fijos para UN número. .quiz-num no está: lleva "1 / 10" y
   con 30px de ancho el texto se le salía por los dos lados. */
.modulo-num, .bloque-num, .tema-numero, .paso-num, .review-num, .question-num, .caso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--surface-inverse); color: var(--ink-invert);
    font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.modulo-head h3, .bloque-name {
    flex: 1; margin: 0;
    font-size: var(--fs-body); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-tight); color: var(--ink);
}
/* Ojo: .bloque-title NO es el título, es la caja que lleva dentro la
   flecha, el <h3> y el contador. Si se le da el estilo de titular, el h3
   se queda con su tamaño de display y la flecha cae a su propia linea. */
.bloque-title {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--s-3);
    flex-wrap: wrap;
}
.bloque-title h3 {
    margin: 0;
    font-size: var(--fs-body); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-tight); line-height: 1.35; color: var(--ink);
}
.bloque-title .bloque-count { margin-left: auto; }
@media (max-width: 640px) {
    .bloque-title .bloque-count { margin-left: 0; flex-basis: 100%; }
}
.modulo-meta, .bloque-count, .tema-count {
    font-size: var(--fs-caption); color: var(--ink-muted); white-space: nowrap;
}
.chev, .bloque-arrow { color: var(--ink-faint); font-size: var(--fs-caption); transition: transform var(--dur) var(--ease); }
.modulo.open .chev, .bloque-card.open .bloque-arrow { transform: rotate(180deg); }
/* Plegado A: cerrado por defecto, se abre con .open (temario) */
.modulo-body { display: none; border-top: 1px solid var(--line); }
.modulo.open .modulo-body { display: block; }

/* Plegado B: ABIERTO por defecto, se cierra con .collapsed (elegir test).
   Ojo: aquí la lógica es la contraria; no unificar con la de arriba. */
.bloque-content { display: block; border-top: 1px solid var(--line); }
.bloque-group.collapsed .bloque-content, .bloque-card.collapsed .bloque-content { display: none; }
.bloque-card.open .bloque-content { display: block; }
.bloque-group.collapsed .bloque-arrow, .bloque-card.collapsed .bloque-arrow { transform: none; }
.bloque-group .bloque-arrow, .bloque-card:not(.collapsed) .bloque-arrow { transform: rotate(180deg); }


/* ---- Lección dentro de un bloque ---- */
.leccion-item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}
.leccion-item:last-child { border-bottom: 0; }
.leccion-item:hover { background: var(--surface-subtle); }
.leccion-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--surface-sunken); color: var(--ink-muted);
    font-size: var(--fs-micro);
}
.leccion-ico.done { background: var(--ok-wash); color: var(--ok-600); }
.leccion-ico.video { background: var(--info-wash); color: var(--info-600); }
.lec-title { flex: 1; font-size: var(--fs-sm); color: var(--ink-body); }
.lec-dur { font-size: var(--fs-caption); color: var(--ink-faint); white-space: nowrap; }

/* ============================================================
   SESIONES (clases y tutorías)
   ============================================================ */
.sesion {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
}
.sesion:last-child { border-bottom: 0; }
.sesion-fecha {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--surface-subtle); border: 1px solid var(--line);
}
.sesion-fecha strong { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--ink); line-height: 1; }
.sesion-fecha span { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.sesion-body { flex: 1; min-width: 0; }
.sesion-body h3 { margin: 0 0 4px; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); letter-spacing: 0; }
.sesion-meta {
    display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center;
    font-size: var(--fs-caption); color: var(--ink-muted);
}
.sesion-notas {
    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);
}
.sesion.destacada .sesion-fecha { background: var(--surface-inverse); border-color: var(--surface-inverse); }
.sesion.destacada .sesion-fecha strong { color: var(--ink-invert); }
.sesion.destacada .sesion-fecha span { color: var(--gold-400); }
.sesion.cancelada { opacity: .5; }
.sesion.cancelada h3 { text-decoration: line-through; }
@media (max-width: 620px) { .sesion { flex-wrap: wrap; } .sesion .btn { width: 100%; } }

/* ============================================================
   TAREAS
   ============================================================ */
.task-item {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface-card);
}
.task-item:last-child { border-bottom: 0; }
.task-item.atrasada { box-shadow: inset 3px 0 0 var(--bad-600); }
.task-item.hecha { opacity: .55; }
.task-item.hecha .task-title { text-decoration: line-through; }
.task-ico, .mini-tarea-ico, .mat-ico, .canal-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--r-md); font-size: var(--fs-sm);
}
.task-body { flex: 1; min-width: 0; }
.task-title {
    font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink);
    /* Los nombres de tema son larguísimos: como mucho dos líneas */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.task-meta {
    display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center;
    margin-top: 3px; font-size: var(--fs-caption); color: var(--ink-muted);
}
.task-late { color: var(--bad-600); font-weight: var(--fw-semi); }
.task-state { flex-shrink: 0; }
.task-done {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-semi);
    color: var(--ok-600);
}
.panel-body.tight .task-item { border-radius: 0; }
.mini-tarea {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
}
.mini-tarea:last-child { border-bottom: 0; }
.mini-tarea.hecha { opacity: .55; }
.mt-fecha { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

/* ============================================================
   REJILLA bloque × tema (progreso y vueltas)
   ============================================================ */
.rejilla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-caption); background: var(--surface-card); }
.rejilla th, .rejilla td {
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 7px 8px; text-align: center; white-space: nowrap;
}
.rejilla th:last-child, .rejilla td:last-child { border-right: 0; }
.rejilla thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-inverse); color: var(--ink-invert);
    border-color: var(--navy-700);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: .05em; text-transform: uppercase;
}
.rejilla tbody tr:hover td { background: var(--surface-subtle); }
.rejilla .rj-cod { width: 46px; font-weight: var(--fw-semi); color: var(--ink); }
.rejilla .rj-bloque {
    text-align: left; white-space: normal; min-width: 200px; max-width: 340px;
    font-weight: var(--fw-med); color: var(--ink-body);
}
.rejilla .rj-t { width: 34px; padding: 5px 2px; }
.rejilla .rj-t.vacia { background: var(--surface-sunken); }
.rejilla .rj-t.visto { background: var(--ok-wash); }
.rejilla .rj-t.visto i { color: var(--ok-600); }
.rejilla .rj-t.con-vueltas { background: var(--accent-wash); font-weight: var(--fw-bold); color: var(--accent-strong); }
.rejilla .rj-t input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--ok-600); }
.rejilla .rj-num { width: 58px; font-variant-numeric: tabular-nums; color: var(--ink-body); }
.rejilla .rj-num.pend { color: var(--bad-600); font-weight: var(--fw-semi); }
.rejilla .rj-pct { width: 64px; }
.rejilla tfoot td { background: var(--surface-inverse); color: var(--ink-invert); border-color: var(--navy-700); font-weight: var(--fw-semi); }

/* Las reglas por columna (.rj-cod, .rj-num, .rj-bloque) fijan color
   oscuro; sobre la cabecera y el pie, que son navy, hay que devolver
   el claro con la misma especificidad o se vuelven ilegibles. */
.rejilla thead th.rj-cod, .rejilla thead th.rj-bloque,
.rejilla thead th.rj-num, .rejilla thead th.rj-pct,
.rejilla tfoot td.rj-cod, .rejilla tfoot td.rj-bloque,
.rejilla tfoot td.rj-num, .rejilla tfoot td.rj-pct { color: var(--ink-invert); }
.rejilla tfoot td.rj-num.pend { color: #FCA5A5; }
.rejilla tfoot .pct { background: rgba(255,255,255,.14); color: var(--gold-400); }
/* strong lleva su propio color de titular: sobre navy hay que heredar */
.rejilla thead th strong, .rejilla tfoot td strong { color: inherit; }

.pct {
    display: inline-block; min-width: 44px; padding: 2px 7px;
    border-radius: var(--r-full);
    font-weight: var(--fw-bold); font-size: var(--fs-micro);
}
.pct.low  { background: var(--bad-wash);  color: var(--bad-600); }
.pct.mid  { background: var(--warn-wash); color: var(--warn-600); }
.pct.high { background: var(--accent-wash); color: var(--accent-strong); }
.pct.full { background: var(--ok-wash);   color: var(--ok-600); }

.rejilla-guardar {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    margin: calc(var(--s-5) * -1 + 4px) 0 var(--s-6);
}
.rejilla-guardar span { font-size: var(--fs-caption); color: var(--ink-muted); }

/* ============================================================
   SEMANAS
   ============================================================ */
.semana-nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-5);
}
.semana-actual { text-align: center; line-height: 1.35; }
.semana-actual strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }
.semana-actual span { font-size: var(--fs-caption); color: var(--ink-muted); }
.semana-lista { display: flex; flex-direction: column; }
.semana-lista a {
    padding: var(--s-3) var(--s-5); font-size: var(--fs-sm);
    color: var(--ink-body); border-bottom: 1px solid var(--line);
}
.semana-lista a:last-child { border-bottom: 0; }
.semana-lista a:hover { background: var(--surface-subtle); color: var(--ink); }
.semana-lista a.activa { background: var(--accent-wash); color: var(--accent-strong); font-weight: var(--fw-semi); }

.plan-bloque-head, .mat-subhead {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
}
.plan-bcod, .mat-tcod {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 20px; border-radius: var(--r-xs);
    background: var(--surface-inverse); color: var(--ink-invert);
    font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0;
}
.plan-bcod.otros { background: var(--ink-faint); }

/* ============================================================
   MATERIAL
   ============================================================ */
.mat-filtros {
    display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-5);
}
.mat-busca { position: relative; flex: 1; min-width: 200px; }
.mat-busca i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: var(--fs-caption); pointer-events: none; }
.mat-busca input { padding-left: 34px; }
.mat-filtros select { width: auto; max-width: 260px; }
.mat-resumen { font-size: var(--fs-caption); color: var(--ink-muted); margin-bottom: var(--s-4); }

.mat-item {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
}
.mat-item:last-child { border-bottom: 0; }
.mat-item:hover { background: var(--surface-subtle); }
.mat-item.oculto { opacity: .5; }
.mat-body { flex: 1; min-width: 0; }
.mat-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }
.mat-desc { font-size: var(--fs-caption); color: var(--ink-body); margin-top: 2px; }
.mat-meta {
    display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center;
    margin-top: 4px; font-size: var(--fs-caption); color: var(--ink-muted);
}
.mat-file { font-family: var(--font-mono); font-size: var(--fs-micro); opacity: .8; }
.mat-acciones { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.mat-acciones form { display: inline; }
@media (max-width: 640px) {
    .mat-item { flex-wrap: wrap; }
    .mat-acciones { width: 100%; }
}

/* ============================================================
   CHAT
   ============================================================ */
.bandeja { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 900px) { .bandeja { grid-template-columns: 1fr; } }
.bandeja-lista {
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden auto; max-height: 580px;
}
.hilo {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
}
.hilo:last-child { border-bottom: 0; }
.hilo:hover { background: var(--surface-subtle); }
.hilo.activo, .hilo.activa { background: var(--accent-wash); }
.hilo-avatar, .tutor-avatar, .alumno-avatar, .perfil-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--surface-inverse); color: var(--ink-invert);
    font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .03em;
}
.hilo-body { flex: 1; min-width: 0; }
.hilo-nombre { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }
.hilo-ultimo { display: block; margin-top: 1px; font-size: var(--fs-caption); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hilo-cuando { flex-shrink: 0; align-self: flex-start; font-size: var(--fs-micro); color: var(--ink-faint); }

.chat-caja {
    display: flex; flex-direction: column;
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}
.chat-cabecera {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line); background: var(--surface-subtle);
}
.chat-hilo {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-5); height: 430px; overflow-y: auto;
    background: var(--surface-page);
}
.chat-dia { text-align: center; margin: var(--s-2) 0; }
.chat-dia span {
    display: inline-block; padding: 2px 12px; border-radius: var(--r-full);
    background: var(--surface-card); border: 1px solid var(--line);
    font-size: var(--fs-micro); color: var(--ink-muted);
}
.chat-msg { display: flex; }
.chat-msg.mio { justify-content: flex-end; }
.chat-burbuja {
    position: relative; max-width: 76%;
    padding: 10px 14px 20px; border-radius: var(--r-md);
    font-size: var(--fs-sm); line-height: var(--lh-normal); word-break: break-word;
}
.chat-msg.suyo .chat-burbuja {
    background: var(--surface-card); border: 1px solid var(--line);
    color: var(--ink-body); border-bottom-left-radius: var(--r-xs);
}
.chat-msg.mio .chat-burbuja {
    background: var(--surface-inverse); color: var(--ink-invert);
    border-bottom-right-radius: var(--r-xs);
}
.chat-hora { position: absolute; right: 12px; bottom: 5px; font-size: var(--fs-micro); opacity: .6; }
.chat-form {
    display: flex; gap: var(--s-3); align-items: flex-end;
    padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line);
}
.chat-form textarea { min-height: 44px; }
.chat-form button { flex-shrink: 0; }

/* ============================================================
   TUTOR Y ALUMNO (fichas)
   ============================================================ */
.tutor-card { display: flex; align-items: center; gap: var(--s-3); }
.tutor-rol { font-size: var(--fs-caption); color: var(--ink-muted); }
.tutor-mensaje {
    margin-top: var(--s-4); padding: var(--s-4);
    background: var(--surface-subtle); border-radius: var(--r-md);
    border-left: 2px solid var(--accent);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.tutor-note { padding: var(--s-4) var(--s-5); font-size: var(--fs-caption); color: var(--ink-muted); }

.alumnos-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.alumno-card {
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}
.alumno-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.alumno-head strong { font-size: var(--fs-sm); }
.alumno-meta { font-size: var(--fs-caption); color: var(--ink-muted); }
.alumno-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.alumno-dato { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; font-size: var(--fs-sm); }
.alumno-dato > span { color: var(--ink-muted); font-size: var(--fs-caption); }
.alumno-nota { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-4); }
.alumno-nota label { font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink); }
.alumno-nota label span { font-weight: var(--fw-reg); color: var(--ink-muted); }
.alumno-nota button { align-self: flex-start; }
.matricula-form { display: flex; gap: 6px; align-items: center; }
.matricula-form select { width: auto; min-width: 150px; padding: 6px 28px 6px 10px; font-size: var(--fs-caption); }
.matricula-fecha { font-size: var(--fs-caption); color: var(--ink-muted); }

/* ============================================================
   FORMULARIO DE TAREA / MATERIAL (panel)
   ============================================================ */
.form-tarea { display: flex; flex-direction: column; gap: var(--s-4); }
.form-tarea .ft-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .form-tarea .ft-fila { grid-template-columns: 1fr; } }
.form-tarea label { display: flex; flex-direction: column; gap: 6px; }
.form-tarea label > span { font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink); }
.form-tarea label > span small { font-weight: var(--fw-reg); color: var(--ink-muted); }
.form-tarea button { align-self: flex-start; }

/* ============================================================
   MIGRACIONES
   ============================================================ */
.mig-item { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.mig-item:last-child { border-bottom: 0; }
.mig-ico { flex-shrink: 0; font-size: var(--fs-lg); color: var(--warn-600); }
.mig-item.ok .mig-ico { color: var(--ok-600); }
.mig-body { flex: 1; min-width: 0; }
.mig-nombre code { font-size: var(--fs-caption); color: var(--ink); background: var(--surface-subtle); padding: 2px 7px; border-radius: var(--r-xs); }
.mig-que { font-size: var(--fs-caption); color: var(--ink-muted); margin-top: 4px; }
.mig-acciones { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.mig-acciones form { display: inline; }
.sql-bloque {
    background: var(--surface-inverse); color: #D6DEE8;
    border-radius: var(--r-md); padding: var(--s-5);
    font-size: var(--fs-caption); line-height: 1.6;
    max-height: 460px; overflow: auto; white-space: pre;
}

/* ============================================================
   PESTAÑAS SECUNDARIAS
   ============================================================ */
.sub-tabs, .lec-tabs, .tema-sort {
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s-6);
}
.sub-tabs a, .lec-tabs a, .lec-tabs button, .tema-sort-btn {
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-sm); font-weight: var(--fw-med);
    color: var(--ink-muted); background: transparent; border: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.sub-tabs a:hover, .tema-sort-btn:hover { color: var(--ink); }
.sub-tabs a.activa, .lec-tabs .active, .tema-sort-btn.active {
    color: var(--ink); font-weight: var(--fw-semi); border-bottom-color: var(--accent);
}

/* ============================================================
   MODALES
   ============================================================ */
.modal-overlay, .welcome-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: var(--gutter);
    background: rgba(8,13,22,.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-card, .welcome-modal {
    width: 100%; max-width: 460px;
    background: var(--surface-card); border-radius: var(--r-lg);
    box-shadow: var(--sh-xl); padding: var(--s-7);
    text-align: center;
}
.modal-buttons { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); flex-wrap: wrap; }

/* ============================================================
   MIGAS Y CABECERA DE PÁGINA INTERNA
   ============================================================ */
.breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: var(--s-5);
    font-size: var(--fs-caption); color: var(--ink-muted);
}
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--ink); }

/* OJO: .plans-header NO va aquí. Éstas son cabeceras de dos columnas
   —título a un lado, botones al otro—. Aquélla son tres líneas
   centradas, y en flex se le desparramaban una a cada lado. */
.area-header, .dashboard-header, .bloque-prog-head, .test-toolbar, .stats-actions {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
    margin-bottom: var(--s-6);
}
/* Aquí el título y su bajada son hermanos directos: si se ponen en
   fila, la bajada se va al extremo derecho. Van apilados. */
.section-header { margin-bottom: var(--s-6); }
.section-header p { max-width: 68ch; }
.area-header h1, .section-header h1, .dashboard-header h1 {
    margin: 0 0 4px;
    font-size: clamp(26px, 3.4vw, 36px); font-weight: var(--fw-light);
}
.area-header p, .section-header p, .dashboard-header p {
    margin: 0; font-size: var(--fs-sm); color: var(--ink-muted);
}
.area-h2 {
    display: flex; align-items: center; gap: var(--s-3);
    margin: var(--s-7) 0 var(--s-4);
    font-size: var(--fs-eyebrow); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted);
}
.area-h2 i { color: var(--accent-strong); }


/* ---- Fotos de perfil ----
   El círculo y su tamaño ya los ponen las clases de arriba
   (.tutor-avatar, .alumno-avatar…); aquí sólo se mete la imagen dentro
   sin que se deforme. Quien no sube foto sigue con sus iniciales. */
:is(.hilo-avatar, .tutor-avatar, .alumno-avatar, .perfil-avatar, .perfil-avatar-mini).tiene-foto {
    padding: 0;
    background: var(--surface-subtle);
    overflow: hidden;
}
:is(.hilo-avatar, .tutor-avatar, .alumno-avatar, .perfil-avatar, .perfil-avatar-mini).tiene-foto img {
    width: 100%; height: 100%;
    object-fit: cover;          /* recorta, no deforma */
    display: block;
    border-radius: inherit;
}