/* styles.css */

/* Reiniciar márgenes y relleno para todos los elementos y configurar el box model */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilizar el cuerpo del documento */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
	padding: 0;
}
main {
    padding-top: 60px;
	 padding-left: 10px;
}
/* Títulos generales dentro de main */
main h1, main h2, main h3, main h4, main h5, main h6 {
    color: #003366; /* Azul oscuro */
}

/* Estilizar tablas dentro de main */
main table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    border: 1px solid #003366; /* Bordes de la tabla */
}

main th {
    background-color: #003366; /* Azul oscuro */
    color: white;
    padding: 0.75rem;
    text-align: left;
    border: 1px solid #003366; /* Bordes de las cabeceras */
}

main td {
    padding: 0.75rem;
    border: 1px solid #003366; /* Bordes de las celdas */
}

main tr:nth-child(odd) {
    background-color: #f9f9f9;
}

main tr:nth-child(even) {
    background-color: #e6f2ff;
}

/* Estilizar el encabezado principal de la página */
.main-header {
    background-color: #003366; /* Azul oscuro especificado */
    color: white;
    padding: 1rem;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Ajustar la altura del encabezado */
    height: 70px; /* Ajusta este valor según el tamaño de tu encabezado */
}

/* Contenedor para el botón del menú y el título */
.header-content {
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: flex-start; /* Alinea a la izquierda */
    height: 100%; /* Hace que el contenedor ocupe toda la altura del header */
}

/* Botón de menú en la esquina superior izquierda */
.menu-toggle {
    background-color: #003366; /* Azul oscuro */
    color: white; /* Letras blancas */
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    display: block;
}

/* Estilo para el contenedor del título */
.title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Estilo del subtítulo */
.page-subtitle {
    margin: 0;
    padding: 0;
    font-size: 1rem; /* Tamaño más pequeño que el título */
    color: #cce7ff; /* Azul claro para contrastar */
    font-style: italic;
    margin-top: 0.2rem;
}

/* Título de la página */
.page-title {
    margin-left: 1rem; /* Separar el título del botón */
    color: white; /* Título en blanco */
    font-size: 2rem; /* Tamaño del título */
    font-weight: bold;
}

/* Estilizar el menú principal */
.main-nav {
    display: none; /* El menú estará oculto inicialmente */
    background-color: #003366; /* Azul oscuro */
    position: fixed;
    top: 0;
    left: 0;
    width: 250px; /* Ancho fijo para el menú */
    height: 100%;
    z-index: 999;
    flex-direction: column;
    padding-top: 4rem; /* Para que no se solape con el botón de menú */
    margin-top: 10px; /* Esto asegura que el menú no quede tapado por el header */
}

/* Estilos para los elementos del menú */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    position: relative;
}

/* Estilos para los botones del menú */
.main-nav button {
    background-color: #003366; /* Azul oscuro */
    color: white; /* Letras blancas */
    padding: 0.75rem 1rem;
    border: none;
    cursor: pointer;
    font-weight: bold;
    width: 100%; /* El botón ocupa todo el ancho */
    text-align: left; /* Alineación del texto a la izquierda */
}

.main-nav button:hover {
    background-color: #005599; /* Azul más claro en hover */
}

/* Submenú de primer nivel (ahora desplazado hacia la derecha) */
.main-nav li > ul {
    display: none;
    position: absolute;
    top: 0; /* Cambio a top: 0 para evitar solapamiento */
    left: 100%; /* El primer submenú se desplazará a la derecha */
    background-color: #005599; /* Azul más claro para el submenú de primer nivel */
    padding: 0.5rem 0;
    width: 200px; /* Ancho del submenú de primer nivel */
    flex-direction: column;
}

/* Submenú de primer nivel visible al pasar el ratón */
.main-nav li:hover > ul {
    display: block;
    z-index: 9999; /* Aseguramos que el submenú quede por encima */
}

/* Estilos para los botones del submenú de primer nivel */
.main-nav li ul li button {
    padding: 0.75rem 1rem; /* Botones del submenú más estrechos */
    background-color: #005599; /* Azul más claro */
    color: white; /* Letras blancas */
    border: none;
    width: 100%; /* El botón ocupa todo el ancho */
    text-align: left; /* Alineación del texto a la izquierda */
}

.main-nav li ul li button:hover {
    background-color: #0077cc; /* Azul más claro en hover */
}

/* Submenú de segundo nivel (desplazado hacia la derecha) */
.main-nav li ul li ul {
    display: none;
    position: absolute;
    left: 100%; /* Desplazamos el submenú de segundo nivel hacia la derecha */
    top: 0;
    background-color: #0066cc; /* Azul para el submenú de segundo nivel */
    padding: 0.5rem 0;
    width: 200px; /* Ancho del submenú de segundo nivel */
    flex-direction: column;
}

/* Submenú de segundo nivel visible al pasar el ratón */
.main-nav li ul li:hover > ul {
    display: flex;
}

/* Estilos para los botones del submenú de segundo nivel */
.main-nav li ul li ul li button {
    padding: 0.75rem 1rem; /* Botones del submenú más estrechos */
    background-color: #0066cc; /* Azul para el submenú de segundo nivel */
    color: white; /* Letras blancas */
    border: none;
    width: 100%; /* El botón ocupa todo el ancho */
    text-align: left; /* Alineación del texto a la izquierda */
}

.main-nav li ul li ul li button:hover {
    background-color: #3399ff; /* Azul más claro en hover */
}

/* Submenú de tercer nivel (desplazado hacia la derecha) */
.main-nav li ul li ul li ul {
    display: none;
    position: absolute;
    left: 100%; /* Desplazamos el submenú de tercer nivel hacia la derecha */
    top: 0;
    background-color: #0077cc; /* Azul para el submenú de tercer nivel */
    padding: 0.5rem 0;
    width: 200px; /* Ancho del submenú de tercer nivel */
    flex-direction: column;
}

/* Submenú de tercer nivel visible al pasar el ratón */
.main-nav li ul li ul li:hover > ul {
    display: flex;
}

/* Estilos para los botones del submenú de tercer nivel */
.main-nav li ul li ul li ul li button {
    padding: 0.75rem 1rem; /* Botones del submenú más estrechos */
    background-color: #0077cc; /* Azul para el submenú de tercer nivel */
    color: white; /* Letras blancas */
    border: none;
    width: 100%; /* El botón ocupa todo el ancho */
    text-align: left; /* Alineación del texto a la izquierda */
}

.main-nav li ul li ul li ul li button:hover {
    background-color: #3399ff; /* Azul más claro en hover */
}

/* Media Queries: Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    /* Menú vertical, sin barra de navegación en pantallas pequeñas */
    .main-nav {
        display: none;
        background-color: #003366; /* Azul oscuro */
    }
}

/* Mostrar el menú cuando el botón sea clicado */
.main-nav.active {
    display: flex;
}


main t1, main t2, main t3 {
    display: block;
    font-family: Arial, sans-serif;
    color: #003366;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

main t1 {
    font-size: 1.5rem;   /* Tamaño similar al h2 estándar */
    font-weight: bold;
    border-bottom: 1px solid #003366;
    padding-bottom: 0.2rem;
}

main t2 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #004080;
}

main t3 {
    font-size: 1.1rem;
    font-weight: normal;
    color: #005599;
}