/* ==========================================
   TEMA CLARO / ESCURO — Variáveis Globais
   ========================================== */
:root {
    --cor-primaria: #03968c;
    --cor-primaria-clara: #05b8ab;
    --cor-perigo: #dc2626;

    --fundo-pagina: #f8fafc;
    --fundo-card: #ffffff;
    --texto-principal: #0f172a;
    --texto-secundario: #64748b;
    --borda-suave: #e2e8f0;
    --sombra-suave: rgba(15, 23, 42, 0.06);
}

/* MODO ESCURO — ativado pela classe .dark no <html> */
.dark {
    --cor-primaria: #05b8ab;
    --cor-primaria-clara: #0de0d1;
    --cor-perigo: #ef4444;

    --fundo-pagina: #020617;
    --fundo-card: #0f172a;
    --texto-principal: #f8fafc;
    --texto-secundario: #94a3b8;
    --borda-suave: #1e293b;
    --sombra-suave: rgba(0, 0, 0, 0.35);
}

/* ==========================================
   FUNDO DA PÁGINA
   ========================================== */
body {
    background-color: var(--fundo-pagina) !important;
    color: var(--texto-principal) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================
   CARDS — Padrão principal
   ========================================== */
.card,
.fi-card,
.filament-card,
.estatistica-card,
.bloco-dados {
    background-color: var(--fundo-card) !important;
    color: var(--texto-principal) !important;
    border: 1px solid var(--borda-suave) !important;
    box-shadow: 0 2px 12px var(--sombra-suave);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

/* Títulos dentro dos cards */
.card h1,
.card h2,
.card h3,
.card h4,
.fi-card h1,
.fi-card h2,
.fi-card h3 {
    color: var(--texto-principal) !important;
}

/* Textos e parágrafos dentro dos cards */
.card p,
.card span,
.card div,
.fi-card p,
.fi-card span {
    color: var(--texto-secundario) !important;
}

/* ==========================================
   ELEMENTOS DO FILAMENT (se usar)
   ========================================== */
.dark .fi-sidebar,
.dark .fi-topbar {
    background-color: var(--fundo-card) !important;
    border-color: var(--borda-suave) !important;
}

.dark .fi-section {
    background-color: var(--fundo-card) !important;
    border-color: var(--borda-suave) !important;
}

/* ==========================================
   COMPONENTES GERAIS
   ========================================== */

/* Botões e hover */
.botao-tema {
    transition: all 0.2s ease;
}

/* Separadores e linhas */
.linha,
hr {
    border-color: var(--borda-suave) !important;
    background-color: var(--borda-suave) !important;
}