/**
 * GLOBAL STYLES - Nós 2
 * Componentes personalizados usando Tailwind CSS
 * Base styles e componentes reutilizáveis
 */

/* Import do Tailwind CSS */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Variáveis CSS personalizadas */
:root {
    --primary-50: #fdf2f8;
    --primary-100: #fce7f3;
    --primary-500: #e91e63;
    --primary-600: #d81b60;
    --primary-700: #c2185b;

    --secondary-500: #9c27b0;
    --secondary-600: #8e24aa;

    --gradient-primary: linear-gradient(135deg, #e91e63, #9c27b0);
    --gradient-secondary: linear-gradient(135deg, #667eea, #764ba2);
    --gradient-success: linear-gradient(135deg, #4ade80, #22c55e);
    --gradient-warning: linear-gradient(135deg, #fbbf24, #f59e0b);
    --gradient-error: linear-gradient(135deg, #ef4444, #dc2626);

    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --border-radius-card: 0.75rem;
    --border-radius-button: 0.5rem;
    --border-radius-input: 0.5rem;
}

/* Base styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #d81b60, #8e24aa);
}

/* Componentes personalizados usando @layer */
@layer components {

    /* Botões */
    .btn-primary {
        @apply bg-gradient-to-r from-pink-500 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:from-pink-600 hover:to-purple-700 hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300;
    }

    .btn-secondary {
        @apply bg-white border border-gray-300 text-gray-700 font-semibold py-3 px-6 rounded-lg shadow-sm hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200;
    }

    .btn-success {
        @apply bg-gradient-to-r from-green-500 to-emerald-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:from-green-600 hover:to-emerald-700 hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-green-300;
    }

    .btn-danger {
        @apply bg-gradient-to-r from-red-500 to-rose-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:from-red-600 hover:to-rose-700 hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-red-300;
    }

    .btn-warning {
        @apply bg-gradient-to-r from-yellow-500 to-amber-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:from-yellow-600 hover:to-amber-700 hover:shadow-xl transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300;
    }

    .btn-icon {
        @apply p-3 rounded-lg transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-4;
    }

    .btn-ghost {
        @apply text-gray-600 hover:text-pink-600 hover:bg-pink-50 py-2 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-200;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-xl shadow-lg border border-gray-100 p-6 transition-all duration-200 hover:shadow-xl;
    }

    .card-hover {
        @apply hover:transform hover:-translate-y-2;
    }

    .card-gradient {
        @apply bg-gradient-to-br from-white to-gray-50;
    }

    .card-glass {
        @apply bg-white/80 backdrop-blur-lg border border-white/20;
    }

    /* Inputs */
    .input-field {
        @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all duration-200 bg-white placeholder-gray-400;
    }

    .input-error {
        @apply border-red-300 focus:ring-red-500 bg-red-50;
    }

    .input-success {
        @apply border-green-300 focus:ring-green-500 bg-green-50;
    }

    /* Navigation */
    .nav-link {
        @apply flex items-center space-x-2 px-3 py-2 rounded-lg font-medium transition-all duration-200;
    }

    .nav-link-active {
        @apply bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg;
    }

    .nav-link-inactive {
        @apply text-gray-600 hover:text-pink-600 hover:bg-pink-50;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
    }

    .badge-primary {
        @apply bg-pink-100 text-pink-800;
    }

    .badge-secondary {
        @apply bg-purple-100 text-purple-800;
    }

    .badge-success {
        @apply bg-green-100 text-green-800;
    }

    .badge-warning {
        @apply bg-yellow-100 text-yellow-800;
    }

    .badge-danger {
        @apply bg-red-100 text-red-800;
    }

    .badge-info {
        @apply bg-blue-100 text-blue-800;
    }

    .badge-gray {
        @apply bg-gray-100 text-gray-800;
    }

    /* Progress */
    .progress-bar {
        @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
    }

    .progress-fill {
        @apply h-full rounded-full transition-all duration-1000 ease-out;
    }

    .progress-primary {
        @apply bg-gradient-to-r from-pink-500 to-purple-600;
    }

    .progress-success {
        @apply bg-gradient-to-r from-green-500 to-emerald-600;
    }

    .progress-warning {
        @apply bg-gradient-to-r from-yellow-500 to-amber-600;
    }

    /* Modals */
    .modal-backdrop {
        @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4;
    }

    .modal-content {
        @apply bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto;
    }

    .modal-glass {
        @apply bg-white/95 backdrop-blur-lg;
    }

    /* Notifications */
    .notification {
        @apply fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg text-white transform transition-all duration-300;
    }

    .notification-success {
        @apply bg-gradient-to-r from-green-500 to-emerald-600;
    }

    .notification-error {
        @apply bg-gradient-to-r from-red-500 to-rose-600;
    }

    .notification-warning {
        @apply bg-gradient-to-r from-yellow-500 to-amber-600;
    }

    .notification-info {
        @apply bg-gradient-to-r from-blue-500 to-indigo-600;
    }

    /* Gradients */
    .gradient-primary {
        background: var(--gradient-primary);
    }

    .gradient-secondary {
        background: var(--gradient-secondary);
    }

    .gradient-text {
        @apply bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent;
    }

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

    .animate-slide-up {
        animation: slideUp 0.4s ease-out;
    }

    .animate-scale-in {
        animation: scaleIn 0.3s ease-out;
    }

    .animate-bounce-in {
        animation: bounceIn 0.6s ease-out;
    }

    .animate-shine {
        position: relative;
        overflow: hidden;
    }

    .animate-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shine 2s infinite;
    }

    /* Loading */
    .loading-spinner {
        @apply inline-block w-6 h-6 border-2 border-current border-t-transparent rounded-full animate-spin;
    }

    .loading-dots {
        @apply inline-flex space-x-1;
    }

    .loading-dot {
        @apply w-2 h-2 bg-current rounded-full animate-pulse;
    }

    /* Grid System */
    .grid-responsive {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
    }

    .grid-auto-fit {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    /* Typography */
    .text-gradient {
        @apply bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent;
    }

    .text-balance {
        text-wrap: balance;
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .dark-mode {
            @apply bg-gray-900 text-white;
        }

        .dark-mode .card {
            @apply bg-gray-800 border-gray-700;
        }

        .dark-mode .input-field {
            @apply bg-gray-800 border-gray-600 text-white placeholder-gray-400;
        }
    }

    /* Print styles */
    @media print {
        .no-print {
            display: none !important;
        }

        .print-break {
            page-break-after: always;
        }

        * {
            @apply text-black bg-white;
        }
    }

    /* High contrast mode */
    @media (prefers-contrast: high) {
        .btn-primary {
            @apply bg-black text-white border-2 border-white;
        }

        .card {
            @apply border-2 border-black;
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Keyframes para animações */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Utility classes */
@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .backdrop-blur-xs {
        backdrop-filter: blur(2px);
    }

    .backdrop-blur-3xl {
        backdrop-filter: blur(64px);
    }

    .mask-gradient {
        mask-image: linear-gradient(180deg, black 0%, transparent 100%);
    }

    .scrollbar-hidden {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scrollbar-hidden::-webkit-scrollbar {
        display: none;
    }

    .aspect-square {
        aspect-ratio: 1 / 1;
    }

    .aspect-video {
        aspect-ratio: 16 / 9;
    }

    .aspect-photo {
        aspect-ratio: 4 / 3;
    }

    .break-anywhere {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}