/* ==========================================================================
   Navegación v2 (16/10/2026)
   - Barra principal en "pista" con un indicador que se desliza a la pestaña activa
     y una sombra suave que sigue al mouse.
   - Barra principal y subpestañas quedan fijas debajo del encabezado al hacer scroll.
   - Al cambiar de pestaña el contenido entra deslizándose desde la derecha si vas
     hacia adelante y desde la izquierda si volvés.
   Lógica en static/js/nav-motion.js. Se carga después de bero-web.css.
   ========================================================================== */

:root {
    --bw-header-h: 80px;          /* lo actualiza nav-motion.js */
    --bw-nav-h: 64px;             /* idem */
    --bw-gutter: 24px;            /* padding lateral de .bw-main */
    --bw-ease-spring: cubic-bezier(.32, .72, .24, 1.02);
    --bw-ease-out: cubic-bezier(.22, .8, .24, 1);

    --bw-track-bg: #F1F5F9;
    --bw-track-border: var(--bero-border);
    --bw-ind-bg: var(--bero-navy);
    --bw-ind-text: #ffffff;
    --bw-hover-bg: rgba(0, 29, 59, .06);
    --bw-tab-text: var(--bero-slate);
    --bw-tab-text-hover: var(--bero-navy);
    --bw-sub-text: var(--bero-muted);
    --bw-sub-active: var(--bero-navy);
    --bw-sub-line: var(--bero-mint);
    --bw-bar-bg: rgba(255, 255, 255, .86);
    --bw-bar-shadow: 0 8px 20px -14px rgba(0, 29, 59, .35);
}
[data-theme="dark"] {
    --bw-track-bg: rgba(255, 255, 255, .04);
    --bw-track-border: rgba(255, 255, 255, .09);
    --bw-ind-bg: var(--bero-mint);
    --bw-ind-text: var(--bero-navy);
    --bw-hover-bg: rgba(255, 255, 255, .07);
    --bw-tab-text: #a9b8c9;
    --bw-tab-text-hover: #ffffff;
    --bw-sub-text: #94a3b8;
    --bw-sub-active: #ffffff;
    --bw-sub-line: var(--bero-mint);
    --bw-bar-bg: rgba(0, 18, 38, .86);
    --bw-bar-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
}
@media (max-width: 768px) { :root { --bw-gutter: 16px; } }

/* El contenido no puede generar scroll horizontal mientras entra deslizándose.
   clip (y no hidden) para no romper las barras fijas. */
#marketTabsContent { overflow-x: hidden; overflow-x: clip; }

/* --------------------------------------------------------------------------
   Barra principal
   -------------------------------------------------------------------------- */
.bw-navbar {
    position: sticky;
    top: var(--bw-header-h);
    z-index: 1020;
    margin: -8px calc(var(--bw-gutter) * -1) 6px;
    padding: 10px var(--bw-gutter);
    background: transparent;
    transition: background-color .25s, box-shadow .25s, padding .25s var(--bw-ease-out);
}
.bw-navbar.is-stuck {
    background: var(--bw-bar-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: var(--bw-bar-shadow);
    padding-top: 6px; padding-bottom: 6px;
}

#marketTabs.bw-nav {
    position: relative;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid var(--bw-track-border) !important;
    border-radius: 999px !important;
    background: var(--bw-track-bg) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    isolation: isolate;
}
#marketTabs.bw-nav::-webkit-scrollbar { display: none; }
#marketTabs .nav-item { flex: 0 0 auto !important; }

#marketTabs .nav-link {
    position: relative;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 18px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--bw-tab-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em;
    white-space: nowrap;
    box-shadow: none !important;
    transition: color .3s var(--bw-ease-out), transform .15s ease;
}
#marketTabs .nav-link i { font-size: 15px; line-height: 1; opacity: .85; transition: transform .35s var(--bw-ease-spring); }
#marketTabs .nav-link:hover { color: var(--bw-tab-text-hover) !important; }
#marketTabs .nav-link:hover i { transform: translateY(-1px); }
#marketTabs .nav-link:active { transform: scale(.96); }
#marketTabs .nav-link.active { color: var(--bw-ind-text) !important; }
#marketTabs .nav-link.active i { opacity: 1; }
#marketTabs .nav-link::after { display: none !important; }
.bw-navbar.is-stuck #marketTabs .nav-link { padding-top: 7px !important; padding-bottom: 7px !important; }

