/* ======================================================
   CONTENEDOR: Ver 3-layout/containers.css
   (.informe-container definido ahí como fuente única)
====================================================== */

/* ======================================================
   HEADER STICKY
====================================================== */

.informe-header {
    max-width: var(--max-width-container);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    box-sizing: border-box;
    background: var(--color-white);
    border-bottom: var(--border-width-thin) solid var(--color-separator);
    padding: var(--space-2) 0 var(--space-1) 0;
}

/* ======================================================
   LOGO STICKY
====================================================== */

.informe-header-logo-wrap {
    /* ❌ position: sticky; — DESHABILITADO (no funcionaba) */
    top: 0;
    z-index: 999;
    background: #fff;
    text-align: center;
    margin-bottom: 0; /* Eliminado margin-bottom del logo */
    padding-bottom: 0; /* Eliminado padding-bottom del logo */
}

.informe-header-logo {
    display: inline-block;
    text-decoration: none;
}

.informe-header-logo img {
    max-width: 320px; /* A: más compacto */
    width: 100%;
    height: auto;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ======================================================
   TEMAS DESTACADOS
====================================================== */

.informe-header__topics-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px; /* más compacto */
        border-bottom: 1px solid #e9e9e9; /* Separador entre temas y meta */
}

.informe-header__topics {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px; /* B: gap menor */
    padding: 3px 12px; /* B: padding menor */
    white-space: nowrap; /* SIEMPRE una sola línea - genera necesidad de scroll */
    flex-wrap: nowrap; /* Forzar una sola línea */
}

.informe-header__topics a {
    font-family: MarcinAntB, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.82rem;
    text-decoration: none;
    color: #000 !important;
}

.informe-header__topics a:hover {
    color: #EC3335 !important;
}

.informe-header__icon {
    color: #f15a24;
    font-size: 1rem;
}

/* ======================================================
   META INFERIOR (Fecha + Redes)
====================================================== */

.informe-header__meta {
    width: 100%;
        border-top: 1px solid #e9e9e9; /* Separador claro arriba */
        /* border-bottom removido: ya lo maneja header exterior */
    padding: 4px 12px; /* C: más compacto */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.informe-header__date {
    font-family: MarcinAntB, sans-serif;
    text-transform: uppercase;
    font-size: 0.62rem; /* D: aún más pequeño */
    color: #888;
    letter-spacing: 0.5px;
}

/* Redes sociales */
.informe-header__social a {
    margin-left: 16px;
    font-size: 1.15rem;
    color: #EC3335 !important;
    text-decoration: none;
    transition: 0.2s ease;
}

.informe-header__social a:hover {
    color: #000 !important;
}

/* ======================================================
   TABLET
====================================================== */
@media (max-width: 1024px) {

    .informe-header__topics a {
        font-size: 0.74rem;
    }

    .informe-header-logo img {
        max-width: 300px;
    }
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 768px) {

    /* Ocultar fecha + redes */
    .informe-header__meta {
        display: none !important;
    }

    /* Temas hacia la izquierda - mantener una sola línea con scroll */
    .informe-header__topics {
        justify-content: flex-start;
        gap: 18px;
        padding-left: 15px;
        white-space: nowrap; /* Mantener una sola línea */
        flex-wrap: nowrap; /* Forzar una sola línea */
    }

    .informe-header__topics a {
        font-size: 0.72rem;
    }

    .informe-header {
        padding: 6px 0 2px 0; /* también más compacto en mobile */
    }

    .informe-header-logo img {
        max-width: 260px;
    }
}

.informe-header__meta {
    margin-bottom: 0 !important;
}

.informe-header {
    margin-bottom: 2px !important; /* menos espacio antes del contenido principal */
}

/* Estado pegado (opcional, sombra sutil cuando se scroll) */
/* ❌ .informe-header.is-stuck — DESHABILITADO (sticky viejo eliminado) */

/**
 * ELIMINADO PR4: Overrides de .informe-container en media queries
 * 
 * Fuente de verdad: 3-layout/containers.css
 * 
 * Razón: Estos overrides (max-width: 100%, padding: 12px) contradecían la definición
 * canónica que usa --container-padding-mobile (16px). Si header necesita padding
 * diferente, debe aplicarse al elemento .informe-header, no al contenedor global.
 * 
 * Si se necesita ajuste contextual para header:
 * .informe-header .informe-container { padding: 0 12px; }
 */