/* Diseño general para el cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Definimos la fuente a usar */
    margin: 0; /* Eliminamos los márgenes por defecto */
    padding: 0; /* Elimina el relleo relleno por defecto */
}

/* Estilos para el menu */
#header {
    background-color: #0f0f9f; /* Color de la organizacion para la menu */
    padding: 10px; /* Definicion del relleno alrededor del contenido */
}

/* Estilos para el menú de navegación */
.navigation ul {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Definicion del relleno de la lista */
    margin: 0; /* Definicion del margen de la lista */
    
}

/* Estilos para los elementos de la lista del menú */
.navigation ul li {
    display: inline-block; /* Hace que los elementos se alineen en línea */
    position: relative; /* Definicion para la posicion del submenú */
}

/* Estilos para los enlaces dentro de los elementos del menú */
.navigation ul li a {
    color: white; /* Color de texto blanco para los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    padding: 10px 15px; /* Relleno alrededor del texto */
    display: block; /* Hace que el enlace ocupe todo el espacio de su ítem */
}

/* Estilos para las redirecciones al pasar el ratón (hover) */
.navigation ul li a:hover {
    background-color: #0f0f9f; /* Cambia el color de fondo al pasar el ratón */
}

/* Añade el icono de flecha */
.arrow {
    margin-left: 5px;
}

/* Estilos para el submenú (por defecto oculto) */
.submenu {
    display: none; /* Oculta el submenú por defecto */
    position: absolute; /* Posiciona el submenú de manera absoluta respecto al ítem */
    left: 0; /* Lo coloca alineado a la izquierda del ítem */
    top: 100%; /* Lo coloca debajo del ítem */
    background-color: #0f0f9f; /* Fondo  para el submenú */
    padding: 0; /* Elimina relleno */
    list-style-type: none; /* Elimina los puntos de la lista del submenú */
}

/* Estilos para los enlaces dentro del submenú */
.submenu li a {
    padding: 10px 15px; /* Relleno alrededor del texto en el submenú */
    white-space: nowrap; /* Evita que el texto del submenú se divida en varias líneas */
}

/* Estilos para los enlaces del submenú al pasar el ratón */
.submenu li a:hover {
    background-color: #666; /* Cambia el color de fondo al pasar el ratón */
}

/* Muestra el submenú cuando el elemento del menú principal está en hover */
.navigation ul li:hover .submenu {
    display: block; /* Muestra el submenú */
}