/**
 * HEADER SINGLE - Estilos específicos para single post header
 * 
 * Phase C CSS refactor – 2025-12-09
 * 
 * CHANGES IN PHASE C/E:
 * - Reducidos !important en tipografía (ahora que eliminamos globales peligrosos)
 * - Mantenidos !important en layout/positioning (necesarios para compatibilidad con plugins)
 * - Alineado con utilities-typography.css donde es posible
 * 
 * ESTADO (Phase E - Standalone):
 * - Tema independiente sin dependencia de Hello Elementor
 * - Estilos globales: Ya NO depende de h1-h6 globales (eliminados en Phase B)
 * - !important reducido al mínimo necesario para compatibilidad
 */

/* ======================================================
   HEADER SINGLE - WRAPPER PRINCIPAL
====================================================== */

.informe-single-header {
    padding: var(--space-2) 0 var(--space-1) 0 !important;
    box-sizing: border-box;
}

/* ======================================================
   HEADER SINGLE - LOGO WRAP
   NOTA: Los estilos del logo-wrap están en module-home-header.css
   para mantener consistencia en todo el sitio. No agregar estilos aquí.
====================================================== */

/* ======================================================
   HEADER SINGLE - FILA 2: Header editorial
====================================================== */

.informe-single-header-fullwidth {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space-2) 0 !important;
    padding-top: 2.375rem !important;
    box-sizing: border-box;
}

.informe-single-header-editorial {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--header-padding-desktop, 20px);
    padding-right: var(--header-padding-desktop, 20px);
    gap: 16px; /* Reducido de 24px a 16px para dar más espacio al context */
    width: 100%;
    max-width: var(--header-max-width, 1320px);
    margin: 0 auto;
    box-sizing: border-box;
}

/* Aumentar especificidad para evitar conflictos - Estilo El País SINGLE (.w_t - small) */
.informe-single-header-editorial > .informe-single-header-cat {
    flex: 1 1 auto;
    display: block;
    border-bottom: .0625rem solid #4a4a4a; /* 1px - El País borde fino */
    padding: 0;
    padding-bottom: .5rem; /* 8px - El País */
    min-width: 0; /* Necesario para flex shrink */
    width: auto;
    max-width: none;
    position: relative; /* Para el ::after */
    border-top: none; /* Sin borde superior en single */
    padding-top: 0; /* Sin padding superior en single */
}

/* ::after - Línea negra gruesa como El País */
.informe-single-header-editorial > .informe-single-header-cat::after {
    content: "";
    height: .125rem;                  /* 2px - El País */
    width: 8.25rem;                   /* 132px - El País */
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000;                 /* El País */
}

/* SINGLE - Header cat: Desktop */
.informe-single-header-editorial > .informe-single-header-cat > .informe-header-category,
.informe-single-header-editorial .informe-single-header-cat .informe-header-category {
    color: #000;
    font-family: MajritTx, serif;
    font-weight: 900;
    font-size: 2.125rem;
    line-height: var(--lh-title-base);  /* 1.15 */
    letter-spacing: -.0375rem;
    text-decoration: none;
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 0;
    white-space: normal; /* Permitir wrap para palabras muy largas */
    word-break: break-word;
    max-width: none;
}

.informe-single-header-context {
    flex: 1;
    min-width: 0; /* CRÍTICO: permite que el flex se encoja correctamente */
    text-align: right;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0;
}

.informe-single-header-context nav,
.informe-single-header-context ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Mobile styles movidos al bloque responsive más abajo */

/* ======================================================
   SUBMENU ETIQUETAS DINAMICO (del shortcode)
====================================================== */

.submenu-etiquetas-dinamico {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    background: transparent;
    width: 100%;
}

.submenu-etiquetas-dinamico ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.submenu-etiquetas-dinamico li {
    margin: 0;
    padding: 0;
}

/* Limitar a máximo 8 items visibles - ocultar desde el 9no en adelante */
.submenu-etiquetas-dinamico li:nth-child(n+9) {
    display: none;
}

