/* --- styles/components/style-header.css --- */

header {
    position: fixed; 
    top: 0; width: 100%; 
    text-align: center; background: var(--color-header-bg);
    color: var(--color-header-text); z-index: 100; box-sizing: border-box;

    height: auto; 
    min-height: var(--header-height);

    display: block; 
    padding: 0;
    overflow: visible; 
}

#header-content-wrapper {
    position: relative;
    width: 100%; height: 100%;
    max-width: 100vw; /* Límite físico */
    overflow: hidden; /* Corta lo que sobre */

    height: auto; 
    min-height: var(--header-height);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-gap);
    padding: 0; 
    box-sizing: border-box;
}

/* 🟢 Contenedor para botones derechos (Idioma + A11y) */
.header-controls {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
}

header #main-header-title { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-wrap: nowrap;
    
    /* ⭐️ VARIABLE: Tamaño de fuente del título */
    font-size: var(--header-title-size); 
    
    margin: 0; padding: 0; line-height: var(--line-height-base); 
    gap: var(--header-gap); 
    flex-grow: 0;

    width: 100%;
    max-width: calc(100dvw - 2 * var(--header-padding) - 2 * var(--ui-icon-size));
    white-space: nowrap; 
    text-overflow: ellipsis; 
    z-index: 99; 
}

header h1 a {
    outline: none;
    text-decoration: none;
    display: inline-flex; /* Vital: permite que el span interno tenga tamaño */
    align-items: center;
    pointer-events: auto; /* Reactivamos clicks para el enlace */
    height: 100%; /* Asegurar altura */
}

/* LOGO */
.header-logo {
    width: var(--ui-icon-size) !important;
    height: var(--ui-icon-size) !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    position: relative; 
    flex-shrink: 0;
    transition: all var(--animation-speed) ease;

    vertical-align: middle;
}

/* Aplicamos la reducción a las capas de máscara */
.header-logo::before,
.header-logo::after {
    content: '';
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;

    /* 🟢 LA CLAVE: Reducimos el tamaño de la máscara */
    -webkit-mask-size: 55%; mask-size: 55%;
}

/* Capa 1: Parte ESTÁTICA (Gris #999 fijo) */
.header-logo::before {
    background-color: var(--color-logo-static);
    -webkit-mask-image: var(--logo-base-static);
    mask-image: var(--logo-base-static);
}

/* Capa 2: Parte DINÁMICA (Variable según tema/hover) */
.header-logo::after {
    background-color: var(--color-logo-dynamic);
    -webkit-mask-image: var(--logo-base-dynamic);
    mask-image: var(--logo-base-dynamic);
}

/* Efectos Hover/Focus: Cambia SOLO la parte dinámica a Azul */
header h1 a:hover .header-logo::after,
header h1 a:focus-visible .header-logo::after,
header h1 a:focus .header-logo::after {
    background-color: var(--color-primary); 
    filter: drop-shadow(0 0 6px var(--color-shadow-primary));
}
header h1 a:hover .header-logo::after,
header h1 a:focus-visible .header-logo::after,
header h1 a:focus .header-logo::after,
header h1 a:hover .header-logo::before,
header h1 a:focus-visible .header-logo::before,
header h1 a:focus .header-logo::before {
    transform: scale(calc(1 + var(--zoom-focus-major)));
}

/* ICONO OBRAS */
.icon-obras-header {
    display: inline-flex;
    
    /* ⭐️ VARIABLE: Tamaño icono obras */
    width: calc(var(--ui-icon-size) * 0.65) !important;
    height: calc(var(--ui-icon-size) * 0.65) !important;
    
    background-color: var(--color-icon-obras);
    -webkit-mask-image: var(--icon-obras); mask-image: var(--icon-obras);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 65%; mask-size: 65%;
    flex-shrink: 0;
    z-index: 101; 
}

/* --- Botón Hamburguesa --- */
#btn-main-menu {
    flex-shrink: 0 !important;

    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    border: none !important;
    outline: none !important;

    cursor: pointer;
    color: var(--color-header-text); 
    transition: all var(--animation-speed) ease;
    z-index: 101;
}

#btn-main-menu:hover,
#btn-main-menu:focus-visible,
#btn-main-menu:focus {
    color: var(--color-primary); /* currentColor en el span absorberá este cambio */
    background: transparent; 
    transform: scale(calc(1 + var(--zoom-focus-major)));
    filter: drop-shadow(0 0 4px var(--color-shadow-primary));
}

/* --- Máscaras SVG Dinámicas --- */
.icon-hamburger {
    width: 100%;
    height: 100%;
    background-color: currentColor;
}

/* 🟢 Estado 1: Menú Cerrado -> Muestra el icono de "Abrir" */
#btn-main-menu[aria-expanded="false"] .icon-hamburger {
    -webkit-mask: var(--icon-menu-open) no-repeat center / contain;
    mask: var(--icon-menu-open) no-repeat center / contain;
}

