/*
 * Estilos propios de public/alumnado/.
 *
 * Las reglas de evaluables.php/index.php extraídas en la Fase C (Tarea 5,
 * design §5.2, W4b) se retiraron aquí: ambos ficheros (el cuadro de mandos
 * completo del expediente académico -- faltas, notas, horario, mensajes,
 * matriculación...) se eliminaron de esta sección a petición expresa, en la
 * misma sesión que reconstruyó el acceso como passwordless. El código
 * retirado sigue disponible en el historial de git de este repo. Lo que
 * queda a partir de aquí es únicamente el sistema de diseño del flujo de
 * acceso (login/selector/placeholder tras iniciar sesión), que si se
 * rediseña el cuadro de mandos en el futuro debería seguir siendo válido.
 */

/* === public/alumnado/login.php — rediseño como página independiente ===
 * Ya no incluye inc_menu.php/inc_pie.php (sin cabecera ni menú del sitio):
 * mismo motivo que error503.php/inc_error_seguro.php, salvo que aquí SÍ hay
 * bootstrap.php/config.php/BD cargados, así que usa el sistema de diseño
 * real (Bootstrap + Celosía) en vez de CSS embebido. Mobile-first a
 * propósito (prioridad explícita del centro: la mayoría de las visitas a
 * esta sección llegan desde el móvil) — el bloque sin media query es ya la
 * experiencia completa; el layout a dos columnas de escritorio (inspirado
 * en facebook.com) es una mejora progresiva encima, no la base.
 * Solo variables --ce-* (regla dura 1): el modo oscuro llega gratis, ya
 * que celosia.css reapunta esas variables bajo prefers-color-scheme.
 */

.al-login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--ce-color-semantic-surface);
    color: var(--ce-color-semantic-text-primary);
}

.al-login {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ce-space-6) var(--ce-space-4);
}

.al-login-grid {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-6);
}

/* Panel de marca: oculto en móvil (el logo pequeño de .al-login-cabecera ya
   da continuidad de marca ahí sin robarle espacio vertical al formulario,
   lo primero que hay que poder rellenar en una pantalla pequeña). */
.al-login-marca {
    display: none;
}

.al-login-panel {
    width: 100%;
}

.al-login-card {
    padding: var(--ce-space-5);
}

.al-login-cabecera {
    text-align: center;
    margin-bottom: var(--ce-space-5);
}

.al-login-cabecera-logo {
    height: 56px;
    width: auto;
    margin-bottom: var(--ce-space-3);
}

.al-login-titulo {
    font-size: var(--ce-font-size-lg);
    font-weight: var(--ce-font-weight-bold);
    margin: 0;
}

.al-login-error {
    margin-bottom: var(--ce-space-4);
}

.al-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-4);
}

.al-campo {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-1);
}

.al-login-submit {
    width: 100%;
    margin-top: var(--ce-space-2);
    font-size: var(--ce-font-size-lg);
}

.al-login-ayuda {
    text-align: center;
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
    margin: var(--ce-space-5) 0 0;
}

.al-login-pie {
    flex-shrink: 0;
    padding: var(--ce-space-5) var(--ce-space-4);
    text-align: center;
}

.al-login-pie-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ce-space-2) var(--ce-space-4);
    margin-bottom: var(--ce-space-2);
}

.al-login-pie-enlaces a {
    font-size: var(--ce-font-size-sm);
}

.al-login-pie-copyright {
    font-size: var(--ce-font-size-xs);
    color: var(--ce-color-semantic-text-secondary);
    margin: 0;
}

/* A partir de aquí, mejora progresiva de escritorio/tablet ancha: layout a
   dos columnas (marca a la izquierda, tarjeta a la derecha), como en
   facebook.com. El breakpoint es --ce-size-hero-min-lg... no, Celosía no
   define breakpoints como tokens (no hay --ce-breakpoint-*, ver
   tokens.json) así que el valor de Bootstrap (992px, "lg") es el que ya
   usa el resto del sitio para el mismo salto de maqueta (site-header,
   site-menu) -- se reutiliza el mismo umbral por coherencia, no se
   inventa uno nuevo. */
