/*
 * Archivo: /src/css/menu_principal.css
 * Objetivo: Estilos para el layout principal, header y menú lateral.
 * Creado por: Julio Rueda (con asistencia de IA)
 * Fecha: 2025-09-01
 */

/* ------------------------------------------- */
/* --- CONTENEDOR PRINCIPAL DE LA PÁGINA --- */
/* ------------------------------------------- */
.page-container {
    display: flex;
    /* Altura total de la ventana menos la altura del header (ej. 60px) */
    min-height: calc(100vh - 60px); 
}

/* ------------------------------------------- */
/* --- HEADER Y BARRA DE NAVEGACIÓN SUPERIOR --- */
/* ------------------------------------------- */
#main-header {
    background-color: var(--col-oscuro);
    color: var(--arena-claro);
    padding: 0 1em;
    height: 60px; /* Altura fija para el header */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: sticky; /* Fija el header en la parte superior */
    top: 0;
    z-index: 1001; /* Z-index alto para que esté por encima de todo */
}

#main-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Contenedor para los elementos de la izquierda */
#main-header .header-left {
    display: flex;
    align-items: center;
    gap: 1em; /* Espacio entre el botón y el título */
}

/* Contenedor para los elementos de la derecha */
#main-header .header-right {
    display: flex;
    align-items: center;
    gap: 1em; /* Espacio entre los botones y el nombre de usuario */
}

#main-header .toggle-btn {
    background: none;
    border: 1px solid var(--marron-medio);
    border-radius: 5px;
    font-size: 20px;
    color: var(--arena-claro);
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

#main-header .toggle-btn:hover {
    background-color: var(--borde-ok);
}

#main-header .system-title {
    margin: 0;
    font-size: 1.5em;
    font-weight: 300; /* Fuente más ligera */
    white-space: nowrap;
}

/* ------------------------------------------- */
/* --- MENÚ LATERAL (SIDEBAR) --- */
/* ------------------------------------------- */
.sidebar-menu {
    width: 250px;
    background-color: var(--text-main);
    color: var(--arena-claro);
    padding: 1em;
    box-shadow: 2px 0 5px rgba(54, 82, 44, 0.2);
    flex-shrink: 0;
    transition: width 0.3s ease, padding 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden; /* Evita scroll horizontal al colapsar */
}

/* Estado colapsado del sidebar */
.sidebar-menu.collapsed {
    width: 0;
    padding: 1em 0;
    overflow: hidden;
}

.sidebar-menu .sidebar-title {
    color: var(--light-yellow);
    text-align: center;
    margin-bottom: .5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--marron-claro);
    white-space: nowrap;
}

.sidebar-menu .menu-group {
    margin-bottom: 0.8em;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--marron-oscuro);
}

.sidebar-menu .menu-toggle {
    background-color: var(--col-oscuro);
    color: var(--arena-claro);
    padding: 0.8em 1em;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.sidebar-menu .menu-toggle:hover {
    background-color: var(--verde-salvia);
}

.sidebar-menu .arrow {
    transition: transform 0.3s ease;
}

.sidebar-menu .menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--marron-claro);
    max-height: 0; /* Por defecto colapsado */
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.sidebar-menu .menu-items.expanded {
    max-height: 500px; /* Altura para expandir */
}

.sidebar-menu .menu-items li a {
    display: block;
    padding: 0.8em 1.5em;
    color: var(--texto-oscuro);
    text-decoration: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.sidebar-menu .menu-items li a:hover {
    background-color: var(--naranja-suave);
}


/* ------------------------------------------- */
/* --- CONTENIDO PRINCIPAL (MAIN) --- */
/* ------------------------------------------- */
.main-content {
  flex-grow: 1; /* Ocupa todo el espacio restante */
  padding: .2em;
  background-color: var(--arena-claro);
  overflow-y: auto; /* Permite scroll si el contenido es muy largo */
}

/* ------------------------------------------- */
/* --- RESPONSIVIDAD PARA MÓVILES --- */
/* ------------------------------------------- */
@media (max-width: 368px) {
    #main-header .system-title {
        display: none; /* Oculta el título en móviles para más espacio */
    }

    .page-container {
        flex-direction: column;
    }

    .sidebar-menu {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    
    .sidebar-menu.collapsed {
        height: 0;
        padding: 0;
    }
}



@media (max-width: 768px) {
    #main-header .system-title {
        display: none; /* Oculta el título en móviles para más espacio */
    }

    .page-container {
        flex-direction: column;
    }

    .sidebar-menu {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    
    .sidebar-menu.collapsed {
        height: 0;
        padding: 0;
    }
}

@media (max-width: 992px) {
    
    /* * Resetea el contenedor principal de la página (de index.php)
     * para que ocupe el 100% del ancho, sin márgenes. */
    .page-wrapper {
        max-width: none; /* Anula cualquier max-width */
        margin: 0;
        padding: 0;
    }

    /* * Resetea la barra de navegación para que ocupe el 100% */
    .navbar-container {
        max-width: none; /* Anula el 'max-width: 1600px' */
        margin: 0;       /* Anula el 'margin: 0 auto' */
        border-radius: 0;/* Opcional: quita bordes redondeados */
    }

    /* * Resetea el contenedor del contenido principal */
    .content-wrapper {
        max-width: none; /* Anula el 'max-width: 1600px' */
        margin: 0;
        border-radius: 0;
    }
}

.system-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light para que se vea fino como en la foto */
    font-size: 1.1rem;
    color: var(--arena-claro);
}