/**
 * ============================================================
 * ⚠️  LEGACY — NO USAR EN CÓDIGO NUEVO
 * ============================================================
 * 
 * Este archivo es para compatibilidad con templates legacy que
 * usan las clases .informe-home-header, .informe-single-header-fullwidth, etc.
 * 
 * Para código nuevo, usar:
 * - .informe-header-main (header-main.css)
 * - .informe-header-topbar (header-topbar.css)
 * 
 * TODO: Eliminar cuando todos los templates estén migrados.
 * 
 * ============================================================
 * 
 * HEADER SYSTEM - SISTEMA UNIFICADO GLOBAL (LEGACY)
 * 
 * Phase C CSS refactor – 2025-12-09
 * 
 * CONTEXT: Estilos para headers legacy (home-header, single-header-fullwidth)
 * 
 * NOTA: Los estilos de logo-wrap están en logo-wrap.css
 */

/* ======================================================
   1. HEADER WRAPPER (Contenedor principal)
   IDÉNTICO en todas las plantillas
====================================================== */
.informe-home-header {
    background: #fff !important;
    border-bottom: none !important;
    padding: var(--space-2) 0 var(--space-1) 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.informe-single-header-fullwidth {
    background: #fff !important;
    border-bottom: 1px solid #e9e9e9 !important;
    padding: var(--space-2) 0 var(--space-1) 0 !important; /* 8px 0 4px 0 - IDÉNTICO */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ======================================================
   2. LOGO WRAP — ESTILOS MOVIDOS A logo-wrap.css
   Ver: 4-components/logo/logo-wrap.css
====================================================== */

/* ======================================================
   3. SECCIÓN: Tags / Submenu (Misma altura y padding)
   .informe-home-header__topics-wrapper (contenido: tags)
   .submenu-etiquetas-dinamico
   .informe-single-header-cat (en archive)
====================================================== */

/* WRAPPER de tags */
.informe-home-header__topics-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: var(--space-2) 0 !important; /* 8px vertical - IDÉNTICO */
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #e9e9e9 !important;
    box-sizing: border-box !important;
    min-height: auto !important; /* Sin altura fija - se ajusta al contenido */
}

/* NOTA: Los estilos de .informe-single-header-cat están en header-single.css
 * para evitar conflictos y mantener especificidad correcta */

/* Cuando tiene slider activo */
.informe-home-header__topics-wrapper.has-slider {
    padding: var(--space-2) 0 !important; /* Mantener 8px vertical */
}

/* NOTA: Los estilos de .submenu-etiquetas-dinamico están en header-single.css */

/* CONTENIDO interno (tags) */
.informe-home-header__topics {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 14px !important; /* IDÉNTICO */
    padding: 0 12px !important; /* IDÉNTICO - 12px lateral */
    margin: 0 !important;
    list-style: none !important;
    align-items: center !important;
    justify-content: center !important; /* Desktop: centrado */
    min-height: auto !important;
}

/* NOTA: Los estilos de .submenu-etiquetas-dinamico están en header-single.css
 * Este archivo solo maneja estilos genéricos del header system.
 */

/* LINKS dentro de topics (categorías) */
.informe-home-header__topics a {
    font-family: var(--font-sans);
    font-size: .6875rem;
    line-height: 1.18;
    color: #000;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: .00625rem;
    padding: .9375rem .5625rem;
    margin: 0 !important;
    text-decoration: none;
    display: inline-block !important;
    transition: color var(--transition-fast);
}

.informe-home-header__topics a:hover {
    color: var(--color-primary);
}

/* NOTA: Los estilos de .submenu-etiquetas-dinamico a están en header-single.css */

/* ======================================================
   4. HEADER CATEGORY (en single/archive)
   Misma altura que tags-wrapper
====================================================== */
.informe-single-header-cat {
    padding: var(--space-2) 0 !important; /* 8px vertical - igual que tags-wrapper */
    margin: 0 !important;
}

/**
 * Phase C: Header category - Tipografía sin !important
 * Usa utility classes implícitamente (valores alineados con utilities-typography.css)
 */
.informe-header-category {
    /* Tipografía - SIN !important (Phase B eliminó globales peligrosos) */
    font-family: var(--font-serif);
    font-weight: var(--font-weight-black);
    font-size: 26px; /* Tamaño específico del header, no usa variable */
    color: var(--color-text-base);
    text-decoration: none;
    line-height: 1.2;
    
    /* Layout - CON !important (necesario para compatibilidad con plugins) */
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 4px !important;
}

/* ======================================================
   5. HEADER EDITORIAL (contenedor de cat + submenu)
   NOTA: Los estilos específicos de .informe-single-header-editorial, 
   .informe-single-header-context y .submenu-etiquetas-dinamico
   están en header-single.css. Este archivo solo maneja estilos 
   genéricos del header system (logo-wrap, tags-wrapper).
====================================================== */

/* ======================================================
   RESPONSIVE - TABLET (max-width: 1024px)
   MANTENER CONSISTENCIA
====================================================== */
@media (max-width: 1024px) {
    /* Header wrapper - mismo padding */
    .informe-home-header,
    .informe-single-header-fullwidth {
        padding: var(--space-2) 0 var(--space-1) 0 !important;
    }
    
    /* Logo: ver logo-wrap.css */
    
    /* Topics - mismo padding */
    .informe-home-header__topics-wrapper,
    .informe-single-header-cat {
        padding: var(--space-2) 0 !important;
    }
    
    .informe-home-header__topics a {
        padding: .9375rem .25rem;
    }
}

/* ======================================================
   RESPONSIVE - MOBILE (max-width: 768px)
   MANTENER CONSISTENCIA
====================================================== */
@media (max-width: 768px) {
    /* Header wrapper */
    .informe-home-header,
    .informe-single-header-fullwidth {
        padding: var(--space-1) 0 var(--space-1) 0 !important;
    }
    
    /* Logo: ver logo-wrap.css */
    
    /* Topics */
    .informe-home-header__topics-wrapper {
        padding: var(--space-2) 0 !important;
    }
    
    .informe-home-header__topics {
        justify-content: flex-start !important;
        padding-left: 15px !important;
        padding-right: 12px !important;
        gap: 18px !important;
    }
    
    .informe-home-header__topics a {
        padding: .9375rem .5625rem;
    }
}