/* ==========================================
   MI AGENDA DOCENTE   
   ESTILOS GENERALES
   ========================================== */

/* ---------- VARIABLES ---------- */

:root {
    --color-principal: #1d3557;
    --color-principal-oscuro: #14253d;
    --color-acento: #f28c28;
    --color-fondo: #f4f6f9;
    --color-blanco: #ffffff;
    --color-texto: #1f2937;
    --color-texto-suave: #6b7280;
    --color-texto-secundario: #6b7280;
    --color-borde: #e5e7eb;
    --radio: 12px;
}


/* ---------- RESETEO BÁSICO ---------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ---------- CUERPO ---------- */

body {
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    min-height: 100vh;
}


/* ==========================================
   PORTADA
   ========================================== */

body.portada {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #eef5fc 0%,
            #dfeaf7 50%,
            #f4f7fb 100%
        );
}


/* ---------- CONTENIDO ---------- */

.portada-contenido {
    width: min(900px, 90%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ---------- LOGOTIPO ---------- */

.portada-logo {
    width: min(700px, 80%);
    height: auto;
    margin-bottom: 35px;
}


/* ---------- TÍTULO ---------- */

.portada-titulo {
    margin: 0;
    color: #1f4169;
    font-size: 2.4rem;
    font-weight: 700;
}


/* ---------- SUBTÍTULO ---------- */

.portada-subtitulo {
    margin: 10px 0 5px;
    color: #52708f;
    font-size: 1.1rem;
}


/* ---------- CURSO ---------- */

.portada-curso {
    margin: 0 0 30px;
    color: #52708f;
    font-size: 1rem;
}


/* ---------- BOTÓN ENTRAR ---------- */

.boton-entrar {
    display: inline-block;
    padding: 15px 28px;
    background: #ff9024;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.boton-entrar:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.20);
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 600px) {

    .portada-logo {
        width: 90%;
        margin-bottom: 25px;
    }

    .portada-titulo {
        font-size: 1.9rem;
    }

}


/* ==========================================
   ESTRUCTURA PRINCIPAL
   ========================================== */


/* ==========================================
   MENÚ LATERAL
   ========================================== */

.menu-lateral {
    width: 250px;
    min-height: 100vh;
    background-color: var(--color-principal);
    color: var(--color-blanco);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 25px 15px;
}


/* ---------- LOGO ---------- */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px 25px;
}

.logo:first-letter {
    font-size: 28px;
}


/* ---------- NAVEGACIÓN ---------- */

.menu-lateral nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--color-blanco);
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    transition: background-color 0.2s ease;
}


.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.10);
}


.menu-item.activo {
    background-color: var(--color-acento);
    color: var(--color-blanco);
}


/* ---------- PARTE INFERIOR ---------- */

.menu-inferior {
    margin-top: auto;
}


.curso-actual {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 15px;
    padding: 15px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.curso-actual strong {
    font-size: 13px;
}


.curso-actual span {
    font-size: 12px;
    opacity: 0.7;
}


.usuario {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.usuario strong {
    font-size: 14px;
}


.usuario span {
    font-size: 12px;
    opacity: 0.7;
}


/* ==========================================
   CONTENIDO PRINCIPAL
   ========================================== */

.contenido {
    margin-left: 250px;
    width: calc(100% - 250px);
    min-height: 100vh;
    padding: 35px 45px;
}


/* ==========================================
   CABECERA GENERAL
   ========================================== */

.cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.pagina-evaluaciones .cabecera > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.cabecera h1 {
    font-size: 32px;
    color: var(--color-principal);
    margin-bottom: 5px;
}

.cabecera p {
    color: var(--color-texto-suave);
    font-size: 15px;
}


/* ==========================================
   CABECERA CON ESCUDO
   ========================================== */

.cabecera-organizacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}


.pagina-evaluaciones .cabecera-derecha {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex: 0 0 auto;
}


/* ==========================================
   ESCUDO DEL COLEGIO
   ========================================== */

.pagina-evaluaciones .escudo-organizacion,
.pagina-evaluaciones .escudo-colegio {
    width: 110px;
    height: 110px;
    object-fit: contain;
    flex: 0 0 110px;
}


/* ==========================================
   BOTÓN IMPRIMIR
   ========================================== */

.pagina-evaluaciones .boton-imprimir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid #d4ddea;
    border-radius: 8px;
    background: white;
    color: var(--color-principal);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}


.boton-imprimir:hover {
    background-color: #f3f6fa;
    transform: translateY(-1px);
}


/* ---------- BOTÓN PRINCIPAL ---------- */

.boton-principal {
    background: var(--color-acento);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        background-color 0.15s ease;
}

.boton-principal:hover {
    background-color: #d96a0b;
    transform: translateY(-1px);
    filter: brightness(0.95);
}


/* ==========================================
   RESUMEN
   ========================================== */

.resumen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 35px;
}


.tarjeta-resumen {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}


.tarjeta-resumen .icono {
    font-size: 28px;
}


.tarjeta-resumen div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.tarjeta-resumen strong {
    font-size: 24px;
    color: var(--color-principal);
}


.tarjeta-resumen span:last-child {
    font-size: 13px;
    color: var(--color-texto-suave);
}


/* ==========================================
   SESIONES
   ========================================== */

.sesiones {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}


.sesiones h2 {
    font-size: 20px;
    color: var(--color-principal);
    padding: 22px 25px;
    border-bottom: 1px solid var(--color-borde);
}


/* ---------- CADA SESIÓN ---------- */

.sesion {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px 25px;
    border-bottom: 1px solid var(--color-borde);
}


.sesion:last-child {
    border-bottom: none;
}


/* ---------- HORA ---------- */

.hora {
    width: 70px;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: bold;
    color: var(--color-principal);
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.hora span {
    font-size: 12px;
    font-weight: normal;
    color: var(--color-texto-suave);
}


/* ---------- INFORMACIÓN ---------- */

.sesion-info {
    flex: 1;
}


.sesion-info h3 {
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--color-texto);
}


.sesion-info p {
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--color-texto-suave);
}


.sesion-info small {
    font-size: 12px;
    color: var(--color-texto-suave);
}


/* ==========================================
   ESTADOS
   ========================================== */

.estado {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}


.estado.completada {
    background-color: #dcfce7;
    color: #166534;
}


.estado.en-curso {
    background-color: #dbeafe;
    color: #1d4ed8;
}


.estado.pendiente {
    background-color: #fef3c7;
    color: #92400e;
}


.estado.reunion {
    background-color: #f3e8ff;
    color: #7e22ce;
}



/* ==========================================
   VENTANA DE SESIÓN
   ========================================== */

.ventana-oculta {
    display: none !important;
}


#ventana-sesion {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}


.ventana-contenido {
    position: relative;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--color-blanco);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}


.ventana-contenido h2 {
    color: var(--color-principal);
    font-size: 24px;
    margin-bottom: 5px;
}


.subtitulo {
    color: var(--color-texto-suave);
    margin-bottom: 25px;
}


.cerrar-ventana {
    position: absolute;
    top: 15px;
    right: 18px;
    border: none;
    background: none;
    font-size: 30px;
    color: var(--color-texto-suave);
    cursor: pointer;
}


.cerrar-ventana:hover {
    color: var(--color-texto);
}


.campo-sesion {
    margin-bottom: 20px;
}


.campo-sesion label {
    display: block;
    font-weight: bold;
    color: var(--color-principal);
    margin-bottom: 8px;
}


.campo-sesion textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--color-texto);
    background-color: #fafafa;
}


.campo-sesion textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.12);
}


.acciones-ventana {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}


.boton-secundario {
    border: 1px solid var(--color-borde);
    background-color: var(--color-blanco);
    color: var(--color-texto);
    padding: 11px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}


.boton-secundario:hover {
    background-color: var(--color-fondo);
}


