@charset "UTF-8";

/* ============================================================
   DESIGN SYSTEM - TEMA AZUL + BRANCO
   ============================================================ */

:root {
    /* Cores Primárias */
    --primary: #1591EA;
    --primary-hover: #0B5BD3;
    --primary-light: rgba(21, 145, 234, 0.1);
    --primary-focus: rgba(21, 145, 234, 0.18);
    
    /* Fundos */
    --bg: #F7F8FA;
    --surface: #FFFFFF;
    --surface-hover: #F9FAFB;
    
    /* Textos */
    --text: #0B1220;
    --text-muted: #667085;
    --text-light: #9CA3AF;
    
    /* Bordas e Divisores */
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
    --shadow: 0 4px 6px rgba(11, 18, 32, 0.08);
    --shadow-md: 0 10px 15px rgba(11, 18, 32, 0.1);
    --shadow-lg: 0 20px 25px rgba(11, 18, 32, 0.12);
    
    /* Cores de Estado */
    --danger: #E53935;
    --danger-hover: #C62828;
    --danger-light: rgba(229, 57, 53, 0.1);
    --success: #22C55E;
    --success-light: rgba(34, 197, 94, 0.1);
    --warn: #F59E0B;
    --warn-light: rgba(245, 158, 11, 0.1);
    --info: #3B82F6;
    --info-light: rgba(59, 130, 246, 0.1);
    
    /* Bordas Arredondadas */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-full: 999px;
    
    /* Espaçamentos */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Transições */
    --transition: all 0.2s ease;
    --transition-slow: all 0.3s ease;
}

/* Reset básico para garantir fundo branco */
body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Links padrão */
a {
    color: var(--primary) !important;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-hover) !important;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--text) !important;
}

/* Textos secundários */
p, span, small {
    color: var(--text-muted) !important;
}

/* Inputs padrão */
input, select, textarea {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-focus) !important;
}

/* Botões padrão */
.btn-primary {
    background: var(--primary) !important;
    color: var(--surface) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Botões de perigo (SOS, excluir, etc) */
.btn-danger {
    background: var(--danger) !important;
    color: var(--surface) !important;
    border-color: var(--danger) !important;
}

.btn-danger:hover {
    background: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
}

/* Cards */
.card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text) !important;
}

/* Badges */
.badge-success {
    background: var(--success) !important;
    color: var(--surface) !important;
}

.badge-danger {
    background: var(--danger) !important;
    color: var(--surface) !important;
}

.badge-warning {
    background: var(--warn) !important;
    color: var(--surface) !important;
}

.badge-info {
    background: var(--info) !important;
    color: var(--surface) !important;
}

.badge-primary {
    background: var(--primary) !important;
    color: var(--surface) !important;
}

.badge-secondary {
    background: var(--text-muted) !important;
    color: var(--surface) !important;
}