@media (min-width: 992px) {
    .al-login-grid {
        max-width: 960px;
        flex-direction: row;
        align-items: center;
        gap: var(--ce-space-8);
    }

    .al-login-marca {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 1 55%;
        padding-right: var(--ce-space-6);
    }

    .al-login-marca-logo {
        height: 72px;
        width: auto;
        margin-bottom: var(--ce-space-4);
    }

    .al-login-marca-nombre {
        font-size: var(--ce-font-size-2xl);
        font-weight: var(--ce-font-weight-bold);
        margin: 0 0 var(--ce-space-3);
    }

    .al-login-marca-eslogan {
        font-size: var(--ce-font-size-lg);
        color: var(--ce-color-semantic-text-secondary);
        max-width: 32ch;
        margin: 0;
    }

    .al-login-panel {
        flex: 0 1 400px;
    }

    /* El logo ya aparece en el panel de marca a este ancho; repetirlo
       dentro de la tarjeta sería ruido visual duplicado. */
    .al-login-cabecera-logo {
        display: none;
    }
}

/* === public/alumnado/inc_layout_cabecera.php + inc_layout_pie.php — layout propio del área
 * con sesión (el dashboard, y el resto del expediente académico cuando se reconstruya). A
 * petición expresa: "alumnado debe ser como otro proyecto, solo comparte el diseño" -- por
 * eso NO reutiliza site-header/site-footer/site.css (esas clases son del sitio principal,
 * inc_menu.php/inc_pie.php de la raíz), aunque sí los mismos tokens --ce-* y componentes
 * ce-card/ce-btn/ce-notice que ya usa el flujo de acceso (al-login-*, arriba en este mismo
 * fichero). Las páginas del flujo de acceso (login/acceso/selector) siguen con su propio
 * <head>/<body> autocontenido -- son la tarjeta centrada de un formulario, no una app con
 * cabecera; este bloque es solo para páginas YA autenticadas. */

.al-app-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--ce-color-semantic-surface-sunken);
    color: var(--ce-color-semantic-text-primary);
}

/* Ajustado al diseño real de .site-header (site.css) -- mismo fondo/borde/alto de
   logo/tamaño de marca que la cabecera del sitio principal, aunque siga siendo su
   propio layout independiente (no incluye inc_menu.php): .container por dentro para
   que el contenido de la cabecera alinee con el resto de la página, en vez del
   padding horizontal fijo de antes. */
.al-app-header {
    padding: var(--ce-space-3) 0;
    background-color: var(--ce-color-semantic-surface);
    border-bottom: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
}

.al-app-header-marca {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    text-decoration: none;
    color: inherit;
}

.al-app-header-logo {
    height: 44px;
    width: auto;
}

.al-app-header-nombre {
    font-weight: var(--ce-font-weight-bold);
    font-size: var(--ce-font-size-lg);
}

.al-app-header-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ce-space-2);
}

/* "Cambiar de alumno/a"/"Cerrar sesión" como botones reales (petición expresa), no
   como los enlaces de texto plano que llevaba antes esta cabecera -- tamaño de
   .ce-btn reducido aquí para que quepan dos uno junto al otro sin dominar la
   cabecera, mismo motivo que .al-detalle-volver. */
.al-app-header-boton {
    min-height: auto;
    padding: var(--ce-space-1) var(--ce-space-3);
    font-size: var(--ce-font-size-sm);
    text-decoration: none;
}

.al-app-header-boton:hover {
    background: var(--ce-color-semantic-surface-sunken);
    color: var(--ce-color-semantic-action);
}

.al-app-main {
    flex: 1 0 auto;
    padding: var(--ce-space-6) 0;
}

.al-app-pie {
    flex-shrink: 0;
    padding: var(--ce-space-5) var(--ce-space-4);
    text-align: center;
}

.al-app-pie-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ce-space-2) var(--ce-space-4);
    margin-bottom: var(--ce-space-2);
}

/* === Cabecera "hero" del dashboard (public/alumnado/index.php) — referencia visual dada por
 * el centro (avatar/foto + nombre sobre una banda de marca, en vez de una tarjeta plana). El
 * fondo es `assets/img/alumnado-hero-fondo.jpg` (textura ondulada neutra, cedida por el
 * usuario) con una capa de color de marca encima (rgba() sobre el triplete -rgb del token,
 * mismo patrón ya usado en site.css) para que el texto blanco siga cumpliendo contraste sobre
 * cualquier preajuste de color del centro. */