/* ==========================================
   DETALLE DE LAS SESIONES
   ========================================== */

.detalle-sesion {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.detalle-linea {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12px;
    line-height: 1.4;
}


.detalle-linea strong {
    color: var(--color-principal);
    min-width: 70px;
}


.detalle-linea span {
    color: var(--color-texto-suave);
}


.detalle-linea.realizado strong {
    color: #166534;
}


.detalle-linea.proxima strong {
    color: var(--color-acento);
}




/* =========================================================
   ALUMNOS
   ========================================================= */

/* ---------- BUSCADOR ---------- */

.buscador-alumnos {
    margin-bottom: 20px;
}

.buscador-alumnos input {
    width: 100%;
    max-width: 420px;
    padding: 12px 15px;
    border: 1px solid var(--color-borde);
    border-radius: 9px;
    background-color: var(--color-blanco);
    color: var(--color-texto);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.buscador-alumnos input:focus {
    border-color: var(--color-acento);
    box-shadow:
        0 0 0 3px rgba(242, 140, 40, 0.12);
}


/* ---------- LISTA ---------- */

.lista-alumnos {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.03);
}

.lista-alumnos h2 {
    margin: 0;
    padding: 22px 25px;
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-principal);
    font-size: 20px;
}


/* ---------- CONTENEDOR DE TARJETAS ---------- */

#contenedor-alumnos {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    padding: 20px;
}


/* ---------- TARJETA ---------- */

.tarjeta-alumno {
    position: relative;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 20px;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.tarjeta-alumno:hover {
    transform: translateY(-2px);
    border-color: #d9dee5;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.07);
}


/* ---------- ICONO ---------- */

.alumno-icono {
    font-size: 30px;
    margin-bottom: 8px;
}


/* ---------- DATOS ---------- */

.alumno-datos h3 {
    margin: 0 0 5px 0;
    color: var(--color-principal);
    font-size: 18px;
}

.alumno-datos p {
    margin: 0 0 12px 0;
    color: var(--color-texto-suave);
    font-size: 14px;
}


/* ---------- ESTADO ---------- */

.alumno-estado {
    margin-bottom: 15px;
}

.estado-alumno {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.estado-alumno.normal {
    background-color: #dcfce7;
    color: #166534;
}

.estado-alumno.apoyo {
    background-color: #ffedd5;
    color: #9a3412;
}


/* ---------- BOTÓN VER FICHA ---------- */

.boton-ver-alumno {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background-color: var(--color-blanco);
    color: var(--color-principal);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.boton-ver-alumno:hover {
    background-color: var(--color-fondo);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}


/* ---------- SIN RESULTADOS ---------- */

.sin-alumnos {
    grid-column: 1 / -1;
    padding: 35px 20px;
    text-align: center;
    color: var(--color-texto-suave);
    font-size: 15px;
}


/* =========================================================
   FICHA DEL ALUMNO
   ========================================================= */

/* ---------- VENTANA ---------- */

.modal-alumno {
    position: relative;
    width: 90%;
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--color-blanco);
    border-radius: 14px;
    padding: 30px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.20);
}


/* ---------- CABECERA ---------- */

.cabecera-ficha-alumno {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-right: 35px;
    margin-bottom: 15px;
}

.icono-ficha-alumno {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #eef2f7;
    font-size: 30px;
}

.cabecera-ficha-alumno h2 {
    margin: 0 0 4px 0;
    color: var(--color-principal);
    font-size: 24px;
}

.cabecera-ficha-alumno p {
    margin: 0;
    color: var(--color-texto-suave);
    font-size: 15px;
}


/* ---------- ESTADO ---------- */

.estado-ficha-alumno {
    margin-bottom: 25px;
}


/* ---------- SECCIONES ---------- */

.seccion-ficha-alumno {
    padding: 20px 0;
    border-top: 1px solid var(--color-borde);
}

.seccion-ficha-alumno h3 {
    margin: 0 0 15px 0;
    color: var(--color-principal);
    font-size: 18px;
}

.seccion-ficha-alumno p {
    margin: 0;
    color: var(--color-texto);
}


/* ---------- DATOS ---------- */

.datos-ficha {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 15px;
}

.datos-ficha > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background-color: var(--color-fondo);
    border-radius: 8px;
}

.datos-ficha strong {
    color: var(--color-texto-suave);
    font-size: 12px;
    text-transform: uppercase;
}

.datos-ficha span {
    color: var(--color-texto);
    font-size: 14px;
}


/* ---------- SIN DATOS ---------- */

.sin-datos-ficha {
    color: var(--color-texto-suave) !important;
    font-size: 14px;
    font-style: italic;
}


/* ---------- ACCIONES ---------- */

.acciones-ficha-alumno {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--color-borde);
}


/* ---------- CIERRE ---------- */

#cerrar-ficha-alumno {
    position: absolute;
    top: 15px;
    right: 18px;
    border: none;
    background: transparent;
    color: var(--color-texto-suave);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

#cerrar-ficha-alumno:hover {
    color: var(--color-principal);
}


/* ==========================================
   EVALUACIONES
   ========================================== */


/* =========  FILTROS   ========================================== */

.filtros-evaluaciones {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filtros-evaluaciones select {
    padding: 10px 14px;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    background: #ffffff;
    color: #17365d;
    font-size: 15px;
    cursor: pointer;

}

.filtros-evaluaciones select:focus {
    outline: none;
    border-color: #f28c28;
    box-shadow:
        0 0 0 3px rgba(242, 140, 40, 0.15);
}



/* =========   RESUMEN DE EVALUACIONES   ========================================== */

.resumen-evaluaciones {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}


.resumen-evaluaciones .tarjeta-resumen {
    background: #ffffff;
    border: 1px solid #e1e5eb;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.04);
}


.icono-resumen {
    font-size: 30px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.resumen-evaluaciones .tarjeta-resumen strong {
    font-size: 28px;
    line-height: 1;
    color: #17365d;
}


.resumen-evaluaciones .tarjeta-resumen span {
    color: #64748b;
    font-size: 14px;
}



/* ==========   LISTA DE EVALUACIONES   ========================================== */

.lista-evaluaciones {
    background: #ffffff;
    border: 1px solid #e1e5eb;
    border-radius: 16px;
    overflow: hidden;
}


.lista-evaluaciones h2 {
    margin: 0;
    padding: 22px 26px;
    border-bottom: 1px solid #e1e5eb;
    color: #17365d;
    font-size: 22px;
}



/* ==============  TARJETA DE EVALUACIÓN   ========================================== */

.tarjeta-evaluacion {
    padding: 22px 26px;
    border-bottom: 1px solid #edf0f4;
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        100px
        180px
        minmax(200px, 1fr)
        auto;

    align-items: center;
    gap: 20px;
    transition:
        background-color 0.2s ease;
}


.tarjeta-evaluacion:last-child {
    border-bottom: none;
}


.tarjeta-evaluacion:hover {
    background: #fafbfc;
}


.tarjeta-evaluacion h3 {
    margin: 0 0 5px;
    color: #17365d;
    font-size: 17px;
}


.tarjeta-evaluacion p {
    margin: 4px 0;
    color: #64748b;
    font-size: 14px;
}


.tarjeta-evaluacion > div:nth-child(2) {
    text-align: center;
    color: #64748b;
    font-size: 14px;
}


.tarjeta-evaluacion > div:nth-child(2) strong {
    color: #17365d;
    font-size: 28px;
}


.tarjeta-evaluacion > div:nth-child(3) {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.tarjeta-evaluacion > div:nth-child(3) span:first-child {
    display: inline-block;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 20px;
    background: #fff1df;
    color: #b85d0b;
    font-size: 13px;
    font-weight: 600;
}


.tarjeta-evaluacion > div:nth-child(3) span:last-child {
    color: #64748b;
    font-size: 13px;
}



/* ===============  OBSERVACIONES  ========================================== */

.tarjeta-evaluacion > p {
    margin: 0;
    padding: 9px 12px;
    background: #f7f8fa;
    border-radius: 8px;
    color: #475569;
    line-height: 1.4;
}



/* ====================  BOTÓN ELIMINAR  ========================================== */

.boton-eliminar-evaluacion {
    border: 1px solid #e1e5eb;
    background: #ffffff;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    transition:
        all 0.2s ease;
}


.boton-eliminar-evaluacion:hover {
    background: #fff1f1;
    border-color: #e5a5a5;
    color: #b42318;
}



/* ==================   SIN EVALUACIONES   ========================================== */

.sin-evaluaciones {
    padding: 45px 25px;
    text-align: center;
    color: #64748b;
    font-style: italic;
}



/* =================   MODAL NUEVA EVALUACIÓN   ========================================== */

#modal-evaluacion {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        rgba(15, 30, 50, 0.58);
}


#modal-evaluacion .modal-evaluacion {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);
}


#modal-evaluacion h2 {
    margin: 0 0 28px;
    color: #17365d;
    font-size: 24px;
}


