/*
 * navbar.css — Barra de navegación superior moderna (storefront).
 * Comparte los tokens de marca de brand.css (--brand-blue, --brand-tint, etc.)
 * y el mismo lenguaje visual que las product-card / catalog-toolbar / paginación:
 * pills de radio 999px, fondos --brand-tint, sombras azules suaves y hover con
 * micro-elevación. Se carga DESPUÉS de home.css para pisar el navbar por defecto
 * de Bootstrap. No hardcodear hex de marca acá: usar las variables de brand.css.
 */

/* ===== Contenedor ===== */
.site-navbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid #eceef3;
    box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .04);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* ===== Marca ===== */
.site-navbar .navbar-brand {
    padding: .25rem .5rem;
}
.site-navbar .navbar-brand img {
    transition: transform .15s ease;
}
.site-navbar .navbar-brand:hover img {
    transform: scale(1.06);
}

/* ===== Toggler (mobile) ===== */
.site-navbar .navbar-toggler {
    border: 1px solid #dfe3f2;
    border-radius: .6rem;
    padding: .35rem .55rem;
    color: var(--brand-blue);
}
.site-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(27, 52, 196, .18);
}

/* ===== Enlaces de navegación (pill con hover tint) ===== */
.site-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--brand-ink);
    transition: color .15s ease, background-color .15s ease;
}
.site-nav .nav-link i {
    font-size: .9rem;
    color: var(--brand-muted);
    transition: color .15s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.active {
    color: var(--brand-blue);
    background: var(--brand-tint);
}
.site-nav .nav-link:hover i,
.site-nav .nav-link:focus i,
.site-nav .nav-link.active i {
    color: var(--brand-blue);
}

/* ===== Acciones a la derecha (carrito + usuario) ===== */
.site-nav-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* --- Botón carrito (pill con contador) --- */
.nav-cart {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .5rem .45rem .85rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-blue);
    background: #fff;
    border: 1px solid #dfe3f2;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.nav-cart:hover,
.nav-cart:focus {
    color: #fff;
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    transform: translateY(-1px);
    box-shadow: 0 .25rem .6rem rgba(27, 52, 196, .28);
}
.nav-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand-blue);
    transition: background-color .15s ease, color .15s ease;
}
/* Con productos en el carrito: acento cian para destacar */
.nav-cart-active .nav-cart-count {
    background: var(--brand-cyan);
    color: #fff;
}
.nav-cart:hover .nav-cart-count,
.nav-cart:focus .nav-cart-count {
    background: #fff;
    color: var(--brand-blue);
}

/* --- Usuario / Iniciar sesión (pill con avatar) --- */
.nav-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .85rem .3rem .35rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--brand-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid #dfe3f2;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.nav-user:hover,
.nav-user:focus {
    color: var(--brand-blue);
    background: var(--brand-tint);
    border-color: var(--brand-tint);
}
.nav-user.dropdown-toggle::after {
    display: none; /* usamos nuestro propio caret (nav-user-caret) */
}
.nav-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
}
.nav-user-name {
    font-size: .9rem;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-caret {
    font-size: .7rem;
    color: var(--brand-muted);
    transition: transform .15s ease;
}
.nav-user[aria-expanded="true"] .nav-user-caret {
    transform: rotate(180deg);
}

/* --- Menú desplegable del usuario --- */
.site-navbar .dropdown-menu {
    border: 1px solid #eceef3;
    border-radius: .75rem;
    box-shadow: 0 .75rem 1.75rem rgba(27, 52, 196, .12);
    padding: .4rem;
    margin-top: .5rem;
}
.site-navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--brand-ink);
}
.site-navbar .dropdown-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--brand-muted);
    transition: color .15s ease;
}
.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
    background: var(--brand-tint);
    color: var(--brand-blue);
}
.site-navbar .dropdown-item:hover i,
.site-navbar .dropdown-item:focus i {
    color: var(--brand-blue);
}
.site-navbar .dropdown-divider {
    margin: .35rem .2rem;
    border-color: #eceef3;
}

/* ===== Mobile: las acciones bajan y se alinean a la izquierda ===== */
@media (max-width: 991.98px) {
    .site-nav-actions {
        margin-top: .5rem;
        flex-wrap: wrap;
    }
    .site-nav .nav-link {
        justify-content: flex-start;
    }
    .nav-user-name {
        max-width: none;
    }
}