/**
 * Dark Mode Styles para Cuban Mods
 * Estilos globales para el modo oscuro
 */

/* Scrollbar para modo oscuro */
.dark *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark *::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark *::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #06b6d4);
    border-radius: 10px;
}

.dark *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2563eb, #0891b2);
}

/* Transiciones suaves */
* {
    transition-property: background-color, border-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Evitar flash de tema */
html.dark {
    color-scheme: dark;
}

html:not(.dark) {
    color-scheme: light;
}

/* Mejoras visuales para dark mode */
.dark {
    --tw-bg-opacity: 1;
}

/* Sombras ajustadas para dark mode */
.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3);
}

.dark .shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}