/* Indicador (pastilla que se desliza) y sombra de hover */
.bw-ind, .bw-hover {
    position: absolute;
    top: 0; left: 0;
    height: 0; width: 0;
    border-radius: 999px;
    pointer-events: none;
    will-change: transform, width;
}
.bw-ind {
    z-index: 1;
    background: var(--bw-ind-bg);
    box-shadow: 0 2px 8px -3px rgba(0, 29, 59, .45);
    transition: transform .45s var(--bw-ease-spring), width .45s var(--bw-ease-spring), height .3s, background-color .3s;
}
[data-theme="dark"] .bw-ind { box-shadow: 0 2px 10px -3px rgba(89, 194, 171, .5); }
.bw-hover {
    z-index: 0;
    background: var(--bw-hover-bg);
    opacity: 0;
    transition: transform .3s var(--bw-ease-out), width .3s var(--bw-ease-out), opacity .2s;
}
.bw-hover.on { opacity: 1; }
.bw-nav-noanim .bw-ind, .bw-nav-noanim .bw-hover { transition: none !important; }

/* --------------------------------------------------------------------------
   Subpestañas: texto con línea menta que se desliza
   -------------------------------------------------------------------------- */
#marketTabsContent .nav-pills.bw-subnav {
    position: sticky;
    top: calc(var(--bw-header-h) + var(--bw-nav-h));
    z-index: 1010;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto;
    margin: 0 calc(var(--bw-gutter) * -1) 20px !important;
    padding: 0 var(--bw-gutter) !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--bg-color);
    overflow-x: auto !important;
    scrollbar-width: none;
    scroll-behavior: smooth;
    transition: background-color .25s, box-shadow .25s;
}
#marketTabsContent .nav-pills.bw-subnav::-webkit-scrollbar { display: none; }
#marketTabsContent .nav-pills.bw-subnav.is-stuck {
    background: var(--bw-bar-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: var(--bw-bar-shadow);
}
#marketTabsContent .bw-subnav .nav-item { flex: 0 0 auto !important; }
#marketTabsContent .bw-subnav .nav-link {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    padding: 12px 14px 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--bw-sub-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: color .25s var(--bw-ease-out);
}
#marketTabsContent .bw-subnav .nav-link:hover { color: var(--bw-sub-active) !important; }
#marketTabsContent .bw-subnav .nav-link.active { color: var(--bw-sub-active) !important; font-weight: 800 !important; }
#marketTabsContent .bw-subnav .nav-link::after { display: none !important; }

/* En subpestañas el indicador es una línea abajo y el hover un fondo redondeado */
#marketTabsContent .bw-subnav .bw-ind {
    top: auto !important;
    bottom: 0;
    height: 3px !important;
    border-radius: 3px 3px 0 0;
    background: var(--bw-sub-line);
    box-shadow: 0 0 12px rgba(89, 194, 171, .55);
}
#marketTabsContent .bw-subnav .bw-hover { border-radius: 8px; }

/* Una sola subpestaña (Global): la barra no aporta, se oculta */
#marketTabsContent .bw-subnav.bw-single { display: none !important; }

/* Bordes que se esfuman cuando la barra tiene más pestañas que ancho */
.bw-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px); mask-image: linear-gradient(90deg, transparent 0, #000 40px); }
.bw-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%); }
.bw-fade-l.bw-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }

/* --------------------------------------------------------------------------
   Deslizamiento del contenido
   -------------------------------------------------------------------------- */
@keyframes bwSlideFromRight { from { opacity: 0; transform: translate3d(56px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes bwSlideFromLeft  { from { opacity: 0; transform: translate3d(-56px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes bwFadeIn         { from { opacity: 0; } to { opacity: 1; } }

.bw-in-next { animation: bwSlideFromRight .42s var(--bw-ease-out) both; }
.bw-in-prev { animation: bwSlideFromLeft  .42s var(--bw-ease-out) both; }
.bw-in-fade { animation: bwFadeIn .3s ease both; }

/* --------------------------------------------------------------------------
   Responsive y accesibilidad
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .bw-navbar { padding-top: 8px; padding-bottom: 8px; }
    #marketTabs.bw-nav { display: flex !important; width: 100%; }
    #marketTabs .nav-link { padding: 8px 14px !important; font-size: 13px !important; }
    #marketTabsContent .bw-subnav .nav-link { padding: 11px 12px 12px !important; font-size: 12.5px !important; }
}
@media (max-width: 480px) {
    /* En pantallas chicas la pestaña activa muestra el nombre y el resto solo el ícono */
    #marketTabs .nav-link:not(.active) span { display: none; }
    #marketTabs .nav-link:not(.active) { padding-left: 13px !important; padding-right: 13px !important; }
    #marketTabs .nav-link i { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .bw-ind, .bw-hover, .bw-navbar, #marketTabs .nav-link, #marketTabs .nav-link i { transition: none !important; }
    .bw-in-next, .bw-in-prev, .bw-in-fade { animation: none !important; }
}