/* ELIMINA ESPACIOS POR DEFECTO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* VARIABLES: Paleta de colores globales del proyecto */
:root {
    --color-principal: #00a8cc;
    --color-secundario: #f8f9fa;
    --color-texto: #2c3e50;
    --color-acento: #ff85a2;
    --blanco: #ffffff;
}

/* BARRA: Contenedor principal con sombra y borde inferior */
.barra_menu {
    background-color: var(--blanco);
    border-bottom: 3px solid var(--color-principal);
    font-family: 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* LISTA: Alineación horizontal y centrado de opciones */
.lista_menu {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ITEMS: Referencia de posición para los submenús */
.lista_menu > li {
    position: relative;
}

/* ENLACES: Estilo, espaciado y transición de botones principales */
.lista_menu > li > a, 
.menu_desplegable {
    display: block;
    padding: 20px 25px;
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

/* HOVER: Efecto visual al pasar el cursor sobre el menú */
.lista_menu > li:hover > a, 
.menu_desplegable:hover {
    color: var(--color-principal);
    background-color: var(--color-secundario);
}

/* DESPLEGABLES: Estilo base oculto para niveles 1 y 2 */
.lista_desplegable, 
.lista_desplegable_subtemas {
    position: absolute;
    background-color: var(--blanco);
    list-style: none;
    display: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 100;
}

/* NIVEL 1: Posicionamiento vertical bajo el menú principal */
.lista_desplegable {
    top: 100%;
    left: 0;
    min-width: 250px;
    border-top: 2px solid var(--color-principal);
}

/* SEPARADOR: Línea divisoria entre opciones internas */
.lista_desplegable li {
    border-bottom: 1px solid #f0f0f0;
}

/* LINKS INTERNOS: Tamaño y relleno de las subopciones */
.lista_desplegable li a, 
.subtemas {
    color: var(--color-texto);
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    font-size: 14px;
    cursor: pointer;
}

/* HOVER INTERNO: Resaltado de subtemas seleccionados */
.lista_desplegable li:hover > a, 
.subtemas:hover {
    background-color: var(--color-principal);
    color: var(--blanco);
}

/* SUBTEMAS: Relativo para el tercer nivel lateral */
.subtemas {
    position: relative;
}

/* NIVEL 2: Desplazamiento lateral hacia la derecha */
.lista_desplegable_subtemas {
    left: 100%;
    top: 0;
    min-width: 300px;
    border-left: 3px solid var(--color-acento);
}

/* VISIBILIDAD: Activa el display al hacer hover en los padres */
.menu_desplegable:hover > .lista_desplegable,
.subtemas:hover > .lista_desplegable_subtemas {
    display: block;
}