/**
 * Phase C: Tipografía sin !important (ya no hay globales peligrosos)
 * Alineado con .informe-home-header__topics a
 */
.submenu-etiquetas-dinamico a {
    /* Tipografía - SIN !important (Phase B eliminó globales peligrosos) */
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1px; /* Unificado con sde-home-header__topics a */
    font-size: 0.68rem; /* Unificado con sde-home-header__topics a en escritorio */
    text-decoration: none;
    color: var(--color-text-base);
    line-height: 1.2;
}

.submenu-etiquetas-dinamico a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* --- TABLET (769px - 1024px): scroll horizontal, flex-start --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .submenu-etiquetas-dinamico.submenu-categories {
        padding: 0;
    }

    .submenu-etiquetas-dinamico {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding: 8px 0;
        scrollbar-width: thin;
    }
    
    .submenu-etiquetas-dinamico ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }
    
    .submenu-etiquetas-dinamico li {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* --- MOBILE (max-width: 768px): scroll horizontal, flex-start --- */
@media (max-width: 768px) {
    .submenu-etiquetas-dinamico.submenu-categories {
        padding: 0;
    }

    /* Estilos del wrapper (equivalente a sde-home-header__topics-wrapper) */
    .submenu-etiquetas-dinamico {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0;
        justify-content: flex-start;
        padding: 1.375rem 0.1875rem 0 0.1875rem;
    }
    
    /* Estilos del ul (scroll horizontal: nowrap) - padding-bottom aquí */
    .submenu-etiquetas-dinamico ul {
        display: flex;
        justify-content: flex-start;
        gap: 18px;
        padding-left: 0;
        padding-right: 0;
        padding-top: 3px;
        padding-bottom: 0.875rem;
        white-space: nowrap;
        flex-wrap: nowrap;
        margin: 0;
    }
    
    .submenu-etiquetas-dinamico a {
        font-size: 0.6875rem;
        line-height: 1.18;
        color: #000;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 1.375rem 0.1875rem;
        letter-spacing: 0.00625rem;
    }
}

/* Estilos unificados con sde-home-header__topics a - ya aplicados arriba */

/* ======================================================
   FIX RESPONSIVE HEADER EDITORIAL PARA SINGLE
   ====================================================== */

/* --- MOBILE FIRST (max-width: 768px) --- */

@media (max-width: 768px) {

    /* Wrapper fullwidth en mobile - sin padding lateral (controlado por sde-single-wrapper) */
    .informe-single-header-fullwidth {
        padding-top: 1.5rem !important;
        padding-left: 0 !important; /* Sin padding lateral - controlado por sde-single-wrapper */
        padding-right: 0 !important; /* Sin padding lateral - controlado por sde-single-wrapper */
        max-width: 100%;
        margin: 0; /* Sin margin - controlado por sde-single-wrapper */
        box-sizing: border-box;
    }

    /* Header editorial en mobile - padding lateral controlado por variables */
    .informe-single-header-editorial {
        width: 100%;
        padding-left: var(--header-padding-mobile, 16px);
        padding-right: var(--header-padding-mobile, 16px);
        margin: 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Categoría ocupa todo el ancho, texto a la izquierda - especificidad aumentada */
    .informe-single-header-editorial > .informe-single-header-cat,
    .informe-single-header-editorial .informe-single-header-cat {
        width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        padding: 0 !important; /* Eliminado padding lateral - controlado por sde-single-wrapper */
        border-bottom: .0625rem solid #4a4a4a !important; /* 1px - El País */
        padding-bottom: .5rem !important; /* 8px - El País */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 30px !important;
        overflow: visible !important; /* Quitar scroll - mostrar término completo */
        overflow-x: visible !important; /* Quitar scroll horizontal */
        overflow-y: visible !important; /* Quitar scroll vertical */
        position: relative !important; /* Para el ::after */
    }
    
    /* ::after en mobile también */
    .informe-single-header-editorial > .informe-single-header-cat::after {
        display: block !important;
    }

    .informe-single-header-editorial > .informe-single-header-cat > .informe-header-category,
    .informe-single-header-editorial .informe-single-header-cat .informe-header-category {
        font-size: 1.5rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: -.0375rem !important;
        text-transform: none !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: normal !important; /* Permitir que el texto se ajuste en múltiples líneas si es necesario */
        word-wrap: break-word !important; /* Permitir que palabras largas se partan */
        overflow-wrap: break-word !important; /* Asegurar que el texto se vea completo */
    }

    /* Submenú pasa abajo, ancho completo */
    .informe-single-header-editorial .informe-single-header-context {
        width: 100% !important;
        max-width: 100% !important; /* Mobile: respetar ancho del contenedor */
        flex: 1 1 100%;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        text-align: left !important; /* Alineado a la izquierda en mobile */
        box-sizing: border-box !important;
    }
    
    /* Quitar margin-top cuando tiene slider */
    .informe-single-header-editorial .informe-single-header-context.has-slider {
        margin-top: 0 !important;
    }

    .informe-single-header-editorial .informe-header-contextual {
        justify-content: flex-start !important;
        width: 100%;
    }

    .informe-single-header-editorial .informe-single-header-context ul {
        display: flex;
        flex-wrap: nowrap !important; /* SIEMPRE una sola línea */
        white-space: nowrap !important; /* Forzar una sola línea */
        gap: 12px;
        margin: 0 !important;
        padding-left: 0 !important; /* Mobile: SIN padding left */
        padding-right: 0 !important; /* Mobile: SIN padding right */
        overflow-x: auto;
        scroll-snap-type: x proximity;
        width: 100% !important;
        max-width: 100% !important; /* Mobile: respetar ancho del contenedor */
        box-sizing: border-box !important;
    }

    .informe-single-header-editorial .informe-single-header-context li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .informe-single-header-editorial .submenu-etiquetas-dinamico {
        width: 100% !important; /* Mobile: 100% del ancho del context */
        max-width: 100% !important; /* Mobile: respetar ancho del contenedor */
        justify-content: flex-start !important; /* alineado a la izquierda en mobile */
        padding: 1.375rem 0.1875rem 0 0.1875rem !important; /* Sin padding-bottom, va al ul */
        margin-left: 0 !important; /* Mobile: SIN margin left */
        margin-right: 0 !important; /* Mobile: SIN margin right */
        box-sizing: border-box !important;
        overflow-x: auto !important; /* Mobile: permitir scroll horizontal si es necesario */
    }
    
    /* Etiquetas: li/a en mobile */
    .informe-single-header-editorial .submenu-etiquetas-dinamico a {
        font-size: 0.6875rem;
        line-height: 1.18;
        color: #000;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 1.375rem 0.1875rem;
        letter-spacing: 0.00625rem;
    }
}

/* --- TABLET (769px – 1024px): dos columnas con scroll horizontal --- */

@media (min-width: 769px) and (max-width: 1024px) {

    .informe-single-header-editorial {
        display: flex;
        align-items: flex-end;
        gap: 24px;
        padding-left: var(--header-padding-tablet, 20px);
        padding-right: var(--header-padding-tablet, 20px);
        max-width: var(--header-max-width, 1320px);
        margin: 0 auto;
    }

    .informe-single-header-editorial .informe-single-header-cat {
        flex: 0 0 auto; /* No crecer, tamaño natural */
        min-width: 0;
        max-width: 40%; /* Reducido para dar más espacio al submenú */
    }

    /* CONTENIDO DERECHA - scroll horizontal como mobile */
    .informe-single-header-editorial .informe-single-header-context {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left; /* Alineado a la izquierda */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0;
    }

    .informe-single-header-editorial .informe-header-contextual {
        justify-content: flex-start !important; /* Alineado a la izquierda */
    }

    .informe-single-header-editorial .informe-single-header-context ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .informe-single-header-editorial .informe-single-header-context li {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    /* SUBMENÚ ETIQUETAS - scroll horizontal, alineado a la izquierda */
    .informe-single-header-editorial .submenu-etiquetas-dinamico {
        width: 100%;
        max-width: none;
        overflow-x: auto;           /* Scroll horizontal */
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;        /* Una sola línea */
        display: flex;
        justify-content: flex-start; /* Alineado a la izquierda */
        box-sizing: border-box;
        scrollbar-width: thin;
    }
    
    .informe-single-header-editorial .submenu-etiquetas-dinamico ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .informe-single-header-editorial .submenu-etiquetas-dinamico li {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ==========================================================
   HEADER SINGLE - TÍTULO, EXCERPT, META (PR5b)
   Movido desde pages/single.css
========================================================== */

.informe-meta--separator {
    color: var(--color-gray-400);
    font-size: var(--font-size-xs);
}

.informe-meta--updated {
    color: var(--color-gray-400);
    font-style: italic;
}

/**
 * Phase C: Título del artículo - Tipografía sin !important
 * Alineado con utilities-typography.css (valores similares a .informe-heading--xl)
 */
.informe-article__title {
    font-family: var(--font-serif);
    font-size: 1.875rem;
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-hero);
    font-weight: var(--fw-title-featured);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
}

/* Título del single post */
.informe-single-title {
    font-family: var(--font-serif);
    font-size: 1.875rem;
    line-height: 1.1;
    letter-spacing: -0.0675rem;
    font-weight: var(--fw-title-featured);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
}

@media (max-width: 768px) {
    .informe-article__title {
        font-size: var(--fs-title-base);
        line-height: var(--lh-title-base);
    }

    .informe-single-title {
        font-size: 1.875rem;
        line-height: 1.1;
        letter-spacing: -0.0675rem;
    }
}

/* Excerpt/Bajada - Mobile */
.informe-article__excerpt,
.informe-single-excerpt {
    font-family: MajritTxRoman, serif;
    font-weight: 400;
    font-size: 1.3125rem;
    line-height: 1.19;
    letter-spacing: -.005625rem;
    color: #111;
    margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
    .informe-article__excerpt,
    .informe-single-excerpt {
        margin: 1.6875rem 0 0;
    }
}

.informe-article__excerpt p,
.informe-single-excerpt p {
    margin: 0;
}

@media (min-width: 769px) {
    .informe-article__excerpt,
    .informe-single-excerpt {
        font-size: 1.5625rem;
        line-height: 1.16;
        letter-spacing: -.00625rem;
        margin-top: 1.8125rem;
    }
}

/* Meta Primary Tag (actual) */
.informe-meta-primary-tag {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);            /* .6875rem - 11px */
    font-weight: var(--fw-meta);          /* 500 */
    letter-spacing: var(--ls-meta);       /* .0125rem */
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: var(--space-3);
}

@media (max-width: 768px) {
    .informe-meta-primary-tag {
        font-size: 0.8125rem;
        line-height: 1.15;
        text-transform: uppercase;
        font-family: MarcinAntB, sans-serif;
        font-weight: 400;
        padding-left: var(--space-6) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .informe-meta-primary-tag {
        padding-left: var(--space-10) !important;
    }
}

/* Byline (autor + share) - Claude */
.informe-article__byline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    border-top: var(--border-width-thin) solid var(--color-border-light);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    margin-bottom: var(--space-6);
}

.informe-article__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.informe-article__author-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
}

.informe-article__share {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Share buttons: ver single-meta-block.css */

/* --- DESKTOP (min-width: 1025px) --- */
@media (min-width: 1025px) {
    .informe-single-header-editorial .informe-single-header-cat {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 60%; /* Más espacio para categorías largas */
    }

    .informe-single-header-editorial .informe-single-header-context {
        flex: 1 1 auto;
        min-width: 0; /* CRÍTICO: permite que el flex se encoja correctamente */
        text-align: right;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0;
        margin-left: 10rem;
    }

    .informe-single-header-editorial .informe-header-contextual {
        justify-content: flex-end !important;
    }

    .informe-single-header-editorial .informe-single-header-context ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .informe-single-header-editorial .informe-single-header-context li {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
}