/*
 * Estilos de la plataforma. CSS plano, sin compilación (D-001).
 * Panel con menú lateral y colores del escudo institucional (D-032). Primero para celular (D-026).
 * Sin estilos en línea en las vistas: la CSP no los permite.
 */

:root {
    /* Escudo: azul marino, verde, dorado. */
    --azul: #1b2a6b;
    --azul-oscuro: #121c4a;
    --azul-medio: #2c3f8f;
    --azul-claro: #e8ebf7;
    --verde: #1e7a34;
    --verde-claro: #e3f3e7;
    --dorado: #d9a300;
    --dorado-claro: #fff4cc;
    --rojo: #b3261e;
    --rojo-claro: #fde8e7;
    --naranja: #c25e00;
    --naranja-claro: #fdecdc;
    /* Desempeños (siempre acompañados de su código BJ/BS/AL/SP). */
    --bajo: var(--rojo);
    --basico: var(--naranja);
    --alto: #1f5fbf;
    --superior: var(--verde);

    --texto: #1f2937;
    --texto-suave: #5b6472;
    --borde: #dfe2e8;
    --fondo: #f2f4f8;
    --blanco: #ffffff;
    --radio: 12px;
    --sombra: 0 1px 2px rgba(18, 28, 74, .06), 0 2px 8px rgba(18, 28, 74, .06);
    --ancho-lateral: 260px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
}

a {
    color: var(--azul-medio);
}

h1 {
    margin: 0 0 .25rem;
    font-size: 1.45rem;
    color: var(--azul);
}

h2 {
    margin: 0 0 .75rem;
    font-size: 1.1rem;
    color: var(--azul-oscuro);
}

h3 {
    margin: 0;
    font-size: 1rem;
}

.icono {
    flex-shrink: 0;
}

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ayuda {
    color: var(--texto-suave);
    font-size: .925rem;
}

/* ───────────── Panel: menú lateral ───────────── */
.menu-casilla {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--ancho-lateral);
    overflow-y: auto;
    color: #cfd6f3;
    background: var(--azul-oscuro);
    transform: translateX(-100%);
    transition: transform .2s ease;
}

.menu-casilla:checked ~ .lateral {
    transform: none;
}

.velo {
    display: none;
}

.menu-casilla:checked ~ .velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(10, 15, 40, .45);
}

.lateral__marca {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: 1rem 1.1rem;
    color: var(--blanco);
    text-decoration: none;
    line-height: 1.2;
    background: var(--azul);
    border-bottom: 3px solid var(--dorado);
}

.lateral__marca img {
    border-radius: 50%;
    background: var(--blanco);
}

.menu {
    padding: .5rem 0 2rem;
}

.menu__grupo {
    margin: 1rem 1.1rem .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8f9bd0;
}

.menu__item {
    display: flex;
    gap: .75rem;
    align-items: center;
    min-height: var(--alto-menu);
    padding: var(--relleno-menu);
    color: #dfe4fb;
    text-decoration: none;
    border-left: 4px solid transparent;
}

.menu__item:hover {
    background: rgba(255, 255, 255, .06);
}

.menu__item--activo {
    color: var(--blanco);
    font-weight: 600;
    background: rgba(255, 255, 255, .1);
    border-left-color: var(--dorado);
}

.menu__item--pronto {
    color: #7d88b8;
    cursor: default;
}

.menu__item--pronto:hover {
    background: none;
}

.menu__pronto {
    margin-left: auto;
    padding: .05rem .45rem;
    font-size: .68rem;
    color: #b9c2ea;
    border: 1px solid #3a4785;
    border-radius: 999px;
}

/* ───────────── Panel: barra superior y contenido ───────────── */
.superior {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: .75rem;
    align-items: center;
    min-height: 60px;
    padding: .5rem 1rem;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
}

.superior__menu {
    display: inline-flex;
    padding: .5rem;
    color: var(--azul);
    border-radius: 8px;
    cursor: pointer;
}

.superior__titulo {
    margin: 0;
    font-weight: 600;
    color: var(--azul-oscuro);
}

.superior__usuario {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-left: auto;
}

.superior__nombre {
    display: none;
    line-height: 1.15;
}

.superior__nombre small {
    display: block;
    font-size: .75rem;
    color: var(--texto-suave);
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-weight: 700;
    color: var(--azul);
    background: var(--dorado-claro);
    border: 2px solid var(--dorado);
    border-radius: 50%;
}

