/*=====================================
  Variables y Estilos Generales
=====================================*/

:root {
    /* Paleta de colores */
    --color-principal: #0782C1;
    --color-fondo: #FFFFFF;
    --color-texto: #000000;
    --color-gris-claro: #E5E5E5;
    --color-gris-intermedio: #999999;
    --color-gris-oscuro: #666;
    --color-gris-muy-claro: #F0F0F0;
    --color-rojo: #FF0000;
    --color-rojo-claro: #FFCCCC;
    --color-verde: #009900;
    --color-naranja: #FF9900;
    --color-amarillo: #FFE800;
    /* Fuentes y tamaños */
    --fuente-principal: tahoma, verdana, arial;
    --fuente-titular: "Times New Roman", Times, serif;
    --tamano-base-fuente: 10pt;
    /* Sombras y bordes */
    --sombra-icono: 2px 2px 0 rgb(150, 150, 150);
    --sombra-hover: 6px 6px 0 rgb(100, 100, 100);
    --sombra-info: 6px 6px 0 rgb(100, 100, 100);
    --borde-radio-redondo: 8px;
    --borde-radio-largo: 12px;

    /* Nuevas variables de color para la tabla */
    --color-principal-hover: #056a9e;
    --color2: #004f76; /* Color de las cabeceras */
    --color-texto-claro: #fff;
    --color-secundario: #009900;
    --color-fondo-footer: #f9f9f9;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin: 0;
    background-color: var(--color-fondo);
    font-family: var(--fuente-principal);
    font-size: var(--tamano-base-fuente);
    color: var(--color-texto);
}

main {
    width: 100%;
    margin: 0;
}

/*=====================================
  Clases de Tipografía y Colores
=====================================*/

.titular1,
.titular2 {
    font-family: var(--fuente-titular);
    color: var(--color-texto);
    text-align: center;
}

.titular1 {
    font-size: 32px;
}

.titular2 {
    font-size: 26px;
}

p,
td {
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    text-align: left;
    font-weight: normal;
}

.noticia {
    font-size: 11pt;
    text-align: justify;
}

.mediana {
    font-size: 11px;
}

.pequena {
    font-size: 9px;
}

.texto-blanco {
    color: #FFF;
}

.texto-gris-claro {
    color: var(--color-gris-claro);
}

.texto-gris-oscuro {
    color: var(--color-gris-oscuro);
}

.texto-negro {
    color: var(--color-texto);
}

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

.texto-azul {
    color: #0000FF;
}

.texto-justificado {
    text-align: justify;
}

.texto-centrado {
    text-align: center;
}

.texto-izquierda {
    text-align: left;
}

.texto-derecha {
    text-align: right;
}

.negroblanco {
    color: var(--color-texto);
    font-weight: bold;
    background-color: var(--color-fondo);
}

.azulblanco {
    color: var(--color-rojo);
    font-weight: bold;
    background-color: var(--color-fondo);
}

/*=====================================
  Estilos de Enlaces
=====================================*/

a {
    text-decoration: none;
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

a:hover {
    color: var(--color-principal); /* Cambia al color principal al pasar el ratón */
}

/* Clases de enlace */
.enlace {
    text-decoration: none;
    color: var(--color-principal);
}

.enlace:hover {
    color: var(--color-naranja); /* Cambia a naranja al pasar el ratón */
}

.enlace1 {
    color: #003366; /* Azul oscuro */
}

.enlace1:hover {
    color: var(--color-principal); /* Cambia a azul principal */
}

.enlace2 {
    color: #069; /* Azul medio */
}

.enlace2:hover {
    color: #FF6600; /* Cambia a naranja */
}

.enlace3 {
    color: #BBB; /* Gris claro */
}

.enlace3:hover {
    color: var(--color-gris-oscuro); /* Cambia a gris oscuro */
}

.enlace4 {
    color: #FFF; /* Blanco */
}

.enlace4:hover {
    color: var(--color-gris-claro); /* Cambia a gris claro */
}

.enlace-font {
    color: #0000FF; /* Azul brillante */
}

.enlace-font:hover {
    color: #FF6600; /* Naranja */
}

/* Enlaces del menú y pie de página */
.enlace-aviso,
.enlace-desconectar,
.enlace-menu {
    display: inline-block; /* Cambia a inline-block para que los iconos se muestren en fila */
    text-align: center;
    text-decoration: none;
    padding: 10px; /* Ejemplo de padding para el estilo de escritorio */
}

.enlace-aviso:hover,
.enlace-desconectar:hover,
.enlace-menu:hover {
    color: #000000; /* Texto del enlace se vuelve negro al pasar el ratón */
}

/*=====================================
  Componentes de Layout
=====================================*/

header.main-header {
    width: 100%;
    margin: 1em 0;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #f0f0f0;
    border-radius: var(--borde-radio-largo);
    box-sizing: border-box;
    flex-wrap: wrap;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fff;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    flex: 1;
}

.header-left {
    justify-content: flex-start;
}

.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 2;
    padding: 0 1em;
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1;
}

