/**
 * Configuraciones personalizadas para Tailwind CSS
 * Incluye animaciones, gradientes y estilos custom
 */

@layer utilities {
    /* Glassmorphism Effects */
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .glass-dark {
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Gradient Text */
    .gradient-text {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .gradient-text-success {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Animated Gradients */
    .animated-gradient {
        background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
    }

    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Smooth Fade In Animations */
    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Slide In Animation */
    .slide-in-right {
        animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Pulse Animation */
    .pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* Custom Scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-gray-100 dark:bg-gray-800 rounded-full;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-gray-300 dark:bg-gray-600 rounded-full hover:bg-gray-400 dark:hover:bg-gray-500;
    }

    /* Hover Lift Effect */
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Badge Styles */
    .badge-glow {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    }

    /* Focus Ring Custom */
    .focus-ring {
        @apply focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
    }
}

/* Tab System Styles */
.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-pane.active {
    display: block;
}

/* Voice Info Card Animations */
.voice-info-card {
    transition: all 0.3s ease;
}

.voice-info-card.show {
    opacity: 1;
    transform: translateY(0);
}

/* Loading Spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin 3s linear infinite;
}

/* Card Hover Effect */
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

/* Button Ripple Effect */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
    animation: ripple 0.6s ease-out;
}

/* Gradient Borders */
.gradient-border {
    position: relative;
    background: white;
    border-radius: 0.75rem;
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    padding: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Dark mode adjustments for CodeMirror */
.dark .CodeMirror {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

.dark .CodeMirror-gutters {
    background-color: #111827 !important;
    border-right-color: #374151 !important;
}

/* Tom Select Dark Mode */
.dark .ts-wrapper.form-select .ts-control {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark .ts-dropdown {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .ts-dropdown .option {
    color: #e5e7eb !important;
}

.dark .ts-dropdown .option.active {
    background-color: #374151 !important;
}

/* Ion Range Slider Dark Mode */
.dark .irs {
    color: #e5e7eb;
}

.dark .irs--flat .irs-line {
    background-color: #374151;
}

.dark .irs--flat .irs-bar {
    background-color: #6366f1;
}

.dark .irs--flat .irs-handle > i:first-child {
    background-color: #6366f1;
}

.dark .irs--flat .irs-from,
.dark .irs--flat .irs-to,
.dark .irs--flat .irs-single {
    background-color: #6366f1;
}