/*
	
	css/main.css
	Este será el archivo principal que importará todos los demás. Además, contendrá todas las media queries para el diseño responsivo, priorizando la experiencia móvil.

	**Consideraciones Adicionales y Justificación de la División:**

	1.  **Modularidad:** Cada archivo se enfoca en una parte específica de la interfaz, lo que facilita encontrar y modificar estilos sin afectar otras áreas.
	2.  **Mantenimiento:** Cuando necesites cambiar un color, solo vas al archivo `_variables.css`. Si necesitas ajustar un botón, vas a `_buttons.css`.
	3.  **Legibilidad:** Archivos más pequeños son más fáciles de leer y entender.
	4.  **Colaboración:** Múltiples desarrolladores pueden trabajar en diferentes archivos CSS sin conflictos constantes.
	5.  **Mobile First:** Las media queries en `main.css` están estructuradas para comenzar con los estilos para dispositivos móviles más pequeños y luego expandirse para pantallas más grandes. Esto asegura que el diseño sea adaptable desde el principio.
	6.  **`main.css` como orquestador:** Este archivo solo se encarga de importar los demás, manteniendo la cascada de estilos organizada y las media queries centrales para un mejor control responsivo.

	La clave es la **organización funcional** de los archivos:

	*   **`base/`**: Contiene los cimientos de tu diseño.
		*   `_reset.css`: Cambios en cómo los navegadores normalizan elementos (raro de tocar después de configurarlo).
		*   `_variables.css`: **Siempre aquí** si quieres cambiar colores, fuentes, radios de borde o sombras globales.
		*   `_typografy.css`: Cambios en los estilos de texto generales (h1, p, etc.) que no son parte de un componente específico.
		*   `_globals.css`: Cambios en el `body` o estilos muy generales que afectan a *toda* la aplicación.

	*   **`components/`**: Cada archivo se enfoca en un tipo de elemento interactivo o recurrente.
		*   `_buttons.css`: **Aquí** si quieres cambiar el aspecto de cualquier botón (`.btn`, `.btn-primary`, etc.).
		*   `_forms.css`: **Aquí** si quieres modificar campos de entrada, etiquetas, checkboxes, o la estructura general de los formularios de autenticación.
		*   `_status-messages.css`: **Aquí** si quieres cambiar el estilo de los mensajes de éxito/error.
		*   `_disabled.css`: **Aquí** si quieres cambiar el aspecto de los elementos deshabilitados (links, ítems de menú).

	*   **`layout/`**: Contiene los estilos de las principales secciones de la página.
		*   `_header.css`: **Aquí** si quieres cambiar la navegación superior, el logo, los enlaces principales de la cabecera o el dropdown de usuario.
		*   `_sidebar.css`: **Aquí** si quieres modificar el menú lateral, sus enlaces, botones o el botón de cerrar.
		*   `_footer.css`: **Aquí** si quieres cambiar el pie de página, sus secciones, iconos sociales o información de contacto.
		*   `_container.css`: **Aquí** si quieres modificar el contenedor principal de la página, sus sombras, padding, o los pseudo-elementos de efecto visual.

	*   **`main.css`**: Este archivo es principalmente para `@import` y **media queries**.
		*   Si necesitas ajustar cómo el diseño se adapta a diferentes tamaños de pantalla, **este es el archivo a modificar** dentro de las `@media` rules correspondientes. No deberías añadir reglas CSS de elementos específicos aquí, sino más bien overrides o ajustes de layout generales para los breakpoints.
		
*/


/* Base */
@import 'base/_reset.css';
@import 'base/_variables.css';
@import 'base/_globals.css';
@import 'base/_typografy.css'; /* ¡CORREGIDO: typography a typografy! */

/* Components */
@import 'components/_buttons.css';
@import 'components/_forms.css';
@import 'components/_status-messages.css';
@import 'components/_disabled.css'; /* Incluye los estilos de deshabilitado */

/* Layout */
@import 'layout/_container.css';
@import 'layout/_header.css';
@import 'layout/_sidebar.css';
/* @import 'layout/_footer.css';*/
@import 'footer.css';

/* --- 👩‍🚀 COMPONENTE: PÍLDORA DE IDENTIDAD (SSO) --- */
.user-nav-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 15px 4px 5px; /* Menos padding a la izquierda para el avatar */
    border-radius: 50px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.user-nav-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
    border-color: var(--math-neon, #00f2ff);
}

