/* --- Estilos para el Encabezado Principal (Desktop y Móvil) --- */
.main-header {
    background-color: var(--md-sys-color-surface-container);
    padding: 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 900;
    height: 80px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
    /* Transición para el efecto de ocultar/mostrar en móvil */
}

/* Clase para ocultar el header deslizándolo hacia arriba en móvil */
.main-header.is-hidden {}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
}

.header-logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.header-logo-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* --- Logo Styles --- */
.header-logo {
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.logo-cesfam-mini {
    height: 50px;
    width: 50px;
    background-image: url('/archivos/insumos/logo-cesfam-mini/Cesfam Dalcahue Mini.svg');
}

.logo-aps {
    height: 42px;
    width: 90px;
    background-image: url('/archivos/insumos/apsdalcahue/logo.svg');
}

/* --- Dark Mode Logo Styles --- */
.dark .logo-cesfam-mini,
.dark-medium-contrast .logo-cesfam-mini,
.dark-high-contrast .logo-cesfam-mini {
    background-image: none;
    background-color: var(--md-sys-color-tertiary);
    -webkit-mask-image: url('/archivos/insumos/logo-cesfam-mini/Cesfam Dalcahue Mini Mono.svg');
    mask-image: url('/archivos/insumos/logo-cesfam-mini/Cesfam Dalcahue Mini Mono.svg');
}

.dark .logo-aps,
.dark-medium-contrast .logo-aps,
.dark-high-contrast .logo-aps {
    background-image: none;
    background-color: var(--md-sys-color-tertiary);
    -webkit-mask-image: url('/archivos/insumos/apsdalcahue/logo.svg');
    mask-image: url('/archivos/insumos/apsdalcahue/logo.svg');
}


.header-actions {
    display: flex;
    align-items: stretch;
}

/* Navegación de Escritorio (Tabs) */
.desktop-navigation {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}

.nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 1rem;
    min-width: 90px;
    height: 100%;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.nav-tab:hover:not(.active) {
    background-color: var(--md-sys-color-surface-container-highest);
}

@keyframes nav-icon-grade-in {
    from {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    to {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 150, 'opsz' 24;
    }
}

.nav-tab-icon {
    font-size: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    /* transition is removed to make FILL instant */
}

.nav-tab:hover:not(.active) .nav-tab-icon {
    /* Animation provides transition for GRAD while FILL is instant */
    animation: nav-icon-grade-in 0.1s ease-in-out forwards;
}

.nav-tab.active .nav-tab-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.nav-tab-label {
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: currentColor;
}

.nav-tab.active {
    font-weight: 700;
}

/* Colores de identidad (Material Design Extended Colors) */
.nav-tab.nav-item-ubicaciones.active {
    color: var(--md-extended-color-ubicaciones-color);
}

.nav-tab.nav-item-programas.active {
    color: var(--md-extended-color-programas-color);
}

.nav-tab.nav-item-contacto.active {
    color: var(--md-extended-color-contacto-color);
}

.nav-tab.nav-item-about.active {
    color: var(--md-extended-color-about-color);
}

.nav-tab:not(.active) .nav-tab-icon,
.nav-tab:not(.active) .nav-tab-label {
    color: var(--md-sys-color-on-surface-variant);
}

/* Responsividad del Header */
@media (max-width: 768px) {
    .main-header {
        height: 56px;
    }

    .header-content {
        height: 56px;
        justify-content: center;
        position: relative;
    }

    .logo-cesfam-mini {
        height: 40px;
        width: 40px;
    }

    .logo-aps {
        height: 34px;
        width: 72px;
    }

    .header-actions {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .desktop-navigation {
        display: none;
    }
}