.al-dashboard-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ce-space-5);
    padding: var(--ce-space-7) var(--ce-space-5);
    margin-bottom: var(--ce-space-5);
    border-radius: var(--ce-size-radius-md);
    overflow: hidden;
    color: var(--ce-color-semantic-text-on-brand);
    background-image:
        linear-gradient(135deg, rgba(var(--ce-color-brand-700-rgb), 0.8), rgba(var(--ce-color-brand-900-rgb), 0.86)),
        url('../img/alumnado-hero-fondo.jpg');
    background-size: cover;
    background-position: center;
}

.al-dashboard-hero-avatar {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: var(--ce-color-semantic-surface);
    color: var(--ce-color-semantic-action);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ce-font-size-xl);
    font-weight: var(--ce-font-weight-bold);
    overflow: hidden;
}

.al-dashboard-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.al-dashboard-hero-nombre {
    font-size: var(--ce-font-size-2xl);
    font-weight: var(--ce-font-weight-bold);
    margin: 0 0 var(--ce-space-2);
    color: var(--ce-color-semantic-text-on-brand);
}

/* Unidad/curso y tutor/a antes compartían la misma clase, mismo peso visual, dos líneas
   indistinguibles entre sí -- se separan en dos tratamientos: la unidad como pastilla
   (el dato que identifica AL GRUPO, más prominente) y el tutor como texto secundario con
   icono (el dato de CONTACTO, de apoyo). Fondo translúcido blanco sobre el hero de marca:
   no hay token semántico para "superficie sobre fondo de marca", mismo idioma ya
   establecido en este sitio para ese caso exacto (site.css, .site-footer-social-list a,
   border: rgba(255,255,255,.3) sobre fondo oscuro de marca). */
.al-dashboard-hero-unidad {
    margin: 0;
}

.al-dashboard-hero-unidad-pastilla {
    display: inline-block;
    padding: var(--ce-space-1) var(--ce-space-3);
    border-radius: var(--ce-size-radius-tag);
    background-color: rgba(255, 255, 255, .16);
    border: var(--ce-size-border-width) solid rgba(255, 255, 255, .3);
    font-size: var(--ce-font-size-sm);
    font-weight: var(--ce-font-weight-bold);
    color: var(--ce-color-semantic-text-on-brand);
}

.al-dashboard-hero-tutor {
    /* inline-flex, no flex: en móvil el hero centra su contenido con text-align (ver
       @media abajo) -- un elemento a nivel de bloque no respetaría eso, uno de nivel
       "inline" (como ya es la pastilla, inline-block) sí. */
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-2);
    margin: 0;
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-on-brand);
    opacity: 0.85;
}

@media (max-width: 575px) {
    .al-dashboard-hero {
        flex-direction: column;
        text-align: center;
        gap: var(--ce-space-3);
        /* Menos relleno vertical que en escritorio: en un viewport de 375px, el
           padding de --ce-space-7 empujaba el primer widget útil fuera de la
           primera pantalla -- comprobado navegando esta sección con una sesión
           real en un viewport móvil. */
        padding: var(--ce-space-6) var(--ce-space-4);
    }
}

/* Espacio uniforme entre las tarjetas apiladas del dashboard (hero ya lleva su propio
   margin-bottom, ver arriba) -- evita repartir mb-* de Bootstrap por el marcado. */
.al-app-main .container > .ce-card,
.al-app-main .container > .al-widget-convivencia {
    margin-bottom: var(--ce-space-5);
}

/* === Widget de convivencia (public/alumnado/convivencia.php) — opcional por centro, dos
 * interruptores independientes desde Administración > Página web > Apariencia
 * (ver_convivencia, detalles_fechorias). Cada incidencia se representa como un
 * .ce-notice completo (icono + palabra de gravedad en negrita + color), nunca solo con
 * color (regla dura Celosía 5) -- "Grave" y "Muy grave" comparten tono --danger pero se
 * distinguen siempre por el texto, nunca solo por el matiz. */
.al-widget-titulo {
    font-size: var(--ce-font-size-lg);
    font-weight: var(--ce-font-weight-bold);
    margin: 0 0 var(--ce-space-4);
}

.al-convivencia-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-3);
    margin: 0;
}

.al-convivencia-item-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ce-space-2);
}

.al-convivencia-item-fecha {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
    white-space: nowrap;
}

.al-convivencia-item-profesor {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
    margin-top: var(--ce-space-1);
}

.al-convivencia-item-notas {
    font-size: var(--ce-font-size-sm);
    font-style: italic;
    margin-top: var(--ce-space-2);
    padding-top: var(--ce-space-2);
    border-top: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
}

