/* ===================================================================== */
/* ---        CSS GLOBAL: MENÚ FLOTANTE (DESKTOP Y MÓVIL)            --- */
/* ===================================================================== */

:root {
    --fn-primary: #0d6efd;
    --fn-active-bg: rgba(13, 110, 253, 0.15);
    --fn-bg-solid: #f0f2f5;
    --fn-text-main: #2b2d42;
    --fn-text-muted: #5c677d; /* Gris oscuro para íconos inactivos */
    --fn-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Espacio inferior para que el contenido no quede oculto por la barra */
body {
    padding-bottom: 110px !important;
}

/* 1. CONTENEDOR PRINCIPAL DEL MENÚ */
.global-floating-nav {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 96% !important;
    max-width: 700px !important;
    height: 75px !important;
    background: var(--fn-bg-solid) !important;
    border-radius: 40px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 5px !important;
    z-index: 1040 !important;
}

    /* 2. PASTILLA ANIMADA (Color Azul Clarito) */
    .global-floating-nav .active-indicator {
        position: absolute !important;
        height: 50px !important;
        background: var(--fn-active-bg) !important;
        border-radius: 22px !important;
        z-index: 1 !important;
        transition: var(--fn-transition) !important;
        pointer-events: none !important;
        top: 11.5px !important;
    }

    /* Estilos de los íconos/texto */
    .global-floating-nav .tab-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        color: var(--fn-text-muted) !important;
        cursor: pointer !important;
        transition: 0.3s !important;
        text-decoration: none !important;
        position: relative !important;
        z-index: 2 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        height: 100% !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
    }

        .global-floating-nav .tab-item i {
            font-size: 20px !important;
            margin-bottom: 4px !important;
            transition: var(--fn-transition) !important;
        }

        /* Color del ícono cuando está activo */
        .global-floating-nav .tab-item.active {
            color: var(--fn-primary) !important;
        }

            .global-floating-nav .tab-item.active i {
                transform: translateY(-2px) scale(1.1) !important;
            }

    /* 3. BOTÓN CENTRAL (FAB) */
    .global-floating-nav .center-item {
        position: relative !important;
        width: 85px !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .global-floating-nav .fab-button {
        position: absolute !important;
        top: -35px !important;
        width: 68px !important;
        height: 68px !important;
        background: var(--fn-primary) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 24px !important;
        border: 6px solid var(--fn-bg-solid) !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25) !important;
        cursor: pointer !important;
        z-index: 10 !important;
        transition: transform 0.3s ease !important;
    }

        .global-floating-nav .fab-button:hover {
            transform: scale(1.05) !important;
        }

    /* 4. SUBMENÚ FLOTANTE (Speed Dial) */
    .global-floating-nav .speed-dial {
        position: absolute !important;
        bottom: 62px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: center !important;
        pointer-events: none !important;
        z-index: 1030 !important;
    }

    .global-floating-nav .speed-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        opacity: 0 !important;
        transform: translateY(20px) scale(0) !important;
        transition: var(--fn-transition) !important;
    }

        .global-floating-nav .speed-item.show {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
            pointer-events: auto !important;
        }

    .global-floating-nav .speed-label {
        background: var(--fn-text-main) !important;
        color: white !important;
        padding: 6px 14px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
    }

    .global-floating-nav .speed-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--fn-primary) !important;
        font-size: 18px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        cursor: pointer !important;
    }

    /* 5. MENÚ "MÁS" (Derecha) */
    .global-floating-nav .more-menu {
        position: absolute !important;
        bottom: 65px !important;
        right: 10px !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        padding: 10px !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.25) !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        display: none !important;
        flex-direction: column !important;
        min-width: 200px !important;
        z-index: 2001 !important;
        transform-origin: bottom right !important;
    }

        .global-floating-nav .more-menu.show {
            display: flex !important;
            animation: popUp 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
        }

    .global-floating-nav .more-item {
        padding: 12px 15px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        color: var(--fn-text-main) !important;
        transition: background 0.2s !important;
    }

        .global-floating-nav .more-item i {
            color: var(--fn-primary) !important;
            width: 24px !important;
            text-align: center !important;
            font-size: 18px !important;
        }

        .global-floating-nav .more-item:hover {
            background: rgba(13, 110, 253, 0.08) !important;
        }

@keyframes popUp {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
}


.ui-to-top {
    bottom: 170px !important;
    right: 15px !important;
}

@media (max-width: 768px) {
    .ui-to-top {
        bottom: 170px !important;
        right: 15px !important;
    }
}