/* ==========================================================================
   Header Component — matches production red-es.es
   ========================================================================== */

.pf-redes-header {
    background-color: var(--pf-redes-primary);
    color: var(--pf-redes-text-inverse);
    width: 100%;
    /* El header NO es fijo (no hay `position: fixed/sticky` a propósito), pero
       sí necesita contexto de apilamiento propio: el desplegable de usuario
       tiene que quedar por encima de los controles del localizador (z-index
       1000) y de las capas de Leaflet (400–1000). Por debajo se dejan los
       overlays modales fijos del sitio (`.pf-redes-confirm__overlay`, 10000),
       que sí deben tapar al header. */
    position: relative;
    z-index: 1100;
}

.pf-redes-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

/* Logo group */
.pf-redes-header__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pf-redes-text-inverse);
    text-decoration: none;
    line-height: 1.2;
}

.pf-redes-header__logo:hover,
.pf-redes-header__logo:focus {
    color: var(--pf-redes-text-inverse);
    opacity: 0.9;
}

.pf-redes-header__logo-img {
    height: 36px;
    width: auto;
    flex-shrink: 0;
}

.pf-redes-header__logo-text {
    display: flex;
    flex-direction: column;
}

.pf-redes-header__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.pf-redes-header__subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.9;
    line-height: 1.2;
}

/* Right side: counter + nav + user icon */
.pf-redes-header__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pf-redes-header__counter {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Navigation */
.pf-redes-header__nav ul {
    display: flex;
    /* El menú tiene 4 items —SIEMPRE, también sin sesión desde tema#95— y los
       enlaces son `nowrap`: sin envolver se sale por el lado derecho en móvil
       (tema#61). No hay hamburguesa ni JS en este componente, así que la
       solución es dejar que la lista rompa a la línea siguiente. */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px;
    row-gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-redes-header__nav a {
    color: var(--pf-redes-text-inverse);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: opacity var(--pf-redes-transition);
    white-space: nowrap;
}

.pf-redes-header__nav a:hover,
.pf-redes-header__nav a:focus {
    color: var(--pf-redes-text-inverse);
    opacity: 0.8;
}

/* Item con icono (Localizador). El resto del header usa SVG inline estilo
   feather a 18px; este es Font Awesome, así que se baja a 12px para que pese
   ópticamente lo mismo que el texto de 13px que lo acompaña. */
.pf-redes-header__nav-link--icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pf-redes-header__nav-link--icon i {
    font-size: 12px;
    line-height: 1;
}

/* User icon (not logged in) → links to login. Desde tema#95 es el glifo RELLENO
   `fa-circle-user` sin aro: el propio icono dibuja el círculo, así que el
   `border` de antes lo doblaba. Se conserva la caja de 32px como área táctil y
   el tamaño del glifo se fija en `font-size`. */
.pf-redes-header__user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    color: var(--pf-redes-text-inverse);
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.2s;
}
.pf-redes-header__user-icon:hover,
.pf-redes-header__user-icon:focus {
    color: var(--pf-redes-text-inverse);
    opacity: 0.85;
}

/* ==========================================================================
   User dropdown (logged in) — tema#62
   Clases PROPIAS del header. El desplegable del panel convive en el mismo
   documento y su JS coge el primer `.pf-redes-panel__user-trigger` y TODOS los
   `[data-logout-trigger]`: aquí no se reutiliza ninguno de los dos. La tarjeta
   (foto · rol · nombre) es el partial `common/user-card/` desde tema#96 y sus
   estilos viven allí: aquí solo queda el botón, el panel flotante y las opciones.
   ========================================================================== */
.pf-redes-header__user {
    position: relative;
}

.pf-redes-header__user-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: none;
    border: none;
    border-radius: var(--pf-redes-radius-sm, 4px);
    color: var(--pf-redes-text-inverse);
    font: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
}
.pf-redes-header__user-trigger:hover {
    opacity: 0.85;
}

/* Glifo relleno del botón (tema#95): mismo `fa-circle-user` que el estado
   anónimo, un punto menor porque va acompañado del nombre. */
.pf-redes-header__user-glyph {
    font-size: 22px;
    line-height: 1;
}
.pf-redes-header__user-trigger:focus-visible {
    outline: 2px solid var(--pf-redes-text-inverse);
    outline-offset: 1px;
}

.pf-redes-header__user-name {
    font-size: 13px;
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-redes-header__user-caret {
    flex-shrink: 0;
    transition: transform 0.15s ease-out;
}
.pf-redes-header__user-trigger[aria-expanded="true"] .pf-redes-header__user-caret {
    transform: rotate(180deg);
}

/* Panel desplegado. Se abre y se cierra con el atributo `hidden`; ninguna
   regla de aquí le pone `display`, y esta lo reafirma por si algún día se
   añade una (`display` ganaría al [hidden] del navegador). */
.pf-redes-header__user-menu[hidden] {
    display: none;
}

.pf-redes-header__user-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 232px;
    padding: 12px 0 6px;
    background: var(--pf-redes-bg-card, #fff);
    color: var(--pf-redes-text, #171723);
    border: 1px solid var(--pf-redes-border, #ddd);
    border-radius: var(--pf-redes-radius-md, 8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Tarjeta foto · rol · nombre: `common/user-card/styles.css` (tema#96). */

/* Opciones */
.pf-redes-header__user-actions {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
}

.pf-redes-header__user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--pf-redes-text, #171723);
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.15s ease-out;
}
.pf-redes-header__user-menu-item:hover,
.pf-redes-header__user-menu-item:focus {
    background: var(--pf-redes-bg, #f5f5fa);
    color: var(--pf-redes-text, #171723);
}
.pf-redes-header__user-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--pf-redes-text-light, #888);
}
.pf-redes-header__user-menu-item--logout {
    color: var(--pf-redes-primary, #C91517);
}
.pf-redes-header__user-menu-item--logout i {
    color: var(--pf-redes-primary, #C91517);
}
.pf-redes-header__user-menu-item--logout:hover,
.pf-redes-header__user-menu-item--logout:focus {
    color: var(--pf-redes-primary, #C91517);
}

/* Responsive */
@media (max-width: 768px) {
    .pf-redes-header__inner {
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pf-redes-header__right {
        gap: 12px;
    }

    .pf-redes-header__nav ul {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .pf-redes-header__inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 6px 8px;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .pf-redes-header__logo {
        grid-column: 1;
        grid-row: 1;
    }

    .pf-redes-header__right {
        display: contents;
    }

    .pf-redes-header__nav {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* 4 items a 360px no caben en una línea ni con `gap` mínimo: se envuelven
       y se centran, y el texto baja un punto para que quepan 2 + 2. */
    .pf-redes-header__nav ul {
        justify-content: center;
        width: 100%;
        gap: 12px;
        row-gap: 4px;
    }

    .pf-redes-header__nav a {
        font-size: 12px;
    }

    /* User icon / dropdown floats to top-right. `__right` es `display: contents`,
       así que el hijo real que se coloca en la rejilla es `__user`. */
    .pf-redes-header__user-icon,
    .pf-redes-header__user {
        grid-column: 2;
        grid-row: 1;
    }

    /* El nombre se esconde en pantallas muy estrechas: en el desplegable
       aparece completo, así que no se pierde información. */
    .pf-redes-header__user-trigger .pf-redes-header__user-name {
        display: none;
    }

    /* Anclado a la derecha, sin salirse por el borde de la pantalla. */
    .pf-redes-header__user-menu {
        min-width: 208px;
        max-width: calc(100vw - 24px);
    }
}