/* === Informes de tutoría / tareas (public/alumnado/informes-tutoria.php,
 * informes-tareas.php) — listado expandible con <details>/<summary> nativos en vez de
 * descargar un PDF (petición expresa: "no tiene sentido lo del PDF"). Funciona sin una sola
 * línea de JS: el propio navegador gestiona abrir/cerrar y el estado accesible (el rol
 * "group"/expanded de <details> es nativo). */
.al-informes-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-3);
}

.al-informe-item {
    border: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
    border-radius: var(--ce-size-radius-md);
    overflow: hidden;
}

.al-informe-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ce-space-3);
    padding: var(--ce-space-3) var(--ce-space-4);
    cursor: pointer;
    background-color: var(--ce-color-semantic-surface-sunken);
    list-style: none;
}

/* Quita el triángulo nativo de <summary> en todos los motores -- se sustituye por el
   icono propio (.al-informe-icono), que sí puede animarse con el estado [open]. */
.al-informe-resumen::-webkit-details-marker {
    display: none;
}

.al-informe-resumen::marker {
    content: '';
}

.al-informe-resumen-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ce-space-1) var(--ce-space-3);
}

.al-informe-fecha {
    font-weight: var(--ce-font-weight-bold);
}

.al-informe-contexto {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
}

.al-informe-icono {
    flex-shrink: 0;
    color: var(--ce-color-semantic-text-secondary);
    transition: transform var(--ce-duration-fast);
}

.al-informe-item[open] .al-informe-icono {
    transform: rotate(90deg);
}

.al-informe-detalle {
    padding: var(--ce-space-4);
}

.al-informe-linea + .al-informe-linea {
    margin-top: var(--ce-space-3);
    padding-top: var(--ce-space-3);
    border-top: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
}

.al-informe-linea-cabecera {
    margin: 0 0 var(--ce-space-1);
}

.al-informe-linea-texto {
    color: var(--ce-color-semantic-text-secondary);
}

.al-app-pie-enlaces a {
    font-size: var(--ce-font-size-sm);
}

.al-app-pie-copyright {
    font-size: var(--ce-font-size-xs);
    color: var(--ce-color-semantic-text-secondary);
    margin: 0;
}

/* === Tarjetas resumen del dashboard (public/alumnado/index.php) — cada widget (informes de
 * tutoría, informes de tareas, convivencia) se reduce aquí a una fila resumen (icono + título +
 * un dato agregado), sin el detalle completo: a petición expresa ("está quedando como una
 * zorrera con tanta info"), el detalle se movió a su propia página
 * (informes-tutoria.php/informes-tareas.php/convivencia.php). Toda la tarjeta es clicable con
 * el patrón .stretched-link ya usado en novedades_render_card() (site.css), sin añadir
 * afordancia de :hover a .ce-card -- esa se retiró a petición expresa (ver
 * celosia-componentes.css); .ce-card:focus-within ya cubre el foco por teclado. */
.al-widget-resumen {
    display: flex;
    align-items: center;
    gap: var(--ce-space-4);
}

.al-widget-resumen-icono {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ce-color-semantic-surface-sunken);
    color: var(--ce-color-semantic-action);
    font-size: var(--ce-font-size-lg);
}

.al-widget-resumen-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.al-widget-resumen-titulo {
    font-size: var(--ce-font-size-lg);
    font-weight: var(--ce-font-weight-bold);
    margin: 0 0 var(--ce-space-1);
}

/* Mismo patrón de color que .novedades-card-titulo a (site.css): el texto del enlace usa
   los tokens semánticos de la tarjeta, no el azul de enlace por defecto del navegador. */
.al-widget-resumen-titulo a {
    color: var(--ce-color-semantic-text-primary);
    text-decoration: none;
}

.al-widget-resumen-titulo a:hover {
    color: var(--ce-color-brand-600);
}

.al-widget-resumen-meta {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
}

/* Dato accionable (mensajes sin leer, incidencias registradas) vs. dato neutro (mismo
   tono/peso para las seis tarjetas hoy): más peso tipográfico, no solo un color
   distinto, para que destaque también en escala de grises. */
.al-widget-resumen-meta--alerta {
    font-weight: var(--ce-font-weight-bold);
    color: var(--ce-color-semantic-text-primary);
}

/* Icono de un widget con al menos una incidencia real que atender (hoy solo
   convivencia) -- mismo token que .ce-notice--danger .ce-notice__icono
   (celosia-componentes.css), el texto de al lado ya lleva la cifra (regla dura 5). */