#modal-evaluacion .modal-cerrar {
    position: absolute;
    top: 18px;
    right: 20px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}


#modal-evaluacion .modal-cerrar:hover {
    color: #17365d;
}



/* ==========================   CAMPOS DEL FORMULARIO   ========================================== */

.campo-evaluacion {
    margin-bottom: 20px;
}


.campo-evaluacion label {
    display: block;
    margin-bottom: 7px;
    color: #17365d;
    font-size: 15px;
    font-weight: 600;
}


.campo-evaluacion input,
.campo-evaluacion select,
.campo-evaluacion textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #d9dee7;
    border-radius: 9px;
    background: #ffffff;
    color: #243447;
    font-family: inherit;
    font-size: 15px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.campo-evaluacion textarea {
    min-height: 100px;
    resize: vertical;
}


.campo-evaluacion input:focus,
.campo-evaluacion select:focus,
.campo-evaluacion textarea:focus {
    outline: none;
    border-color: #f28c28;
    box-shadow:
        0 0 0 3px rgba(242, 140, 40, 0.15);
}



/* ===========================   ACCIONES DEL FORMULARIO   ========================================== */

.acciones-evaluacion {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}


/* =========================================================
   APOYOS
   ========================================================= */

/* ---------- FILTROS ---------- */

.filtros-apoyos {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filtros-apoyos select {
    padding: 10px 14px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-blanco);
    color: var(--color-principal);
    font-size: 15px;
    cursor: pointer;
}

.filtros-apoyos select:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow:
        0 0 0 3px rgba(242, 140, 40, 0.15);
}


/* ---------- RESUMEN ---------- */

.resumen-apoyos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}


/* ---------- LISTA ---------- */

.lista-apoyos {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    overflow: hidden;
}

.lista-apoyos h2 {
    margin: 0;
    padding: 22px 26px;
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-principal);
    font-size: 22px;
}


/* ---------- TARJETA DE APOYO ---------- */

.tarjeta-apoyo {
    padding: 22px 26px;
    border-bottom: 1px solid #edf0f4;
    transition: background-color 0.2s ease;
}

.tarjeta-apoyo:last-child {
    border-bottom: none;
}

.tarjeta-apoyo:hover {
    background-color: #fafbfc;
}


/* ---------- ALUMNO ---------- */

.tarjeta-apoyo h3 {
    margin: 0 0 8px 0;
    color: var(--color-principal);
    font-size: 18px;
}


/* ---------- TIPO DE APOYO ---------- */

.tarjeta-apoyo .tipo-apoyo {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: #fff1df;
    color: #b85d0b;
    font-size: 13px;
    font-weight: 600;
}


/* ---------- INFORMACIÓN ---------- */

.tarjeta-apoyo p {
    margin: 5px 0;
    color: var(--color-texto);
    font-size: 14px;
    line-height: 1.45;
}

.tarjeta-apoyo p strong {
    color: var(--color-principal);
}


/* ---------- BOTÓN ELIMINAR ---------- */

.boton-eliminar-apoyo {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background-color: var(--color-blanco);
    color: var(--color-texto-suave);
    font-size: 13px;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.boton-eliminar-apoyo:hover {
    background-color: #fff1f1;
    border-color: #e5a5a5;
    color: #b42318;
}


/* ---------- SIN APOYOS ---------- */

.sin-apoyos {
    padding: 45px 25px;
    text-align: center;
    color: var(--color-texto-suave);
    font-style: italic;
}


/* =========================================================
   MODAL NUEVO APOYO
   ========================================================= */

#modal-apoyo {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(15, 30, 50, 0.58);
}


/* ---------- VENTANA ---------- */

#modal-apoyo .modal-apoyo {
    position: relative;

    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--color-blanco);
    border-radius: 18px;
    padding: 32px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);
}


/* ---------- TÍTULO ---------- */

#modal-apoyo h2 {
    margin: 0 0 28px;
    color: var(--color-principal);
    font-size: 24px;
}


/* ---------- CERRAR ---------- */

#modal-apoyo .modal-cerrar {
    position: absolute;
    top: 18px;
    right: 20px;
    border: none;
    background: transparent;
    color: var(--color-texto-suave);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

#modal-apoyo .modal-cerrar:hover {
    color: var(--color-principal);
}


/* ---------- CAMPOS ---------- */

.campo-apoyo {
    margin-bottom: 20px;
}

.campo-apoyo label {
    display: block;
    margin-bottom: 7px;
    color: var(--color-principal);
    font-size: 15px;
    font-weight: 600;
}

.campo-apoyo input,
.campo-apoyo select,
.campo-apoyo textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--color-borde);
    border-radius: 9px;
    background-color: var(--color-blanco);
    color: var(--color-texto);
    font-family: inherit;
    font-size: 15px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.campo-apoyo textarea {
    min-height: 100px;
    resize: vertical;
}

.campo-apoyo input:focus,
.campo-apoyo select:focus,
.campo-apoyo textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow:
        0 0 0 3px rgba(242, 140, 40, 0.15);
}


/* ---------- ACCIONES ---------- */

.acciones-apoyo {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}


/* ==========================================
   TUTORÍAS
   ========================================== */

.filtros-tutorias {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.filtros-tutorias select {
    padding: 10px 14px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: white;
    color: #17375e;
    font-size: 14px;
    min-width: 170px;
}


/* =========   RESUMEN TUTORÍAS ================== */

.resumen-tutorias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}


/* ========   LISTA  TUTORÍAS============= */

.lista-tutorias {
    background: white;
    border: 1px solid #dce2ea;
    border-radius: 14px;
    overflow: hidden;
}

.lista-tutorias h2 {
    margin: 0;
    padding: 22px 26px;
    color: #17375e;
    font-size: 22px;
    border-bottom: 1px solid #dce2ea;
}


/* ===========   TARJETA DE TUTORÍA =================== */

.tarjeta-tutoria {
    padding: 24px 26px;
    border-bottom: 1px solid #e1e5eb;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 12px 24px;
    align-items: start;
}

.tarjeta-tutoria:last-child {
    border-bottom: none;
}

.tarjeta-tutoria h3 {
    margin: 0;
    color: #17375e;
    font-size: 17px;
    grid-column: 1;
}

.tarjeta-tutoria p {
    margin: 0;
    color: #52657d;
    font-size: 14px;
    line-height: 1.5;
}

.tarjeta-tutoria p:nth-of-type(1) {
    grid-column: 2;
}

.tarjeta-tutoria p:nth-of-type(2) {
    grid-column: 3;
}

.tarjeta-tutoria p:nth-of-type(3) {
    grid-column: 4;
}

