/* Estilos generales del menú */
.main-menu
{
    /* Un azul oscuro y moderno */ /*background-color: #2c3e50;     font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif;*/
    background-color: transparent;
}

.main-menu ul
{
    list-style: none;
    margin: 0;
    padding: 0; /* Menú horizontal */
    display: flex; /* Centrar los elementos del menú */
    flex-wrap: wrap; /* Mover elementos a nueva fila cuando ya no caben en el ancho disponible*/
    justify-content: flex-start; /* Alinea los items a la izquierda */
}

.main-menu ul li
{
    /* Clave para posicionar los submenús */
    position: relative;
}

.main-menu ul li a
{
    /* Un color de texto claro */
    color: #ecf0f1;
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efecto hover para los elementos del menú */
.main-menu ul li a:hover
{
    /* Un azul más brillante al pasar el ratón */
    background-color: #3498db;
    color: #fff;
}

/* Estilos para el icono del dropdown */
.dropdown-icon
{
    font-size: 0.8em;
    margin-left: 5px;
    color: #ecf0f1;
}

.main-menu ul li a:hover .dropdown-icon
{
    color: #fff;
}

/* Estilos para los submenús */
.submenu
{
    /* Ocultos por defecto */
    visibility: hidden; /* OCULTA EL ELEMENTO PERO LO MANTIENE EN EL FLUJO */
    opacity: 0;
    
    position: absolute;
    background-color: #34495e;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;

    /* Propiedad de transición mejorada */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
}

/* Muestra el submenú cuando se pasa el ratón O cuando tiene la clase activa para táctil */
.main-menu ul li:hover > .submenu, .main-menu ul li.submenu-active > .submenu
{
    visibility: visible; /* HACE EL ELEMENTO VISIBLE */
    opacity: 1;
    transform: translateY(0);
}

.submenu li
{
    width: 100%;
}

.submenu li a
{
    padding: 12px 15px;
}

.submenu li a:hover
{
    background-color: #4a6572;
}

/* Contenedor principal para alinear los dos menús */
.menu-container
{
    display: flex;
    justify-content: space-between; /* ¡Mágico! Empuja los elementos a los extremos */
    align-items: center; /* Alinea verticalmente los menús */
    background-color: #2c3e50;
    padding: 0 15px; /* Añade un poco de espacio a los lados */ /* --- Propiedades para fijar el menú --- */
    position: fixed; /* Fija el elemento en la ventana del navegador */
    top: 0; /* Lo pega a la parte superior */
    left: 0; /* Lo pega a la parte izquierda */
    width: 100%; /* Asegura que ocupe todo el ancho */
    z-index: 1000; /* Lo pone por encima de casi todo el contenido */
    box-sizing: border-box; /* Evita que el padding aumente el ancho total */
    border-radius: 7px;
}

/* --- Estilos para el Menú de Usuario --- */

.user-menu
{
    position: relative; /* Clave para posicionar el submenú */
    color: #ecf0f1;
}

.user-info
{
    cursor: pointer; /* Indica que se puede hacer clic */
    display: flex;
    align-items: center;
    padding: 15px 10px;
    transition: background-color 0.3s ease;
}

.user-info:hover
{
    background-color: #3498db;
}

.user-icon
{
    font-size: 2em; /* Icono un poco más grande */
    margin-right: 8px;
    background-color: lightsteelblue;
}

/* Submenú del usuario */
.user-submenu
{
    display: none; /* Oculto por defecto */
    position: absolute;
    right: 0; /* Alineado a la derecha */
    top: 100%;
    background-color: #34495e;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10; /* Aseguramos que esté por encima de otros elementos */
    border-radius: 0 0 5px 5px; /* Bordes redondeados abajo */
}

/* Clase 'active' para mostrar el submenú con JS */
.user-menu.active .user-submenu
{
    display: block;
}

.user-submenu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-submenu ul li a
{
    color: #ecf0f1;
    text-decoration: none;
    display: block;
    padding: 12px 20px;
}

.user-submenu ul li a:hover
{
    background-color: #4a6572;
}

html, body, form
{
    height: 100%;
    margin: 0;
    padding: 0;
}

body, form
{
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
}

body
{
    min-height: 100vh; /* La clave para que se extienda a toda la pantalla */
}

#contenido.content
{
    flex-grow: 1; /* ¡La clave! Hace que este div ocupe todo el espacio sobrante */
}

.site-footer
{
    /* Quita todo lo relacionado con position: fixed */
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 15px 0; /* La propiedad flex-shrink: 0; es opcional pero buena práctica */
    flex-shrink: 0; /* Evita que el footer se encoja si el contenido es muy grande */
    border-radius: 7px;
}