/* =============================================================================
   MENU FLOTANTE (parametro MENU_ESTILO = flotante)
   -----------------------------------------------------------------------------
   El navbar del theme se convierte en una pastilla FIJA, despegada del borde,
   translucida y con blur, que no se clona al scrollear (theme.js saltea
   Headhesive cuando ve .navbar-flotante). En mobile no abre un cajon lateral:
   se despliega hacia abajo dentro de la misma pastilla y la hamburguesa se
   vuelve una X. Replica el comportamiento del menu de coredevs.ar.

   Dos variantes que maneja menu-flotante.js:
     - .navbar-flotante-sobre-portada: hay una portada debajo de la pastilla
       (arriba de todo de la pagina): fondo translucido oscuro y texto blanco.
     - sin esa clase (o al scrollear fuera de la portada): variante clara.

   Cada tenant ajusta colores y medidas desde su custom.css pisando las
   variables --mf-* (no hace falta tocar este archivo).
   ============================================================================= */

:root {
    --mf-top: 16px;
    --mf-ancho: 1400px;
    --mf-radio: 1rem;
    --mf-blur: 28px;
    --mf-sombra: 0 20px 40px -12px rgba(11, 26, 51, .22);

    /* variante clara (por defecto) */
    --mf-fondo: rgba(255, 255, 255, .78);
    --mf-borde: rgba(11, 26, 51, .08);
    --mf-texto: #0b1a33;
    --mf-texto-hover: var(--color-primario, #2196f3);
    --mf-fondo-abierto: var(--mf-fondo);           /* desplegada conserva la translucidez */

    /* variante sobre portada (foto oscura debajo) */
    --mf-fondo-portada: rgba(255, 255, 255, .08);
    --mf-borde-portada: rgba(255, 255, 255, .14);
    --mf-texto-portada: #ffffff;
    --mf-texto-hover-portada: #ffffff;
    --mf-fondo-portada-abierto: var(--mf-fondo-portada);

    --mf-separador: rgba(11, 26, 51, .08);
    --mf-separador-portada: rgba(255, 255, 255, .12);
}

/* ---- El header sale del flujo: la pastilla flota sobre lo que venga abajo ---- */
header.header-flotante {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1010;
    height: 0;
    overflow: visible;
    background: transparent !important;
}

header.header-flotante #divBarraSuperior {
    display: none !important;
}

/* Paginas sin portada arriba de todo: el contenido arranca debajo de la pastilla.
   --mf-alto lo mide el JS con el alto real de la pastilla. */
body.mf-sin-hero .content-wrapper {
    padding-top: calc(var(--mf-top) + var(--mf-alto, 72px) + 40px);
}

/* ---- La pastilla ---- */
.navbar.navbar-flotante {
    position: fixed !important;
    top: var(--mf-top);
    left: 0;
    right: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 2rem) !important;
    max-width: var(--mf-ancho);
    z-index: 1009;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: var(--mf-radio);
    border: 1px solid var(--mf-borde);
    box-shadow: var(--mf-sombra);
    background: transparent !important;
    transition: border-color .3s ease;
}

/* El blur va en un pseudo-elemento: si el filtro queda en el navbar, este se
   vuelve containing block y rompe los dropdowns/offcanvas. */
.navbar.navbar-flotante::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--mf-fondo);
    -webkit-backdrop-filter: blur(var(--mf-blur));
    backdrop-filter: blur(var(--mf-blur));
    transition: background-color .3s ease;
}

.navbar.navbar-flotante .navbar-collapse,
.navbar.navbar-flotante .offcanvas-body,
.navbar.navbar-flotante #mobileMenu {
    background: transparent !important;
}

.navbar.navbar-flotante .nav-link,
.navbar.navbar-flotante .nav-link i,
.navbar.navbar-flotante .navbar-other i,
.navbar.navbar-flotante .hamburger {
    color: var(--mf-texto) !important;
    transition: color .2s ease;
}

.navbar.navbar-flotante .nav-link:hover,
.navbar.navbar-flotante .nav-link:hover i,
.navbar.navbar-flotante .navbar-nav .nav-link.active {
    color: var(--mf-texto-hover) !important;
}

/* ---- Variante sobre portada ---- */
.navbar.navbar-flotante.navbar-flotante-sobre-portada {
    border-color: var(--mf-borde-portada);
}

.navbar.navbar-flotante.navbar-flotante-sobre-portada::before {
    background: var(--mf-fondo-portada);
}

.navbar.navbar-flotante.navbar-flotante-sobre-portada .nav-link,
.navbar.navbar-flotante.navbar-flotante-sobre-portada .nav-link i,
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-other i,
.navbar.navbar-flotante.navbar-flotante-sobre-portada .hamburger {
    color: var(--mf-texto-portada) !important;
}

.navbar.navbar-flotante.navbar-flotante-sobre-portada .nav-link:hover,
.navbar.navbar-flotante.navbar-flotante-sobre-portada .nav-link:hover i,
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-nav .nav-link.active {
    color: var(--mf-texto-hover-portada) !important;
}