.tarjeta-tutoria p:nth-of-type(4) {
    grid-column: 1 / -1;
    background: #f5f7fa;
    padding: 10px 14px;
    border-radius: 8px;
}

.tarjeta-tutoria p:nth-of-type(5) {
    grid-column: 1 / -1;
    background: #f5f7fa;
    padding: 10px 14px;
    border-radius: 8px;
}


/* =========   SIN TUTORÍAS ============================= */

.sin-tutorias {
    padding: 30px 26px;
    color: #6b7788;
    font-style: italic;
}


/* ==========================================
   RECURSOS
   ========================================== */

.filtros-recursos {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 20px 0 24px;
    flex-wrap: wrap;
}

.filtros-recursos input,
.filtros-recursos select {
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d5dce5;
    border-radius: 9px;
    background: white;
    color: #17375e;
    font-size: 14px;
}

.filtros-recursos input {
    width: 280px;
}

.filtros-recursos select {
    min-width: 180px;
}

.filtros-recursos input:focus,
.filtros-recursos select:focus {
    outline: none;
    border-color: #f28c28;
    box-shadow: 0 0 0 2px rgba(242, 140, 40, 0.12);
}


/* =========   RESUMEN RECURSOS  ================ */

.resumen-recursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.resumen-recursos .tarjeta-resumen {
    min-height: 92px;
}


/* ========   LISTA RECURSOS ============== */

.lista-recursos {
    background: white;
    border: 1px solid #dce2e8;
    border-radius: 16px;
    overflow: hidden;
}

.lista-recursos h2 {
    margin: 0;
    padding: 22px 26px;
    border-bottom: 1px solid #dce2e8;
    color: #17375e;
    font-size: 22px;
}


/* ======   TARJETA DE RECURSOS =================== */

.tarjeta-recurso {
    padding: 22px 26px;
    border-bottom: 1px solid #e3e7eb;
    transition: background 0.2s ease;
}

.tarjeta-recurso:last-child {
    border-bottom: none;
}

.tarjeta-recurso:hover {
    background: #fafbfd;
}


/* CABECERA */

.recurso-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.recurso-cabecera h3 {
    margin: 0 0 7px;
    color: #17375e;
    font-size: 18px;
}

.recurso-asignatura {
    color: #5c6f82;
    font-size: 14px;
}


/* FAVORITO */

.boton-favorito {
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

.boton-favorito:hover {
    transform: scale(1.1);
}


/* DATOS */

.recurso-datos {
    display: flex;
    gap: 22px;
    margin-top: 14px;
    color: #536579;
    font-size: 14px;
}

.recurso-datos span {
    background: #f4f6f8;
    padding: 6px 10px;
    border-radius: 7px;
}


/* DESCRIPCIÓN */

.recurso-descripcion {
    margin: 15px 0;
    color: #536579;
    line-height: 1.5;
}


/* ACCIONES */

.recurso-acciones {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.recurso-acciones .boton-principal,
.recurso-acciones .boton-secundario {
    min-height: 38px;
}


/* SIN RECURSOS */

.sin-recursos {
    padding: 35px 26px;
    color: #6c7b8c;
    font-style: italic;
}


/* =========  FORMULARIO DE RECURSOS  ============== */

#ventana-recurso .ventana-contenido {
    max-width: 620px;
}

#ventana-recurso .campo-sesion input,
#ventana-recurso .campo-sesion select,
#ventana-recurso .campo-sesion textarea {
    width: 100%;
    box-sizing: border-box;
}

#ventana-recurso .campo-sesion textarea {
    min-height: 100px;
    resize: vertical;
}

.checkbox-recurso {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-recurso input {
    width: auto !important;
    cursor: pointer;
}


/* ==========================================
   AJUSTES
   ========================================== */

.bloque-ajustes {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.bloque-ajustes h2 {
    margin: 0 0 22px 0;
    color: #173b67;
    font-size: 22px;
}


/* ========   FORMULARIO DE AJUSTES   =============== */

.formulario-ajustes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.campo-ajuste {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.campo-completo {
    grid-column: 1 / -1;
}

.campo-ajuste label {
    font-weight: 600;
    color: #173b67;
    font-size: 14px;
}

.campo-ajuste input,
.campo-ajuste select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #d3dce7;
    border-radius: 8px;
    background: #ffffff;
    color: #173b67;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-ajuste input:focus,
.campo-ajuste select:focus {
    outline: none;
    border-color: #f28c28;
    box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.12);
}


/* ==========   OPCIONES AJUSTES ============== */

.opcion-ajuste {
    margin-top: 2px;
}

.opcion-ajuste label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #173b67;
    font-weight: 500;
    cursor: pointer;
}

.opcion-ajuste input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #f28c28;
}


/* ===========   BOTONES AJUSTES   =============== */

.acciones-ajustes {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 30px;
}

.acciones-ajustes button {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}


/* ==========================================
   ORGANIZACIÓN
   ========================================== */

.organizacion-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}


.tarjeta-organizacion {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: white;
    border: 1px solid #dfe4ea;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.tarjeta-organizacion:hover {
    transform: translateY(-3px);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: #f28c28;
}


.icono-organizacion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    font-size: 32px;
    background: #fff4e6;
    border-radius: 12px;
}


.tarjeta-organizacion h2 {
    margin: 0 0 7px 0;
    font-size: 20px;
    color: #173b68;
}


.tarjeta-organizacion p {
    margin: 0 0 12px 0;
    color: #64748b;
    line-height: 1.4;
}


.enlace-organizacion {
    color: #f28c28;
    font-weight: 600;
    font-size: 14px;
}


/* ==========================================
   BOTÓN CERRAR SESIÓN
   ========================================== */

.boton-cerrar-sesion {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.boton-cerrar-sesion:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.45);
}

/* ==========================================
   FICHA DE ALUMNO · DATOS PERSONALES
   ========================================== */

.cabecera-seccion-ficha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.cabecera-seccion-ficha h3 {
    margin: 0;
}


/* ------------------------------------------
   BOTÓN EDITAR DE LAS SECCIONES
   ------------------------------------------ */

.boton-editar-ficha {
    border: 1px solid #d9e0e8;
    background: #ffffff;
    color: #16385f;
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;
}

.boton-editar-ficha:hover {
    background: #f3f6f9;
    border-color: #bfcbd8;
}

.boton-editar-ficha:active {
    transform: translateY(1px);
}


/* ------------------------------------------
   FORMULARIO DE DATOS PERSONALES
   ------------------------------------------ */