.al-widget-resumen-icono--alerta {
    color: var(--ce-color-state-danger);
}

.al-widget-resumen-flecha {
    flex-shrink: 0;
    color: var(--ce-color-semantic-text-secondary);
}

/* === Cabecera de las páginas de detalle (informes-tutoria.php, informes-tareas.php,
 * convivencia.php) — enlace de vuelta al dashboard + título, mismo patrón en las tres. */
.al-detalle-cabecera {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ce-space-3);
    margin-bottom: var(--ce-space-5);
}

/* El enlace de "Volver" es .ce-btn.ce-btn--secondary (vendored,
   celosia-componentes.css) tal cual -- aquí solo se ajusta el tamaño de icono/texto
   para que no compita en peso visual con el título de al lado, que es lo que de
   verdad importa en la cabecera. */
.al-detalle-volver {
    /* .ce-btn (vendored) no fija text-decoration: pensado sobre todo para <button>, un
       <a> con esa clase hereda el subrayado por defecto del navegador -- se anula aquí,
       igual que ya hace .ce-tag/.al-widget-resumen-titulo a con sus propios enlaces. */
    text-decoration: none;
    font-size: var(--ce-font-size-sm);
}

/* .ce-btn:hover (vendored) fija background: --ce-color-semantic-action-hover para
   CUALQUIER .ce-btn, pensado para el primario (fondo action + texto on-brand, un tono
   más oscuro no rompe nada). .ce-btn--secondary tiene fondo claro y TEXTO
   action-coloreado -- al pasar el ratón, ese texto queda sobre un fondo
   action-hover (más oscuro pero de la misma familia de azul), ilegible/feo, nunca
   corregido en el vendored porque hasta ahora nada lo pasaba de verdad por encima.
   Aquí se sobrescribe solo para este botón (no se toca celosia-componentes.css ni
   los demás adoptantes de .ce-btn--secondary, p. ej. cita-previa) con el mismo
   fondo neutro que ya usa .ce-card:focus-within para "resaltado sin contraste roto". */
.al-detalle-volver.ce-btn--secondary:hover {
    background: var(--ce-color-semantic-surface-sunken);
    color: var(--ce-color-semantic-action);
}

.al-detalle-titulo {
    font-size: var(--ce-font-size-2xl);
    font-weight: var(--ce-font-weight-bold);
    margin: 0;
}

/* === Mensajería (public/alumnado/mensajeria.php, sdd/alumnado-mensajeria PR5) — pestañas
 * recibidos/enviados sin JS: son enlaces normales de recarga completa (?tab=...), mismo
 * espíritu que el resto del área (marcarLeido() vía GET, <details> nativo en los informes)
 * -- nunca un componente de pestañas de Bootstrap que dependa de su JS. La lista reutiliza
 * el esqueleto de fila de .al-informes-lista/.al-informe-item (borde + fondo hundido +
 * chevron) de arriba: aquí cada fila es un enlace completo (stretched-link) en vez de un
 * <details>/<summary>, porque lleva a mensaje.php en vez de expandirse in situ. */
.al-mensajeria-tabs {
    display: flex;
    gap: var(--ce-space-2);
    margin-bottom: var(--ce-space-4);
    border-bottom: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
}

.al-mensajeria-tab {
    padding: var(--ce-space-2) var(--ce-space-1);
    margin-bottom: -1px;
    font-size: var(--ce-font-size-md);
    font-weight: var(--ce-font-weight-bold);
    color: var(--ce-color-semantic-text-secondary);
    text-decoration: none;
    border-bottom: var(--ce-size-border-width-medium) solid transparent;
}

.al-mensajeria-tab:hover {
    color: var(--ce-color-semantic-text-primary);
}

.al-mensajeria-tab--activo,
.al-mensajeria-tab--activo:hover {
    color: var(--ce-color-semantic-action);
    border-bottom-color: var(--ce-color-semantic-action);
}

/* .al-mensaje-item reutiliza el marcado/estilo de .al-informe-item tal cual (mismo borde,
   radio, overflow); solo añade position:relative para que el stretched-link de la fila
   quede confinado a ESA fila (y no a toda la tarjeta, que es lo que pasaría si el
   ::after del enlace buscara el ancestro posicionado más cercano y encontrase .ce-card
   en vez de esta fila -- ver comentario "stretched-link" de celosia-componentes.css). */