/* Estilos de los logos */
.logo-colegio {
    height: 4em;
    max-width: 150px;
    height: auto;
}

.logo-nuntio {
    height: 3em;
    max-width: 150px;
    height: auto;
}

/* Ocultar el header para móviles */
.headermovil {
    display: none;
}

/* Footer */
footer {
    width: 98%;
    margin: 1em;
    padding: 1em;
    display: flex;
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    border: 2px solid #f0f0f0;
    border-radius: var(--borde-radio-largo);
    box-sizing: border-box;
}

.header-left .icon-incognito {
    font-size: 5em !important;
    margin-right: 0 !important; /* Asegura que no haya margen a la derecha */
}

.headermovil-container {
    display: none;
}

.botones-container {
    display: flex; /* Habilita el flexbox para una distribución en fila */
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    gap: 1.5em; /* Añade un espacio uniforme entre los elementos */
    margin-bottom: 2em; /* Espacio debajo del contenedor */
    width: 100%;
}

.external-links-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 2em;
    padding-left: 1em; /* Un poco de padding para que no se pegue al borde */
}

/* Estilo de los iconos de menú (normal) */
.icono {
    flex: 1 1 120px; /* Permite a los elementos crecer y encogerse */
    max-width: 150px; /* Ancho máximo para evitar que crezcan demasiado */
    min-width: 90px; /* Ancho mínimo para evitar que se aplasten */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    background: var(--color-fondo);
    padding: 0.8em;
    border-radius: var(--borde-radio-largo);
    cursor: pointer;
    text-align: center;
    color: #1274a6; /* Color de texto del icono normal */
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.3s;
}

.icono i {
    font-size: 3em; /* Tamaño grande para los iconos de Font Awesome */
    margin-bottom: 0.2em; /* Espacio entre el icono y el texto */
    color: #1274a6; /* Color de los iconos normales */
}

.icono:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: #dcdcdc; /* Fondo gris claro en hover para los iconos de utilidades */
    color: #000000; /* Color del texto del icono en hover */
}

.icono:hover i {
    color: #000000; /* Color del icono en hover */
}

.icono-rojo {
    color: var(--color-rojo) !important;
}

.icono-verde {
    color: var(--color-verde) !important;
}

/* Estilos de los iconos de enlaces externos */
.icono2 {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8em;
    background: var(--color-fondo);
    border-radius: var(--borde-radio-largo);
    cursor: pointer;
    text-align: center;
    color: #1274a6;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.3s;
}