.formulario-datos-alumno {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.formulario-datos-alumno .campo-formulario {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.formulario-datos-alumno label {
    font-size: 13px;
    font-weight: 600;
    color: #687586;
}


.formulario-datos-alumno input,
.formulario-datos-alumno select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d7dee7;
    border-radius: 8px;
    background: #ffffff;
    color: #243b5a;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.formulario-datos-alumno input:focus,
.formulario-datos-alumno select:focus {
    border-color: #f7931e;

    box-shadow:
        0 0 0 3px rgba(247, 147, 30, 0.12);
}


/* ------------------------------------------
   BOTONES GUARDAR / CANCELAR
   ------------------------------------------ */

.formulario-datos-alumno .acciones-editor-ficha {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* ==========================================
   TABLA DE CALIFICACIONES
   ========================================== */

.tabla-calificaciones {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #ffffff;
}

.fila-calificaciones {
    display: grid;
    grid-template-columns:
        50px
        minmax(260px, 2fr)
        repeat(auto-fit, minmax(75px, 1fr))
        90px;
    min-width: max-content;
}

.fila-cabecera-calificaciones {
    background: #edf3f8;
    color: #17365d;
    font-weight: 600;
}

.fila-calificaciones > div {
    min-height: 62px;
    padding: 8px;
    border-right: 1px solid #dfe5ec;
    border-bottom: 1px solid #e7ebf0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.fila-calificaciones
> div:last-child {
    border-right: none;
}


/* ---------- ALUMNO ---------- */

.columna-alumno {
    justify-content: flex-start !important;
    text-align: left;
    padding-left: 14px !important;
}

.columna-alumno strong {
    color: #17365d;
    font-size: 14px;
}


/* ---------- TEMA ---------- */

.columna-tema {
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.columna-tema strong {
    font-size: 15px;
}

.columna-tema small {
    color: #64748b;
    font-size: 11px;
    font-weight: 400;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------- NOTA ---------- */

.columna-nota {
    background: #ffffff;
}

.input-nota {
    width: 54px;
    height: 38px;
    padding: 5px;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: #ffffff;
    color: #17365d;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.input-nota:hover {
    border-color: #aebccc;
}

.input-nota:focus {
    border-color: #f28c28;

    box-shadow:
        0 0 0 3px
        rgba(242, 140, 40, 0.15);
}

.input-nota:disabled {
    opacity: 0.6;
}

.input-nota.nota-guardada {
    background-color: #dcfce7;
    border-color: #86efac;
}


/* ---------- MEDIA ---------- */

.columna-media {
    background: #f5f7fa;
    color: #17365d;
    font-weight: 700;
}


/* =========================================================
   IMPRESIÓN · EVALUACIONES
   ========================================================= */

@media print {


    /* ==========================================
       CABECERA EN IMPRESIÓN
       ========================================== */

    .pagina-evaluaciones .cabecera {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 20px !important;
        width: calc(100% - 16mm) !important;
        margin-left: 8mm !important;
        margin-right: 8mm !important;
    }


    .pagina-evaluaciones .cabecera > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }


    .pagina-evaluaciones .cabecera-derecha {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
        flex: 0 0 auto !important;
    }


    .escudo-organizacion,
    .escudo-colegio {
        display: block !important;
        width: 80px !important;
        height: 80px !important;
        object-fit: contain !important;
        flex: 0 0 80px !important;
    }


    .pagina-evaluaciones .boton-imprimir {
        display: none !important;
    }    

    /* -----------------------------------------
       CONFIGURACIÓN DE PÁGINA
       ----------------------------------------- */

    @page {
        size: A4 portrait;
        margin: 12mm;
    }


    /* -----------------------------------------
       PÁGINA
       ----------------------------------------- */

    html,
    body {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    body {
        display: block !important;
        color: #000000 !important;
    }


    /* -----------------------------------------
       OCULTAR INTERFAZ
       ----------------------------------------- */

    .menu-lateral,
    .controles-evaluaciones,
    .resumen-evaluaciones,
    .boton-imprimir-evaluacion {
        display: none !important;
    }


    /* -----------------------------------------
       CONTENIDO PRINCIPAL
       ----------------------------------------- */

    .pagina-evaluaciones .contenido {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
    }





    /* -----------------------------------------
       DOCUMENTO
       ----------------------------------------- */

    .documento-evaluaciones {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }


    /* -----------------------------------------
       CABECERA DE LA EVALUACIÓN
       ----------------------------------------- */

    .cabecera-tabla-evaluacion {
        display: block !important;
        margin-left: 8mm !important;
        margin-right: 8mm !important;
        padding: 0 0 5mm 0 !important;
        border-bottom: none !important;
    }

    .cabecera-tabla-evaluacion h2 {
        margin: 0 0 2px 0 !important;
        font-size: 21px !important;
        color: #17365d !important;
    }

    .cabecera-tabla-evaluacion p {
        margin: 0 !important;
        font-size: 18px !important;
        color: #555555 !important;
    }


    /* -----------------------------------------
       TABLA
       ----------------------------------------- */

    .tabla-evaluacion-contenedor {
        width: calc(100% - 16mm) !important;
        margin-left: 8mm !important;
        margin-right: 8mm !important;
        overflow: visible !important;
    }

    .tabla-calificaciones {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }


    /* -----------------------------------------
       FILAS
       ----------------------------------------- */

    .fila-calificaciones {
        width: 100% !important;
        min-width: 0 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .fila-calificaciones > div {
        min-height: 29px !important;
        padding: 4px 5px !important;
        border-color: #d8dee6 !important;
        background: #ffffff !important;
    }


    /* -----------------------------------------
       CABECERA DE TABLA
       ----------------------------------------- */

    .fila-cabecera-calificaciones > div {
        min-height: 30px !important;
        padding: 3px 4px !important;
        background: #edf3f8 !important;
        color: #17365d !important;
        font-weight: 700 !important;
    }


    /* -----------------------------------------
       NÚMEROS DE LISTA
       ----------------------------------------- */

    .columna-numero {
    font-size: 8pt !important;
    font-weight: 600 !important;
}

    /* -----------------------------------------
       ALUMNOS
       ----------------------------------------- */

    .columna-alumno {
        min-width: 0 !important;
    }

    .columna-alumno strong {
        font-size: 10.5px !important;
        color: #17365d !important;
    }


    /* -----------------------------------------
       TEMAS / UNIDADES
       ----------------------------------------- */

    .columna-tema strong {
        font-size: 10px !important;
    }

    .columna-tema small {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        font-size: 7px !important;
        color: #555555 !important;
    }


    /* -----------------------------------------
       NOTAS
       ----------------------------------------- */

    .input-nota,
    .input-nota-trimestral,
    .input-nota-final {
        width: 100% !important;
        max-width: 38px !important;
        height: auto !important;
        padding: 1px !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #000000 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }


    /* -----------------------------------------
       MEDIA
       ----------------------------------------- */

    .columna-media {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #17365d !important;
        background: #f5f8fb !important;
    }


    /* -----------------------------------------
       NOTA TRIMESTRAL
       ----------------------------------------- */

    .columna-nota-trimestral {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #17365d !important;
    }


    /* -----------------------------------------
       CALIFICACIONES FINALES
       ----------------------------------------- */

    .tabla-calificaciones-finales {
        width: 100% !important;
    }

    .columna-asignatura-final strong {
        font-size: 8px !important;
    }

    .columna-asignatura-final small {
        font-size: 7px !important;
        color: #555555 !important;
    }


    /* -----------------------------------------
       EVITAR CORTES DE FILAS
       ----------------------------------------- */

    .fila-calificaciones {
        break-inside: avoid;
        page-break-inside: avoid;
    }


    /* -----------------------------------------
       CONSERVAR FONDOS Y BORDES
       ----------------------------------------- */

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

        /* -----------------------------------------
       DISTRIBUCIÓN DE COLUMNAS EN IMPRESIÓN
       ----------------------------------------- */

.fila-calificaciones {
    display: grid !important;
    grid-template-columns:
        6%
        40%
        repeat(4, 13.5%) !important;
    width: 100% !important;
    min-width: 0 !important;
}

    .fila-calificaciones > div {
        min-width: 0 !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    /* Columnas de notas más estrechas */
    .columna-tema {
        min-width: 0 !important;
        width: auto !important;
    }

    .input-nota {
        width: 26px !important;
        max-width: 26px !important;
        padding: 1px !important;
        font-size: 9px !important;
    }

    /* Media */
    .columna-media {
        min-width: 0 !important;
        width: auto !important;
    }

    /* Nota trimestral */
    .columna-nota-trimestral {
        min-width: 0 !important;
        width: auto !important;
    }

}












/* ==========================================
   ESTADOS DE LAS SESIONES
   ========================================== */

.estado-sesion {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 8px;

    padding: 6px 10px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 500;

    width: fit-content;

}


.estado-sesion-icono {

    font-size: 13px;

}


/* ------------------------------------------
   SIN PLANIFICAR
   ------------------------------------------ */

.estado-sin-planificar {

    background: #fff4e8;

    color: #b45309;

}


/* ------------------------------------------
   PLANIFICADA
   ------------------------------------------ */

.estado-planificada {

    background: #eff6ff;

    color: #1d4ed8;

}


/* ------------------------------------------
   DIARIO REALIZADO
   ------------------------------------------ */

.estado-diario {

    background: #f3e8ff;

    color: #7e22ce;

}


/* ------------------------------------------
   SESIÓN COMPLETA
   ------------------------------------------ */

.estado-completa {

    background: #ecfdf5;

    color: #15803d;

}


/* ==========================================
   INDICADORES DE LA SESIÓN
   ========================================== */

.indicadores-sesion {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 8px;

}


/* ------------------------------------------
   ESTADO
   ------------------------------------------ */

.estado-sesion {

    margin-top: 0;

}


/* ------------------------------------------
   TAREA PARA CASA
   ------------------------------------------ */

.indicador-tarea {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 6px 10px;

    border-radius: 7px;

    background: #fff7ed;

    color: #b45309;

    border: 1px solid #fed7aa;

    font-size: 13px;

    font-weight: 500;

}


/* ==========================================
   SESIÓN ANULADA
   ========================================== */

.estado-cancelada,
.estado.cancelada {
    background: #f3dede;
    color: #9b2c2c;
}


.sesion-cancelada {
    opacity: 0.75;
}


.sesion-cancelada-mensaje {
    margin-top: 20px;
    padding: 18px;
    border-radius: 10px;
    background: #f8eeee;
    border: 1px solid #e3bcbc;
    color: #7f2b2b;
}


.sesion-cancelada-mensaje p {
    margin: 8px 0 0;
}


.boton-anular-sesion {
    background: #f8eeee;
    color: #9b2c2c;
    border: 1px solid #d9aaaa;
}


.boton-anular-sesion:hover {
    background: #f1dada;
}


.boton-recuperar-sesion {
    background: #eef8ee;
    color: #28732d;
    border: 1px solid #afd0b1;
}


.boton-recuperar-sesion:hover {
    background: #dff0df;
}



/* ==========================================
   MENÚ LATERAL · AJUSTE DE ALTURA
   ========================================== */

.menu-lateral {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}


/* Opciones del menú más compactas */

.menu-lateral .menu-item {
    padding-top: 8px;
    padding-bottom: 8px;
}


/* Separación entre las opciones */

.menu-lateral nav {
    gap: 2px;
}


/* ==========================================
   TAMAÑO DEL ESCUDO DEL COLEGIO
   ========================================== */

.escudo-organizacion,
.escudo-colegio {
    width: 110px !important;
    height: 110px !important;
    object-fit: contain !important;
    flex: 0 0 110px !important;
}



/* ==========================================
   EDITOR DE SESIÓN
   ========================================== */

#ventana-sesion .ventana-contenido {
    background: #e3eaf2;
}


/* ------------------------------------------
   CAMPOS DE ESCRITURA
   ------------------------------------------ */

#ventana-sesion .campo-sesion textarea {
    background: #ffffff;
    border: 1px solid #c7d2df;
    border-radius: 10px;
}


/* ------------------------------------------
   TÍTULOS DE LOS CAMPOS
   ------------------------------------------ */

#ventana-sesion .campo-sesion label {
    color: #173f6b;
}


/* ------------------------------------------
   BOTONES
   ------------------------------------------ */

#ventana-sesion .acciones-ventana {
    margin-top: 18px;
}

/* ==========================================
   DIARIO — FONDO DE SESIONES
   ========================================== */

.diario-sesiones {
    background: #e3eaf2;
}

.diario-sesiones textarea {
    background: #ffffff;
    border: 1px solid #c7d2df;
    border-radius: 10px;
}

.diario-sesiones .campo-sesion-diario {
    overflow-y: hidden;
    resize: none;
    box-sizing: border-box;
}


/* ====================================================================================================================
   RESPONSIVE
   ===================================================================================================================== */

/* =========================================================
   MENÚ HAMBURGUESA
   Oculto en escritorio
   ========================================================= */

.boton-hamburguesa,
.boton-cerrar-menu {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */


@media (max-width: 900px) {

    .menu-lateral {
        width: 210px;
    }

    .contenido {
        margin-left: 210px;
        width: calc(100% - 210px);
        padding: 25px;
    }

    .resumen {
        grid-template-columns: repeat(2, 1fr);
    }

}



/* =========================================================
   MÓVIL · MENÚ HAMBURGUESA
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       CUERPO
       ----------------------------------------- */

    body {
        display: block;
        overflow-x: hidden;
    }


    /* -----------------------------------------
       BOTÓN HAMBURGUESA
       ----------------------------------------- */

    .boton-hamburguesa {
        display: flex;

        position: fixed;
        top: 10px;
        left: 10px;

        width: 44px;
        height: 44px;

        align-items: center;
        justify-content: center;

        border: none;
        border-radius: 9px;

        background-color: var(--color-principal);
        color: var(--color-blanco);

        font-size: 27px;
        line-height: 1;

        cursor: pointer;

        z-index: 10001;

        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.18);
    }


    .boton-hamburguesa:active {
        transform: scale(0.96);
    }


    /* -----------------------------------------
   FONDO OSCURO AL ABRIR EL MENÚ
   ----------------------------------------- */

    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition:
            opacity 0.25s ease;
    }

    .menu-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* -----------------------------------------
    OCULTAR HAMBURGUESA CUANDO EL MENÚ
    ESTÁ ABIERTO
    ----------------------------------------- */

    .boton-hamburguesa.menu-oculto {
        display: none !important;
    }


    /* -----------------------------------------
       MENÚ LATERAL
       ----------------------------------------- */

    .menu-lateral {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        width: min(82vw, 310px);

        min-height: 0;
        height: 100vh;
        max-height: none;

        padding: 20px 15px;

        overflow-y: auto;

        /*
         * El menú comienza oculto
         */
        transform: translateX(-105%);

        transition:
            transform 0.25s ease;

        z-index: 10000;

        box-shadow:
            6px 0 25px rgba(0, 0, 0, 0.20);
    }


    /* -----------------------------------------
       MENÚ ABIERTO
       ----------------------------------------- */

    .menu-lateral.menu-abierto {
        transform: translateX(0);
    }


    /* -----------------------------------------
       BOTÓN CERRAR
       ----------------------------------------- */

    .boton-cerrar-menu {
        display: flex;

        position: absolute;
        top: 12px;
        right: 12px;

        width: 38px;
        height: 38px;

        align-items: center;
        justify-content: center;

        border: none;
        border-radius: 8px;

        background-color: rgba(255, 255, 255, 0.10);
        color: var(--color-blanco);

        font-size: 28px;
        line-height: 1;

        cursor: pointer;
    }


    .boton-cerrar-menu:hover {
        background-color: rgba(255, 255, 255, 0.18);
    }


    /* -----------------------------------------
       LOGO DEL MENÚ
       ----------------------------------------- */

    .menu-lateral .logo {
        padding-top: 5px;
        padding-right: 50px;
        padding-bottom: 25px;
    }


    /* -----------------------------------------
       NAVEGACIÓN
       ----------------------------------------- */

    .menu-lateral nav {
        display: flex;
        flex-direction: column;
        gap: 4px;

        overflow: visible;
    }


    .menu-lateral .menu-item {
        width: 100%;
        flex-shrink: 0;
    }


    /* -----------------------------------------
       PARTE INFERIOR
       ----------------------------------------- */

    .menu-lateral .menu-inferior {
        display: block;
        margin-top: auto;
    }


    /* -----------------------------------------
       CONTENIDO PRINCIPAL
       ----------------------------------------- */

    .contenido {
        margin-left: 0;
        width: 100%;

        /*
         * Dejamos espacio para la cabecera
         * móvil con el botón hamburguesa.
         */
        padding: 75px 15px 25px;
    }


    /* -----------------------------------------
       CABECERA
       ----------------------------------------- */

    .cabecera {
        align-items: flex-start;
        gap: 15px;
    }


    /* -----------------------------------------
       RESUMEN
       ----------------------------------------- */

    .resumen {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       SESIONES
       ----------------------------------------- */

    .sesion {
        align-items: flex-start;
        flex-wrap: wrap;
    }

}


/* =========================================================
   RESPONSIVE · SESIONES DE HOY
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       CADA SESIÓN
       ----------------------------------------- */

    .sesion {
        position: relative;

        display: flex;
        align-items: flex-start;

        gap: 15px;

        padding: 20px 15px;
    }


    /* -----------------------------------------
       HORA
       ----------------------------------------- */

    .sesion .hora {
        width: 70px;
        flex: 0 0 70px;

        font-size: 14px;
    }


    .sesion .hora span {
        font-size: 12px;
    }


    /* -----------------------------------------
       INFORMACIÓN
       ----------------------------------------- */

    .sesion .sesion-info {
        min-width: 0;
        flex: 1;
    }


    .sesion .sesion-info h3 {
        font-size: 16px;

        /*
         * Dejamos espacio únicamente en el título
         * para que no choque con el estado.
         */
        padding-right: 95px;
    }


    .sesion .sesion-info p {
        font-size: 14px;
        line-height: 1.4;
    }


    /* -----------------------------------------
       DETALLE
       ----------------------------------------- */

    .sesion .detalle-sesion {
        width: 100%;
        margin-top: 10px;
    }


    .sesion .detalle-linea {
        display: flex;
        align-items: flex-start;

        gap: 7px;

        font-size: 12px;
        line-height: 1.45;
    }


    .sesion .detalle-linea strong {
        min-width: 70px;
        flex: 0 0 70px;
    }


    .sesion .detalle-linea span {
        min-width: 0;
        flex: 1;
    }


    /* -----------------------------------------
       ESTADO
       ----------------------------------------- */

    .sesion > .estado {
        position: absolute;

        top: 20px;
        right: 15px;

        margin: 0;

        font-size: 12px;
    }

}

/* =========================================================
   HOY · RESUMEN MUY COMPACTO EN MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    .resumen {
        display: flex;
        flex-direction: column;

        gap: 6px;

        margin-bottom: 24px;
    }


    .tarjeta-resumen {
        min-height: 0;

        height: 42px;

        padding: 5px 14px;

        border-radius: 9px;

        gap: 12px;
    }


    .tarjeta-resumen .icono {
        width: 30px;

        font-size: 22px;

        line-height: 1;

        text-align: center;

        flex-shrink: 0;
    }


    .tarjeta-resumen div {
        display: flex;
        flex-direction: row;

        align-items: center;

        gap: 9px;
    }


    .tarjeta-resumen strong {
        font-size: 18px;

        line-height: 1;
    }


    .tarjeta-resumen span:last-child {
        font-size: 12px;

        line-height: 1;
    }

}






/* =========================================================
   ALUMNOS · CABECERA RESPONSIVE
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       CABECERA
       ----------------------------------------- */

    .cabecera:has(.acciones-alumnos) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }


    /* -----------------------------------------
       TÍTULO
       ----------------------------------------- */

    .cabecera:has(.acciones-alumnos) h1 {
        width: 100%;
    }


    /* -----------------------------------------
       ACCIONES
       ----------------------------------------- */

    .cabecera:has(.acciones-alumnos) .cabecera-acciones {
        width: 100%;
    }


    .cabecera:has(.acciones-alumnos) .acciones-alumnos {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;

        width: 100%;
    }


    /* -----------------------------------------
       AÑADIR ALUMNO
       ----------------------------------------- */

    .cabecera:has(.acciones-alumnos)
    .acciones-alumnos .boton-principal {
        width: 100%;

        min-height: 44px;

        padding: 10px 15px;

        font-size: 15px;
    }


    /* -----------------------------------------
       LISTADO DE ALUMNOS
       ----------------------------------------- */

    .cabecera:has(.acciones-alumnos)
    .enlace-listado-alumnos {
        display: block;

        width: fit-content;

        font-size: 13px;

        line-height: 1.3;
    }

}

/* =========================================================
   ALUMNOS · FICHA DEL ALUMNO EN MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       MODAL DE LA FICHA
       ----------------------------------------- */

    #modal-alumno .modal-alumno {

        width: calc(100% - 20px);

        max-width: none;

        max-height: calc(100vh - 20px);

        margin: 10px auto;

        padding: 22px 18px;

        border-radius: 16px;

        overflow-y: auto;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       CABECERA
       ----------------------------------------- */

    #modal-alumno .cabecera-ficha-alumno {

        gap: 12px;

        align-items: center;

        padding-right: 30px;
    }


    #modal-alumno .icono-ficha-alumno {

        width: 52px;
        height: 52px;

        flex-shrink: 0;

        font-size: 30px;
    }


    #modal-alumno .cabecera-ficha-alumno h2 {

        margin: 0;

        font-size: 22px;

        line-height: 1.2;
    }


    #modal-alumno .cabecera-ficha-alumno p {

        margin-top: 3px;

        font-size: 13px;
    }


    /* -----------------------------------------
       ESTADO
       ----------------------------------------- */

    #modal-alumno .estado-ficha-alumno {

        margin-top: 10px;
    }


    /* -----------------------------------------
       SECCIONES
       ----------------------------------------- */

    #modal-alumno .seccion-ficha-alumno {

        padding: 18px 0;
    }


    #modal-alumno .cabecera-seccion-ficha {

        gap: 10px;

        align-items: center;
    }


    #modal-alumno .cabecera-seccion-ficha h3 {

        font-size: 17px;

        line-height: 1.25;
    }


    /* -----------------------------------------
       BOTONES DE SECCIÓN
       ----------------------------------------- */

    #modal-alumno .boton-editar-ficha,
    #modal-alumno .boton-anadir-seccion {

        flex-shrink: 0;

        min-height: 34px;

        padding: 6px 10px;

        font-size: 12px;

        border-radius: 6px;
    }


    /* -----------------------------------------
       DATOS DEL ALUMNO
       ----------------------------------------- */

    #modal-alumno .datos-ficha {

        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin-top: 12px;
    }


    #modal-alumno .datos-ficha > div:last-child {

        grid-column: 1 / -1;
    }


    #modal-alumno .datos-ficha strong {

        font-size: 10px;
    }


    #modal-alumno .datos-ficha span {

        font-size: 13px;
    }


    /* -----------------------------------------
       OBSERVACIONES
       ----------------------------------------- */

    #modal-alumno .contenido-editable-ficha {

        margin-top: 10px;

        font-size: 13px;

        line-height: 1.5;
    }


    /* -----------------------------------------
       APOYOS
       ----------------------------------------- */

    #modal-alumno .tarjeta-apoyo {

        margin-top: 10px;

        padding: 12px;

        font-size: 13px;
    }


    #modal-alumno .tarjeta-apoyo p {

        line-height: 1.4;
    }


    #modal-alumno .boton-eliminar-apoyo {

        width: auto;

        min-height: 34px;

        padding: 6px 10px;

        font-size: 12px;
    }


    /* -----------------------------------------
       TUTORÍAS
       ----------------------------------------- */

    #modal-alumno .tarjeta-tutoria {

        grid-template-columns: 1fr 1fr;

        gap: 10px;

        margin-top: 12px;

        padding: 12px;
    }


    #modal-alumno .tutoria-fecha,
    #modal-alumno .tutoria-persona {

        font-size: 13px;
    }


    #modal-alumno .tutoria-motivo,
    #modal-alumno .tutoria-resumen,
    #modal-alumno .tutoria-acuerdos {

        grid-column: 1 / -1;

        font-size: 13px;

        line-height: 1.45;
    }


    #modal-alumno .boton-eliminar-tutoria {

        grid-column: 1 / -1;

        width: 100%;

        min-height: 34px;

        font-size: 12px;
    }


    /* -----------------------------------------
       BOTÓN CERRAR
       ----------------------------------------- */

    #modal-alumno .acciones-ficha-alumno {

        padding-top: 12px;
    }


    #modal-alumno .acciones-ficha-alumno button {

        width: 100%;

        min-height: 40px;
    }

}

