/* ============================================================================
   APPBAR.CSS — Barra superior compacta (por ahora, solo el modulo de Compras)
   ============================================================================
   Reemplaza el header clasico (logo de 80px + dos barras azules apiladas) por
   una franja de ~46px: marca + pildora de navegacion + chip de usuario.

   Ojo con dos cosas del proyecto al tocar este archivo:
     - html { font-size: 62.5% }  => 1rem = 10px. Aqui se usa px a proposito
       para que los tamanos no dependan de esa escala.
     - body { align-items: center } => todo hijo directo necesita width:100%
       o se encoge al ancho de su contenido.
   ============================================================================ */

.gn-appbar {
    width: 100%;
    background-color: var(--gn-white);
    border-bottom: 1px solid var(--gn-gray-border);
    position: sticky;
    top: 0;
    z-index: var(--gn-z-header);
}

.gn-appbar__in {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ---------- marca ---------- */
.gn-appbar__brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .gn-appbar__brand img {
        width: 32px;
        height: 32px;
        flex: none;
    }

.gn-appbar__brand-txt {
    line-height: 1.15;
    white-space: nowrap;
}

    .gn-appbar__brand-txt b {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: var(--gn-navy);
        letter-spacing: -0.01em;
    }

    .gn-appbar__brand-txt span {
        display: block;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--gn-gray);
    }

/* ---------- pildora de navegacion ---------- */
.gn-appbar__nav {
    display: flex;
    gap: 2px;
    background-color: var(--gn-blue);
    border-radius: var(--gn-radius-full);
    padding: 3px;
    /* Red de seguridad: si un modulo agrega enlaces y la pildora deja de caber
       antes del corte de abajo, se desplaza sola en vez de empujar el chip de
       usuario fuera de la pantalla. La barra de scroll se oculta (site.css le
       pone 5px a todo) porque aqui se arrastra con el dedo o con shift+rueda. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .gn-appbar__nav::-webkit-scrollbar {
        display: none;
    }

    .gn-appbar__nav a {
        flex: none;
        color: rgba(255, 255, 255, 0.88);
        font-size: 13px;
        font-weight: 500;
        padding: 6px 14px;
        border-radius: var(--gn-radius-full);
        white-space: nowrap;
        transition: background-color var(--gn-transition-fast), color var(--gn-transition-fast);
    }

        .gn-appbar__nav a:hover {
            background-color: rgba(255, 255, 255, 0.16);
            color: var(--gn-white);
        }

        .gn-appbar__nav a.is-active {
            background-color: var(--gn-white);
            color: var(--gn-navy);
            font-weight: 600;
        }

.gn-appbar__spacer {
    flex: 1;
}

/* ---------- chip de usuario ---------- */
.gn-appbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--gn-gray-border);
    border-radius: var(--gn-radius-full);
    padding: 3px 12px 3px 3px;
    cursor: pointer;
    font: inherit;
    color: var(--gn-charcoal);
    transition: background-color var(--gn-transition-fast);
}

    .gn-appbar__user:hover {
        background-color: var(--gn-off-white);
    }

    .gn-appbar__user .ini {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: var(--gn-teal);
        color: var(--gn-white);
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        flex: none;
    }

    .gn-appbar__user .nm {
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }

/* ---------- menu desplegable del usuario ---------- */
.gn-appbar__menu {
    position: absolute;
    right: 18px;
    top: calc(100% + 6px);
    background-color: var(--gn-white);
    border: 1px solid var(--gn-gray-border);
    border-radius: var(--gn-radius-md);
    box-shadow: var(--gn-shadow-md);
    min-width: 250px;
    padding: 5px;
    z-index: var(--gn-z-dropdown);
}

    .gn-appbar__menu a {
        display: block;
        padding: 9px 12px;
        border-radius: var(--gn-radius-sm);
        color: var(--gn-charcoal);
        font-size: 13.5px;
        transition: background-color var(--gn-transition-fast);
    }

        .gn-appbar__menu a:hover {
            background-color: var(--gn-off-white);
        }

        .gn-appbar__menu a small {
            display: block;
            font-weight: 400;
            color: var(--gn-gray);
            font-size: 11.5px;
            margin-top: 1px;
        }

        .gn-appbar__menu a.is-salir {
            color: var(--gn-danger);
        }

    .gn-appbar__menu hr {
        border: 0;
        border-top: 1px solid var(--gn-gray-divider);
        margin: 5px 4px;
    }

    .gn-appbar__menu .lbl {
        font-size: 10px;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--gn-gray);
        padding: 7px 12px 3px;
    }

/* ---------- boton hamburguesa (solo movil) ---------- */
.gn-appbar__burger {
    display: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--gn-gray-border);
    border-radius: var(--gn-radius-md);
    color: var(--gn-navy);
    font-size: 15px;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ============================================================================
   Ancho chico: la pildora no cabe; los enlaces bajan a un cajon desplegable.
   El corte esta en 980px porque Planilla, el modulo con mas enlaces, necesita
   ~910px de barra.
   ============================================================================ */
@media (max-width: 980px) {
    .gn-appbar__in {
        padding: 7px 12px;
        gap: 10px;
    }

    .gn-appbar__burger {
        display: flex;
    }

    /* El cajon: misma lista, apilada bajo la barra. */
    .gn-appbar__nav {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 6px);
        flex-direction: column;
        gap: 3px;
        padding: 6px;
        border-radius: var(--gn-radius-lg);
        box-shadow: var(--gn-shadow-md);
        z-index: var(--gn-z-dropdown);
    }

        .gn-appbar__nav.is-open {
            display: flex;
        }

        .gn-appbar__nav a {
            font-size: 14px;
            padding: 10px 14px;
            border-radius: var(--gn-radius-md);
        }

    /* Con poco ancho solo quedan las iniciales. */
    .gn-appbar__user {
        padding: 3px;
    }

        .gn-appbar__user .nm {
            display: none;
        }

    .gn-appbar__menu {
        right: 12px;
        left: auto;
        min-width: 230px;
    }
}