/* --- Estilos Generales y Reseteo --- */
nav {
    background-color: #333; /* Fondo oscuro para el menú */
    font-family: Arial, sans-serif;
}

nav ul {
    list-style: none; /* Elimina los puntos de la lista */
    margin: 0;
    padding: 0;
    display: flex; /* Flexbox para layout horizontal en escritorio */
    justify-content: center; /* Centra los elementos principales */
}

nav li {
    position: relative; /* Es clave para posicionar el submenú */
}

nav a {
    display: block; /* Hace que el enlace ocupe todo el espacio del li */
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #555;
}

/* --- Estilos del Submenú (Nivel 2) --- */
nav ul ul {
    /* Por defecto, el submenú está oculto */
    display: none; 
    
    /* Configuración clave para el despliegue */
    position: absolute;
    top: 100%; /* Empieza justo debajo del elemento padre */
    left: 0;
    width: 200px; /* Ancho fijo para el submenú desplegable */
    background-color: #444; /* Color de fondo distinto para el submenú */
    
    /* En escritorio, queremos que los subelementos estén apilados */
    flex-direction: column; 
    align-items: flex-start;
    z-index: 10; /* Asegura que el menú esté por encima de otros elementos */
}

nav ul ul li {
    width: 100%; /* Cada elemento del submenú ocupa el ancho de la caja */
}

/* --- Mostrar el submenú al pasar el ratón (Escritorio) --- */
nav li:hover > ul {
    display: flex; /* Usa 'flex' para mostrar el submenú verticalmente */
}


/* =========================================
   MEDIA QUERY: Estilos para Móviles (Pantallas pequeñas) 
   ========================================= */

@media (max-width: 768px) {
    
    /* El menú principal se apila verticalmente */
    nav ul {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* El submenú ya no necesita ser 'absolute' y se muestra alineado */
    nav ul ul {
        position: static; /* Cambia a flujo normal del documento */
        width: 100%;
        background-color: #3d3d3d; /* Un color ligeramente diferente para distinguirlo */
        
        /* Ocultar en móvil y luego mostrar con JS/Checkbox, o mantenerlo plegado: */
        display: none; 
    }
    
    /* En móvil, se muestra el submenú al hacer hover (aunque es mejor con JS/Toggles) */
    nav li:hover > ul {
        display: flex; /* Aparece en hover, pero funciona mejor con taps y JS */
        flex-direction: column;
    }
    
    /* Estilo para los enlaces del submenú en móvil */
    nav ul ul a {
        padding-left: 40px; /* Añade indentación para indicar que es un submenú */
    }
}