.category-btn.active {
    background-color: #1f2937;
    color: #ffffff;
}

/* Transición suave global para cambios de color y colapsables */
body, header, footer, .bg-white, .dark-mode-card, #collapsible-nosotros {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, max-height 0.3s ease-out, opacity 0.3s ease;
}

/* Ocultar barra de scroll manteniendo la funcionalidad de deslizamiento */
.scrollbar-none {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-none::-webkit-scrollbar { 
    display: none;  /* Safari y Chrome */
}

#categorias-container {
    cursor: grab;
}

/* Pantalla de carga inicial */
@keyframes spin-carga {
    to { transform: rotate(360deg); }
}
@keyframes pulso-carga {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
#pantalla-carga .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-carga 0.8s linear infinite;
}
#pantalla-carga .carga-texto {
    animation: pulso-carga 1.8s ease-in-out infinite;
}

/* Spinner de reconexión */
.reconnect-spinner {
    border-radius: 50%;
}

/* Fix cross-browser: border-radius + overflow:hidden en tarjetas de producto.
   Firefox y Vivaldi no clipean correctamente sin una capa de composición propia.
   transform:translateZ(0) + isolation:isolate fuerzan ese comportamiento. */
.card-fix-border {
    transform: translateZ(0);
    isolation: isolate;
}