.contenido {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

@media (min-width: 1024px) {
    .lateral {
        transform: none;
    }

    .superior__menu,
    .menu-casilla:checked ~ .velo {
        display: none;
    }

    .principal {
        margin-left: var(--ancho-lateral);
    }

    .superior {
        padding: .5rem 1.75rem;
    }

    .superior__nombre {
        display: block;
    }

    .contenido {
        padding: 1.75rem;
    }
}

/* ───────────── Tarjetas y tablero ───────────── */
.tarjeta {
    margin-bottom: var(--espacio-bloque);
    padding: var(--relleno-tarjeta);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta--estrecha {
    max-width: 460px;
}

.tarjeta--vacia {
    border-style: dashed;
    box-shadow: none;
}

.bienvenida {
    margin-bottom: 1.25rem;
}

.seccion-titulo {
    margin: .5rem 0 1rem;
}

.resumen {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.25rem;
}

.resumen__tarjeta {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .9rem;
    align-items: center;
    padding: 1rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-bottom: 4px solid var(--color, var(--azul));
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.resumen__tarjeta--azul { --color: var(--azul-medio); --fondo-icono: var(--azul-claro); }
.resumen__tarjeta--verde { --color: var(--verde); --fondo-icono: var(--verde-claro); }
.resumen__tarjeta--dorado { --color: var(--dorado); --fondo-icono: var(--dorado-claro); }
.resumen__tarjeta--rojo { --color: var(--rojo); --fondo-icono: var(--rojo-claro); }

.resumen__icono {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--color);
    background: var(--fondo-icono);
    border-radius: 12px;
}

.resumen__valor {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--azul-oscuro);
}

.resumen__etiqueta {
    font-size: .85rem;
    color: var(--texto-suave);
}

@media (min-width: 900px) {
    .resumen {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tablero {
    display: grid;
    gap: 1.25rem;
}

.tablero__lateral > *:last-child {
    margin-bottom: 0;
}

@media (min-width: 1100px) {
    .tablero {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        align-items: start;
    }
}

/* Accesos rápidos */
.accesos {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.25rem;
}

.acceso {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    padding: .9rem .5rem;
    font-weight: 600;
    text-align: center;
    color: var(--azul-oscuro);
    text-decoration: none;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.acceso .icono {
    color: var(--azul-medio);
}

a.acceso:hover {
    border-color: var(--azul-medio);
}

.acceso small {
    font-size: .72rem;
    font-weight: 500;
    color: var(--texto-suave);
}

.acceso--pronto {
    color: var(--texto-suave);
    background: #f7f8fb;
    box-shadow: none;
}

.acceso--pronto .icono {
    color: #9aa3b8;
}

/* ───────────── Calendario ───────────── */
.calendario__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.calendario__cabecera h2 {
    margin: 0;
}

.calendario__navegacion {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.calendario__navegacion strong {
    min-width: 9rem;
    text-align: center;
}

.calendario {
    border: 1px solid var(--borde);
    border-radius: 8px;
    overflow: hidden;
}

.calendario__fila {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendario__fila--dias span {
    padding: .4rem;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    color: var(--azul);
    background: var(--azul-claro);
}

.calendario__dia {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 74px;
    padding: .25rem;
    border-top: 1px solid var(--borde);
    border-left: 1px solid var(--borde);
    overflow: hidden;
}

.calendario__dia:first-child {
    border-left: 0;
}

.calendario__dia--fuera {
    background: #f8f9fb;
}

.calendario__dia--fuera .calendario__numero {
    color: #b3b9c6;
}

.calendario__numero {
    align-self: flex-end;
    font-size: .8rem;
    font-weight: 600;
}

.calendario__dia--hoy .calendario__numero {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--blanco);
    background: var(--azul);
    border-radius: 50%;
}

.evento {
    /* El nombre usa varias líneas dentro de la casilla (hasta 3) en vez de cortarse en una (D-063). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    padding: 1px 5px;
    font-size: .7rem;
    line-height: 1.3;
    overflow: hidden;
    overflow-wrap: break-word;
    hyphens: auto;
    color: var(--azul-oscuro);
    background: var(--azul-claro);
    border-left: 3px solid var(--azul-medio);
    border-radius: 3px;
}

.evento--festivo { background: var(--verde-claro); border-left-color: var(--verde); }
.evento--periodo { background: var(--dorado-claro); border-left-color: var(--dorado); }
.evento--entrega_boletines { background: #ece6fb; border-left-color: #6a4bc4; }
.evento--comision { background: var(--naranja-claro); border-left-color: var(--naranja); }
.evento--reunion { background: #e2f3f6; border-left-color: #1d7f91; }
.evento--mas { background: none; border-left: 0; color: var(--texto-suave); }

@media (max-width: 600px) {
    .calendario__dia {
        min-height: 52px;
    }

    .calendario__dia .evento {
        font-size: 0;
        height: 6px;
        padding: 0;
    }

    .calendario__dia .evento--mas {
        display: none;
    }
}

.proximos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.proximos li {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .4rem 0;
    border-bottom: 1px solid var(--borde);
}

.proximos li:last-child {
    border-bottom: 0;
}

.proximos__fecha {
    min-width: 3rem;
    font-weight: 700;
    color: var(--azul);
}

.proximos .evento {
    font-size: .85rem;
    white-space: normal;
}

/* ───────────── Grupos ───────────── */
.rejilla {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.tarjeta--grupo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    color: inherit;
    text-decoration: none;
    border-top: 4px solid var(--azul-medio);
}

.tarjeta--grupo:hover {
    border-color: var(--azul-medio);
}

/* Columnas a escoger en «Datos de los estudiantes». */
.casillas-columnas {
    display: grid;
    gap: .2rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* Reportes: tarjetas compactas; la descripción sale como leyenda al pasar el mouse o al llegar con el teclado. */
.rejilla--reportes {
    gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.tarjeta--reporte {
    position: relative;
    gap: .1rem;
    padding: .65rem .85rem;
    border-top-width: 3px;
}

.tarjeta--reporte__leyenda {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: .55rem .7rem;
    font-size: .85rem;
    line-height: 1.35;
    color: #fff;
    background: var(--azul-oscuro);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(18, 28, 74, .25);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.tarjeta--reporte__leyenda::before {
    position: absolute;
    top: -5px;
    left: 1.2rem;
    width: 10px;
    height: 10px;
    content: "";
    background: var(--azul-oscuro);
    transform: rotate(45deg);
}

.tarjeta--reporte:hover .tarjeta--reporte__leyenda,
.tarjeta--reporte:focus-visible .tarjeta--reporte__leyenda {
    opacity: 1;
    transform: none;
}

.tarjeta--grupo__cabecera {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    color: var(--azul-oscuro);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.chip {
    padding: .1rem .55rem;
    font-size: .78rem;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.lista-simple {
    margin: 0;
    padding-left: 1.1rem;
}

.lista-simple li {
    margin-bottom: .5rem;
}

/* ───────────── Formularios ───────────── */
label {
    display: block;
    margin: var(--espacio-campo) 0 .2rem;
    font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: var(--alto-control);
    padding: var(--relleno-control);
    font: inherit;
    background: var(--blanco);
    border: 1px solid #cdd2dc;
    border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
label:focus-visible {
    outline: 3px solid #8ea0e6;
    outline-offset: 1px;
}

.boton {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    justify-content: center;
    min-height: var(--alto-control);
    margin-top: var(--espacio-campo);
    padding: var(--relleno-boton);
    font: inherit;
    font-weight: 600;
    color: var(--blanco);
    text-decoration: none;
    background: var(--azul);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.boton:hover {
    background: var(--azul-medio);
}

.boton--secundario {
    color: var(--azul);
    background: var(--azul-claro);
}

.boton--secundario:hover {
    background: #d8ddf2;
}

.boton--peligro {
    background: var(--rojo);
}

.boton--pequeno {
    min-height: 34px;
    margin: 0;
    padding: .3rem .75rem;
    font-size: .875rem;
}

.boton-icono {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--azul);
    background: none;
    border: 1px solid var(--borde);
    border-radius: 8px;
    cursor: pointer;
}

.boton-icono:hover {
    background: var(--azul-claro);
}

.en-linea {
    display: inline;
}

.filtros {
    display: grid;
    gap: .25rem .75rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .filtros {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        align-items: end;
    }

    .filtros label {
        margin: 0 0 .3rem;
    }
}

/* ───────────── Mensajes y etiquetas ───────────── */
.alerta {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-left: 4px solid currentColor;
    border-radius: 8px;
}

.alerta ul {
    margin: 0;
    padding-left: 1.2rem;
}

.alerta--exito { color: var(--verde); background: var(--verde-claro); }
.alerta--aviso { color: #7a5600; background: var(--dorado-claro); }
.alerta--error { color: var(--rojo); background: var(--rojo-claro); }

.estado-ok {
    font-weight: 700;
    color: var(--verde);
}

.etiqueta {
    display: inline-block;
    padding: .1rem .6rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
}

.etiqueta--abierto { color: var(--verde); background: var(--verde-claro); }
.etiqueta--cerrado { color: var(--rojo); background: var(--rojo-claro); }
.etiqueta--titular { color: #7a5600; background: var(--dorado-claro); }

/* Desempeños: color + código, nunca solo color. */
.desempeno {
    display: inline-block;
    min-width: 2.4rem;
    padding: .1rem .4rem;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    color: var(--blanco);
    border-radius: 6px;
}

.desempeno--BJ { background: var(--bajo); }
.desempeno--BS { background: var(--basico); }
.desempeno--AL { background: var(--alto); }
.desempeno--SP { background: var(--superior); }

.lista-estado {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-estado li {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid var(--borde);
}

.periodo {
    padding: .85rem 0;
    border-bottom: 1px solid var(--borde);
}

.periodo:last-child {
    border-bottom: 0;
}

.periodo__cabecera {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.lista-estudiantes {
    columns: 1;
    margin: 0;
    padding-left: 1.4rem;
}

@media (min-width: 768px) {
    .lista-estudiantes {
        columns: 2;
    }
}

.codigos {
    columns: 2;
    padding: 0;
    list-style: none;
}

.qr {
    display: block;
    margin: 1rem 0;
    background: var(--blanco);
}

/* ───────────── Tablas ───────────── */
.tabla-desplazable {
    overflow-x: auto;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: .6rem .7rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--borde);
}

th {
    font-size: .85rem;
    color: var(--azul);
    background: var(--azul-claro);
}

pre {
    font-size: .8rem;
    white-space: pre-wrap;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: 0;
    list-style: none;
}

.pagination li > * {
    display: inline-block;
    min-width: 2.5rem;
    padding: .4rem .6rem;
    text-align: center;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 6px;
}

.pagination .active > * {
    color: var(--blanco);
    background: var(--azul);
}

/* ───────────── Páginas de ingreso ───────────── */
.invitado {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem 1rem;
    background: linear-gradient(160deg, var(--azul-oscuro) 0%, var(--azul) 55%, var(--verde) 140%);
}

.invitado__caja {
    width: 100%;
    max-width: 420px;
}

.invitado__cabecera {
    margin-bottom: 1rem;
    text-align: center;
    color: var(--blanco);
}

.invitado__cabecera img {
    background: var(--blanco);
    border: 3px solid var(--dorado);
    border-radius: 50%;
}

.invitado__institucion {
    margin: .5rem 0 0;
    font-size: 1.1rem;
    line-height: 1.25;
}

.invitado__lema {
    margin: .25rem 0 0;
    font-style: italic;
    color: var(--dorado-claro);
}

.invitado .tarjeta {
    padding: 1.5rem;
}

.invitado .boton {
    width: 100%;
}

.invitado__pie {
    margin-top: 1rem;
    font-size: .8rem;
    text-align: center;
    color: #c6cdee;
}

/* ───────────── Fase 3: formularios y listados ───────────── */
.cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.cabecera__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cabecera__acciones .boton {
    margin-top: 0;
}

.formulario-rejilla {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .formulario-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .formulario-rejilla--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .formulario-rejilla .ancho-completo {
        grid-column: 1 / -1;
    }
}

.campo--error input,
.campo--error select,
.campo--error textarea {
    border-color: var(--rojo);
}

.campo__mensaje {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: var(--rojo);
}

.campo__casilla {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-weight: 500;
}

.campo__casilla input {
    width: 20px;
    height: 20px;
}

.obligatorio {
    color: var(--rojo);
}

.subtitulo {
    margin: 1.25rem 0 .25rem;
    padding-bottom: .35rem;
    font-size: 1rem;
    color: var(--azul);
    border-bottom: 2px solid var(--azul-claro);
}

.casillas {
    display: grid;
    gap: .25rem .75rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin: .5rem 0;
}

.casillas label {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin: 0;
    font-weight: 500;
}

.tabla-compacta td,
.tabla-compacta th {
    padding: .4rem .55rem;
}

.tabla-compacta input[type="number"] {
    width: 4.5rem;
    min-height: 36px;
    padding: .25rem .4rem;
    font: inherit;
    border: 1px solid #cdd2dc;
    border-radius: 6px;
}

.en-fila {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.en-fila .boton {
    margin-top: 0;
}

.resaltado {
    padding: 1rem;
    background: var(--dorado-claro);
    border: 1px solid var(--dorado);
    border-radius: 8px;
}

.resaltado code {
    font-size: 1.1rem;
    font-weight: 700;
}

.cifras {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: 1rem;
}

.cifra {
    padding: .75rem;
    text-align: center;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 8px;
}

.cifra strong {
    display: block;
    font-size: 1.6rem;
    color: var(--azul);
}

.cifra--error strong { color: var(--rojo); }
.cifra--aviso strong { color: var(--naranja); }
.cifra--ok strong { color: var(--verde); }

.etiqueta--retirado { color: var(--rojo); background: var(--rojo-claro); }
.etiqueta--matriculado { color: var(--verde); background: var(--verde-claro); }
.etiqueta--inactivo { color: var(--texto-suave); background: var(--fondo); }

.vacio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--texto-suave);
}

.datos-lista {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: 0;
}

.datos-lista dt {
    font-weight: 600;
    color: var(--texto-suave);
}

.datos-lista dd {
    margin: 0;
}

details > summary {
    cursor: pointer;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/* ───────────── Preferencias de visualización (D-042) ─────────────
 * Tamaño de letra: cambia el tamaño base; todo lo demás está en rem y se ajusta.
 * Densidad: compacta (predeterminada, más contenido a la vez) o cómoda (más espacio, mejor para el dedo).
 */
html { font-size: 15px; }
html.letra-pequena { font-size: 13.5px; }
html.letra-normal { font-size: 15px; }
html.letra-grande { font-size: 17px; }
html.letra-muy_grande { font-size: 19px; }

:root,
html.densidad-compacta {
    --alto-control: 2.3rem;
    --relleno-control: .3rem .6rem;
    --relleno-boton: .35rem .9rem;
    --espacio-campo: .5rem;
    --relleno-tarjeta: .85rem;
    --espacio-bloque: .9rem;
    --alto-menu: 2.3rem;
    --relleno-menu: .35rem 1rem;
}

html.densidad-comoda {
    --alto-control: 2.9rem;
    --relleno-control: .55rem .75rem;
    --relleno-boton: .6rem 1.15rem;
    --espacio-campo: .85rem;
    --relleno-tarjeta: 1.1rem;
    --espacio-bloque: 1.25rem;
    --alto-menu: 2.9rem;
    --relleno-menu: .55rem 1.1rem;
}

html.densidad-compacta .contenido { padding-top: 1rem; }
html.densidad-compacta th,
html.densidad-compacta td { padding: .4rem .55rem; }
html.densidad-compacta .calendario__dia { min-height: 60px; }
html.densidad-compacta .resumen__tarjeta { padding: .7rem; }
html.densidad-compacta .resumen__icono { width: 42px; height: 42px; }
html.densidad-compacta .acceso { min-height: 84px; }

.vista { position: relative; }
.vista > summary { list-style: none; font-weight: 700; }
.vista > summary::-webkit-details-marker { display: none; }
.vista__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 40;
    width: 260px;
    padding: .75rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 10px;
    box-shadow: var(--sombra);
}
/* ───────────── «Ver como» otro rol, solo en pruebas (D-103) ───────────── */
.ver-como > summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.ver-como__panel { width: 290px; }
.ver-como__lista { display: grid; gap: .3rem; margin: .5rem 0; }
.ver-como__opcion {
    display: grid;
    gap: .05rem;
    padding: .45rem .6rem;
    text-align: left;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}
.ver-como__opcion:hover:not(:disabled) { border-color: var(--azul); }
.ver-como__opcion:disabled { opacity: .55; cursor: not-allowed; }
.ver-como__opcion--actual { border-width: 2px; border-color: var(--azul); background: var(--azul-claro); }
.ver-como__aviso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
@media (max-width: 640px) {
    .ver-como > summary { font-size: 0; gap: 0; padding: .45rem; }
    .ver-como__panel { width: min(290px, calc(100vw - 32px)); }
}

/* ───────────── Fotos para el carnet (D-049) ───────────── */
.rejilla--fotos {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.foto-ficha {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: center;
    margin: 0;
    text-align: center;
}

.foto-ficha__imagen,
.foto-ficha__vacia {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--borde);
}

.foto-ficha__vacia {
    display: grid;
    place-items: center;
    color: #a7aec0;
    background: var(--fondo);
}

.foto-ficha__nombre {
    font-size: .85rem;
    line-height: 1.25;
}

.foto-ficha__form {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}

.foto-ficha__camara {
    margin: 0;
    cursor: pointer;
}

.foto-ficha__rh {
    width: auto;
    min-height: 34px;
    padding: .2rem .4rem;
}

.foto-ficha__form--enviando {
    opacity: .5;
    pointer-events: none;
}

/* El atributo hidden siempre oculta, aunque el elemento tenga display propio. */
[hidden] {
    display: none !important;
}

/* ───────────── Fase 4: planillas, asistencia y avisos ───────────── */
.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: var(--espacio-bloque);
}

.pestana {
    padding: .35rem .8rem;
    color: var(--azul);
    text-decoration: none;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.pestana--activa {
    color: var(--blanco);
    background: var(--azul);
    border-color: var(--azul);
}

progress {
    width: 100%;
    height: .6rem;
    accent-color: var(--verde);
}

.desempenos {
    display: flex;
    gap: .25rem;
}

.desempeno-opcion {
    margin: 0;
    cursor: pointer;
}

.desempeno-opcion input {
    position: absolute;
    opacity: 0;
}

.desempeno-opcion span {
    display: inline-grid;
    place-items: center;
    min-width: 2.3rem;
    min-height: 2rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--texto-suave);
    background: var(--fondo);
    border: 2px solid var(--borde);
    border-radius: 6px;
}

.desempeno-opcion input:focus-visible + span {
    outline: 3px solid #8ea0e6;
}

.desempeno-opcion--BJ input:checked + span { color: #fff; background: var(--bajo); border-color: var(--bajo); }
.desempeno-opcion--BS input:checked + span { color: #fff; background: var(--basico); border-color: var(--basico); }
.desempeno-opcion--AL input:checked + span { color: #fff; background: var(--alto); border-color: var(--alto); }
.desempeno-opcion--SP input:checked + span { color: #fff; background: var(--superior); border-color: var(--superior); }

.planilla textarea {
    min-height: var(--alto-control);
}

.leyenda-desempenos .desempeno {
    margin-left: .4rem;
}

.barra-guardar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    padding: .6rem 0;
    background: linear-gradient(to top, var(--fondo) 75%, transparent);
}

.barra-guardar .boton {
    margin-top: 0;
}

.consolidado th,
.consolidado td.centrado {
    text-align: center;
}

.campana {
    position: relative;
}

.campana__contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--rojo);
    border-radius: 999px;
}

.aviso {
    border-bottom: 1px solid var(--borde);
}

.aviso__boton {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    padding: .6rem .25rem;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.aviso--nuevo .aviso__boton {
    border-left: 4px solid var(--dorado);
    padding-left: .6rem;
    background: var(--dorado-claro);
}

/* Calificación masiva (D-051) */
.masivo {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: center;
    margin-bottom: .75rem;
    padding: .6rem .75rem;
    background: var(--azul-claro);
    border-radius: 8px;
}

.masivo__titulo {
    font-weight: 700;
    color: var(--azul);
}

.masivo__todos {
    margin: 0;
}

.masivo__botones {
    display: flex;
    gap: .3rem;
}

.masivo__aplicar {
    min-width: 2.6rem;
    padding: .35rem .5rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    border: 0;
    cursor: pointer;
}

.planilla__seleccion {
    width: 2rem;
    text-align: center;
}

.planilla__seleccion input {
    width: 18px;
    height: 18px;
}

/* Aprendizajes del periodo en preescolar (D-052) */
.aprendizajes {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding-left: 1.4rem;
}

.aprendizajes textarea {
    display: block;
    width: 100%;
    resize: vertical;
}

[data-agregar-aprendizaje] {
    margin-top: .5rem;
}

/* Descripción obligatoria de preescolar aún vacía (D-054). */
.planilla textarea.falta { border-color: var(--rojo); background: var(--rojo-claro); }

/* Aprendizajes agrupados por grado y sede (D-055). */
.aprendizajes-grado { margin-top: 1.25rem; }
.aprendizajes-grado__titulo {
    margin: 0 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--borde);
    color: var(--azul-oscuro);
    font-size: 1.35rem;
}
.rejilla--aprendizajes { gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tarjeta--aprendizaje { padding: .75rem 1rem; }
.tarjeta--aprendizaje > .etiqueta { align-self: flex-start; }

/* Planilla final: desempeños de los periodos del año, solo consulta (D-057). */
.planilla__previo { text-align: center; white-space: nowrap; width: 2.6rem; background: var(--fondo); }
/* Periodos: tono gris y desempeños atenuados, porque solo se consultan (D-060). */
.planilla td.planilla__previo .desempeno { opacity: .7; transform: scale(.9); }
/* Definición del año: fondo dorado claro y borde izquierdo marcado. */
.planilla .planilla__final { background: var(--dorado-claro); }
.planilla__grupos th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.planilla__grupos th.planilla__final { color: var(--azul-oscuro); }
.planilla .planilla__final--inicio { border-left: 3px solid var(--dorado); }

/* Cifras del resultado del año (D-059). */
.resumen-final__cifras { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }

/* Página de resultado del año (D-059). */
.resumen-final__tabla td { vertical-align: top; }
.resumen-final__no-aprueba td { background: var(--rojo-claro); }
.resumen-final__justificacion { display: block; margin-top: .2rem; }

/* Asistencia por día del aula multigrado (D-062). */
.asistencia__grado { white-space: nowrap; color: var(--azul-oscuro); font-weight: 600; }

/* Ventana emergente de la planilla (D-065). */
.ventana { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem; border: 0; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); }
.ventana::backdrop { background: rgba(15, 23, 42, .45); }
.ventana h2 { margin-top: 0; font-size: 1.15rem; color: var(--azul-oscuro); }
.ventana textarea { width: 100%; min-height: 5rem; }
.ventana__acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }

/* Mis pendientes en Inicio y faltantes del avance de carga (D-066). */
.pendientes { border-left: 4px solid var(--rojo); }
.pendientes h2 { margin-top: 0; color: var(--rojo); }
.pendientes__periodo { margin-top: .6rem; }
.pendientes__periodo summary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; cursor: pointer; }
.pendientes__periodo ul { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.avance__faltas { color: var(--rojo); font-size: .85rem; }
.recordatorios { margin: .5rem 0 1rem; }

/* Lista de boletines por estudiante (D-069). */
.lista-boletines { display: grid; gap: .35rem; margin: .5rem 0 0; padding-left: 1.4rem; }
.lista-boletines li { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .25rem 0; border-bottom: 1px solid var(--borde); }

/* Certificados por matrícula (D-071). */
.certificado-fila { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.certificado-fila .ayuda { display: block; }
.certificado-acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Subir o escanear un acta (D-083). */
.subir-acta { margin: .5rem 0 1rem; padding: 1rem; border: 2px dashed var(--azul-medio); border-radius: 10px; background: var(--azul-claro); }
.subir-acta__titulo { margin: 0 0 .6rem; font-weight: 700; color: var(--azul-oscuro); }
.subir-acta__opciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.subir-acta__opciones label { position: relative; cursor: pointer; }
.subir-acta__input { display: block; margin-top: .4rem; font-size: .8rem; max-width: 16rem; }

/* ───────────── Aviso «Generando el PDF…» (D-087, public/js/generando.js) ───────────── */
.generando {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100% - 2rem);
    padding: .85rem 1.25rem;
    border-radius: 999px;
    background: #1b2a6b;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    transform: translateX(-50%);
}

.generando[hidden] {
    display: none;
}

.generando__animacion {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #d9a300;
    border-radius: 50%;
    animation: generando-giro .8s linear infinite;
}

@keyframes generando-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .generando__animacion { animation: none; border-top-color: rgba(255, 255, 255, .35); }
}

/* ───────────── Portal de familias y accesos (D-088) ───────────── */
.clave-temporal {
    border: 2px solid #d9a300;
    background: #fffaf0;
}

.clave-temporal__clave {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.35rem;
    letter-spacing: .08em;
}

.rejilla-casillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .25rem 1rem;
    margin-bottom: 1rem;
}

.en-linea {
    display: inline;
}

.observacion-familia {
    padding: .5rem 0;
    border-bottom: 1px solid var(--borde, #e5e7eb);
}

.observacion-familia:last-child {
    border-bottom: 0;
}

.observacion-familia p {
    margin: .15rem 0;
}

/* ───────────── Tabla de periodos (D-093) ───────────── */
.tabla-periodos td { vertical-align: top; }
.sin-salto { white-space: nowrap; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: .35rem; }
.acciones-fila form { margin: 0; }
.publicar-fila { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .4rem; }
.publicar-fila select { width: auto; padding: .25rem .4rem; font-size: .85rem; }

/* Botón con aspecto de enlace (Quitar foto, Retirar, Desactivar, reaperturas…): no tenía estilo propio. */
.boton-enlace {
    padding: 0;
    color: var(--azul);
    font: inherit;
    font-size: .9rem;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.boton-enlace:hover,
.boton-enlace:focus-visible {
    color: var(--azul-oscuro);
}

/* Editar responsables en la ficha (D-096). */
.responsable-edicion { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--borde); border-radius: 10px; }
.responsable-edicion legend { padding: 0 .35rem; }

/* Vista previa de la firma del rector (antes era un estilo en línea que la CSP bloqueaba, D-099). */
.firma-vista-previa { max-height: 70px; max-width: 220px; background: #fff; border: 1px solid var(--borde); }
.logo-vista-previa { object-fit: contain; background: #fff; }

/* Páginas de error (D-099). */
.error-codigo { margin: 0; font-size: 3rem; font-weight: 800; color: var(--azul); line-height: 1; }

/* Barra de avance de los boletines por lotes (D-119). */
.barra-avance {
    width: 100%;
    height: 1.25rem;
    accent-color: var(--azul, #1f3a68);
}

/* Datos de los estudiantes: columnas por grupos (D-122). */
.grupo-columnas {
    margin: .4rem 0;
    padding: .4rem .6rem;
    border: 1px solid var(--borde, #d7dbe6);
    border-radius: 8px;
}

.grupo-columnas__titulo {
    margin-bottom: .2rem;
}

/* Planilla de seguimiento del docente (D-123). */
.rejilla-dos {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tabla-seguimiento th {
    min-width: 3.6rem;
    font-size: .78rem;
    text-align: center;
}

.tabla-seguimiento select {
    min-width: 3.4rem;
    padding: .15rem .2rem;
}

.tabla-seguimiento select[name^="final"] {
    min-width: 8rem;
}

.tabla-seguimiento__nombre {
    min-width: 13rem;
    white-space: nowrap;
}

.columna-seguimiento {
    margin: .3rem 0;
}

.columna-seguimiento input[type="number"] {
    width: 5rem;
}

/* Colores de los desempeños en la planilla de seguimiento (D-124): siempre con su código, nunca solo color. */
/* BJ con fondo rojo intenso y letra blanca: a simple vista no se confunde con el BS naranja claro. */
.nota-select[data-nivel="BJ"], .nota-letra[data-nivel="BJ"] { color: #fff; background: #c62828; border-color: #b71c1c; font-weight: 700; }
.nota-select[data-nivel="BS"], .nota-letra[data-nivel="BS"] { color: var(--basico); background: var(--naranja-claro); font-weight: 700; }
.nota-select[data-nivel="AL"], .nota-letra[data-nivel="AL"] { color: var(--alto); background: var(--azul-claro); font-weight: 700; }
.nota-select[data-nivel="SP"], .nota-letra[data-nivel="SP"] { color: var(--superior); background: var(--verde-claro); font-weight: 700; }
.nota-select option { color: var(--texto, #1a1a1a); background: #fff; }

.nota-letra {
    display: inline-block;
    min-width: 2.2rem;
    padding: .05rem .35rem;
    border-radius: 6px;
    text-align: center;
}

/* Planilla Docente: aviso del guardado automático (D-127). */
.estado-guardado { font-size: .9rem; color: var(--texto-suave, #4b5563); }
.estado-guardado--error { color: var(--bajo); font-weight: 700; }

/* Aplicación instalable (D-134): botón oculto hasta que el navegador permite instalar. */
.instalar-app [hidden] {
    display: none !important;
}

.instalar-app__ayuda {
    margin: .5rem 0 0;
}

.lateral__instalar {
    padding: 0 1rem 1.25rem;
}

.lateral__instalar .boton {
    width: 100%;
    justify-content: center;
}

.lateral__instalar .instalar-app__ayuda {
    color: #cfd6f3;
}

.invitado__instalar {
    margin-top: 1rem;
    text-align: center;
}

.invitado__instalar .instalar-app__ayuda {
    color: #e8ebf7;
}

/* ───────────── Inscripción en línea (D-135) ───────────── */
.invitado__caja--ancha { max-width: 760px; }
.invitado .subir-acta .boton, .invitado .en-fila .boton { width: auto; }
/* En el celular, la columna del ingreso no crece más que la pantalla y los botones de archivo se acomodan. */
.invitado { grid-template-columns: minmax(0, 1fr); }
.subir-acta__opciones label { flex-direction: column; align-items: flex-start; max-width: 100%; white-space: normal; }
.subir-acta__input { max-width: 100%; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.codigo-inscripcion { margin: 1rem 0; padding: 1rem; font: 700 2rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .25em; text-align: center; color: var(--azul-oscuro); background: var(--azul-claro); border: 2px dashed var(--azul-medio); border-radius: 10px; }
.inscripcion-revision { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .inscripcion-revision { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.inscripcion-revision__foto { width: 100%; max-width: 220px; border-radius: 8px; border: 1px solid var(--borde, #d7dbe8); }
.inscripcion-revision__documento { width: 100%; height: 70vh; border: 1px solid var(--borde, #d7dbe8); border-radius: 8px; }
.etiqueta--pendiente { color: #7a5600; background: var(--dorado-claro); }
.etiqueta--devuelta { color: var(--azul-oscuro); background: var(--azul-claro); }
.etiqueta--aprobada { color: var(--verde); background: var(--verde-claro); }
.etiqueta--rechazada { color: var(--rojo); background: var(--rojo-claro); }

/* Comunicados (D-137): el mensaje conserva los saltos de línea; la lista de recibidos usa enlaces. */
.texto-largo {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

a.aviso__boton {
    text-decoration: none;
}

/* Tareas (D-139) */
/* Cada asignatura y grupo: al marcarla se despliegan sus estudiantes debajo (sin JavaScript). */
.tarea-opcion {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid var(--borde);
}

.tarea-opcion__casilla {
    width: 1.2rem;
    height: 1.2rem;
}

.tarea-opcion__nombre {
    flex: 1;
    margin: 0;
    font-weight: 600;
}

.tarea-opcion__estudiantes {
    display: none;
    flex-basis: 100%;
    padding: .5rem .75rem;
    background: var(--azul-claro);
    border-radius: 8px;
}

.tarea-opcion__casilla:checked ~ .tarea-opcion__estudiantes {
    display: block;
}

.etiqueta--entregada { color: #7a5600; background: var(--dorado-claro); }
.etiqueta--calificada { color: var(--verde); background: var(--verde-claro); }

/* Botón «Ayuda» y su ventana con las instrucciones de cada pantalla (D-145). */
.boton-ayuda {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 36px;
    padding: 0 .6rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--azul-oscuro);
    background: var(--dorado-claro);
    border: 1px solid var(--dorado);
    border-radius: 8px;
    cursor: pointer;
}
.boton-ayuda:hover { background: var(--azul-claro); }
.boton-ayuda[hidden] { display: none; }
.invitado__ayuda { display: flex; margin: 0 0 .5rem auto; }
.ventana.guia { padding: 0; }
.guia__cuerpo { padding: 1.25rem; }
.guia__cabecera { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.guia__cabecera h2 { margin: 0; }
.guia__icono {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--azul);
    background: var(--dorado-claro);
    border-radius: 50%;
}
.guia__seccion { margin: 1rem 0 .35rem; font-size: .95rem; color: var(--azul); }
.guia__seccion + p { margin-top: 0; }
.guia__pasos { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.guia__pasos li { position: relative; min-height: 1.75rem; padding-left: 2.3rem; counter-increment: paso; }
.guia__pasos li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-weight: 700;
    color: var(--blanco);
    content: counter(paso);
    background: var(--azul);
    border-radius: 50%;
}
.guia__nota { margin: .75rem 0 0; padding: .6rem .75rem; border-left: 4px solid; border-radius: 6px; }
.guia__nota--consejo { background: var(--verde-claro); border-color: var(--verde); }
.guia__nota--cuidado { background: var(--dorado-claro); border-color: var(--dorado); }
@media (max-width: 640px) {
    .superior .boton-ayuda span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .superior .boton-ayuda { padding: 0 .45rem; }
}

/* Firmas de las observaciones (D-146) */
.firma { display: grid; gap: .4rem; justify-items: start; margin-bottom: 1rem; }
.firma[hidden] { display: none; }
.firma__lienzo { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; touch-action: none; background: #fff; border: 2px dashed var(--borde, #c9ced8); border-radius: 8px; }
.firma__estado { margin: 0 0 1rem; padding-left: 1.2rem; }
.firma__estado:empty { display: none; }

/* Días sin clase e informe de inasistencias (D-147) */
.sin-clase summary, .informe-detalle summary { font-weight: 600; color: var(--azul); cursor: pointer; }
.sin-clase form { margin-top: .75rem; }
.informe-descargas { margin: .75rem 0; }
.informe-detalle ul { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .9em; font-weight: 400; }
.evento--sin_clase { background: var(--rojo-claro); border-left-color: var(--rojo); }
.evento--cumpleanos { background: var(--dorado-claro); border-left-color: var(--dorado); }