/* =========================================================
   ALUMNOS · BOTONES SECUNDARIOS DE LA FICHA
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       AÑADIR TUTORÍA
       ----------------------------------------- */

    #modal-alumno .boton-anadir-seccion {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: auto;

        min-height: 34px;

        padding: 6px 10px;

        border: 1px solid #d7dee8;

        border-radius: 6px;

        background: white;

        color: #0d3764;

        font-family: inherit;

        font-size: 12px;

        font-weight: 600;

        cursor: pointer;
    }


    #modal-alumno .boton-anadir-seccion:hover {

        background: #f5f7fa;
    }


    /* -----------------------------------------
       ELIMINAR APOYO / TUTORÍA
       ----------------------------------------- */

    #modal-alumno .boton-eliminar-apoyo,
    #modal-alumno .boton-eliminar-tutoria {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: auto;

        min-height: 32px;

        padding: 5px 10px;

        border: 1px solid #e3b0b0;

        border-radius: 6px;

        background: #fff5f5;

        color: #b42318;

        font-family: inherit;

        font-size: 12px;

        cursor: pointer;
    }


    #modal-alumno .boton-eliminar-apoyo:hover,
    #modal-alumno .boton-eliminar-tutoria:hover {

        background: #ffecec;
    }


    /* -----------------------------------------
       LA ELIMINACIÓN DE TUTORÍA NO NECESITA
       OCUPAR TODA LA FILA
       ----------------------------------------- */

    #modal-alumno .boton-eliminar-tutoria {

        grid-column: auto;

        justify-self: start;
    }

}


