/* ===== VARIÁVEIS GLOBAIS ===== */
:root {
    /* Cores principais */
    --primary-dark: #0A2472;
    --primary: #3A7CA5;
    --primary-light: #5B9ABF;
    --accent: #ca7aff;
    --accent-light: #ba82e0;    
    --accent-shadow: rgba(202, 122, 255, 0.4);
    
    /* Cores neutras */
    --dark: #1F2937;
    --gray: #6B7280;
    --light-gray: #E5E7EB;
    --lighter-gray: #F3F4F6;
    --white: #FFFFFF; 
    
    /* Cores de feedback */
    --success: #10B981;
    --success-bg: #D1FAE5;
    --error: #EF4444;
    --error-bg: #FEE2E2;
    --warning: #F59E0B;
    --warning-bg: #FEF3C7;
    --info: #3B82F6;
    --info-bg: #DBEAFE;
    
    /* Espaçamentos */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Tipografia */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Bordas */
    --border-radius-sm: 0.25rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-full: 9999px;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--dark);
    /* background: linear-gradient(135deg, #f5f7fa 0%, #e9eef5 100%); */
    /* background: linear-gradient(135deg, #8e2de2, #4a00e0); */
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
        background: linear-gradient(180deg, 
        #ffffff, 
        #e8eeff, 
        #b5ccff, 
        #ca7aff, 
        #5f7ee0
    );
    background-size: 100% 200%;
    animation: gradientFlow 10s ease infinite alternate;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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


/* Para garantir que os cards e conteúdo ficam legíveis  */
.card, .form-container, .alert {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
} 



main {
    flex: 1;
}

/* ===== UTILITÁRIOS ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-md); }
.mt-2 { margin-top: var(--spacing-lg); }
.mt-3 { margin-top: var(--spacing-xl); }
.mb-1 { margin-bottom: var(--spacing-md); }
.mb-2 { margin-bottom: var(--spacing-lg); }
.mb-3 { margin-bottom: var(--spacing-xl); }

/* ===== LAYOUT ===== */
.flex {
    display: flex;
    gap: var(--spacing-md);
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}