.avatar-container-mini {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.nav-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--math-neon, #00f2ff);
}

.status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    background: #00ff88; /* Verde Neón "Online" */
    border-radius: 50%;
    border: 2px solid #050a18;
}

.nav-user-name-text {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: #f8fafc;
}
 


/* --- Responsive Design (Mobile First) --- */

/* Estilos para Mobile (hasta 480px, ya se definen en las bases, aquí refinamos) */
@media (max-width: 480px) {
    body {
        font-size: 0.95em;
    }
    .main-content-header h1 {
        font-size: 2.2em;
    }
    .main-content-header p {
        font-size: 1em;
    }
    .container {
        padding: 15px;
        margin: 15px auto;
    }
    .auth-forms, .user-panel {
        padding: 25px;
    }
    .auth-form h2 {
        font-size: 1.8em;
    }
    .btn {
        padding: 10px 20px;
        font-size: 0.95em;
    }
    .input-group input {
        padding: 10px;
        font-size: 0.95em;
    }
    #sidebar-menu {
        width: 100%; /* El sidebar puede ocupar todo el ancho en pantallas muy pequeñas */
        max-width: 300px; /* Pero con un máximo para no ser demasiado grande */
        left: -100%;
    }
    #sidebar-menu.open {
        left: 0;
    }
    .main-header-nav {
        padding: 10px 15px;
    }
    .logo-link .logo-img {
        height: 45px;
    }
    .dropdown-toggle, .user-nav-pill {
        padding: 6px 12px 6px 4px;
        font-size: 0.9em;
    }
    .nav-user-name-text {
        max-width: 80px; /* Acortamos el nombre si es muy largo en móviles */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dropdown-menu {
        min-width: 150px;
    }
    /* Asegurar centrado de elementos en footer para mobile pequeño */
    .footer-section.about,
    .footer-section.links,
    .footer-section.social {
        text-align: center;
    }
    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .contact-info {
        justify-content: center;
    }
    .social-icons {
        justify-content: center;
        display: flex;
    }
}

/* Tablet Vertical y Móviles Grandes (hasta 768px) */
@media (max-width: 768px) {
    .main-nav-links {
        display: none; /* Oculta los enlaces en pantallas pequeñas por defecto */
        flex-direction: column;
        position: absolute;
        top: 80px; /* Debajo del header */
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        padding: 20px 0;
        z-index: 990;
        animation: slideDownMenu 0.4s ease-out forwards;
    }

    @keyframes slideDownMenu {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .main-nav-links.open {
        display: flex; /* Muestra los enlaces si el menú está abierto */
    }

    .main-nav-links a {
        margin: 10px 0;
        text-align: center;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .main-nav-links a:last-child {
        border-bottom: none;
    }
    .main-nav-links a::after {
        display: none; /* Desactivar el subrayado en mobile */
    }

    .btn-nav-auth {
        margin-left: 0;
        margin-top: 20px;
        width: 80%; /* Hacer el botón más ancho en mobile */
        max-width: 250px;
        align-self: center;
    }

    .mobile-menu-icon {
        display: block; /* Muestra el icono de hamburguesa */
        animation: pulseHamburger 2s infinite ease-in-out;
    }

    @keyframes pulseHamburger {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    .main-content-header h1 {
        font-size: 2.8em;
    }

    .container {
        margin: 20px auto;
        padding: 20px;
    }

    #sidebar-menu {
        width: 280px; /* Ajusta el ancho del sidebar para móviles */
        left: -290px;
    }
    #sidebar-menu.open {
        left: 0;
    }

    .footer-section.about,
    .footer-section.links,
    .footer-section.social {
        text-align: center;
    }
    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .contact-info {
        justify-content: center;
    }
    .social-icons {
        justify-content: center;
        display: flex;
    }
}

/* Tablet Horizontal y Desktops Pequeños (hasta 992px) */
@media (max-width: 992px) {
    .container {
        margin: 30px auto;
        padding: 25px;
    }
    .main-content-header h1 {
        font-size: 3em;
    }
    .auth-form h2 {
        font-size: 2em;
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-section {
        min-width: unset;
        width: 100%;
    }
    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .social-icons {
        margin-bottom: 20px;
    }
}