.al-mensaje-item {
    position: relative;
}

.al-mensaje-resumen {
    color: inherit;
    text-decoration: none;
}

.al-mensaje-item--no-leido {
    border-left: var(--ce-size-border-width-medium) solid var(--ce-color-semantic-action);
}

/* Mismas propiedades visuales que .al-informe-fecha/.al-informe-contexto (informes de
   tutoría/tareas): aquí el dato en negrita es el asunto del mensaje, no una fecha, así
   que se nombra según lo que realmente contiene en vez de heredar un nombre de clase
   que induciría a confusión al releer el marcado. */
.al-mensaje-asunto {
    font-weight: var(--ce-font-weight-bold);
}

.al-mensaje-meta {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
}

.al-mensajeria-paginacion {
    margin-top: var(--ce-space-4);
    text-align: center;
}

/* === Detalle y composición de mensajes (public/alumnado/mensaje.php,
 * mensaje-nuevo.php, sdd/alumnado-mensajeria PR6) === */

/* Fila de acciones sobre la lista de mensajeria.php ("Redactar nuevo mensaje"): mismo
   espaciado que .al-mensajeria-tabs de arriba, en su propia línea porque el botón es una
   acción nueva, no parte de la navegación de pestañas. */
.al-mensajeria-acciones {
    margin-bottom: var(--ce-space-4);
}

/* mensaje.php: cabecera de metadatos (fecha + remitente/destinatario) encima del cuerpo
   del mensaje -- mismo tono secundario que .al-mensaje-meta de la lista. */
.al-mensaje-detalle-meta {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
    margin-bottom: var(--ce-space-4);
}

/* Cuerpo del mensaje: texto libre ya saneado por htmlContextCleaner() + nl2br() en PHP
   (nunca aquí) -- esta regla solo evita que una palabra larga sin espacios (una URL
   pegada, por ejemplo) desborde la tarjeta en móvil. */
.al-mensaje-detalle-texto {
    overflow-wrap: break-word;
    margin-bottom: var(--ce-space-4);
}

.al-mensaje-detalle-adjunto {
    padding-top: var(--ce-space-3);
    border-top: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
}

.al-mensaje-detalle-acciones {
    margin-top: var(--ce-space-4);
    padding-top: var(--ce-space-4);
    border-top: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
}

/* mensaje-nuevo.php: mismo patrón vertical que .al-login-form (gap uniforme entre
   campos vía .al-campo, ya definido arriba en este fichero) -- reutilizado tal cual en
   vez de duplicar la regla, el formulario de composición no necesita nada distinto. */
.al-mensaje-form {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-4);
}

.al-mensaje-form-textarea {
    resize: vertical;
}

.al-mensaje-form-ayuda {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
}

/* === Calificaciones (public/alumnado/calificaciones.php) — tabla simple, una fila por
 * asignatura, sin componente nuevo: reutiliza .table de Bootstrap (ya vendorizado) sobre
 * el token de borde de Celosía en vez de duplicar reglas de tabla desde cero. */
.al-calificaciones-tabla th,
.al-calificaciones-tabla td {
    border-color: var(--ce-color-semantic-border-subtle);
}

/* Columnas de nota alineadas a la derecha (todo menos "Asignatura"): comparar la
   evolución de una asignatura entre evaluaciones es una lectura vertical, y una
   columna numérica alineada a la izquierda dificulta ese escaneo. */
.al-calificaciones-tabla th:not(:first-child),
.al-calificaciones-celda {
    text-align: right;
}

/* Código de calificación como pastilla (.ce-tag ya existente, celosia-componentes.css)
   en vez de texto suelto -- mismo componente que ya usan las categorías de novedades.
   .ce-tag por defecto es un enlace de categoría (color --ce-color-semantic-link):
   aquí no hay nada que pulsar, así que el color se devuelve al texto normal. */
.al-calificacion-tag {
    color: var(--ce-color-semantic-text-primary);
}

/* Insuficiente: el color nunca es el único portador (la propia pastilla ya lleva el
   texto "IN", hard rule Celosía 5) -- el color solo ayuda a escanear la fila más rápido. */
.al-calificacion-tag.al-calificacion-suspenso {
    color: var(--ce-color-state-danger);
}

/* Periodo sin calificación: un guion visible en vez de una celda completamente en
   blanco, que se lee como "no cargó" en vez de "no aplica todavía". */