.icono2:hover {
    background-color: #dcdcdc; /* Un gris claro para el fondo */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.icono2 img,
.icono2 input[type="image"] {
    width: 60px;
    height: 60px;
    margin-bottom: 0.2em;
}

/* Estilo del icono de desconectar (más pequeño y con su propia clase) */
.icono-desconectar {
    width: 80px; /* Tamaño del contenedor del icono */
    height: 80px;
    padding: 0.5em; /* Reducción del padding */
    font-size: 1em; /* Reducción del tamaño de fuente */

    /* Propiedades de flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* El resto de las propiedades del diseño del icono */
    background: var(--color-fondo);
    border-radius: var(--borde-radio-largo);
    cursor: pointer;
    text-align: center;
    color: #1274a6;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.3s;
}

.icono-desconectar i {
    font-size: 2em; /* Reducción del tamaño del icono */
    margin-bottom: 0.1em;
    color: #1274a6;
}

.icono-desconectar:hover {
    transform: translateY(-5px); /* Efecto de elevación */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: #dcdcdc; /* Fondo gris claro en hover */
    color: #000000; /* Color del texto del icono en hover */
}

.icono-desconectar:hover i {
    color: #000000; /* Color del icono en hover */
}

.avisomensajes,
.avisotutorias {
    text-align: center;
    width: 100%;
    border-radius: var(--borde-radio-redondo);
    padding: 0.5em;
    font-size: 1.2em;
    box-sizing: border-box;
    margin-bottom: 0.4em;
    cursor: pointer;
}

.avisomensajes {
    background-color: var(--color-naranja);
}

.avisotutorias {
    background-color: var(--color-amarillo);
}

.avisomensajes:hover,
.avisotutorias:hover {
    background-color: #CCC;
}

.cuadro_asignaturas,
.cuadro_extraescolares {
    flex: 1 1 110px;
    max-width: 140px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-principal);
    font-weight: bold;
    text-align: center;
    margin: 0.7em;
    padding: 0.6em;
    cursor: pointer;
    border-radius: var(--borde-radio-redondo);
    box-shadow: var(--sombra-icono); /* Usamos la sombra de los iconos */
    transition: transform 0.2s, box-shadow 0.3s, background-color 0.3s;
    color: #004f76; /* Color de texto normal para asignaturas */
}

.cuadro_asignaturas {
    font-size: 1.2em;
}

.cuadro_extraescolares {
    font-size: 1em;
}

.cuadro_asignaturas:hover,
.cuadro_extraescolares:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: #3e82af; /* Color de fondo al pasar el cursor */
    color: #000000; /* Color del texto en hover para asignaturas */
}

.asigbac {
    background-color: #4fa2da;
}

.asigeso {
    background-color: #50d1fb;
}

.asigep {
    background-color: #aeeaff;
}

.asigei {
    background-color: #50d1fb;
}

.asigtutoria {
    background-color: #89e2b5;
}

.asigtutoriaapoyo {
    background-color: #89ffe3;
}

.asigextra {
    background-color: var(--color-rojo-claro);
}

.nombreasigicono {
    font-size: 0.8em;
    font-weight: normal;
    margin-top: 5px;
}

#info,
#info2 {
    width: 100%;
    font-size: 1.2em;
    padding: 1em;
    box-sizing: border-box;
}

.infotitulo,
.infotitulopie {
    width: 95%;
    font-size: 1.3em;
    font-weight: bold;
    text-align: left;
    /* CORRECCIÓN: Padding: 0.5em arriba/abajo/derecha, 0.1em a la izquierda */
    padding: 0.5em 0.5em 0.5em 0.1em;
    
    /* CORRECCIÓN IDE: Valores directos */
    border-radius: 8px;
    box-shadow: 2px 2px 0 rgb(150, 150, 150); 
    
    background-color: #50d1fb;
    color: #004f76;
    /* CORRECCIÓN: Margin: 0.2em arriba/abajo/derecha, 0.1em a la izquierda */
    margin: 0.2em 0.2em 0.2em 0.1em;
}

.sombrainfo,
.sombrainfopie,
.sombrainfourgente {
    width: 97%;
    font-size: 1.2em;
    font-weight: bold;
    /* CORRECCIÓN: Padding: 0.5em arriba/abajo/derecha, 0.1em a la izquierda */
    padding: 0.5em 0.5em 0.5em 0.1em;
    
    /* CORRECCIÓN IDE: Valor directo */
    border-radius: 8px;
    
    box-sizing: border-box;
    /* CORRECCIÓN: Margin: 0.2em arriba/abajo/derecha, 0.1em a la izquierda */
    margin: 0.2em 0.2em 0.2em 0.1em;
    background-color: var(--color-gris-muy-claro);
    transition: background-color 0.3s;
}

.sombrainfo:hover,
.sombrainfopie:hover,
.sombrainfourgente:hover {
    background-color: #CCC;
}

