/* ==========================================================================
   Navbar — desktop + mobile + nav-profile-link + breakpoint custom (1224px)
   ========================================================================== */

.navbar-dark {
    background-color: var(--navbar-bg) !important;
    /* Border bottom neutro — sin rojo decorativo persistente. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.navbar-brand {
    font-size: 1.5rem;
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

/* Botón de cambio de tema */
#themeToggle {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

#themeToggle:hover {
    color: var(--primary-color) !important;
}

/* Nav profile link con avatar + premium badge */
.nav-profile-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    overflow: visible;
}

.nav-profile-link .nav-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    overflow: visible;
}

.nav-profile-link .premium-badge {
    position: absolute;
    top: -0.2rem;
    right: -0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--navbar-bg);
    color: var(--warning-color);
    border: 1px solid rgba(255, 193, 7, 0.6);
    font-size: 0.6rem;
}

.nav-profile-link .premium-badge i {
    font-size: inherit;
    line-height: 1;
    transform: scale(0.9);
}

.nav-profile-link .nav-text {
    font-weight: 500;
}

[data-bs-theme="dark"] .nav-profile-link .premium-badge {
    border-color: rgba(255, 193, 7, 0.8);
}

@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .nav-profile-link {
        gap: 0.6rem;
    }

    .nav-profile-link .nav-icon-wrapper {
        width: 2rem;
        height: 2rem;
    }

    .nav-profile-link .premium-badge {
        top: -0.05rem;
        right: -0.12rem;
        width: 0.8rem;
        height: 0.8rem;
        font-size: 0.45rem;
    }

    .nav-profile-link .premium-badge i {
        transform: scale(0.85);
    }
}

/* ==========================================================================
   Navbar — Mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    .navbar-collapse {
        background-color: var(--navbar-bg);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 0.5rem;
    }

    .navbar-collapse .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-collapse .nav-link {
        padding: 0.5rem 1rem;
        text-align: left;
    }

    .navbar-collapse .btn-link {
        padding: 0.5rem 1rem;
        width: 100%;
        text-align: left;
    }

    /* Dropdown de Carreras en desktop */
    .navbar-nav .dropdown-menu {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 0.25rem 0;
        margin-top: 0.5rem;
    }

    .navbar-nav .dropdown-item {
        color: var(--text-primary);
        padding: 0.5rem 1rem;
        transition:
            background-color 180ms ease,
            color 180ms ease;
    }

    .navbar-nav .dropdown-item:hover {
        background-color: var(--bg-secondary);
        color: var(--primary-color);
    }

    .navbar-nav .dropdown-item:active {
        background-color: var(--primary-color);
        color: #ffffff;
    }

    .navbar-nav .dropdown-toggle {
        color: #ffffff !important;
    }

    .navbar-nav .dropdown-toggle:hover {
        color: var(--primary-color) !important;
    }

    /* Dropdown items en collapse mobile */
    .navbar-collapse .dropdown-menu {
        background-color: var(--navbar-bg);
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
    }

    .navbar-collapse .dropdown-item {
        color: #ffffff;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse .dropdown-item:last-child {
        border-bottom: none;
    }

    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .navbar-collapse .dropdown-toggle::after {
        margin-left: auto;
    }

    /* Separador HR antes de las acciones finales en mobile */
    .navbar-divider {
        border-color: rgba(255, 255, 255, 0.1);
        margin: 0.5rem 1rem;
        opacity: 1;
    }

    /* Acciones horizontales en mobile */
    .navbar-collapse .navbar-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: none;
    }

    .navbar-collapse .navbar-actions .nav-item {
        flex: 1;
        text-align: center;
        border-bottom: none;
        margin: 0;
    }

    .navbar-collapse .navbar-actions .nav-link {
        padding: 0.75rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        text-align: center;
        font-size: 0;
        line-height: 1;
    }

    .navbar-collapse .navbar-actions .nav-link i {
        font-size: 1.3rem;
        line-height: 1.3rem;
        margin: 0;
        display: block;
    }

    .navbar-collapse .navbar-actions .nav-link .me-1 {
        margin-right: 0 !important;
    }

    .navbar-collapse .navbar-actions .btn-link {
        width: 100%;
        padding: 0.75rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        text-align: center;
        font-size: 0;
        line-height: 1;
    }

    .navbar-collapse .navbar-actions .btn-link i {
        font-size: 1.3rem;
        line-height: 1.3rem;
        margin: 0;
        display: block;
    }

    .navbar-collapse .navbar-actions form {
        width: 100%;
    }

    .navbar-collapse .navbar-actions [data-bs-toggle="tooltip"] {
        position: relative;
    }

    /* Icono X cuando el toggler está abierto */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6L6 18M6 6l12 12'/%3e%3c/svg%3e");
        background-size: 70%;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* ==========================================================================
   Navbar — Custom Breakpoint (1224px)
   ========================================================================== */

@media (max-width: 1223.98px) {
    .hide-on-mobile { display: none !important; }
}

