@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}


@custom-variant dark (
    &:where(.dark, .dark *),
    @media (prefers-color-scheme: dark)
);

/**
 * Sistema Manual de Dark Mode con CSS Variables
 * Aplica mientras Tailwind genera las clases dark:
 */
:root {
    --color-bg-primary: rgb(255, 255, 255);
    --color-bg-secondary: rgb(249, 250, 251);
    --color-bg-tertiary: rgb(243, 244, 246);
    --color-text-primary: rgb(17, 24, 39);
    --color-text-secondary: rgb(107, 114, 128);
    --color-border: rgb(229, 231, 235);
}

html.dark {
    --color-bg-primary: rgb(31, 41, 55);
    --color-bg-secondary: rgb(17, 24, 39);
    --color-bg-tertiary: rgb(6, 13, 28);
    --color-text-primary: rgb(243, 244, 246);
    --color-text-secondary: rgb(156, 163, 175);
    --color-border: rgb(55, 65, 81);
    color-scheme: dark;
}

html {
    color-scheme: light;
}

/* Aplicar variables a elementos comunes */
html.dark {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

html.dark body {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

html.dark [class*="bg-white"] {
    background-color: var(--color-bg-primary) !important;
}

html.dark [class*="bg-gray-50"] {
    background-color: var(--color-bg-secondary) !important;
}

html.dark [class*="bg-gray-800"] {
    background-color: var(--color-bg-primary) !important;
}

html.dark [class*="bg-gray-900"] {
    background-color: var(--color-bg-secondary) !important;
}

html.dark [class*="text-gray-900"] {
    color: var(--color-text-primary) !important;
}

html.dark [class*="text-gray-700"] {
    color: var(--color-text-secondary) !important;
}

html.dark [class*="border-gray-200"] {
    border-color: var(--color-border) !important;
}

html.dark [class*="border-gray-700"] {
    border-color: var(--color-border) !important;
}

/* Animaciones Personalizadas */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(20px, -50px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    75% {
        transform: translate(50px, 50px) scale(1.05);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}