.sombrainfourgente {
    background-color: #FFCC99;
}

.avisoconvivencia {
    width: 100%;
    background-color: #FF3333;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    padding: 2em;
    border-radius: var(--borde-radio-redondo);
    box-sizing: border-box;
}

.foto {
    width: 4em;
    height: auto;
    border: 1px solid var(--color-texto);
    box-shadow: 3px 3px 0 rgb(130, 130, 130);
    margin-bottom: 0.2em;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.resaltado tbody tr:hover * {
    background: #D1E5EF;
    cursor: default;
}

.parpadea {
    animation: parpadeo 1s linear infinite;
    color: #ff6666;
}

@keyframes parpadeo {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.logo-curso-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

/* Añade esto en cualquier lugar de tu archivo estilos.css */
.icono2 form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.icono-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.icono-contenido span.texto-icono {
    margin-top: 5px; /* Ajusta este valor si necesitas más o menos espacio */
}

#eventos {
    float: left;
    padding: 0.1em;
    width: 100%;
}

/*=====================================
  Estilos para la página de administración
=====================================*/

.admin-main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--color-gris-muy-claro);
    padding: 20px;
    box-sizing: border-box;
}

.admin-container {
    background-color: var(--color-fondo);
    padding: 2em;
    border-radius: var(--borde-radio-largo);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.admin-title {
    font-family: var(--fuente-titular);
    font-size: 1.8em;
    color: var(--color-texto);
    margin-bottom: 1em;
}

.admin-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    text-align: left;
}

.admin-link {
    display: block;
    text-decoration: none;
    color: var(--color-texto);
    background-color: var(--color-gris-claro);
    border-radius: var(--borde-radio-redondo);
    padding: 0.8em 1em;
    transition: background-color 0.3s ease;
}

.admin-link:hover {
    background-color: #dcdcdc;
}

.admin-user-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: var(--fuente-principal);
    font-size: 1em;
}

.admin-username {
    font-weight: bold;
}

.admin-fullname {
    color: var(--color-gris-oscuro);
}

.admin-button-container {
    margin-top: 2em;
}

.admin-button {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: var(--color-principal);
    color: #FFF;
    border-radius: var(--borde-radio-redondo);
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.admin-button:hover {
    background-color: #056a9e;
}

.titulo-asig {
    font-size: 2.2em;
    font-weight: bold;
    margin: 20px 0 20px 20px;
}

/*=====================================
  Estilos para la página de mensajería
=====================================*/

.mensajeria-container {
    padding: 20px;
}

.mensajeria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 15px;
}

.mensajeria-actions .btn-action,
.mensajeria-folders .btn-folder {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
}

.mensajeria-actions .btn-action {
    background-color: var(--color-principal);
    color: white;
}

.mensajeria-actions .btn-action:hover {
    background-color: var(--color-principal-hover);
}

.mensajeria-folders .btn-folder {
    background-color: #e0e0e0;
    color: var(--color-texto);
}

.mensajeria-folders .btn-folder.btn-active {
    background-color: var(--color-secundario);
    color: white;
    font-weight: bold;
}

.mensajeria-folders .btn-folder:hover:not(.btn-active) {
    background-color: #d0d0d0;
}

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

.filtro-select {
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

#acciones-seleccion .btn-action {
    background-color: #dc3545;
    color: white;
}

#acciones-seleccion .btn-action:hover {
    background-color: #c82333;
}



/*=====================================
  Estilos para la tabla de mensajes
=====================================*/

/* Contenedor principal de la tabla */
.mensajes-tabla {
    width: 98%;
    max-width: 1900px;
    margin: 20px auto;
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Configuración principal de la tabla */
.mensajes-tabla table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 1.1em; /* Aumentamos el tamaño de fuente para mejorar la legibilidad */
    line-height: 1.5;
}

