/* global.css */
/* ===== VARIÁVEIS CSS - SISTEMA DE DESIGN ===== */
:root {
    /* Cores Principais */
    --primary-color: #667eea;
    --primary-dark: #5a6fd8;
    --secondary-color: #764ba2;
    --success-color: #48bb78;
    --warning-color: #ed8936;
    --danger-color: #f56565;
    --info-color: #4299e1;
    --orange-color: #fd7e14; /* ← Pagamentos em atraso */
    
    /* Cores Neutras */
    --dark-color: #2d3748;
    --gray-dark: #4a5568;
    --gray-medium: #718096;
    --gray-light: #a0aec0;
    --gray-lighter: #e2e8f0;
    --white: #ffffff;
    
    /* Espaçamentos */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* Bordas */
    --border-radius: 4px;
    --border-radius-sx: 8px;
    --border-radius-sm: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.2);
    
    /* Transições */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ===== RESET E BASE ===== */
.meu-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-sm);
    margin-top: 85px !important;
}

/* ===== RESPONSIVE BASE ===== */
@media (max-width: 768px) {
    .meu-container {
        margin-top: 70px;
        padding: 0 8px;
    }
}

@media (max-width: 480px) {
    .meu-container {
        padding: 0 5px;
    }
}