/* ========== 4) Navegación ========== */
/* Header temable */
.navbar.theme-nav {
    background: var(--header-bg, var(--surface-bg, #212529));
    color: var(--header-fg, var(--surface-fg, #fff));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.navbar-brand{
    background-color: transparent;
}

.navbar.theme-nav .navbar-brand,
.navbar.theme-nav .nav-link,
.navbar.theme-nav .navbar-text {
    color: var(--header-fg, #fff) !important;
}

/* Toggler */
.navbar.theme-nav .navbar-toggler {
    position: absolute;
    top: 25px;
    left: 40px;
    border: 0;
    box-shadow: none;
}

.navbar.theme-nav .navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    width: 1.5rem;
    height: 2px;
    background: var(--header-fg, #fff);
    box-shadow:
        0 -6px 0 0 var(--header-fg, #fff),
        0 6px 0 0 var(--header-fg, #fff);
}

/* Offcanvas del header */
.offcanvas.theme-nav {
    background: var(--header-bg, #212529);
    color: var(--header-fg, #fff);
}

.offcanvas.theme-nav .nav-link {
    color: var(--header-fg, #fff) !important;
}

.offcanvas.theme-nav .btn-close {
    filter: invert(1);
}

/* Pills (activa = primario) */
.nav-pills > .nav-item > .nav-link {
    color: var(--color-primary, #4972b1);
}

.nav-pills > .nav-item > .active {
    background-color: var(--color-primary, #4972b1);
    color: var(--on-primary, #e9f4f6);
}

/* Head */

.nav-link[data-bs-toggle="collapse"] .bi-chevron-right {
    transition: transform 0.2s ease;
}

.nav-link[data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-right {
    transform: rotate(90deg);
}

#offcanvasNavbar a.nav-link {
    color: rgba(255, 255, 255, 0.78) !important;
}

#offcanvasNavbar .collapse .nav-link {
    font-size: 0.9rem;
}