/* ---- Anclas: con la pastilla fija encima, el destino de un #ancla queda
   tapado; se deja el margen de scroll equivalente a la pastilla mas un aire ---- */
body:has(.navbar-flotante) [id] {
    scroll-margin-top: calc(var(--mf-top) + var(--mf-alto, 72px) + 24px);
}

/* ---- Sin clon: el theme no lo crea (theme.js), por las dudas no se ve ---- */
.navbar-clone {
    display: none !important;
}

/* ---- Desplegables de escritorio, con el mismo vidrio de la pastilla ---- */
.navbar.navbar-flotante .dropdown-menu {
    margin-top: .6rem !important;
    border-radius: calc(var(--mf-radio) - 2px);
    border: 1px solid var(--mf-borde);
    background: var(--mf-fondo-abierto);
    -webkit-backdrop-filter: blur(var(--mf-blur));
    backdrop-filter: blur(var(--mf-blur));
    box-shadow: var(--mf-sombra);
}

/* ---- Mobile: el menu se despliega dentro de la pastilla ---- */
@media (max-width: 991.98px) {
    /* el theme le pone flex-nowrap (!important) al contenedor: el panel tiene
       que bajar a una segunda fila */
    .navbar.navbar-flotante > .container {
        flex-wrap: wrap !important;
    }

    .navbar.navbar-flotante .offcanvas-nav {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column;
        order: 10;
        flex: 0 0 100%;
        width: 100% !important;
        height: auto !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0 .5rem;
        margin: 0;
        border: 0;
        background: transparent !important;
        transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, padding .3s ease;
    }

    .navbar.navbar-flotante.abierto .offcanvas-nav {
        max-height: 70vh;
        overflow-y: auto;
        opacity: 1;
        padding: .25rem .5rem 1rem;
    }

    .navbar.navbar-flotante .offcanvas-nav .offcanvas-header,
    .navbar.navbar-flotante .offcanvas-nav .offcanvas-footer {
        display: none !important;
    }

    /* logo e iconos comparten la primera fila (el theme les da w-100) */
    .navbar.navbar-flotante > .container > .navbar-brand {
        width: auto !important;
        flex: 1 1 auto;
    }

    .navbar.navbar-flotante > .container > .navbar-other {
        width: auto !important;
        flex: 0 0 auto;
    }

    /* el theme deja la lista absoluta dentro de un cuerpo de alto 0 (es su
       mecanica de submenus deslizantes): aca la lista fluye normal */
    .navbar.navbar-flotante .offcanvas-nav .offcanvas-body {
        display: block !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .navbar.navbar-flotante .offcanvas-nav .navbar-nav,
    .navbar.navbar-flotante #mobileMenu .mobile-menu-panel {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        background: transparent !important;
    }

    /* Submenus (una opcion con dropdown, como un Catalogo con sus categorias): el
       theme superpone los paneles -el nuevo entra por encima y el anterior queda
       quieto abajo-, pero aca fluyen uno debajo del otro, asi que se veian los dos
       apilados. Se muestra solo el panel activo (y el que esta entrando). */
    .navbar.navbar-flotante #mobileMenu .mobile-menu-panel:not(.active):not(.slide-in-right),
    .navbar.navbar-flotante #mobileMenu .mobile-menu-panel.slide-out-right {
        display: none !important;
    }

    .navbar.navbar-flotante .offcanvas-nav .navbar-nav > .nav-item > .nav-link {
        padding: .85rem 1rem !important;
        border-bottom: 1px solid var(--mf-separador);
        font-size: 1.05rem;
    }

    .navbar.navbar-flotante.navbar-flotante-sobre-portada .offcanvas-nav .navbar-nav > .nav-item > .nav-link {
        border-bottom-color: var(--mf-separador-portada);
    }

    .navbar.navbar-flotante .offcanvas-nav .navbar-nav > .nav-item:last-child > .nav-link {
        border-bottom: 0;
    }

    /* abierta, la pastilla mantiene su vidrio; el tenant puede subir la opacidad
       con --mf-fondo-abierto / --mf-fondo-portada-abierto si lo necesita */
    .navbar.navbar-flotante.abierto::before {
        background: var(--mf-fondo-abierto);
    }

    .navbar.navbar-flotante.abierto.navbar-flotante-sobre-portada::before {
        background: var(--mf-fondo-portada-abierto);
    }

    /* la hamburguesa se vuelve X */
    .navbar.navbar-flotante .hamburger span,
    .navbar.navbar-flotante .hamburger:before,
    .navbar.navbar-flotante .hamburger:after {
        transition: transform .25s ease, opacity .2s ease, margin .25s ease;
    }

    .navbar.navbar-flotante.abierto .hamburger span {
        opacity: 0;
    }

    .navbar.navbar-flotante.abierto .hamburger:before {
        transform: translateY(.4rem) rotate(45deg);
    }

    .navbar.navbar-flotante.abierto .hamburger:after {
        transform: translateY(-.4rem) rotate(-45deg);
    }

    /* el backdrop del offcanvas del theme no aplica en este modo */
    .offcanvas-backdrop {
        display: none !important;
    }
}