/* public/assets/css/components/header.css
   Componente: cabecera (logo + nav). Sticky, degradado de marca (gama de
   personalizacion), menu hamburguesa en movil/tablet, animacion de entrada
   de los enlaces y subrayado activo deslizante. Usado por APP/views/layouts/main.php.
   Mobile-first (06_ESTILO_FRONT.md): la base de .app-menu-toggle/.app-nav es
   el movil (menu hamburguesa desplegable, nav apilada); a partir de 901px se
   deshace para volver a la nav inline de escritorio. Mismo resultado visual
   en cada ancho que la version desktop-first anterior, solo cambia cual
   regla es la base y cual vive dentro de un @media. */

@keyframes app-nav-entrada {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: var(--app-header-height);
    min-height: var(--app-header-height);
    /* Mismo degradado de marca que el resto de la app pero oscurecido de
       forma uniforme (overlay negro translucido encima), sin cambiar el
       matiz/gama: cabecera y footer quedan como el extremo mas oscuro de la
       misma gama de personalizacion, sin ningun elemento decorativo extra. */
    background: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), var(--app-gradient);
    /* Ancla el degradado al viewport (no a la caja de este elemento): un
       linear-gradient() con el mismo angulo se ve distinto segun el alto de
       cada caja (cabecera baja vs. panel de secciones alto vs. footer bajo),
       lo que se notaba como un "corte" en la union entre ellos. Con
       background-attachment:fixed los tres leen el mismo punto de color. */
    background-attachment: fixed;
    box-shadow: 0 4px 20px rgba(var(--app-primary-dark-rgb), 0.18);
    transition: box-shadow .25s ease;
}
.app-header.app-header-scrolled { box-shadow: 0 8px 28px rgba(var(--app-primary-dark-rgb), 0.32); }

.app-header-inner {
    max-width: var(--app-container-max);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-md);
    padding: 0 var(--app-space-md);
}
@media (min-width: 481px) {
    .app-header-inner { padding: 0 clamp(var(--app-space-md), 2vw, var(--app-space-xl)); }
}

.app-brand { display: flex; align-items: center; gap: var(--app-space-sm); }
.app-brand-logo {
    height: 30px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    transition: transform .2s ease;
}
@media (min-width: 481px) {
    .app-brand-logo { height: clamp(34px, 4vw, 46px); }
}
.app-brand:hover .app-brand-logo { transform: scale(1.04); }
/* Fondo blanco opcional para logos oscuros (App\src\Utils\Color / usuarios.fondo_logo_claro);
   por defecto el logo flota directamente sobre el degradado de la cabecera, sin caja. */
.app-brand-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--app-space-xs) var(--app-space-sm);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
}
.app-brand-logo-box .app-brand-logo { height: clamp(28px, 3.2vw, 38px); }

/* Movil/tablet (base): boton hamburguesa visible, nav oculta hasta abrirla. */
.app-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--app-space-xs);
    width: 36px;
    height: 36px;
    padding: var(--app-space-sm);
    border: none;
    background: none;
    cursor: pointer;
}
.app-menu-toggle span { display: block; height: 2px; width: 100%; background: var(--app-on-primary); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.app-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.app-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.app-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.app-nav {
    display: none;
    position: absolute;
    top: var(--app-header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--app-space-xs);
    background: var(--app-primary-dark);
    padding: .5rem 0;
    z-index: 99;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.app-nav.app-nav-open { display: flex; }
.app-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-xs);
    height: auto;
    padding: .8rem 1.4rem;
    width: 100%;
    color: rgba(var(--app-on-primary-rgb), 0.88);
    font-size: .92rem;
    font-weight: 600;
    position: relative;
    opacity: 1;
    transition: color .2s ease;
}
/* Badge de pendientes (p.ej. mensajes de chat sin leer, ver chat.js): vacio
   por defecto (no ocupa nada hasta que JS le pone un numero). */
.app-nav-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--app-space-xs);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-primary-dark);
    font-size: var(--app-text-2xs);
    font-weight: 700;
}
.app-nav-badge:not(:empty) { display: inline-flex; }
.app-nav a:hover { color: var(--app-on-primary); }
.app-nav a.app-nav-activo { color: var(--app-on-primary); }

@media (min-width: 901px) {
    .app-menu-toggle { display: none; }
    .app-nav {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        background: none;
        padding: 0;
        box-shadow: none;
    }
    .app-nav a {
        height: var(--app-header-height);
        padding: 0 .8rem;
        width: auto;
        opacity: 0;
        animation: app-nav-entrada .35s ease forwards;
    }
    .app-nav a:nth-child(1) { animation-delay: .02s; }
    .app-nav a:nth-child(2) { animation-delay: .08s; }
    .app-nav a:nth-child(3) { animation-delay: .14s; }
    .app-nav a:nth-child(4) { animation-delay: .2s; }
    .app-nav a::after {
        content: '';
        position: absolute;
        left: .8rem;
        right: .8rem;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--app-on-primary);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .2s ease;
    }
    .app-nav a:hover::after { transform: scaleX(.5); }
    .app-nav a.app-nav-activo::after { transform: scaleX(1); }
}