/* ============================================================================
* PILOTO — shared/design.css
* ----------------------------------------------------------------------------
* FUNDAÇÃO DO DESIGN SYSTEM (arquivo único, compartilhado). Extraído do DS
* portável "Gerador de Encarte" e adaptado ao Piloto:
* • Convenção de tema do Piloto: data-theme="light|dark" (NÃO data-tema).
* • Fonte mantida: DM Sans / DM Mono (Google Fonts) — a troca é "apenas as
* cores"; a identidade tipográfica do Piloto permanece.
*
* O QUE CONTÉM (de propósito, enxuto):
* • TOKENS — cores (claro + escuro), tipografia, espaçamento, raios,
* sombras, transições, z-index. São só variáveis: inofensivas.
* • ÍCONES — a classe .icone (SVG inline Lucide; a regra "sem emojis").
* • COMPONENTES — botões, campos, toasts, badges e tabela. Todos OPT-IN:
* só afetam quem tem a classe.
*
* O QUE NÃO CONTÉM (e por quê):
* • NÃO há reset global (`*{margin:0;padding:0}`) nem estilo em elementos
* nus (body, h1, p, a…). É isso que "bugava o espaçamento" ao colar o DS
* numa tela já existente. Layout continua sendo decisão de cada tela.
*
* MIGRAÇÃO GRADUAL: este é o destino único. Cada tela migrada passa a
* consumir estes tokens (`--c-*`, `--esp-*`, `--raio-*`, `--fs-*`) e a soltar
* os tokens locais legados (`--blue`, `--bg`, `--radius-sm`, …).
*
* REGRA DE OURO: valor bruto (cor, espaço, raio, tempo) só existe nos TOKENS.
* Todo o resto consome via var(). Não invente número solto.
* ========================================================================== */
/* ============================================================================
* 1. TOKENS — tema claro (raiz)
* ========================================================================== */
:root {
/* ---------- Tipografia (DM Sans / DM Mono — Google Fonts) ---------- */
--fam-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
system-ui, sans-serif;
--fam-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
'Liberation Mono', monospace;
--fs-xs: 0.75rem; /* 12px — auxiliar */
--fs-sm: 0.875rem; /* 14px — corpo secundário */
--fs-base: 1rem; /* 16px — corpo */
--fs-md: 1.125rem; /* 18px — destaque */
--fs-lg: 1.25rem; /* 20px — subtítulo */
--fs-xl: 1.5rem; /* 24px — título de página */
--fs-2xl: 1.875rem; /* 30px — título grande */
--lh-tight: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.625;
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.02em;
/* ---------- Cores: neutros (tema claro) ---------- */
--c-bg: #ffffff; /* fundo base */
--c-bg-elev: #fafafa; /* superfície elevada (card, modal, toast) */
--c-bg-muted: #f4f4f5; /* fundo sutil (campo, cabeçalho de tabela) */
--c-bg-hover: #f0f0f1; /* hover de linha/superfície */
--c-borda: #e4e4e7; /* borda padrão */
--c-borda-forte: #d4d4d8; /* borda de ênfase (botão secundário) */
--c-texto: #18181b; /* texto primário */
--c-texto-2: #52525b; /* texto secundário */
--c-texto-3: #a1a1aa; /* texto terciário / placeholder */
/* ---------- Cores: acento (ÚNICO acento do sistema — terracota) ----------
* Um sistema, um acento. Para outra marca, troque SÓ estes 6 valores (e os 6
* do tema escuro) — o resto do DS acompanha. */
--c-acento: #e87a3e;
--c-acento-hover: #d96a2c;
--c-acento-ativo: #c45a20;
--c-acento-bg: #fef3ec; /* fundo tênue de acento (badge/realce) */
--c-acento-borda: #f4cdb0; /* borda de acento / anel de foco */
--c-acento-texto: #ffffff; /* texto sobre fundo de acento */
/* ---------- Cores: semânticas (uso pontual, contido) ---------- */
--c-sucesso: #16a34a; --c-sucesso-bg: #f0fdf4;
--c-aviso: #d97706; --c-aviso-bg: #fffbeb;
--c-erro: #dc2626; --c-erro-bg: #fef2f2;
/* ---------- Espaçamento (base 4px) ---------- */
--esp-1: 0.25rem; /* 4px */
--esp-2: 0.5rem; /* 8px */
--esp-3: 0.75rem; /* 12px */
--esp-4: 1rem; /* 16px */
--esp-5: 1.25rem; /* 20px */
--esp-6: 1.5rem; /* 24px */
--esp-8: 2rem; /* 32px */
--esp-10: 2.5rem; /* 40px */
--esp-12: 3rem; /* 48px */
--esp-16: 4rem; /* 64px */
/* ---------- Raios ---------- */
--raio-sm: 3px;
--raio-md: 4px;
--raio-lg: 6px;
--raio-xl: 8px;
--raio-full: 9999px;
/* ---------- Sombras (tema claro — discretas) ---------- */
--sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--sombra-md: 0 2px 4px rgba(0, 0, 0, 0.05),
0 1px 2px rgba(0, 0, 0, 0.03);
--sombra-lg: 0 8px 16px rgba(0, 0, 0, 0.06),
0 2px 4px rgba(0, 0, 0, 0.04);
--sombra-foco: 0 0 0 3px var(--c-acento-borda);
/* ---------- Transições ---------- */
--t-rapida: 120ms ease-out;
--t-padrao: 180ms ease-out;
--t-lenta: 240ms ease-out;
/* ---------- Z-index ---------- */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 1000;
--z-toast: 1100;
--z-tooltip: 1200;
}
/* ---------- TOKENS — tema escuro (override) ----------
* O acento clareia (#f08552) e o texto sobre o acento fica ESCURO para
* preservar contraste. Aplique com data-theme="dark" no . */
[data-theme="dark"] {
--c-bg: #0a0a0b;
--c-bg-elev: #141416;
--c-bg-muted: #1c1c1f;
--c-bg-hover: #232327;
--c-borda: #2a2a2e;
--c-borda-forte: #3f3f46;
--c-texto: #fafafa;
--c-texto-2: #a1a1aa;
--c-texto-3: #71717a;
--c-acento: #f08552;
--c-acento-hover: #e87a3e;
--c-acento-ativo: #d96a2c;
--c-acento-bg: #2a1810;
--c-acento-borda: #5a3a25;
--c-acento-texto: #0a0a0b;
--c-sucesso: #22c55e; --c-sucesso-bg: #0a1f12;
--c-aviso: #f59e0b; --c-aviso-bg: #1f1608;
--c-erro: #ef4444; --c-erro-bg: #1f0d0d;
--sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
--sombra-md: 0 2px 4px rgba(0, 0, 0, 0.35),
0 1px 2px rgba(0, 0, 0, 0.25);
--sombra-lg: 0 8px 16px rgba(0, 0, 0, 0.45),
0 2px 4px rgba(0, 0, 0, 0.30);
}
/* ============================================================================
* 2. ÍCONES — a regra "sem emojis"
* ----------------------------------------------------------------------------
* A interface NÃO usa emojis. Todo ícone é um SVG inline no estilo Lucide,
* padronizado (viewBox 0 0 24 24, stroke currentColor, stroke-width 1.75).
* `currentColor` faz o ícone herdar a cor do texto — vira theme-aware sozinho.
* Os traçados moram em /shared/icons.js (helper window.icon('nome')).
* Tamanho padrão 20px; modificadores --sm (16px) e --lg (24px).
* ========================================================================== */
.icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: currentColor;
}
.icone svg { display: block; width: 100%; height: 100%; }
.icone--sm { width: 1rem; height: 1rem; }
.icone--lg { width: 1.5rem; height: 1.5rem; }
/* ============================================================================
* 3. COMPONENTES (opt-in; box-sizing local para não depender de reset global)
* ========================================================================== */
.btn, .input, .select, .textarea,
.badge, .toast, .tabela, .tabela th, .tabela td {
box-sizing: border-box;
}
/* ---------- Botões ----------
* Hierarquia: só UM primário (acento) por tela. Peso 500, altura padrão 34px. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-2);
padding: var(--esp-1) var(--esp-3);
height: 2.125rem; /* 34px */
font-family: inherit;
font-size: var(--fs-base);
font-weight: 500;
line-height: 1.2;
color: var(--c-texto);
background: none;
border: 1px solid transparent;
border-radius: var(--raio-md);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition:
background var(--t-rapida),
border-color var(--t-rapida),
color var(--t-rapida),
box-shadow var(--t-rapida);
}
.btn:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primario { background: var(--c-acento); color: var(--c-acento-texto); }
.btn-primario:hover:not(:disabled) { background: var(--c-acento-hover); }
.btn-primario:active:not(:disabled) { background: var(--c-acento-ativo); }
.btn-secundario {
background: var(--c-bg);
color: var(--c-texto);
border-color: var(--c-borda-forte);
}
.btn-secundario:hover:not(:disabled) { background: var(--c-bg-hover); }
.btn-discreto { background: transparent; color: var(--c-texto-2); }
.btn-discreto:hover:not(:disabled) { background: var(--c-bg-hover); color: var(--c-texto); }
.btn-perigo { background: var(--c-erro); color: #ffffff; }
.btn-perigo:hover:not(:disabled) { background: color-mix(in srgb, var(--c-erro) 88%, black); }
.btn-pequeno {
height: 1.625rem;
padding: var(--esp-1) var(--esp-2);
font-size: var(--fs-sm);
border-radius: var(--raio-sm);
}
.btn-grande {
height: 2.625rem;
padding: var(--esp-2) var(--esp-4);
font-size: var(--fs-md);
}
.btn-icone { padding: var(--esp-1); aspect-ratio: 1; width: 2.125rem; }
.btn-icone svg { width: 16px; height: 16px; }
.btn-pequeno.btn-icone { width: 1.625rem; }
.btn-grande.btn-icone { width: 2.625rem; }
.btn-bloco { display: flex; width: 100%; }
/* ---------- Campos: input / select / textarea ---------- */
.input, .select, .textarea {
display: block;
width: 100%;
padding: var(--esp-2) var(--esp-3);
height: 2.5rem;
font-family: inherit;
font-size: var(--fs-base);
color: var(--c-texto);
background: var(--c-bg-muted);
border: 1px solid var(--c-borda);
border-radius: var(--raio-md);
transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.input::placeholder, .textarea::placeholder { color: var(--c-texto-3); }
.input:hover:not(:disabled):not(:focus),
.select:hover:not(:disabled):not(:focus),
.textarea:hover:not(:disabled):not(:focus) { border-color: var(--c-borda-forte); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--c-acento);
box-shadow: var(--sombra-foco);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-erro); }
.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-erro) 25%, transparent);
}
.textarea {
min-height: 6rem;
height: auto;
resize: vertical;
line-height: var(--lh-normal);
padding: var(--esp-3);
}
.select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--esp-3) center;
background-size: 12px;
padding-right: var(--esp-8);
cursor: pointer;
}
[data-theme="dark"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Rótulo e campo (agrupador) ---------- */
.label {
display: block;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-texto);
margin-bottom: var(--esp-1);
}
.campo { display: flex; flex-direction: column; margin-bottom: var(--esp-4); }
.campo__erro { color: var(--c-erro); font-size: var(--fs-sm); margin-top: var(--esp-1); min-height: 1.2em; }
.campo__ajuda { color: var(--c-texto-2); font-size: var(--fs-sm); margin-top: var(--esp-1); }
/* ---------- Opções: checkbox / radio ---------- */
.opcao {
display: inline-flex;
align-items: center;
gap: var(--esp-2);
cursor: pointer;
font-size: var(--fs-base);
color: var(--c-texto);
user-select: none;
line-height: 1.2;
}
.checkbox, .radio { accent-color: var(--c-acento); width: 1rem; height: 1rem; margin: 0; cursor: pointer; }
.checkbox:focus-visible, .radio:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.checkbox:disabled + span, .radio:disabled + span,
.opcao:has(.checkbox:disabled), .opcao:has(.radio:disabled) { opacity: 0.55; cursor: not-allowed; }
/* ---------- Toasts ---------- */
.toast {
position: fixed;
left: 50%;
bottom: var(--esp-6);
transform: translateX(-50%) translateY(12px);
background: var(--c-bg-elev);
color: var(--c-texto);
border: 1px solid var(--c-borda);
border-left: 3px solid var(--c-texto-3);
border-radius: var(--raio-md);
padding: var(--esp-3) var(--esp-4);
box-shadow: var(--sombra-lg);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-padrao), transform var(--t-padrao);
max-width: 80vw;
z-index: var(--z-toast);
font-size: var(--fs-sm);
}
.toast--visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[data-tipo="info"] { border-left-color: var(--c-acento); }
.toast[data-tipo="sucesso"] { border-left-color: var(--c-sucesso); }
.toast[data-tipo="aviso"] { border-left-color: var(--c-aviso); }
.toast[data-tipo="erro"] { border-left-color: var(--c-erro); }
/* ---------- Badges ---------- */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--esp-2);
font-size: var(--fs-xs);
font-weight: 500;
line-height: 1.4;
border-radius: var(--raio-full);
background: var(--c-bg-muted);
color: var(--c-texto-2);
border: 1px solid var(--c-borda);
white-space: nowrap;
}
.badge-acento { background: var(--c-acento-bg); color: var(--c-acento-ativo); border-color: var(--c-acento-borda); }
.badge-sucesso { background: var(--c-sucesso-bg); color: var(--c-sucesso); border-color: transparent; }
.badge-aviso { background: var(--c-aviso-bg); color: var(--c-aviso); border-color: transparent; }
.badge-erro { background: var(--c-erro-bg); color: var(--c-erro); border-color: transparent; }
/* ---------- Tabela ---------- */
.tabela {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.tabela th, .tabela td {
padding: var(--esp-3);
text-align: left;
border-bottom: 1px solid var(--c-borda);
}
.tabela th {
font-weight: 600;
color: var(--c-texto-2);
background: var(--c-bg-muted);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
.tabela tbody tr { transition: background var(--t-rapida); }
.tabela tbody tr:hover { background: var(--c-bg-hover); }
.tabela--zebra tbody tr:nth-child(odd) { background: var(--c-bg-elev); }
.tabela--zebra tbody tr:nth-child(odd):hover { background: var(--c-bg-hover); }
.tabela--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); }
.tabela td.num { font-family: var(--fam-mono); text-align: right; font-variant-numeric: tabular-nums; }