.select2-container--default.select2-container--disabled .select2-selection--single {
    cursor: not-allowed;
    background-color: #e9ecef !important;
}

/* Estilos para el nuevo botón de colapso personalizado */
.btn-collapse-custom {
    /* Forma y tamaño */
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Lo hacemos un círculo perfecto */
    padding: 0;
    /* Color y transparencia */
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    /* Centrado perfecto del ícono */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transición suave para el hover */
    transition: background-color 0.2s ease-in-out;
}

    /* Efecto al pasar el mouse o al hacer foco (para accesibilidad) */
    .btn-collapse-custom:hover,
    .btn-collapse-custom:focus {
        background-color: rgba(255, 255, 255, 0.2);
        color: #fff;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); /* Anillo de foco */
        outline: none;
    }

    /* Transición para la rotación del ícono (chevron) */
    .btn-collapse-custom .fas {
        transition: transform 0.3s ease;
    }

    /* Cuando el panel está colapsado, el botón tiene la clase .collapsed */
    .btn-collapse-custom.collapsed .fas {
        transform: rotate(-180deg);
    }




/* --- ESTILOS PARA EL NUEVO BOTÓN FLOTANTE DE LA BOLSA --- */
.btn-bag-flotante {
    /* --- Posición y Capas --- */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1040;
    /* --- Diseño del Círculo --- */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* AJUSTE 1: Gradiente real con dos colores y tamaño más grande */
    background: linear-gradient(-45deg, #0d6efd, #4dabf7);
    background-size: 200% auto;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* --- Contenido (ícono) --- */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    /* --- Animaciones --- */
    transform: scale(1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Aquí aplicamos las animaciones que definimos abajo */
    animation: gradient-flow2 4s ease infinite, pulse-glow2 2s ease-out infinite;
}

    /* Efecto al pasar el mouse */
    .btn-bag-flotante:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        color: white;
        /* Pausamos la animación de brillo al pasar el mouse para que el hover sea el protagonista */
        animation-play-state: paused, running;
    }
    /* --- Diseño del Contador (Badge) --- */
    .btn-bag-flotante .badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background-color: #dc3545;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        transform: scale(1);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

        .btn-bag-flotante .badge.visible {
            transform: scale(1);
            opacity: 1;
        }

        .btn-bag-flotante .badge.pulse {
            animation: pulse-animation 0.5s ease;
        }


@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes gradient-flow2 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse-glow2 {
    0% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(13, 110, 253, 0.3);
    }

    70% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(13, 110, 253, 0);
    }

    100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(13, 110, 253, 0);
    }
}