/* =========================================================
   RESPONSIVE EVALUACIONES
   ========================================================= */

@media (max-width: 1100px) {

    .tarjeta-evaluacion {
        grid-template-columns:
            1fr
            auto;
    }

}


@media (max-width: 700px) {

    .resumen-evaluaciones {
        grid-template-columns: 1fr;
    }


    .filtros-evaluaciones {
        flex-direction: column;
    }


    .filtros-evaluaciones select {
        width: 100%;
    }


    #modal-evaluacion .modal-evaluacion {
        padding: 24px;
    }


    .acciones-evaluacion {
        flex-direction: column-reverse;
    }


    .acciones-evaluacion button {
        width: 100%;
    }

}

/* =========================================================
   EVALUACIONES · RESUMEN COMPACTO EN MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .resumen-evaluaciones {
        display: flex;
        flex-direction: column;

        gap: 6px;

        margin-bottom: 22px;
    }


    .tarjeta-resumen-evaluacion {
        display: flex;
        align-items: center;

        width: 100%;
        height: 48px;
        min-height: 48px;

        box-sizing: border-box;

        padding: 5px 16px;

        gap: 12px;

        border-radius: 10px;
    }


    .tarjeta-resumen-evaluacion .icono {
        width: 32px;

        font-size: 24px;
        line-height: 1;

        text-align: center;

        flex-shrink: 0;
    }


    .tarjeta-resumen-evaluacion > div {
        display: flex;
        flex-direction: row;
        align-items: center;

        gap: 9px;

        min-width: 0;
    }


    .tarjeta-resumen-evaluacion strong {
        font-size: 19px;
        line-height: 1;
    }


    .tarjeta-resumen-evaluacion span {
        font-size: 12px;
        line-height: 1;
    }

}

/* =========================================================
   EVALUACIONES · TABLA RESPONSIVE
   Nº + ALUMNO FIJOS
   ========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       CONTENEDOR
       ----------------------------------------- */

    .tabla-calificaciones {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }


    /* -----------------------------------------
       NO MODIFICAMOS LA ESTRUCTURA DE COLUMNAS
       ----------------------------------------- */

    .fila-calificaciones {
        min-width: 850px;
    }


    /* -----------------------------------------
       Nº
       ----------------------------------------- */

    .fila-calificaciones .columna-numero {
        position: sticky;
        left: 0;

        z-index: 10;

        background: white;

        box-shadow: 2px 0 4px rgba(23, 54, 93, 0.06);
    }


    /* -----------------------------------------
       ALUMNO/A
       ----------------------------------------- */

    .fila-calificaciones .columna-alumno {
        position: sticky;
        left: 45px;
        width: 150px;
        min-width: 150px;
        z-index: 10;

        background: white;

        box-shadow: 3px 0 5px rgba(23, 54, 93, 0.10);
    }


    /* -----------------------------------------
       CABECERA
       ----------------------------------------- */

    .fila-cabecera-calificaciones
    .columna-numero {

        z-index: 20;

        background: #edf3f8;
    }


    .fila-cabecera-calificaciones
    .columna-alumno {

        z-index: 20;

        background: #edf3f8;
    }


    /* -----------------------------------------
       NOMBRES
       ----------------------------------------- */

    .fila-calificaciones
    .columna-alumno strong {

        font-size: 13px;
        line-height: 1.25;
    }

    /* -----------------------------------------
   REDUCIR COLUMNA REAL DEL ALUMNO
   ----------------------------------------- */