/* Estilos de las celdas y cabeceras */
.mensajes-tabla th,
.mensajes-tabla td {
    padding: 12px 10px;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

/* Cabeceras de la tabla (th) */
.mensajes-tabla th {
    background-color: var(--color2);
    color: var(--color-texto-claro);
    border-bottom: 2px solid var(--color-principal);
    font-weight: bold;
    white-space: nowrap; /* Evita que los encabezados se rompan */
}

/*
 * Definición de anchos y alineación de columnas para escritorio.
 * Los anchos fijos evitan la compresión de los elementos pequeños.
 * El resto de columnas se adaptan automáticamente.
 */
.mensajes-tabla th:nth-child(1),
.mensajes-tabla td:nth-child(1),
.mensajes-tabla th:nth-child(2),
.mensajes-tabla td:nth-child(2) {
    width: 30px;
    text-align: center;
}

.mensajes-tabla th:nth-child(3),
.mensajes-tabla td:nth-child(3) {
    width: 15%; /* Ancho basado en porcentaje para que se adapte mejor */
    text-align: left;
    white-space: normal; /* Permitimos el salto de línea para este contenido */
}

.mensajes-tabla th:nth-child(4),
.mensajes-tabla td:nth-child(4) {
    width: 12%;
    text-align: left;
    white-space: normal;
}

.mensajes-tabla th:nth-child(5),
.mensajes-tabla td:nth-child(5) {
    width: 30%; /* Le damos un porcentaje fijo para asegurar su tamaño */
    text-align: left;
    white-space: normal;
}

.mensajes-tabla th:nth-child(6),
.mensajes-tabla td:nth-child(6) {
    width: 25%;
    text-align: left;
    white-space: normal;
}

.mensajes-tabla th:nth-child(7),
.mensajes-tabla td:nth-child(7) {
    width: 150px; /* Ancho fijo para la fecha, para evitar saltos */
    text-align: right;
    white-space: nowrap;
}

/* Estilo cebreado para las filas */
.mensajes-tabla tbody tr:nth-child(odd) {
    background-color: #fcfcfc;
}

/* Resaltado de fila al pasar el ratón */
.mensajes-tabla tbody tr:hover {
    background-color: #eaf6ff;
    cursor: pointer;
}

/* Estilos de iconos y estados del mensaje */
.important-toggle .fa-star,
.important-toggle .fa-star-o {
    color: gold;
}

/* Estilo para los mensajes no leídos (se aplica a toda la fila) */
.mensaje-row.unread td {
    font-weight: bold;
}

.mensajes-tabla .family-sender {
    color: var(--color-secundario);
}

/* Paginación */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
    width: 98%;
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagination span {
    font-size: 1.1em;
    color: #555;
}

.pagination-links a {
    text-decoration: none;
    background-color: var(--color-principal);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

.pagination-links a:hover {
    background-color: var(--color-principal-hover);
}

/* Estilos del footer */
footer {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 20px;
    background-color: var(--color-fondo-footer);
    border-top: 1px solid #ddd;
    margin-top: 30px;
}

.footer-btn a {
    text-decoration: none;
    color: var(--color-texto);
}

.footer-btn .icono-desconectar,
.footer-btn .icono-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 60px;
    font-size: 0.9em;
    text-align: center;
    transition: color 0.3s ease;
}

.footer-btn .icono-desconectar i,
.footer-btn .icono-inicio i {
    font-size: 2.5em;
    margin-bottom: 5px;
    color: var(--color-principal);
}

.footer-btn a:hover .icono-desconectar i,
.footer-btn a:hover .icono-inicio i {
    color: var(--color-principal-hover);
}

/*=====================================
  Media Query para Pantallas Pequeñas (max-width: 768px)
=====================================*/
@media (max-width: 768px) {
    /* Estilos para el header en móvil */
    header.main-header {
        flex-direction: column;
        align-items: center;
        margin: 1em;
        width: auto;
    }

    .header-left,
    .header-center,
    .header-right {
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-bottom: 0.5em;
    }

    .header-right {
        flex-direction: column;
    }

    .logo-colegio {
        display: none;
    }

    /* Estilos para los iconos de Utilidades (Font Awesome) */
    .botones-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 0.5em;
        width: 100%;
        margin-bottom: 1em;
    }

    .botones-container .enlace-menu {
        flex-basis: 22%;
        max-width: 22%;
        padding: 5px;
    }

    .botones-container .icono {
        font-size: 0.8em;
    }

    .icono i {
        font-size: 2.5em;
    }

    /* Estilos para los iconos de Asignaturas */
    .cuadro_asignaturas {
        width: 22%;
        font-size: 1.1em;
        margin: 5px;
        box-sizing: border-box;
    }

    .cuadro_extraescolares {
        width: 22%;
        font-size: 0.9em;
    }

    /* Estilos para los 5 iconos de Enlaces Externos */
    .external-links-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .external-links-container .enlace-menu {
        flex-basis: 16%;
        max-width: 16%;
        padding: 5px;
        text-align: center;
        text-decoration: none;
    }

    .external-links-container .icono2 {
        font-size: 0.7em;
        width: 100%;
        box-sizing: border-box;
    }

    .external-links-container .icono2 img,
    .icono2 input[type="image"] {
        width: 35%;
        height: auto;
    }

    /* Reducción general de fuentes y márgenes para móviles */
    #info,
    #info2 {
        font-size: 0.9em;
        padding: 0.5em;
    }

    .infotitulo,
    .sombrainfo,
    .sombrainfourgente {
        width: 95%;
        margin: 0.5em auto;
    }

    .sombrainfopie {
        font-size: 1em;
    }

    .noticia {
        font-size: 0.9em;
    }

    footer {
        width: 95%;
        margin: 1em auto;
    }

    .infotitulopie {
        width: 94%;
    }

    /* Estilos para la mensajería */
    .mensajeria-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mensajeria-actions,
    .mensajeria-folders,
    .mensajeria-tools {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .mensajeria-actions .btn-action,
    .mensajeria-folders .btn-folder {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    /* Estilos de la tabla en móvil */
    .mensajes-tabla table {
        font-size: 0.9em;
        /* La clave para la versión móvil es que la tabla se haga scroll horizontalmente */
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .mensajes-tabla th,
    .mensajes-tabla td {
        padding: 8px; /* Reducimos el padding */
    }
    
    /* Anchos de columna en móvil. `white-space: normal` para que el texto se ajuste */
    .mensajes-tabla td:nth-child(3),
    .mensajes-tabla td:nth-child(4),
    .mensajes-tabla td:nth-child(5),
    .mensajes-tabla td:nth-child(6) {
        white-space: normal;
    }

    .pagination {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .pagination-links {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
}


/*=====================================
  Estilos del Horario (Layout Moderno - CSS Grid/Flexbox)
=====================================*/

.horario-profesor-contenedor {
    width: 99%;
    max-width: 1200px;
    margin: 0 auto;
    /* ELIMINADO: border: 1px solid #ccc; para quitar el marco */
}

.horario-titulo {
    font-size: 1.2em;
    padding: 8px;
    text-align: center;
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #ccc; /* Mantenemos la línea bajo el título principal */
}

/* ------------------------------------------- */
/* Cuadrículas de 5 columnas para Encabezados y Contenido */
/* ------------------------------------------- */

/* Aplica la cuadrícula a la cabecera y al contenido */
.horario-dias-header,
.horario-grid {
    display: grid;
    /* 5 columnas de igual tamaño para Lunes a Viernes */
    grid-template-columns: repeat(5, 1fr);
    gap: 0px; 
}

.horario-dias-header {
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    color: #000; 
    /* Esta línea es el separador visual entre la cabecera de días y el contenido */
    border-bottom: 2px solid #ccc; 
}

.horario-dias-header > div {
    /* Separador vertical para los encabezados */
    border-right: 1px solid #ccc; 
    padding: 5px 0;
}

.horario-dias-header > div:last-child {
    border-right: none;
}

.horario-grid {
    /* ELIMINADO: border-top de la versión anterior para limpiar el diseño */
}

.horario-dia {
    padding: 0px 5px 10px 5px;
    border-right: 1px solid #ccc; /* Separador vertical entre días */
}

/* Eliminar el borde derecho del último día (Viernes) */
.horario-dia:last-child {
    border-right: none;
}

/* Ocultamos el H3 porque el título del día ahora se genera en la cabecera separada */
.horario-dia h3 {
    display: none;
}

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

/* Bloque contenedor de la sesión (CORRECCIÓN CLAVE) */
.clase-item {
    /* PROPIEDAD CLAVE PARA FORZAR LA SEPARACIÓN y evitar colapso de márgenes */
    overflow: hidden; 
    
    border: 1px solid #dcdcdc;
    
    /* 1. Margin Bottom: El espacio en blanco después de cada sesión (Clave) */
    margin-bottom: 14px; 
    
    margin-top: 5px;
    padding: 6px; 
    font-size: 0.95em;
    cursor: default;
    border-radius: 4px;
    display: flex; 
    flex-direction: column;
    text-align: center;
    min-height: 50px; 
    
    /* 2. Sombra: Mejora la distinción visual, elevando el bloque */
    box-shadow: 0 3px 5px rgba(0,0,0,0.15); 
    transition: box-shadow 0.2s, transform 0.2s;
}

/* Hover para mejorar la UX y reforzar la separación */
.clase-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.2);
}

.clase-hora {
    font-weight: normal; 
    margin-bottom: 3px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 2px;
    text-align: center; 
}

.clase-lugar {
    font-weight: bold;
    font-size: 0.9em;
}

.separador-hora {
    height: 10px;
    background-color: transparent;
    border-top: 1px dotted #ccc;
    margin: 5px 0;
}

/* Colores para Tipos de Clases/Guardias */
.clase-guardia {
    background-color: #D7EBFF !important; 
}

.clase-convivencia {
    background-color: #49b4ec !important; 
}

/* Media Query: Para hacer el horario Responsive en Móviles (apila los días) */
@media screen and (max-width: 800px) {
    /* Pasa de 5 columnas a 1 columna */
    .horario-grid {
        grid-template-columns: 1fr;
    }
    
    /* Ocultamos la cabecera de días cuando se apila en móvil */
    .horario-dias-header {
        display: none; 
    }

    .horario-dia {
        border-right: none;
        border-bottom: 5px solid #ccc;
        padding: 5px;
    }

    .horario-dia:last-child {
        border-bottom: none;
    }

    /* En móvil, volvemos a mostrar el título del día que el PHP generaba */
    .horario-dia h3 {
        display: block; 
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #aaa;
    }

    .clase-item {
        /* Muestra la hora y el detalle en la misma línea */
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        align-items: center;
        padding: 8px 5px;
        min-height: auto; 
    }

    .clase-hora {
        flex-basis: 30%; 
        border-bottom: none;
        padding-bottom: 0;
    }

    .clase-detalle {
        flex-basis: 70%; 
    }
}
/*=====================================
  Estilos del Horario (Layout Moderno - CSS Grid/Flexbox)
  (Asegúrate de que .horario-profesor-contenedor NO tenga borde)
=====================================*/

.horario-profesor-contenedor {
    width: 99%;
    max-width: 1200px;
    margin: 0 auto;
    border: none; /* Asegurado que no tiene marco exterior */
}

/* ... Mantén aquí el resto de los estilos del horario principal que ya tenías ... */


/*=====================================
  NUEVOS ESTILOS: HORARIOS DE CURSOS (Soporte)
=====================================*/

.horarios-cursos-seleccion-contenedor {
    width: 90%;
    max-width: 800px;
    margin: 15px auto;
    border: 1px solid #ccc; /* Mantener borde solo para este bloque de menú si es necesario */
}

.horarios-cursos-titulo {
    font-size: 1.1em;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    color: #000;
}

.horarios-cursos-form-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 15px;
}

.horarios-cursos-form-row .select-container select {
    margin-right: 10px;
    padding: 5px;
}

/* Resultados del Horario de Curso (Div-based Grid) */

.horario-curso-resultados-contenedor {
    width: 90%;
    max-width: 800px;
    margin: 15px auto;
}

.horario-curso-titulo {
    font-size: 1.1em;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    color: #000;
}

.horario-curso-header,
.horario-curso-item {
    display: grid;
    /* Define 4 columnas: Día | Hora | Asignatura | Profesor */
    grid-template-columns: 1fr 2fr 3fr 2fr; 
    gap: 5px;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.horario-curso-header {
    font-weight: bold;
    color: #fff; 
}

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

.horario-curso-list-separator {
    /* Separador visual de día */
    height: 10px;
    background-color: transparent;
    border-top: 2px solid #ccc;
    margin: 10px 0;
}


/*=====================================
  NUEVOS ESTILOS: HORARIO DEL TUTOR
  (Usa Grid similar al horario principal)
=====================================*/

.horario-tutor-contenedor {
    width: 99%;
    max-width: 1200px;
    margin: 15px auto;
}

.horario-tutor-header {
    border-top: 1px solid #ccc;
}

.horario-tutor-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0px; 
}

.horario-tutor-dia {
    padding: 0px 5px 10px 5px;
    border-right: 1px solid #ccc;
}

.horario-tutor-dia:last-child {
    border-right: none;
}

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

/* Bloque contenedor de la sesión del tutor (CORRECCIÓN CLAVE) */
.tutor-clase-item {
    /* PROPIEDAD CLAVE PARA FORZAR LA SEPARACIÓN y evitar colapso de márgenes */
    overflow: hidden; 
    
    border: 1px solid #dcdcdc;
    
    /* 1. Margin Bottom: El espacio en blanco después de cada sesión (Clave) */
    margin-bottom: 14px; 
    
    margin-top: 5px;
    padding: 6px;
    font-size: 0.95em;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    
    /* 2. Sombra: Mejora la distinción visual, elevando el bloque */
    box-shadow: 0 3px 5px rgba(0,0,0,0.15); 
    transition: box-shadow 0.2s, transform 0.2s;
}

/* Hover para el horario del tutor */
.tutor-clase-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.2);
}