.al-calificacion-vacia {
    color: var(--ce-color-semantic-text-secondary);
}

/* === Materias no superadas (public/alumnado/materias-no-superadas.php) — reemplaza el
 * PDF (dompdf) del cuadro de mandos antiguo por texto en la propia página: una tarjeta
 * por materia, con sus unidades de contenido plegadas por defecto dentro de
 * .al-informe-item (redactadas por el profesorado desde la intranet, mismo nivel de
 * confianza que el cuerpo de una noticia -- se sirven como HTML de confianza, no como
 * texto plano escapado). Plegar por defecto es a propósito: navegando con un enlace
 * real se comprobó que mostrar todas las unidades abiertas a la vez convertía la
 * página en varios miles de píxeles de texto continuo. */
.al-materia-informe + .al-materia-informe {
    margin-top: var(--ce-space-5);
}

.al-materia-informe-curso {
    font-size: var(--ce-font-size-md);
    font-weight: var(--ce-font-weight-normal);
    color: var(--ce-color-semantic-text-secondary);
}

.al-materia-informe-fecha {
    font-size: var(--ce-font-size-sm);
    color: var(--ce-color-semantic-text-secondary);
    margin: 0 0 var(--ce-space-4);
}

/* Cada unidad de un informe vive dentro de un .al-informe-item (accordion, ver
   informes-tutoria.php/informes-tareas.php) -- solo las secciones internas
   (Saberes básicos/Competencias/Actividades) son propias de esta página. */
.al-materia-bloque-seccion {
    margin-bottom: var(--ce-space-3);
}

.al-materia-bloque-seccion h4 {
    font-size: var(--ce-font-size-sm);
    font-weight: var(--ce-font-weight-bold);
    color: var(--ce-color-semantic-text-secondary);
    text-transform: uppercase;
    margin: 0 0 var(--ce-space-1);
}

.al-materia-observaciones {
    padding-top: var(--ce-space-3);
    border-top: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
}

/* === Selector de alumno/a (public/alumnado/seleccionar-alumno.php) — tarjetas
 * clicables (avatar + nombre + marca de check) en vez del radio + etiqueta de
 * Bootstrap "de toda la vida" (petición expresa del usuario: "no el tipico punto con
 * el nombre encima desajustado"). El <input type="radio"> real sigue existiendo --
 * .visually-hidden (Bootstrap 5, ya vendorizado) lo oculta visualmente sin sacarlo
 * del árbol de accesibilidad ni del orden de tabulación, así que teclado y lector de
 * pantalla siguen funcionando exactamente igual que con el radio de toda la vida.
 * :has() ya es una técnica aceptada en este sitio (ver site.css,
 * .site-menu-cabecera:has(...)). Estado seleccionado marcado por DOS señales (borde +
 * icono de check, nunca solo el color, hard rule Celosía 5), nunca box-shadow/transform. */
.al-alumno-opciones {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-3);
    margin-bottom: var(--ce-space-2);
}

.al-alumno-opcion {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    padding: var(--ce-space-3) var(--ce-space-4);
    border: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
    border-radius: var(--ce-size-radius-container);
    cursor: pointer;
}

.al-alumno-opcion-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ce-color-semantic-surface-sunken);
    color: var(--ce-color-semantic-action);
    font-weight: var(--ce-font-weight-bold);
}

.al-alumno-opcion-nombre {
    flex: 1 1 auto;
    font-weight: var(--ce-font-weight-bold);
}

.al-alumno-opcion-check {
    flex-shrink: 0;
    font-size: var(--ce-font-size-lg);
    color: var(--ce-color-semantic-border-subtle);
}

.al-alumno-opcion:has(.al-alumno-opcion-input:checked) {
    border-color: var(--ce-color-semantic-action);
    background-color: var(--ce-color-semantic-surface-sunken);
}

.al-alumno-opcion:has(.al-alumno-opcion-input:checked) .al-alumno-opcion-check {
    color: var(--ce-color-semantic-action);
}

/* El input real sigue siendo el destino del foco por teclado (.visually-hidden no lo
   saca del flujo de tabulación) -- el anillo de foco se dibuja en la tarjeta entera
   con outline (nunca box-shadow), mismo token que el resto del sitio usa para foco. */
.al-alumno-opcion:has(.al-alumno-opcion-input:focus-visible) {
    outline: var(--ce-size-border-width-medium) solid var(--ce-color-focus-ring);
    outline-offset: 2px;
}