/* --- Variables de Color (Tema Celeste) --- */
:root {
    /* Eliminamos --color-fondo-header ya que usaremos una imagen */
    --color-primario-oscuro: #005A9C; /* Un azul más oscuro para el nav */
    --color-primario-claro: #B3E0FF; /* Un celeste muy claro para el fondo */
    --color-texto-header: #ffffff;      /* Texto blanco para el nav */
    --color-texto-general: #333333;   /* Texto oscuro para contenido */
    --color-hover: #004070;         /* Color al pasar el mouse */
}

/* --- Reseteo Básico y Estilos Generales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Importante para que el padding no afecte el ancho */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-texto-general);
}

/* --- Estilos del Header --- */
.main-header {
    background-image: url('../images/backHeader.png'); /* ¡Aquí va tu imagen! */
    background-size: cover; /* Escala la imagen para cubrir todo el contenedor */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    border-bottom: 3px solid var(--color-primario-oscuro);
    color: var(--color-texto-header); /* Asegura que el texto sea blanco aquí */
    position: relative; /* Necesario si agregamos un overlay después */
    padding-bottom: 0; /* Ajusta el padding si es necesario */
}

/* Para mejorar la legibilidad del texto sobre la imagen, podemos añadir un overlay oscuro */
.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Capa semi-transparente negra */
    z-index: 0; /* Coloca el overlay debajo del contenido */
}


/* Contenedor del Logo y Título */
.logo-container {
    text-align: center;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* Importante: para que el contenido esté sobre el overlay */
    z-index: 1; /* Coloca el contenido encima del overlay */
}

.logo-container h1 {
    font-size: 3rem;
    color: var(--color-texto-header);
    margin: 0;
    display: flex;
    align-items: center;
}

.school-logo {
    max-width: 80px;
    height: auto;
    margin-bottom: 10px;
}

.slogan {
    font-size: 1.5rem;
    font-weight: lighter;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.registration {
    font-size: 0.8em;
    font-weight: lighter;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Estilos de la Navegación (sin cambios) --- */
.main-nav {
    background-color: var(--color-primario-oscuro);
    text-align: center;
    position: relative; /* Para que el nav también esté sobre el overlay si es necesario */
    z-index: 1;
}

.main-nav ul {
    list-style: none;
    display: inline-block;
}

.main-nav li {
    display: inline-block;
    position: relative;
}

.main-nav a {
    display: block;
    padding: 15px 25px;
    text-decoration: none;
    color: var(--color-texto-header);
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.main-nav a:hover {
    background-color: var(--color-hover);
}

/* --- Estilos del Menú Desplegable (Dropdown) --- */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2; /* Asegura que el dropdown esté sobre todo */
    text-align: left;
}

.dropdown-content a {
    color: var(--color-texto-general);
    padding: 12px 16px;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.fa-whatsapp {
    color: #25D366;
    margin-left: 5px;
}
/* --- Estilos del Modal de WhatsApp --- */
#whatsappModal .modal-header {
    background-color: var(--color-primario-oscuro); /* Tu azul oscuro */
    color: var(--color-texto-header); /* Blanco */
}

/* Hace la 'X' de cerrar de color blanco */
#whatsappModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#whatsappModal .modal-title {
    color: var(--color-primario-claro); /* Tu celeste */
}

/* Botón de Enviar en el footer del modal */
#whatsappModal .modal-footer .btn-success {
    background-color: #25D366; /* Color oficial de WhatsApp */
    border-color: #25D366;
    font-weight: bold;
}

#whatsappModal .modal-footer .btn-success:hover {
    background-color: #1EAE53;
    border-color: #1EAE53;
}
/* --- Estilos del Modal de PDF (Actualizado para ser más grande y reutilizable) --- */

/* Hacemos que el diálogo del modal ocupe casi todo el ancho */
.pdf-viewer-modal .modal-dialog {
    max-width: 95%; /* Ocupa el 95% del ancho de la pantalla */
}

.pdf-viewer-modal .modal-header {
    background-color: var(--color-primario-oscuro);
    color: var(--color-texto-header);
}

.pdf-viewer-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.pdf-viewer-modal .modal-title {
    color: var(--color-primario-claro);
}

/* Clave para el iframe (Esta clase ya era reutilizable) */
.pdf-modal-body {
    padding: 0;
    height: 88vh; /* 88% de la altura de la pantalla */
}

.pdf-viewer-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain; /* Ajusta el PDF sin recortar */
}

/* Botón de Descarga */
.pdf-viewer-modal .modal-footer .btn-primary {
    background-color: var(--color-primario-oscuro);
    border-color: var(--color-primario-oscuro);
}

.pdf-viewer-modal .modal-footer .btn-primary:hover {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
}