/* Tokens de cor da fundação — aprovados no protótipo do dashboard.
Trocar tema é editar aqui, não caçar cor em cada tela. */
:root[data-theme="light"] {
--bg-main: #f4f5f7;
--surface-card: #ffffff;
--field-bg: #ffffff;
--text-main: #1a1d21;
--text-sub: #6c757d;
--border-col: #e2e8f0;
--brand-blue: #0d6efd;
--brand-gold: #f2a623;
--sidebar-bg: #1a1d21;
--sidebar-text: rgba(255, 255, 255, 0.65);
}
:root[data-theme="dark"] {
--bg-main: #0f1115;
--surface-card: #1a1d24;
--field-bg: #22262f;
--text-main: #f1f3f5;
--text-sub: #8b92a0;
--border-col: rgba(255, 255, 255, 0.08);
--brand-blue: #4c93ff;
--brand-gold: #f2a623;
--sidebar-bg: #101216;
--sidebar-text: rgba(255, 255, 255, 0.65);
}
* { box-sizing: border-box; }
/* O atributo `hidden` só some de verdade se nada mais no CSS já tiver
fixado `display` naquele elemento (ex: `.switch-item{display:flex}`
ganha de `[hidden]` porque regra de autor sempre bate regra do
navegador, não importa a ordem) — sem isso, `elemento.hidden = true`
mexe no DOM mas o elemento continua visível na tela. `!important`
garante que esconder sempre vence, seja lá qual for a outra classe. */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--bg-main);
color: var(--text-main);
font-family: -apple-system, "Segoe UI", sans-serif;
font-size: 14px;
}
input, select, textarea {
width: 100%;
background: var(--field-bg);
border: 0.5px solid var(--border-col);
border-radius: 6px;
color: var(--text-main);
font-size: 13px;
padding: 9px 10px;
font-family: inherit;
}
/* Checkbox/radio nunca deve herdar a regra acima — `width:100%` + padding
num input nativo de 13x13px estica a caixinha até a largura do pai
inteiro (empurra o texto ao lado pra fora de alinhamento, visualmente
"quebrado"), bug real pego em 2026-10-04 num checklist que usava
`` solto fora de `.switch-item` (que já tinha essa
exceção, mas só pra si mesmo — isso aqui vale pra qualquer checkbox/radio
novo no projeto, sem precisar lembrar de reaplicar a exceção toda vez). */
input[type="checkbox"], input[type="radio"] {
width: auto;
padding: 0;
border: none;
background: none;
}
label { font-size: 12px; color: var(--text-sub); display: block; margin: 12px 0 4px; }
button, .btn {
background: var(--brand-blue);
color: #fff;
border: none;
border-radius: 6px;
padding: 9px 18px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
button.secondary, .btn.secondary {
background: transparent;
color: var(--text-sub);
border: 0.5px solid var(--border-col);
}
.card {
background: var(--surface-card);
border: 0.5px solid var(--border-col);
border-radius: 12px;
}
/* ---- Tabela de lista genérica (`.tabela-wrap` > `table.lista`) —
usada por praticamente toda tela de lista do sistema (Vendas,
Financeiro, Leads, Propostas, Marketing, Vitrine...), por isso vive
aqui no token global em vez de duplicada por app feito `.venda-*`/
`.tipo-badge-*`. Bug real corrigido em 2026-10-04: isso só existia
dentro de `cadastro.css` (só Cadastros carrega), então toda outra
tela renderizava a tabela com o `width:auto` padrão do navegador —
colava no tamanho do conteúdo em vez de esticar até a borda do
card, dando a impressão de "coluna encolhida no meio da tela". ---- */
.tabela-wrap { overflow-x: auto; }
table.lista { width: 100%; border-collapse: collapse; }
table.lista th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-sub); padding: 10px 12px; border-bottom: 0.5px solid var(--border-col); }
table.lista td { padding: 12px; font-size: 13px; border-bottom: 0.5px solid var(--border-col); }
table.lista tr:last-child td { border-bottom: none; }
a { color: var(--brand-blue); text-decoration: none; }
.erro { color: #f0625f; font-size: 13px; margin: 8px 0 0; }
/* ---- Mensagens de feedback (django.contrib.messages) ---- */
.mensagens-flash { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.msg { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 0.5px solid var(--border-col); }
.msg-success { background: rgba(56,176,113,0.12); color: #2f9e63; border-color: rgba(56,176,113,0.3); }
.msg-warning { background: rgba(230,168,55,0.12); color: #b9822a; border-color: rgba(230,168,55,0.3); }
.msg-error { background: rgba(240,98,95,0.12); color: #f0625f; border-color: rgba(240,98,95,0.3); }
.msg-info { background: rgba(76,147,255,0.12); color: var(--brand-blue); border-color: rgba(76,147,255,0.3); }
/* ---- Modal e abas — primitivas compartilhadas por qualquer app ---- */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 50;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal-overlay.is-open { display: flex; }
.modal {
background: var(--surface-card);
border: 0.5px solid var(--border-col);
border-radius: 12px;
width: 100%;
max-width: 640px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 0.5px solid var(--border-col); flex-shrink: 0; }
.modal-header h2 { font-size: 16px; font-weight: 500; margin: 0; }
.modal-close { background: transparent; color: var(--text-sub); padding: 4px 8px; font-size: 18px; line-height: 1; }
/* O