/* ==========================================================================
   LAYOUT.CSS - Esqueleto Global (Header / Footer)
   ========================================================================== */

/* --- HEADER (GLASSMORPHISM & STICKY) --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--layout-glass-background);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Soporte Safari */
    border-bottom: 1px solid var(--layout-border-glass);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--layout-large);
    margin: 0 auto;
    padding: calc(var(--layout-margin-space) * 0.5) var(--layout-margin-space);
    min-height: calc(var(--button-size) + var(--layout-margin-space));
}

/* Columnas para centrado matemático en Desktop */
.header-brand {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.header-nav {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* --- MARCA (LEFT) --- */
.brand-link {
    font-family: var(--title-font);
    font-size: var(--size-h4-title);
    font-weight: 700;
    color: var(--title-color);
    text-decoration: none;
    letter-spacing: -0.02em; /* Toque moderno para titulares */
}

/* --- NAVEGACIÓN (CENTER) --- */
.nav-list {
    display: flex;
    gap: var(--layout-margin-space);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    color: var(--color-general-text);
    text-decoration: none;
    font-size: var(--size-general-text);
    font-weight: 500;
    transition: var(--button-transition);
    padding: calc(var(--button-margin-space) * 0.5) 0;
}

.nav-list a:hover {
    color: var(--title-color);
}

/* --- BOTONES Y ACCIONES (RIGHT & MOBILE) --- */
.btn-user-menu,
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--title-color);
    width: var(--button-size);
    height: var(--button-size);
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: var(--button-transition);
    padding: 0;
}

.btn-user-menu:hover,
.mobile-menu-toggle:hover {
    background-color: var(--layout-border-glass);
}

.btn-user-menu:active,
.mobile-menu-toggle:active {
    transform: var(--button-press-transform); /* Física de hundimiento */
}

.mobile-menu-toggle {
    display: none; /* Oculto por defecto en pantallas grandes */
}

/* --- FOOTER --- */
.site-footer {
    border-top: 1px solid var(--layout-border-glass);
    padding: var(--layout-margin-space);
    text-align: center;
    color: var(--color-secondary);
    font-size: var(--size-h8-title);
    margin-top: auto; /* Empuja el footer abajo si el contenido es escaso */
}
/* Para que funcione el margin-top: auto, asegúrate de que body tenga min-height: 100vh y display: flex con flex-direction: column */

/* --- RESPONSIVE (MÓVIL & TABLET) --- */
@media (max-width: 768px) {
    /* Reordenamos: Logo (Izq) -> User (Der) -> Toggle (Der) */
    .header-nav {
        order: 3;
        flex: 0;
    }
    
    .header-actions {
        order: 2;
        flex: 0;
        margin-right: calc(var(--layout-margin-space) * 0.5);
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* El menú pasa a ser un desplegable absoluto bajo el header */
    .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--layout-color-background);
        flex-direction: column;
        padding: var(--layout-margin-space);
        border-bottom: 1px solid var(--layout-border-glass);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); /* Profundidad elegante */
        gap: calc(var(--layout-margin-space) * 0.5);
    }

    .nav-list.is-active {
        display: flex;
    }
}