.header {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(20, 31, 48, 0.35) 18%, rgba(9, 16, 28, 0.62) 74%);
    border: 1px solid rgba(207, 220, 241, 0.27);
    color: #f2f5fb;
    height: 80px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-md);
    box-shadow: 0 14px 30px rgba(2, 8, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    padding: 0 30px;
    max-width: 85%;
    margin: 0 auto 34px;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    gap: 12px;
}

/* Título y botones reparten el sobrante a partes iguales para que la fila de
 * secciones quede centrada en la cabecera, no en el hueco que les dejen. */
.header-title {
    min-width: 0;
    flex: 1 1 0;
}

.header-title h1 {
    font-size: 24px;
    margin: 0;
    letter-spacing: 0.015em;
    white-space: nowrap;
    /* La elipsis exige overflow:hidden, y eso recorta la sombra contra el borde
     * de la caja: el h1 mide 28px de alto y la sombra baja 24px, asi que se
     * cortaba en seco. El relleno le da sitio dentro del recorte y el margen
     * negativo lo descuenta, de modo que nada se mueve de sitio. */
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px 18px;
    margin: 0 -10px -18px;
    /* Mismo esquema que la portada: una capa de contacto corta y una ambiental.
     * Aqui con menos recorrido, que el rotulo es de 24px y no de 40. */
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.5);
}

/* El subtitulo no lleva recorte, pero si la misma sombra: si no, queda plano
   justo debajo de un titulo con relieve. */
.header-title .total {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 5px 10px rgba(0, 0, 0, 0.4);
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
}

/* Saltar de una sección a otra sin pasar por la portada, con los mismos
 * iconos que la portada. Van sin caja, a diferencia de los botones de la
 * derecha: aquellos son acciones de la página, estos son sitios. */
.header-sections {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.header-sections a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    color: rgba(242, 245, 251, 0.6);
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Los iconos son contornos rellenos pensados para verse a 80 px en la
 * portada: a 24 el trazo se queda en poco más de un píxel y sale flaco y
 * dentado. El `stroke` del mismo color lo engorda por fuera sin redibujarlo,
 * y el color va en `currentColor` y no en `opacity`, que obligaba a
 * componer el icono en una capa aparte y lo pixelaba más. */
.header-sections svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0.7;
    stroke-linejoin: round;
    paint-order: stroke;
    shape-rendering: geometricPrecision;
    overflow: visible;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
}

.header-sections a:hover {
    color: #f2f5fb;
    background: rgba(255, 255, 255, 0.07);
}

.header-sections a:focus-visible {
    color: #f2f5fb;
    outline: 2px solid #b7d4ff;
    outline-offset: 2px;
}

/* La sección actual, entera y con una raya debajo en el azul del feed
 * (`#8fb4e8`), el mismo de la insignia de visitas. */
.header-sections a[aria-current] {
    color: #f2f5fb;
}

.header-sections a[aria-current]::before {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: #8fb4e8;
}

