/* 
   PedidoFlow - Global Scrollbar & UI Refinements 
   Estilos premium para toda la aplicación
*/

/* 1. Scrollbar Universal (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px; /* Ancho ideal para desktop */
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(37, 211, 102, 0.3);
    border-radius: 20px;
    border: 3px solid transparent; /* Crea el efecto de "padding" interno */
    background-clip: content-box;
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #25d366; /* Verde PedidoFlow sólido */
    border: 2px solid transparent;
}

/* Modo Oscuro */
.dark ::-webkit-scrollbar-thumb {
    background-color: rgba(37, 211, 102, 0.25);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #25d366;
}

/* Soporte para Firefox (Estética similar) */
* {
    scrollbar-width: thin;
    scrollbar-color: #25d366 transparent;
    scrollbar-gutter: stable; /* Evita saltos de layout al aparecer el scroll */
}

.dark * {
    scrollbar-color: #25d366 transparent;
}

/* 2. Refinamientos de Selección de Texto */
::selection {
    background-color: rgba(37, 211, 102, 0.2);
    color: #075E54;
}

.dark ::selection {
    background-color: rgba(37, 211, 102, 0.4);
    color: #ffffff;
}

/* 3. Estilo global para tarjetas o elementos seleccionados */
.active-card {
    border: 2px solid #25d366 !important;
    background: rgba(37, 211, 102, 0.08) !important;
    transition: all 0.3s ease;
}

.dark .active-card {
    border: 2px solid #25d366 !important;
    background: rgba(37, 211, 102, 0.15) !important;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.15) !important;
}