/* 🟢 Estado 2: Menú Abierto -> Muestra el icono de "Cerrar" */
#btn-main-menu[aria-expanded="true"] .icon-hamburger {
    -webkit-mask: var(--icon-menu-close) no-repeat center / contain;
    mask: var(--icon-menu-close) no-repeat center / contain;
}

body[data-layout="desktop"] #main-header-subtitle { 
    display: inline-block !important; /* 🟢 LA LLAVE: Forzamos la caja física para que no sea inline puro */
    vertical-align: middle; /* 🎯 Alinea el centro de la caja con el centro tipográfico del padre */
    
    max-width: 30rch;
    width: auto; 
    text-align: left;
    font-size: 0.5em; 
    
    margin-left: 0.8em; 
    margin-top: 0; 
    margin-bottom: 0;

    white-space: normal; 
    line-height: 1.2; 
    
    /* 🟢 AHORA SÍ: Como el elemento ya es una caja física (inline-block), 
       el transform funcionará a la perfección. 
       Ajusta este valor (ej: 0.1em o 0.2em) para el centrado óptico final. */
    transform: translateY(0.1em);
}
body[data-layout="mobile"] #main-header-subtitle,
body[data-layout="tablet-portrait"] #main-header-subtitle,
body[data-layout="tablet-landscape"] #main-header-subtitle {
    display: none !important;
}

body[data-layout="mobile"] header { 
    position: fixed; 
    height: auto;
    min-height: var(--ui-icon-size);

    /* 🟢 FIX: Flexbox para centrar verticalmente el wrapper dentro del header */
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* Centrado vertical del bloque wrapper */

    padding: 0 var(--mobile-card-padding);
}

body[data-layout="mobile"] header h1 {
    position: relative !important; /* Deja de ser absoluto para ocupar espacio real */
    left: auto !important;
    transform: none !important;

    width: auto !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* ⛔️ PROHIBIDO SEPARAR LOGO Y TEXTO */

    align-items: center !important; /* Centrado vertical absoluto */
    justify-content: center !important; /* Centrado horizontal del bloque en la cabecera */

    /* Reset */
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;

    gap: var(--header-gap);
    /*padding: 4px 0 !important;*/
}

/* 🟢 2. El Logo: Blindado para no ser aplastado por el texto */
body[data-layout="mobile"] header h1 a {
    flex-shrink: 0 !important; /* ⛔️ PROHIBIDO ENCOGER EL LOGO */
    display: inline-flex;
    height: auto; 
    vertical-align: middle; 
    align-items: center !important;
}

/* 🟢 FIX: Convertimos el contenedor de texto en Flexbox para alinear sus hijos */
body[data-layout="desktop"] header h1 .title-text-clamp {
    display: flex;
    flex-direction: row;
    align-items: center; /* 🎯 Esto centra matemáticamente 1 o 2 líneas */
    white-space: nowrap; /* Evita que VortexSpira se parta */
}
/* 🟢 2. El Motor de Texto: Se encarga de limitar a 2 líneas y poner los '...' */
body[data-layout="mobile"] header h1 .title-text-clamp {
    /* 🛡️ LA LLAVE MAESTRA: Evita el desbordamiento interno de Flexbox */
    min-width: 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: var(--mobile-header-line-clamp) !important; 
    line-clamp: var(--mobile-header-line-clamp) !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    
    /* Si una sílaba es gigante (400% zoom), la corta limpiamente */
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    
    text-align: left !important; 
    line-height: 1.1 !important; 
    white-space: normal !important; 
}

/* 🟢 3. La Ocultación Visual Semántica (Clase AAA) */
body[data-layout="mobile"] .hide-mobile-visual {
    /* Lo saca del flujo visual para que no ocupe espacio, 
       pero lo mantiene 100% legible para el Lector de Pantallas */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body[data-layout="mobile"] header h1 .header-logo {
    flex-shrink: 0;
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    vertical-align: middle; /* Alinear verticalmente con el texto en modo block */
    margin-right: var(--mobile-header-gap); /* Separación extra ya que 'gap' no funciona en block */
}

/* Usamos GRID para control total del espacio */
body[data-layout="mobile"] #header-content-wrapper {
    display: grid !important;
    grid-template-columns: min-content minmax(0, 1fr) auto !important;
    align-items: center; 
    width: 100%;
    gap: var(--header-gap); 
    padding: 0 var(--mobile-card-padding);
    height: auto !important; 
    min-height: var(--ui-icon-size);
    max-height: calc(2 * var(--ui-icon-size));
}

/* Asegurar que los iconos laterales no se aplasten */
body[data-layout="mobile"] .icon-obras-header {
    grid-column: auto; /* Se colocan automáticamente */
    flex-shrink: 0;
}

/* --- styles/components/style-header.css --- */