.tutor-clase-hora {
    font-weight: normal; /* **CORREGIDO: ELIMINAMOS NEGRITA** */
    margin-bottom: 3px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 2px;
}


/* ----------------------------------------------------------------- */
/* CLASES COMPACTAS INTERNAS: ELIMINACIÓN DE TODA NEGRITA (CORRECCIÓN) */
/* ----------------------------------------------------------------- */

.clase-hora-compacta {
    font-weight: normal; 
    font-size: 0.9em;
    margin-bottom: 2px; 
    width: 100%; 
    text-align: center; 
}

.clase-asignatura-compacta {
    font-size: 1.0em;
    font-weight: normal; /* **CORREGIDO: ELIMINAMOS NEGRITA (de 600 a normal)** */
    margin-bottom: 4px; 
    width: 100%;
}

.clase-lugar-compacta {
    font-weight: normal; 
    font-size: 0.8em;
    color: var(--color-gris-oscuro);
    width: 100%;
}


/*=====================================
  MEDIA QUERY: Adaptación a Móvil
=====================================*/

@media screen and (max-width: 800px) {
    /* ... (Mantener la media query del horario del profesor) ... */
    
    /* Horarios de Cursos (Selección) */
    .horarios-cursos-form-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .horarios-cursos-form-row .select-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    /* Horario de Curso Resultados se convierte en lista de tarjetas (Cards) */
    .horario-curso-header {
        display: none; /* Oculta la cabecera de la lista */
    }

    .horario-curso-item {
        grid-template-columns: 1fr; /* Una sola columna */
        border: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: var(--color-gris-muy-claro) !important;
        color: #000 !important;
    }
    
    /* Etiquetas para la vista de tarjeta */
    .horario-curso-item > div:before {
        font-weight: bold;
        display: block;
        margin-bottom: 3px;
    }
    .horario-curso-item .col-dia:before { content: "Día:"; }
    .horario-curso-item .col-hora:before { content: "Hora:"; }
    .horario-curso-item .col-asignatura:before { content: "Asignatura:"; }
    .horario-curso-item .col-profesor:before { content: "Profesor:"; }
    
    .horario-curso-list-separator {
        display: none; 
    }

    /* Horario del Tutor en móvil: se apila igual que el principal */
    .horario-tutor-header {
        display: none;
    }
    .horario-tutor-grid {
        grid-template-columns: 1fr;
    }
    .horario-tutor-dia {
        border-right: none;
        border-bottom: 5px solid #ccc;
    }
    .horario-tutor-dia:last-child {
        border-bottom: none;
    }
}