/*
* DESIGN SYSTEM ZANELLA (17/10/2026) — a camada do /novo (era /novo2 até 21/10/2026).
*
* O desenho vem do design system "Zanella Travels" (projeto "Design system passagens aéreas" do
* Claude Design): Plus Jakarta Sans, códigos em JetBrains Mono, um card branco de raio 18 com
* sombra por assunto, ação em pílula, campo retangular de raio 12, título de página 32/800,
* menu lateral marinho com o item ativo em turquesa e a barra de cima flutuando sobre o fundo.
*
* As telas continuam com as classes do Preline; esta folha só traduz os padrões repetidos delas
* para o design system. Vem DEPOIS do tailwind.css em todas as telas, para vencer as utilitárias.
* Tirar a linha de uma tela devolve o visual do /novo, sem mais nada.
*
* ⚠️ O PDF fica de fora: tudo aqui ignora o que está dentro de `[data-theme="light"]` (a
* pré-visualização e o PDF do orçamento; desde 21/10/2026 também na Plus Jakarta Sans). O bilhete
* (flight-ticket.html) nem liga esta folha.
*/
:root {
--ds-sombra: 0 1px 2px rgba(19, 37, 73, .04), 0 4px 16px rgba(19, 37, 73, .05);
--ds-sombra-2: 0 12px 40px rgba(19, 37, 73, .16);
--ds-raio-card: 18px;
--ds-raio-sub: 14px;
--ds-raio-campo: 12px;
--ds-menu: #132549;
--ds-mono: 'JetBrains Mono', ui-monospace, monospace;
}
[data-theme="dark"] {
--ds-sombra: 0 1px 2px rgba(0, 0, 0, .3);
--ds-sombra-2: 0 12px 40px rgba(0, 0, 0, .5);
--ds-menu: #132549;
}
/* ── Letra ── */
html body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
#preview-container, #viewPreviewBox, [data-theme="light"].pdf, #pdf-area { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
table, .pd-tabela, .tabular { font-variant-numeric: tabular-nums; }
.font-mono, .pd-tabela .pd-codigo, .recente-forte, .ds-codigo { font-family: var(--ds-mono); }
/* Localizador e código: as telas os escrevem em negrito espaçado (`font-bold tracking-wider`). */
.tracking-wider:is(.font-bold, .font-black, .font-extrabold):not(.uppercase, button, button *, label, label *, [class*="text-[1"]):not([data-theme="light"] *) { font-family: var(--ds-mono); letter-spacing: .02em; }
/* Número de KPI: 32/800, tabular. */
:is(.rounded-xl, .rounded-2xl).shadow-sm > p.text-2xl.font-bold:not([data-theme="light"] *),
:is(.rounded-xl, .rounded-2xl).shadow-sm > p.text-3xl.font-bold:not([data-theme="light"] *) {
font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* ── Título da página (o primeiro h1 da tela): 32/800 ── */
main h1.text-2xl:not([data-theme="light"] *), main h1.text-xl:not([data-theme="light"] *),
body > div h1.text-2xl:not([data-theme="light"] *) {
font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
}
/* Título de card: 18/700 */
:is(section, .ds-card) h2.font-semibold:not([class*="text-"]):not([data-theme="light"] *),
:is(section, .ds-card) h2.font-bold:not([class*="text-xs"]):not([class*="text-sm"]):not([data-theme="light"] *) {
font-size: 18px; font-weight: 700;
}
/* ── Cards: branco, raio 18, sombra nível 1, sem borda ── */
:is(.rounded-xl, .rounded-2xl, .rounded-lg).shadow-sm:not([data-theme="light"] *):not(input, select, textarea, button, a.rounded-lg),
:is(.rounded-xl, .rounded-2xl).bg-white.border:not([data-theme="light"] *):not(input, select, textarea, button),
.pd-caixa:not([data-theme="light"] *), .ds-card {
border-radius: var(--ds-raio-card);
border-color: transparent;
box-shadow: var(--ds-sombra);
}
/* Card clicável: o anel de foco no lugar da borda azul. */
a:is(.rounded-xl, .rounded-2xl).shadow-sm:hover:not([data-theme="light"] *) { border-color: transparent; box-shadow: 0 0 0 2px rgb(var(--c-marca-200)); }
/* Menus, listas que abrem, modais e avisos rápidos: nível 2. */
:is(.rounded-xl, .rounded-lg, .rounded-2xl):is(.shadow-lg, .shadow-md, .shadow-xl):not([data-theme="light"] *):not(#menu-principal) {
border-radius: var(--ds-raio-card);
border-color: transparent;
box-shadow: var(--ds-sombra-2);
}
/* Bloco de dentro do card (borda e sem sombra): raio 14. */
.rounded-xl.border:not(.shadow-sm):not(.shadow-md):not(.shadow-lg):not(.bg-white):not([data-theme="light"] *):not(input, select, textarea, button, a) {
border-radius: var(--ds-raio-sub);
}
/* ── Ação = pílula ── */
:is(button, a, label).rounded-lg:not([data-theme="light"] *):not(#menu-principal *):not([data-lista-topo] *):not([role="menuitem"]):not(.ds-ret),
:is(button, a).rounded-md:is([class*="bg-marca-"], [class*="bg-marinho-"], [class*="bg-erro-6"], [class*="bg-sucesso-6"], .border):not([data-theme="light"] *),
.ds-pilula {
border-radius: 9999px;
}
/* Os botões cheios na cor da marca: sem sombra, como no design system. */
:is(button, a).bg-marca-600:not([data-theme="light"] *) { box-shadow: none; }
/* ── Campos: retângulo de raio 12 (o dado), para separar da ação ── */
:is(input, select, textarea):is(.rounded-lg, .rounded-md, .rounded-xl, .rounded):not([type="checkbox"]):not([type="radio"]):not([data-theme="light"] *),
.busca-seg:not([data-theme="light"] *) {
border-radius: var(--ds-raio-campo);
}
:is(input, select, textarea):focus-visible:not([type="checkbox"]):not([type="radio"]):not([data-theme="light"] *) {
outline: none;
}
/* ── Ícone de assunto em círculo tonal (os quadradinhos coloridos dos cards e KPIs) ── */
span:is(.size-8, .size-9, .size-10, .size-11, .size-12).rounded-lg:not([data-theme="light"] *),
div:is(.size-8, .size-9, .size-10).rounded-lg.inline-flex:not([data-theme="light"] *) {
border-radius: 9999px;
}
/* ── Tabelas: cabeçalho em sobrelinha ── */
thead th:is(.text-xs, .text-\[11px\], .text-\[12px\]):not([data-theme="light"] *),
.pd-tabela th {
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: rgb(var(--c-neutro-600));
}
.pd-tabela th { background: transparent; }
thead.bg-neutro-50:not([data-theme="light"] *) { background: transparent; }
.pd-tabela tbody tr:hover, tbody tr.hover\:bg-neutro-50:hover:not([data-theme="light"] *) { background: rgb(var(--c-neutro-50)); }
/* Rótulos de campo: 12/600 no tom secundário. */
label.text-xs.font-medium:not([data-theme="light"] *), label.block.text-sm.font-medium:not([data-theme="light"] *) {
font-weight: 600;
}
/* ── Pílulas e buscas que já existiam (padrao.css), no desenho do DS ── */
.pilula { height: 34px; }
.recentes .recente { border-color: transparent; border-radius: var(--ds-raio-card); box-shadow: var(--ds-sombra); }
.recente-rota { font-family: var(--ds-mono); }
.menu-lista { border-radius: var(--ds-raio-sub); border-color: transparent; box-shadow: var(--ds-sombra-2); }
/* A casca (menu lateral e barra de cima) tem o desenho do design system no próprio index.html desde 20/10/2026. */
/* ═══════════════ Componentes do design system (20/10/2026) ═══════════════
* As telas redesenhadas pelo protótipo usam estas classes `ds-*` direto no HTML que montam,
* em vez de dezenas de utilitárias por elemento. Cores pelas variáveis da paleta, então o tema
* escuro vem junto.
*
* página .ds-pagina .ds-cabecalho .ds-titulo .ds-apoio .ds-acoes
* botões .ds-btn + .ds-btn-primario | .ds-btn-contorno | .ds-btn-escuro | .ds-btn-texto
* card .ds-card .ds-card-cab .ds-card-titulo .ds-sub
* ícone .ds-disco (+ .ds-disco-grande) + .ds-tom-marca | -sucesso | -alerta | -erro | -info | -neutro | -turquesa
* texto .ds-sobrelinha .ds-link .ds-mono .ds-num
* indicador .ds-kpi .ds-kpi-topo .ds-kpi-valor .ds-kpi-detalhe
* aviso .ds-aviso + .ds-aviso-alerta | -info | -erro | -sucesso, .ds-aviso-acao
* tabela .ds-tabela-cab .ds-tabela-linha (a grade de colunas vem de cada tela)
* vazio .ds-vazio
*/
/* `hidden` (Tailwind) tem de vencer o display dos componentes: o ds.css vem depois e empataria. */
.hidden[class*="ds-"] { display: none !important; }
.ds-pagina { max-width: 1200px; margin: 0 auto; padding: 12px 8px 96px; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.ds-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ds-titulo { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: rgb(var(--c-marinho-900)); }
.ds-apoio { margin: 0; font-size: 13px; color: rgb(var(--c-neutro-600)); }
.ds-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; box-sizing: border-box;
border: 0; border-radius: 9999px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
text-decoration: none; cursor: pointer;
}
.ds-btn:hover { transition: background .15s ease; }
.ds-btn i { font-size: 15px; }
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgb(var(--c-marca-200)); }
.ds-btn-primario { background: rgb(var(--c-marca-600)); color: #fff; }
.ds-btn-primario:hover { background: rgb(var(--c-marca-700)); }
.ds-btn-contorno { background: rgb(var(--c-superficie)); border: 1px solid rgb(var(--c-neutro-200)); color: rgb(var(--c-marinho-900)); }
.ds-btn-contorno:hover { background: rgb(var(--c-neutro-100)); }
.ds-btn-escuro { background: #132549; color: #fff; }
[data-theme="dark"] .ds-btn-escuro { background: #F3F7FD; color: #0B1426; }
.ds-btn-texto { background: transparent; color: rgb(var(--c-marca-600)); padding: 0 12px; }
.ds-btn-texto:hover { background: rgb(var(--c-marca-50)); }
[data-theme="dark"] .ds-btn-primario { color: #0B1426; }
.ds-card { background: rgb(var(--c-superficie)); border-radius: 18px; box-shadow: var(--ds-sombra); min-width: 0; }
.ds-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; }
.ds-card-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-card-titulo h2 { margin: 0; font-size: 18px; font-weight: 700; color: rgb(var(--c-marinho-900)); }
.ds-sub { background: rgb(var(--c-neutro-50)); border-radius: 14px; }
.ds-disco { width: 32px; height: 32px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds-disco i { font-size: 16px; }
.ds-disco-grande { width: 40px; height: 40px; }
.ds-disco-grande i { font-size: 18px; }
.ds-tom-marca { background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-600)); }
.ds-tom-sucesso { background: rgb(var(--c-sucesso-50)); color: rgb(var(--c-sucesso-700)); }
.ds-tom-alerta { background: rgb(var(--c-alerta-50)); color: rgb(var(--c-alerta-700)); }
.ds-tom-erro { background: rgb(var(--c-erro-50)); color: rgb(var(--c-erro-700)); }
.ds-tom-info { background: rgb(var(--c-info-50)); color: rgb(var(--c-info-700)); }
.ds-tom-neutro { background: rgb(var(--c-neutro-100)); color: rgb(var(--c-marinho-900)); }
.ds-tom-turquesa { background: rgb(var(--c-turquesa-100)); color: rgb(var(--c-turquesa-700)); }
/* Selo pequeno (22/10/2026): Ida/Volta, "Teste", "Ambiente de teste" nos painéis do orçamento e das
reservas, no lugar do texto colorido de 10px em caixa alta. Cor por ds-tom-*. */
.ds-selo { height: 20px; padding: 0 8px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.ds-sobrelinha { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); }
.ds-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: rgb(var(--c-marca-600)); text-decoration: none; }
.ds-link:hover { color: rgb(var(--c-marca-700)); }
.ds-mono { font-family: var(--ds-mono); }
.ds-num { font-variant-numeric: tabular-nums; }
.ds-kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; color: rgb(var(--c-marinho-900)); text-decoration: none; }
a.ds-kpi:hover { box-shadow: 0 0 0 2px rgb(var(--c-marca-200)); }
.ds-kpi-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds-kpi-valor { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-kpi-detalhe { font-size: 12px; color: rgb(var(--c-neutro-600)); }
.ds-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 18px; font-size: 13px; }
.ds-aviso > i { font-size: 18px; margin-top: 1px; flex: none; }
.ds-aviso-alerta { background: rgb(var(--c-alerta-50)); border: 1px solid rgb(var(--c-alerta-200)); color: rgb(var(--c-alerta-700)); }
.ds-aviso-info { background: rgb(var(--c-info-50)); color: rgb(var(--c-info-700)); }
.ds-aviso-erro { background: rgb(var(--c-erro-50)); border: 1px solid rgb(var(--c-erro-200)); color: rgb(var(--c-erro-700)); }
.ds-aviso-sucesso { background: rgb(var(--c-sucesso-50)); color: rgb(var(--c-sucesso-700)); }
.ds-aviso-acao {
align-self: center; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
border-radius: 9999px; background: rgb(var(--c-superficie)); color: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.ds-tabela-cab { display: grid; gap: 16px; padding: 10px 22px; background: rgb(var(--c-neutro-100)); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); }
.ds-tabela-linha { display: grid; gap: 16px; padding: 12px 22px; align-items: center; border-top: 1px solid rgb(var(--c-neutro-100)); color: rgb(var(--c-marinho-900)); text-decoration: none; font-size: 14px; cursor: pointer; }
.ds-tabela-linha:hover { background: rgb(var(--c-neutro-50)); }
.ds-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 16px; color: rgb(var(--c-neutro-600)); font-size: 13px; text-align: center; }
.ds-vazio .ds-disco { background: rgb(var(--c-superficie)); color: rgb(var(--c-neutro-500)); }
/* Busca num card (Localizadores, Reservas…): o campo em pílula com a lupa à esquerda e o
microfone à direita, o Buscar, o apagador e, embaixo, os filtros. */
.ds-busca { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ds-campo {
height: 40px; padding: 0 40px; box-sizing: border-box; border-radius: 9999px;
border: 1px solid rgb(var(--c-neutro-200)); background: rgb(var(--c-superficie));
font: inherit; font-size: 13px; color: rgb(var(--c-marinho-900)); outline: none;
}
.ds-campo::placeholder { color: rgb(var(--c-neutro-500)); }
.ds-campo:focus { border-color: rgb(var(--c-marca-500)); box-shadow: 0 0 0 4px rgb(var(--c-marca-200)); }
/* Pílulas de filtro com menu (padrao.css/padrao.js) no tamanho do protótipo. */
.ds-busca .pilula, .edt-barra-chaves .pilula { height: 30px; padding: 0 12px; font-size: 12px; }
.ds-busca .pilula .menu-botao { font-size: 12px; font-weight: 600; }
/* Pílulas de marcar (Cotação de Voos, protótipo): desmarcada tracejada com "+", marcada em azul-claro com "✓".
Também as opções do orçamento (Soma total, Resumos separados, Valor do pacote; 21/10/2026). */
.ds-busca .pilula-caixa, .edt-barra-chaves .pilula-caixa { border-style: dashed; font-weight: 600; color: rgb(var(--c-neutro-600)); }
.ds-busca .pilula-caixa::before, .edt-barra-chaves .pilula-caixa::before { content: '+'; font-weight: 700; }
.ds-busca .pilula-caixa:has(input:checked), .edt-barra-chaves .pilula-caixa:has(input:checked) { border-style: solid; border-color: transparent; background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); }
.ds-busca .pilula-caixa:has(input:checked)::before, .edt-barra-chaves .pilula-caixa:has(input:checked)::before { content: '\2713'; }
/* Tabela do padrão (.pd-tabela): o cabeçalho numa faixa clara, como no protótipo. */
.pd-tabela th { background: rgb(var(--c-neutro-100)); padding-top: 14px; padding-bottom: 14px; }
/* ── Cadastros (cadastros.js): abas, Blocos/Lista e o item nos dois formatos ── */
.cad-abas { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 4px; border-radius: 9999px; background: rgb(var(--c-neutro-100)); }
.cad-aba { height: 30px; padding: 0 14px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgb(var(--c-neutro-600)); text-decoration: none; }
.cad-aba i { font-size: 14px; }
.cad-aba:hover { color: rgb(var(--c-marinho-900)); }
.cad-aba.ativa { background: rgb(var(--c-superficie)); color: rgb(var(--c-marinho-900)); box-shadow: var(--ds-sombra); }
.cad-alternancia { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9999px; background: rgb(var(--c-superficie)); box-shadow: var(--ds-sombra); }
.cad-modo { height: 30px; padding: 0 12px; border: 0; border-radius: 9999px; background: transparent; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: rgb(var(--c-neutro-600)); cursor: pointer; }
.cad-modo i { font-size: 14px; }
.cad-modo.ativo { background: #132549; color: #fff; }
[data-theme="dark"] .cad-modo.ativo { background: #F3F7FD; color: #0B1426; }
.cad-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: rgb(var(--c-neutro-600)); }
.cad-por-pagina { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cad-por-pagina select { height: 30px; padding: 0 28px 0 12px; border: 0; border-radius: 9999px; background: rgb(var(--c-superficie)); box-shadow: var(--ds-sombra); font: inherit; font-size: 13px; font-weight: 600; color: rgb(var(--c-marinho-900)); cursor: pointer; }
.cad-lista { overflow: auto; }
.cad-lista > div { min-width: 820px; }
.cad-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 76px; gap: 16px; padding: 10px 20px; align-items: center; border-top: 1px solid rgb(var(--c-neutro-100)); font-size: 13px; color: rgb(var(--c-marinho-900)); }
.cad-linha:not(.cad-linha-cab):hover { background: rgb(var(--c-neutro-50)); }
.cad-linha-cab { border-top: 0; background: rgb(var(--c-neutro-100)); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); }
.cad-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cad-bloco { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cad-bloco:hover { box-shadow: 0 0 0 2px rgb(var(--c-marca-200)); }
.cad-ini { font-size: 13px; font-weight: 800; }
.cad-ini-p { width: 30px; height: 30px; font-size: 11px; }
.cad-local { align-self: flex-start; height: 20px; padding: 0 8px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); max-width: 100%; }
.cad-local i { font-size: 11px; }
.cad-local.vazio { background: rgb(var(--c-neutro-100)); color: rgb(var(--c-neutro-600)); }
.cad-metas { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px solid rgb(var(--c-neutro-100)); font-size: 12px; color: rgb(var(--c-neutro-600)); }
.cad-metas i { font-size: 13px; color: rgb(var(--c-neutro-500)); }
.cad-acao { width: 30px; height: 30px; border: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--c-neutro-100)); color: rgb(var(--c-marinho-900)); cursor: pointer; }
.cad-acao i { font-size: 13px; }
.cad-acao:hover { background: rgb(var(--c-neutro-200)); }
.cad-acao-perigo { background: rgb(var(--c-erro-50)); color: rgb(var(--c-erro-700)); }
.cad-acao-perigo:hover { background: rgb(var(--c-erro-100)); }
@media (max-width: 640px) { .cad-blocos { grid-template-columns: 1fr; } }
/* ── Orçamentos (budget-list.html): o cartão largo do protótipo e a tabela alternativa ── */
.orc-chip { height: 28px; max-width: 260px; padding: 0 10px; border: 1px solid rgb(var(--c-neutro-200)); border-radius: 9999px; background: transparent; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; color: rgb(var(--c-neutro-600)); cursor: pointer; }
.orc-chip i { font-size: 12px; flex: none; }
.orc-chip:hover { color: rgb(var(--c-marinho-900)); border-color: rgb(var(--c-neutro-300)); }
.orc-chip.ativo { background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); border-color: transparent; }
.orc-cartao { padding: 0 20px 0 22px; display: flex; flex-wrap: wrap; gap: 0 24px; align-items: stretch; cursor: pointer; color: rgb(var(--c-marinho-900)); }
.orc-cartao:hover { box-shadow: 0 0 0 2px rgb(var(--c-marca-200)); }
.orc-cliente { flex: 1 1 320px; display: flex; gap: 14px; align-items: flex-start; align-self: center; min-width: 0; padding: 16px 0; }
.orc-nome { font-weight: 700; font-size: 15px; line-height: 1.35; color: inherit; text-decoration: none; text-wrap: pretty; }
.orc-nome:hover { color: rgb(var(--c-marca-600)); }
.orc-ident { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.3; color: rgb(var(--c-marca-600)); }
.orc-codigo { height: 22px; padding: 0 8px; border-radius: 6px; background: rgb(var(--c-neutro-100)); display: inline-flex; align-items: center; font-family: var(--ds-mono); font-size: 11px; font-weight: 600; color: rgb(var(--c-marinho-900)); }
.orc-resumo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 28px; font-size: 13px; }
.orc-trecho { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-weight: 600; min-width: 0; }
.orc-pax { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: rgb(var(--c-neutro-600)); }
.orc-pax b { color: rgb(var(--c-marinho-900)); }
.orc-valores { flex: 1 1 420px; align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, max-content)); justify-content: center; align-content: center; gap: 10px 28px; min-width: 0; padding: 16px 0; }
.orc-valor-caixa { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 3px solid transparent; }
.orc-valor-caixa.menor { border-left-color: rgb(var(--c-sucesso-700)); }
.orc-valor { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orc-menor { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: rgb(var(--c-sucesso-700)); }
.orc-menor i { font-size: 11px; }
.orc-nota { grid-column: 1 / -1; flex-basis: 100%; font-size: 11px; font-weight: 500; color: rgb(var(--c-neutro-600)); }
.orc-lado { flex: none; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 16px 0; }
.orc-data { font-size: 12px; color: rgb(var(--c-neutro-600)); font-variant-numeric: tabular-nums; }
.orc-acoes { display: flex; gap: 4px; margin-top: 2px; }
.orc-acoes .cad-acao { width: 32px; height: 32px; }
.orc-acoes .cad-acao i { font-size: 15px; }
.orc-obs { flex-basis: 100%; margin-bottom: 16px; display: flex; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgb(var(--c-alerta-50)); border: 1px solid rgb(var(--c-alerta-200)); font-size: 13px; color: rgb(var(--c-marinho-900)); }
.orc-obs i { color: rgb(var(--c-alerta-700)); margin-top: 2px; flex: none; }
.orc-obs p { margin: 0; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.orc-tabela td .orc-obs { margin-top: 8px; font-size: 12px; }
.orc-tabela { width: 100%; min-width: 900px; border-collapse: collapse; }
.orc-tabela th { padding: 10px 16px; background: rgb(var(--c-neutro-100)); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); }
.orc-tabela td { padding: 12px 16px; border-top: 1px solid rgb(var(--c-neutro-100)); font-size: 13px; vertical-align: top; color: rgb(var(--c-marinho-900)); }
.orc-tabela tbody tr:hover { background: rgb(var(--c-neutro-50)); }
.orc-tabela .orc-valores { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; justify-content: flex-end; }
.orc-tabela td .orc-obs { margin-bottom: 0; }
@media (max-width: 640px) { .orc-cartao { padding: 0 16px; } .orc-cliente { flex-basis: 100%; } .orc-valores { justify-content: start; padding-top: 0; } .orc-lado { flex-direction: row; flex-wrap: wrap; align-items: center; padding-top: 0; } }
/* ── Edição do orçamento (budget.html, budget-templates.js): Orcamento Edicao.dc.html ──
Prefixo `edt-` (e não `ed-`, que casaria com "rounded-"): o `hidden` do Tailwind vence aqui também. */
.hidden[class*="edt-"] { display: none !important; }
.ds-pagina.edt-pagina { max-width: 960px; padding-bottom: 24px; }
.edt body, body.edt { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
body.edt input[type="checkbox"] { accent-color: rgb(var(--c-marca-600)); }
.edt-situacao { align-self: flex-start; height: 24px; padding: 0 10px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: rgb(var(--c-sucesso-50)); color: rgb(var(--c-sucesso-700)); }
.edt-situacao i { font-size: 13px; }
.edt-redondo { width: 40px; height: 40px; flex: none; border: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--c-superficie)); color: rgb(var(--c-marinho-900)); box-shadow: var(--ds-sombra); cursor: pointer; }
.edt-redondo i { font-size: 16px; }
.edt-redondo:hover { background: rgb(var(--c-neutro-100)); }
.edt-redondo-contorno { box-shadow: none; border: 1px solid rgb(var(--c-neutro-300)); }
.edt-redondo.ativo { background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); }
.edt-servicos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 9999px; background: rgb(var(--c-superficie)); box-shadow: var(--ds-sombra); }
.edt-servico { height: 36px; padding: 0 16px; border-radius: 9999px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgb(var(--c-neutro-600)); }
.edt-servico i { font-size: 15px; }
.edt-servico:hover { color: rgb(var(--c-marinho-900)); }
input:checked + .edt-servico { background: #132549; color: #fff; }
input:focus-visible + .edt-servico, input:focus-visible + .edt-seg, input:focus-visible + .edt-pilula { box-shadow: 0 0 0 3px rgb(var(--c-marca-200)); }
[data-theme="dark"] input:checked + .edt-servico { background: #F3F7FD; color: #0B1426; }
.edt-bloco { padding: 24px; margin-bottom: 20px; }
.edt-titulo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: rgb(var(--c-marinho-900)); }
.edt-opcao { height: 22px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); }
.edt-opcao-neutra { background: rgb(var(--c-neutro-100)); color: rgb(var(--c-neutro-600)); }
.edt-acao { height: 34px; padding: 0 12px; border: 0; border-radius: 9999px; background: transparent; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; color: rgb(var(--c-neutro-600)); cursor: pointer; }
.edt-acao i { font-size: 14px; }
.edt-acao:hover { background: rgb(var(--c-neutro-100)); color: rgb(var(--c-marinho-900)); }
.edt-acao-marca { color: rgb(var(--c-marca-600)); }
.edt-acao-marca:hover { background: rgb(var(--c-marca-50)); color: rgb(var(--c-marca-700)); }
.edt-acao-erro { color: rgb(var(--c-erro-700)); }
.edt-acao-erro:hover { background: rgb(var(--c-erro-50)); color: rgb(var(--c-erro-700)); }
.edt-segmento { display: inline-flex; gap: 2px; padding: 4px; border-radius: 9999px; background: rgb(var(--c-neutro-100)); }
.edt-seg { height: 32px; padding: 0 14px; border-radius: 9999px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: rgb(var(--c-neutro-600)); cursor: pointer; white-space: nowrap; }
.edt-seg:hover { color: rgb(var(--c-marinho-900)); }
input:checked + .edt-seg { background: rgb(var(--c-superficie)); color: rgb(var(--c-marinho-900)); box-shadow: var(--ds-sombra); }
.edt-seg-mini { height: 26px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Manual/Automático do voo só com a letra (21/10/2026): botão redondo de 26px. */
.edt-seg-letra { width: 26px; padding: 0; justify-content: center; letter-spacing: 0; }
/* Pílula de marcar fora da busca e da barra do orçamento ("Cotar valor único", 21/10/2026). */
.pilula-ds.pilula { height: 30px; padding: 0 12px; font-size: 12px; }
.pilula-ds.pilula-caixa { border-style: dashed; font-weight: 600; color: rgb(var(--c-neutro-600)); }
.pilula-ds.pilula-caixa::before { content: '+'; font-weight: 700; }
.pilula-ds.pilula-caixa:has(input:checked) { border-style: solid; border-color: transparent; background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); }
.pilula-ds.pilula-caixa:has(input:checked)::before { content: '\2713'; }
.edt-pilula { height: 30px; padding: 0 12px; border: 1px solid rgb(var(--c-neutro-300)); border-radius: 9999px; background: rgb(var(--c-superficie)); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgb(var(--c-marinho-900)); cursor: pointer; white-space: nowrap; }
.edt-pilula::before { content: '+'; font-weight: 700; color: rgb(var(--c-neutro-500)); }
input:checked + .edt-pilula { background: rgb(var(--c-marca-100)); border-color: transparent; color: rgb(var(--c-marca-700)); }
input:checked + .edt-pilula::before { content: '✓'; color: inherit; }
/* "Peso" das malas na linha do rótulo "Bagagens" (22/10/2026): pílula baixa, para não empurrar os campos. */
.edt-pilula-mini { height: 22px; padding: 0 8px; gap: 4px; font-size: 11px; }
.edt-perna { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: rgb(var(--c-marinho-900)); }
.edt-perna > i { font-size: 18px; color: rgb(var(--c-marca-600)); }
.edt-perna-select { border: 0; padding: 0 4px 0 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: rgb(var(--c-marinho-900)); cursor: pointer; }
.edt-perna-select:focus { outline: none; box-shadow: 0 0 0 3px rgb(var(--c-marca-200)); border-radius: 6px; }
.edt-caixa { background: rgb(var(--c-neutro-50)); border-radius: 14px; padding: 16px; }
.edt-caixa-titulo { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); }
.edt-caixa-titulo i { font-size: 14px; }
.edt-total { height: 44px !important; border: 0 !important; background: rgb(var(--c-marca-100)) !important; color: rgb(var(--c-marca-700)) !important; font-size: 20px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.edt-conexao-etiqueta { height: 22px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); }
.edt-btn-suave { background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); }
.edt-btn-suave:hover { background: rgb(var(--c-marca-200)); }
.edt-barra { padding: 8px 8px 8px 12px; border-radius: 20px; background: rgb(var(--c-superficie)); box-shadow: 0 12px 40px rgba(19, 37, 73, .16); }
.edt-filial { height: 28px; min-width: 40px; padding: 0 10px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: rgb(var(--c-neutro-600)); cursor: pointer; }
.edt-filial.ativa { background: rgb(var(--c-marca-600)); color: #fff; }
/* As pílulas do PDF ao lado da filial, na mesma linha dos botões (21/10/2026): um pouco menores. */
.edt-barra-chaves .pilula { height: 28px; padding: 0 10px; font-size: 11px; gap: 4px; }
@media (max-width: 639px) {
/* O budget.css (celular) tirava o fundo dos blocos; no design system todos seguem cartão. */
body.edt .ds-card.edt-bloco { background: rgb(var(--c-superficie)) !important; box-shadow: var(--ds-sombra) !important; padding: 16px !important; }
body.edt .edt-caixa { padding: 12px !important; }
.edt-servicos { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; flex: 1 1 auto; }
.edt-servico { justify-content: center; padding: 0 8px; }
}
/* ── Sugestões do cadastro de passageiros no campo Nome (budget.js, sugerirPassageiro) ── */
.pax-sugestoes { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); min-width: 280px; max-height: 260px; overflow-y: auto; padding: 4px; border-radius: 14px; background: rgb(var(--c-superficie)); border: 1px solid rgb(var(--c-neutro-200)); box-shadow: 0 12px 32px rgba(19, 37, 73, .18); }
.pax-sug-rot { display: block; padding: 6px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); }
.pax-sug { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.pax-sug b { font-size: 13px; font-weight: 700; color: rgb(var(--c-marinho-900)); }
.pax-sug span { font-size: 11px; color: rgb(var(--c-neutro-600)); }
.pax-sug:hover { background: rgb(var(--c-neutro-100)); }
/* ── Autorizações de acesso (auth-clients.html; Autorizacoes.dc.html) ── */
.aut-cartao { padding: 20px 22px; }
.aut-passo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.aut-passo h2 { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: rgb(var(--c-marinho-900)); }
.aut-campo { width: 100%; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid rgb(var(--c-neutro-300)); border-radius: 9999px; background: rgb(var(--c-superficie)); color: rgb(var(--c-marinho-900)); font: inherit; font-size: 14px; box-sizing: border-box; outline: none; }
.aut-campo.ds-mono { font-family: var(--ds-mono); letter-spacing: .08em; }
.aut-campo::placeholder { color: rgb(var(--c-neutro-500)); letter-spacing: normal; }
.aut-campo:focus { border-color: rgb(var(--c-marca-500)); box-shadow: 0 0 0 4px rgb(var(--c-marca-200)); }
.aut-codigo { text-align: center; font-family: var(--ds-mono); font-size: 18px; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; }
/* Botão de um segmentado (.edt-segmento): Localizadores (popup), Monitoramento (prazo). */
.loc-modo { height: 32px; padding: 0 14px; border: 0; border-radius: 9999px; background: transparent; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; color: rgb(var(--c-neutro-600)); cursor: pointer; }
.loc-modo.ativo { background: rgb(var(--c-superficie)); color: rgb(var(--c-marinho-900)); box-shadow: var(--ds-sombra); }
/* ── Monitoramento (monitoramento.html; Monitoramento.dc.html) ── */
.mon-tabela thead th { padding-top: 10px; padding-bottom: 10px; background: rgb(var(--c-neutro-100)); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); white-space: nowrap; }
.mon-tabela tbody td { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid rgb(var(--c-neutro-100)); }
.mon-tabela tbody tr:hover { background: rgb(var(--c-neutro-50)); }
/* ── Lixeira (lixeira.html; Lixeira.dc.html) ── */
.lix-esvaziar { background: rgb(var(--c-erro-50)); color: rgb(var(--c-erro-700)); }
.lix-esvaziar:hover { background: rgb(var(--c-erro-100)); }
.lix-tabela td { vertical-align: middle; }
/* Paginação (renderControlesPaginacao, util.js): pílulas de 34px, a página atual em marinho. */
button[data-pagina] {
height: 34px; min-height: 34px; min-width: 34px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 9999px;
background: rgb(var(--c-superficie)); color: rgb(var(--c-marinho-900)); box-shadow: none; font-size: 13px; font-weight: 500;
}
button[data-pagina]:not(:disabled):hover { background: rgb(var(--c-neutro-100)); color: rgb(var(--c-marinho-900)); }
button[data-pagina][aria-label^="Ir para"].bg-marca-600 { background: #132549; color: #fff; font-weight: 700; }
[data-theme="dark"] button[data-pagina][aria-label^="Ir para"].bg-marca-600 { background: #F3F7FD; color: #0B1426; }
button[data-pagina][aria-label="Próxima página"]:not(:disabled) { font-weight: 600; }
button[data-pagina]:disabled { background: transparent; color: rgb(var(--c-neutro-500)); opacity: .5; }
/* Grade que se ajusta: cartões de indicadores e de atalhos. */
.ds-grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ds-grade-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
/* Celular: dois indicadores por linha, mais baixos (uma coluna só empilharia cinco cartões). */
@media (max-width: 640px) {
.ds-pagina { padding: 8px 4px 64px; }
.ds-titulo { font-size: 26px; }
.ds-grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ds-kpi { padding: 14px; }
.ds-kpi-valor { font-size: 26px; }
.ds-card-cab { padding: 14px 16px; }
.ds-tabela-cab, .ds-tabela-linha { padding-left: 16px; padding-right: 16px; }
}
/* ── Configurações (settings.html; protótipo Configuracoes.dc.html) ── */
.cfg-abas { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cfg-abas .cad-aba { flex: none; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cfg-abas .cad-aba.ativa { background: rgb(var(--c-superficie)); }
.cfg-secao { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.cfg-h2 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: rgb(var(--c-marinho-900)); }
.cfg-h3 { margin: 0; font-size: 14px; font-weight: 700; color: rgb(var(--c-marinho-900)); }
.cfg-divisor { height: 1px; background: rgb(var(--c-neutro-100)); }
.cfg-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(90px, .6fr); gap: 12px 16px; }
.cfg-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.cfg-campo-caixa { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfg-campo {
width: 100%; height: 40px; padding: 0 14px; box-sizing: border-box; border-radius: 9999px;
border: 1px solid rgb(var(--c-neutro-200)); background: rgb(var(--c-superficie));
font: inherit; font-size: 13px; color: rgb(var(--c-marinho-900)); outline: none;
}
select.cfg-campo { cursor: pointer; }
.cfg-campo::placeholder { color: rgb(var(--c-neutro-500)); }
.cfg-campo:focus { border-color: rgb(var(--c-marca-500)); box-shadow: 0 0 0 4px rgb(var(--c-marca-200)); }
.cfg-filial { border: 1px solid rgb(var(--c-neutro-200)); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cfg-btn-claro { background: rgb(var(--c-marca-100)); color: rgb(var(--c-marca-700)); font-size: 12px; padding: 0 14px; }
.cfg-btn-claro:hover { background: rgb(var(--c-marca-200)); }
.cfg-btn-perigo { background: rgb(var(--c-erro-700)); color: #fff; }
.cfg-btn-perigo:hover { background: rgb(var(--c-erro-800, var(--c-erro-700))); filter: brightness(.95); }
.cfg-avatar { width: 72px; height: 72px; border-radius: 9999px; background: rgb(var(--c-turquesa-400, 113 203 205)); color: #132549; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.cfg-avatar-trocar { position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 9999px; background: rgb(var(--c-marca-600)); color: #fff; border: 3px solid rgb(var(--c-superficie)); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; }
.cfg-soma { font-size: 32px; font-weight: 800; line-height: 1; color: rgb(var(--c-marca-600)); font-variant-numeric: tabular-nums; }
.cfg-nota { margin: 0; padding-top: 12px; border-top: 1px solid rgb(var(--c-neutro-100)); font-size: 12px; color: rgb(var(--c-neutro-600)); }
.cfg-peso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 72px; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid rgb(var(--c-neutro-100)); }
.cfg-peso-texto { display: flex; flex-direction: column; gap: 2px; }
.cfg-peso input[type=range] { width: 100%; accent-color: rgb(var(--c-marca-600)); }
.cfg-sub { background: rgb(var(--c-neutro-50)); border: 1px solid rgb(var(--c-neutro-100)); border-radius: 14px; padding: 14px 16px; }
.cfg-barra { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; gap: 8px; }
.cfg-barra .ds-btn-contorno { box-shadow: var(--ds-sombra); border: 0; }
.cfg-bloco { border: 1px solid rgb(var(--c-neutro-200)); background: rgb(var(--c-neutro-50)); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.cfg-bloco-perigo { border-color: rgb(var(--c-erro-100, var(--c-erro-200))); background: rgb(var(--c-erro-50) / .5); }
.cfg-arquivo { font-size: 12px; color: rgb(var(--c-neutro-600)); cursor: pointer; }
.cfg-arquivo::file-selector-button { height: 32px; margin-right: 10px; padding: 0 14px; border: 0; border-radius: 9999px; background: rgb(var(--c-erro-50)); color: rgb(var(--c-erro-700)); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cfg-dia { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid rgb(var(--c-neutro-200)); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--c-marinho-900)); cursor: pointer; }
.cfg-dia:hover:not(:disabled) { background: rgb(var(--c-neutro-100)); }
.cfg-dia:disabled { opacity: .4; cursor: not-allowed; }
.cfg-contagem { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px; background: rgb(var(--c-neutro-100)); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cfg-contagem.cfg-bom { background: rgb(var(--c-sucesso-50)); color: rgb(var(--c-sucesso-700)); }
.cfg-contagem.cfg-ruim { background: rgb(var(--c-erro-50)); color: rgb(var(--c-erro-700)); }
.cfg-tabela-caixa { border: 1px solid rgb(var(--c-neutro-200)); border-radius: 14px; overflow: auto; }
.cfg-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-tabela th { padding: 10px 16px; background: rgb(var(--c-neutro-100)); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-neutro-600)); }
.cfg-tabela td { padding: 10px 16px; border-top: 1px solid rgb(var(--c-neutro-100)); vertical-align: top; color: rgb(var(--c-marinho-900)); }
.cfg-tabela tr.cfg-linha-falha td { background: rgb(var(--c-erro-50) / .5); }
@media (max-width: 640px) {
.cfg-secao { padding: 16px; }
.cfg-grade, .cfg-grade-2 { grid-template-columns: minmax(0, 1fr); }
.cfg-grade .cfg-campo-caixa:last-child { max-width: 140px; }
.cfg-peso { grid-template-columns: minmax(0, 1fr) 72px; }
.cfg-peso-texto { grid-column: 1 / -1; }
}
.hidden[class*="cfg-"] { display: none !important; }
/* ── Dropdowns (21/10/2026) ──
A lista que o navegador abre para um