@media (min-width: 1224px) {
    .hide-on-desktop { display: none !important; }

    .navbar-expand-custom {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}


/* ==========================================================================
   Quick access bar mobile — la fila horizontal de iconos debajo del logo
   en mobile (Dashboard / Actividades / Planificador / Zapatillas / Pace).
   El bloque "estira" el ancho para compensar el gutter del container-fluid.
   ========================================================================== */

.navbar-quick-access {
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    width: calc(100% + var(--bs-gutter-x));
}


/* ==========================================================================
   Nav CTA Register — el "Crear cuenta" del navbar pública es la acción
   primaria de la app. Tratamiento sólido rojo: jerarquía clara entre
   "Iniciar sesión" (link, secundario) y "Crear cuenta" (CTA primario).
   ==========================================================================
   Especificidad: subimos a .navbar-nav .nav-link.nav-cta-register para
   ganarle a .navbar-nav .nav-link:hover (que pinta todo en accent y nos
   estaba volviendo el texto rojo sobre fondo rojo).
   ========================================================================== */

.navbar-nav .nav-link.nav-cta-register {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff !important;
    border-radius: 999px;
    padding: 0.4rem 1.1rem !important;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 2px 12px -2px rgba(220, 53, 69, 0.45);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 220ms var(--ease-out-strong),
        transform 220ms var(--ease-out-strong);
}

.navbar-nav .nav-link.nav-cta-register:hover,
.navbar-nav .nav-link.nav-cta-register:focus-visible {
    background-color: #c82333;
    border-color: #c82333;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -2px rgba(220, 53, 69, 0.55);
}

[data-bs-theme="dark"] .navbar-nav .nav-link.nav-cta-register {
    box-shadow: 0 2px 14px -2px rgba(232, 85, 101, 0.45);
}

[data-bs-theme="dark"] .navbar-nav .nav-link.nav-cta-register:hover,
[data-bs-theme="dark"] .navbar-nav .nav-link.nav-cta-register:focus-visible {
    box-shadow: 0 6px 20px -2px rgba(232, 85, 101, 0.6);
}

@media (max-width: 991.98px) {
    /* En mobile el item se muestra dentro del navbar-collapse / sidebar.
       Un CTA sólido ahí compite con el resto del menú vertical, así que
       lo bajamos a tratamiento plano (igual que el resto de los links). */
    .navbar-nav .nav-link.nav-cta-register {
        background-color: transparent;
        border: none;
        color: #fff !important;
        padding: 0.5rem 1rem !important;
        box-shadow: none;
        border-radius: 0;
    }
    .navbar-nav .nav-link.nav-cta-register:hover,
    .navbar-nav .nav-link.nav-cta-register:focus-visible {
        background-color: rgba(255, 255, 255, 0.08);
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link.nav-cta-register,
    .navbar-nav .nav-link.nav-cta-register:hover {
        transform: none;
    }
}


/* ==========================================================================
   Acciones del navbar público (no logueado) — gap entre "Iniciar sesión"
   y "Crear cuenta" para que respiren bien al lado uno del otro.
   ========================================================================== */

@media (min-width: 1224px) {
    .navbar-nav.navbar-actions {
        gap: 0.5rem;
    }
}


/* ==========================================================================
   Mobile header actions — header slim del navbar mobile
   ==========================================================================
   La navegación primaria mobile vive en el tab bar inferior, las acciones
   secundarias (perfil, tema, manual, logout) viven en el sidebar off-canvas.
   En este header solo:
   - Logueado:    [hamburguesa] que abre el sidebar
   - Deslogueado: [icon Calculadora] [CTA Crear cuenta] [hamburguesa]
   ========================================================================== */

.mobile-header-actions {
    flex-wrap: nowrap;
}

.mobile-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 180ms ease, color 180ms ease;
    flex-shrink: 0;
    padding: 0;
    font-size: 1rem;
}

.mobile-header-action:hover,
.mobile-header-action:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mobile-header-action--menu {
    font-size: 1.15rem;
}

/* Toggler hamburguesa heredado de Bootstrap (no se renderiza ya, pero
   por si algún markup viejo queda dando vueltas) */
.navbar-toggler.hide-on-desktop {
    display: none !important;
}


/* ==========================================================================
   Z-index: el header sticky tiene que ganarle al widget de Owlight, que
   por default flota con un z-index alto. El sidebar (1051) y su backdrop
   (1050) deben quedar arriba del navbar.
   ========================================================================== */

header.sticky-top {
    z-index: 1040;
}


/* ==========================================================================
   Mobile navbar — logo + acciones en UNA SOLA LÍNEA.
   ==========================================================================
   El container-fluid tiene flex-wrap por default en .navbar (Bootstrap),
   eso hacía que en mobile el logo quedara en una línea y las acciones
   bajaran a una segunda. Forzamos nowrap en mobile.
   ========================================================================== */

@media (max-width: 1223.98px) {
    .navbar > .container-fluid {
        flex-wrap: nowrap;
        align-items: center;
    }

    .navbar-brand {
        margin-right: auto;
        flex-shrink: 0;
        font-size: 1.25rem;
    }
}