.header-nav :is(a, summary) {
    color: #f2f5fb;
    text-decoration: none;
    font-size: 16px;
    margin-left: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(198, 214, 242, 0.16);
    /* Contacto + ambiental fuera, y un filo claro arriba dentro: las tres son
     * las mismas piezas que dan el relieve en la portada, a escala de boton. */
    box-shadow:
        0 2px 3px rgba(2, 8, 18, 0.5),
        0 8px 16px rgba(2, 8, 18, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    flex: 0 0 auto;
}

/* El icono tiene su propia sombra, igual que en la portada: sin ella el trazo
 * se queda pegado al fondo del boton y el relieve se nota a medias. */
.header-nav :is(a, summary) svg {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.header-nav :is(a, summary):hover {
    transform: translateY(-2px);
    border-color: rgba(216, 228, 248, 0.46);
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 5px rgba(2, 8, 18, 0.55),
        0 14px 24px rgba(2, 8, 18, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* Tooltips de la cabecera: el estilo es el común (base.css); aquí solo se
 * bajan, porque encima de la cabecera no hay sitio. */
:is(.header-nav, .header-sections) [data-tip]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
    z-index: 20;
}

@media (hover: hover) and (pointer: fine) {
    :is(.header-nav, .header-sections) [data-tip]:hover::after {
        transform: translate(-50%, 0);
    }
}

:is(.header-nav, .header-sections) [data-tip]:focus-visible::after {
    transform: translate(-50%, 0);
}

/* El último botón pega con el borde derecho: su etiqueta se alinea a la
 * derecha para no salirse de la pantalla. */
.header-nav > [data-tip]:last-child::after {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

@media (hover: hover) and (pointer: fine) {
    .header-nav > [data-tip]:last-child:hover::after {
        transform: none;
    }
}

.header-nav > [data-tip]:last-child:focus-visible::after {
    transform: none;
}

/* Con el panel de herramientas abierto la etiqueta estorbaría encima. */
.header-nav details[open] > [data-tip]::after {
    display: none;
}

/* Contador de visitas ajenas desde Colombia sobre el icono de visitas */
.header-nav :is(a, summary).visits-link {
    position: relative;
    overflow: visible;
}

.total {
    margin: 4px 0 0;
    color: rgba(227, 233, 245, 0.76);
}

@media (max-width: 1080px) {
    .header-container {
        max-width: 100%;
        padding: 0 6px;
    }

    .header {
        max-width: 94%;
        height: auto;
        padding: 12px 14px;
        margin-bottom: 18px;
        border-radius: var(--radius-md);
    }

    .header-title h1 {
        font-size: 18px;
    }

    .header-nav {
        gap: 8px;
    }

    .header-nav :is(a, summary) {
        width: 34px;
        height: 34px;
    }

    .total {
        font-size: 14px;
    }
}

/* En el móvil no caben en la cabecera junto al título y los botones, y en una
 * segunda fila la hacían crecer un 60% y quedaban sueltos. Bajan a una barra
 * fija abajo, como en una app, que es donde está el pulgar.
 *
 * `--tabbar-height` es lo que la barra ocupa; se reserva en el cuerpo para que
 * el pie no quede debajo. `--tabbar-inset` vale lo mismo y es lo que los
 * botones flotantes de news.css y styles.css suman a su `bottom` para quedar
 * encima. Solo existen si la página tiene la barra; la portada no la tiene.
 *
 * Cuando la barra se esconde al bajar (js/tabbar.js pone `.tabbar-hidden` en
 * <html>), los botones flotantes bajan con `translate`, no cambiando esa
 * variable. Antes se animaba `--tabbar-inset` en la raíz, y una variable
 * animada en <html> obliga a recalcular los estilos de toda la página en cada
 * fotograma: en el teléfono se notaba justo al hacer scroll. `translate` lo
 * resuelve la GPU sin tocar la maquetación. */
@media (max-width: 720px) {
    :root:has(.header-sections) {
        --tabbar-height: calc(50px + env(safe-area-inset-bottom, 0px));
        --tabbar-inset: var(--tabbar-height);
    }

    /* Solo los contenedores de primer nivel: los botones de dentro ya se
     * mueven con ellos, y trasladarlos también los bajaría dos veces. */
    :is(.fab-stack, .news-actions-menu, .news-scroll-top) {
        transition: translate 0.25s ease;
    }

    .tabbar-hidden :is(.fab-stack, .news-actions-menu, .news-scroll-top) {
        translate: 0 var(--tabbar-height);
    }

    body:has(.header-sections) {
        padding-bottom: var(--tabbar-height);
    }

    /* El pie va en absoluto al fondo del cuerpo (footer.html), con 130 px de
     * reserva: se suma la barra y el pie se sube lo mismo. */
    body:has(.header-sections):has(.site-footer:not(.site-footer--fixed)) {
        padding-bottom: calc(130px + var(--tabbar-height));
    }

    body:has(.header-sections) .site-footer:not(.site-footer--fixed) {
        bottom: var(--tabbar-height);
    }

    .header-sections {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        justify-content: space-around;
        gap: 0;
        height: 50px;
        padding: 0 8px env(safe-area-inset-bottom, 0px);
        box-sizing: content-box;
        /* Opaca: con transparencia, el navegador tiene que mezclar la barra con
         * lo que pasa por debajo en cada fotograma del scroll, y en el teléfono
         * se notaba. Es el mismo tono que la cabecera en móvil. */
        background: #0b142c;
        border-top: 1px solid rgba(207, 220, 241, 0.18);
        box-shadow: 0 -6px 18px rgba(2, 8, 18, 0.35);
        transition: transform 0.25s ease;
    }

    /* Los 24 px de más son la sombra, que si no asoma por el borde. */
    .header-sections.is-hidden {
        transform: translateY(calc(100% + 24px));
    }

    /* 48 de alto: la zona de toque que pide Material para una barra así. */
    .header-sections a {
        width: 56px;
        height: 48px;
    }

    .header-sections a:hover {
        background: transparent;
    }

    .header-sections svg {
        width: 24px;
        height: 24px;
    }

    .header-sections a[aria-current]::before {
        left: 16px;
        right: 16px;
        bottom: 2px;
    }

    /* La etiqueta sale por debajo del botón: aquí caería fuera de la pantalla. */
    .header-sections [data-tip]::after {
        display: none;
    }
}

@media (max-width: 720px) {
    .header {
        max-width: 96%;
        padding: 10px 12px;
    }

    .header-container {
        align-items: center;
        gap: 10px;
    }

    .header-title {
        flex: 1 1 120px;
    }

    .header-title h1 {
        font-size: 17px;
    }

    /* 12.5 y no 13: en un movil de 375 la caja del subtitulo son 162 px y con
       tres digitos en el contador («200 noticias del 01/08/2026») el texto
       pide 164 px con Nunito, asi que se parte en dos lineas y la cabecera
       crece. No es culpa del cambio de tipografia: con Ubuntu pedia 161 px,
       o sea que cabia por UN pixel y con cuatro digitos se habria partido
       igual. A 12.5 px pide 158 y quedan 4 px de margen. */
    .total {
        font-size: 12.5px;
    }

    /* 44 × 44, el mínimo de zona de toque de Apple (Material pide 48). Ocupan
     * el alto del título y el subtítulo juntos. Caben en una fila hasta con los
     * cinco del feed privado (visitas, herramientas, guardadas, información e
     * inicio): 5 × 44 + 4 × 5 = 240 px de 324, y al título le quedan 76, que
     * es lo que mide «Noticias». Si se añade un sexto botón, ya no cabe. */
    .header-nav {
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: 5px;
    }

    .header-nav :is(a, summary) {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
    }

    .header-nav :is(a, summary) svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 520px) {
    .header-container {
        gap: 8px;
    }

    .header-title {
        flex-basis: 104px;
    }

    .header-title h1 {
        font-size: 16px;
    }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .header {
        background: rgba(11, 20, 44, 0.92) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: 0 4px 12px rgba(2, 8, 18, 0.26) !important;
    }

    .header-nav :is(a, summary) {
        transition: none !important;
    }

    .header-nav :is(a, summary):hover {
        transform: none !important;
    }
}

/* El menú conserva las dimensiones de los iconos del encabezado. */
.header:has(.header-tools) { position: relative; z-index: 20; }
.header-tools { position: relative; flex: 0 0 auto; }
.header-tools summary { cursor: pointer; list-style: none; }
.header-tools summary::-webkit-details-marker { display: none; }
.header-tools summary:focus-visible { outline: 2px solid #b7d4ff; outline-offset: 3px; }
/* El panel es la misma pieza de cristal que la cabecera, no una caja aparte:
   antes iba con un azul plano y un borde propio, sin desenfoque ni filo, y se
   veia pegado debajo como si fuera de otra pagina. El fondo termina casi opaco
   porque esto se abre sobre el contenido y el texto tiene que leerse. */
.header-tools-panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    /* Se ajusta al texto mas largo en vez de fijar un ancho: con un ancho fijo
       sobraba sitio a los lados de casi todas las opciones. La columna es
       obligatoria: las opciones son `inline-flex` y con `max-content` se
       pondrian en fila. */
    display: flex; flex-direction: column;
    width: max-content; min-width: 140px; max-width: calc(100vw - 40px); padding: 6px;
    border: 1px solid rgba(207, 220, 241, 0.27);
    border-radius: var(--radius-md);
    /* El degradado de `.header`, pero algo mas cerrado: el panel se abre sobre
       las tarjetas y con la transparencia de la cabecera el texto se perdia
       contra lo que hubiera detras. Sigue dejando pasar el morado del fondo,
       que es lo que evitaba que se viera como un recuadro azul aparte. */
    background: linear-gradient(155deg,
        rgba(255, 255, 255, 0.16),
        rgba(20, 31, 48, 0.62) 18%,
        rgba(9, 16, 28, 0.86) 74%);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    /* Contacto, ambiental y filo claro arriba: las mismas tres capas que dan
       relieve a la cabecera y a sus botones. */
    box-shadow:
        0 4px 6px rgba(2, 8, 18, 0.5),
        0 18px 34px rgba(2, 8, 18, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Una lista, no una fila de botones: sin recuadro propio, sin sombra y sin el
   salto vertical del hover, que en un menu desplegable descoloca el puntero.
   Filas bajas y texto centrado, para que el panel no parezca una columna de
   botones sueltos. */
.header-nav .header-tools-panel a {
    width: auto; height: auto; min-height: 30px; padding: 6px 10px;
    justify-content: center; text-align: center; font-size: 13.5px; font-weight: 700;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; box-shadow: none; transform: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.header-nav .header-tools-panel a + a { margin-top: 1px; }

.header-nav .header-tools-panel a:hover,
.header-nav .header-tools-panel a:focus-visible {
    transform: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(216, 228, 248, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* El panel entra con un desplegado corto para que no aparezca de golpe. */
.header-tools[open] .header-tools-panel {
    animation: header-tools-in 0.16s ease-out;
    transform-origin: top right;
}

@keyframes header-tools-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .header-tools[open] .header-tools-panel { animation: none; }
    .header-sections, .fab-stack, .news-actions-menu, .news-scroll-top { transition: none !important; }
}

/* Con cinco botones (el feed privado) no caben a 44 px junto al título por
 * debajo de ~370 px: a 320 el título se quedaba en «N…» (a 375 sí caben). En
 * ese caso, y solo en ese, los botones bajan a su propia fila en vez de
 * encogerse por debajo del mínimo de toque. */
@media (max-width: 370px) {
    .header-container:has(.header-nav > :nth-child(5)) {
        flex-wrap: wrap;
    }

    .header-container:has(.header-nav > :nth-child(5)) .header-title {
        flex: 1 1 100%;
    }

    .header-container:has(.header-nav > :nth-child(5)) .header-nav {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}