.fila-calificaciones {
    grid-template-columns:
        42px
        150px
        repeat(5, 75px)
        90px
        110px;
}

}





/* =========================================================
   RESPONSIVE APOYOS
   ========================================================= */


@media (max-width: 900px) {

    .resumen-apoyos {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .resumen-apoyos {
        grid-template-columns: 1fr;
    }

    .filtros-apoyos {
        flex-direction: column;
    }

    .filtros-apoyos select {
        width: 100%;
    }

    #modal-apoyo .modal-apoyo {
        padding: 24px;
    }

    .acciones-apoyo {
        flex-direction: column-reverse;
    }

    .acciones-apoyo button {
        width: 100%;
    }

}


/* =========================================================
   RESPONSIVE TUTORÍAS
   ========================================================= */

@media (max-width: 900px) {

    .resumen-tutorias {
        grid-template-columns: 1fr;
    }

    .tarjeta-tutoria {
        grid-template-columns: 1fr 1fr;
    }

    .tarjeta-tutoria h3 {
        grid-column: 1 / -1;
    }

    .tarjeta-tutoria p:nth-of-type(1),
    .tarjeta-tutoria p:nth-of-type(2),
    .tarjeta-tutoria p:nth-of-type(3),
    .tarjeta-tutoria p:nth-of-type(4),
    .tarjeta-tutoria p:nth-of-type(5) {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   RESPONSIVE RECURSOS
   ========================================================= */


@media (max-width: 900px) {

    .resumen-recursos {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .filtros-recursos {
        flex-direction: column;
        align-items: stretch;
    }

    .filtros-recursos input,
    .filtros-recursos select {
        width: 100%;
    }

    .recurso-datos {
        flex-direction: column;
        gap: 7px;
    }

    .recurso-acciones {
        flex-wrap: wrap;
    }

}


/* =========================================================
   RESPONSIVE AJUSTES
   ========================================================= */

@media (max-width: 700px) {

    .formulario-ajustes {
        grid-template-columns: 1fr;
    }

    .campo-completo {
        grid-column: auto;
    }

    .acciones-ajustes {
        justify-content: stretch;
        flex-direction: column;
    }

    .acciones-ajustes button {
        width: 100%;
    }

}