/* ===================================================================== Sistema de Fluxo de Caixa - Estilos Tema claro, layout profissional, responsivo (complementa o Bootstrap 5) ===================================================================== */ :root { --cor-fundo: #f4f6fb; --cor-primaria: #2563eb; --cor-sucesso: #16a34a; --cor-alerta: #d97706; --cor-perigo: #dc2626; } body.pagina-painel, body.pagina-login { background-color: var(--cor-fundo); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ------------------------- Login ------------------------- */ body.pagina-login { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); } .login-card { width: 100%; max-width: 420px; border-radius: 1rem; animation: surgir .4s ease-out; } .login-icone { width: 70px; height: 70px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #1e40af); color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; } /* ------------------------- Cards do dashboard ------------------------- */ .card-resumo { border-radius: .75rem; transition: transform .15s ease, box-shadow .15s ease; } .card-resumo:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important; } .card-resumo.borda-sucesso { border-left: 4px solid var(--cor-sucesso) !important; } .card-resumo.borda-alerta { border-left: 4px solid var(--cor-alerta) !important; } .card-resumo.borda-info { border-left: 4px solid #0891b2 !important; } .card-resumo.borda-primaria { border-left: 4px solid var(--cor-primaria) !important; } .rotulo-card { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; } .icone-card { width: 44px; height: 44px; min-width: 44px; border-radius: .65rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .texto-sucesso { color: var(--cor-sucesso); } /* ------------------------- Tabela ------------------------- */ .tabela-lancamentos tbody tr { animation: surgir .25s ease-out; } .tabela-lancamentos th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } /* Badges de status */ .badge-status { display: inline-block; padding: .3em .7em; font-size: .75rem; font-weight: 600; border-radius: 2rem; white-space: nowrap; } .badge-sucesso { background: #dcfce7; color: #15803d; } .badge-alerta { background: #fef3c7; color: #b45309; } .badge-cancelado { background: #f1f5f9; color: #64748b; text-decoration: line-through; } tr.linha-cancelada td { opacity: .55; } /* ------------------------- Graficos ------------------------- */ .grafico-container { position: relative; height: 300px; width: 100%; } /* ------------------------- Animacoes ------------------------- */ @keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------- Impressao (relatorio) ------------------------- */ @media print { .nao-imprimir { display: none !important; } body.pagina-relatorio { background: #fff !important; } .badge-status { border: 1px solid #999; } } /* ------------------------- Tema escuro ------------------------- */ /* Ativado via data-bs-theme="dark" no (assets/js/tema.js) */ [data-bs-theme="dark"] .pagina-painel, [data-bs-theme="dark"] .pagina-login { background-color: #0f172a; } /* Login: gradiente mais profundo no escuro */ [data-bs-theme="dark"] .pagina-login { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a5f 100%); } /* Cabecalhos de card usam bg-white (utilitario fixo do Bootstrap) - sobrescreve */ [data-bs-theme="dark"] .bg-white { background-color: #1e293b !important; } [data-bs-theme="dark"] .card { --bs-card-bg: #1e293b; } /* Cartao .bg-light (legenda dos niveis) forca fundo claro com !important; no tema escuro sobrescrevemos, senao o texto claro fica ilegivel. Escopo em .card para nao afetar o badge .bg-light da navbar. */ [data-bs-theme="dark"] .card.bg-light { background-color: #16213a !important; --bs-bg-opacity: 1; } /* Cabecalho da tabela (table-light e fixo claro no Bootstrap) */ [data-bs-theme="dark"] .table-light { --bs-table-bg: #16213a; --bs-table-color: #cbd5e1; --bs-table-border-color: #334155; } [data-bs-theme="dark"] .rotulo-card { color: #94a3b8; } [data-bs-theme="dark"] .card-resumo:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .45) !important; } /* Badges de status no escuro */ [data-bs-theme="dark"] .badge-sucesso { background: #14532d; color: #86efac; } [data-bs-theme="dark"] .badge-alerta { background: #78350f; color: #fcd34d; } [data-bs-theme="dark"] .badge-cancelado { background: #334155; color: #94a3b8; } [data-bs-theme="dark"] .texto-sucesso { color: #4ade80; } /* Botao de tema */ .icone-tema { font-size: 1.05rem; } .botao-tema-login { position: absolute; top: .75rem; right: .75rem; width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; } /* ------------------------- Ajustes mobile ------------------------- */ @media (max-width: 576px) { .card-resumo h4 { font-size: 1.15rem; } .card-resumo h5 { font-size: 1rem; } .grafico-container { height: 240px; } }