/* =====================================================================
   ALTUS MOTORS — design system do mockup (front-only)
   Paleta extraída do logo: preto puro, dourado (#9D8537 → #D2B25A → #EFD57E)
   e prata (#D2D2D2 → #EFEFEF). Tipografia: Michroma (eco do wordmark, usada
   só em títulos e leituras de instrumento) + Chakra Petch (texto e números).
   Um único elemento ousado: o painel de instrumentos. O resto é quieto.
   ===================================================================== */

:root {
  --preto: #000000;
  --carvao: #14120E;        /* superfície de painéis (preto quente) */
  --carvao-2: #1C1913;      /* superfície elevada / hover */
  --linha: #2C2717;         /* hairline dourada apagada */
  --ouro: #D2B25A;
  --ouro-claro: #EFD57E;
  --ouro-escuro: #9D8537;
  --prata: #EFEFEF;
  --prata-2: #B5B3AD;
  --cinza: #7C7970;
  --verde: #3FC777;
  --ambar: #E3A73A;
  --vermelho: #E24B3B;

  --fonte-display: "Michroma", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Chakra Petch", "Segoe UI", system-ui, sans-serif;

  --lateral-w: 232px;
  --topo-h: 64px;
  --raio: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--preto);
  color: var(--prata);
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ouro); text-decoration: none; }
a:hover { color: var(--ouro-claro); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 500; }
button { font-family: inherit; }

/* ---------- casca: lateral + topo + conteúdo ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0;
  width: var(--lateral-w);
  background: var(--preto);
  border-right: 1px solid var(--linha);
  display: flex; flex-direction: column;
  z-index: 20;
}
.lateral .logo {
  display: block; padding: 22px 26px 14px;
}
.lateral .logo img { width: 100%; display: block; }
.lateral nav { padding: 8px 0; flex: 1; }
.lateral nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px 11px 22px;
  color: var(--prata-2);
  border-left: 2px solid transparent;
  font-size: 15px;
}
.lateral nav a svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lateral nav a:hover { color: var(--prata); background: var(--carvao); }
.lateral nav a.ativo { color: var(--ouro); border-left-color: var(--ouro); background: var(--carvao); }
.lateral .rodape {
  padding: 16px 24px; border-top: 1px solid var(--linha);
  color: var(--cinza); font-size: 12px; line-height: 1.5;
}
.lateral .hamburguer { display: none; }

.topo {
  position: sticky; top: 0; z-index: 10;
  height: var(--topo-h);
  margin-left: var(--lateral-w);
  padding: 0 32px;
  display: flex; align-items: center; gap: 18px;
  background: rgba(0,0,0,.92);
  border-bottom: 1px solid var(--linha);
  backdrop-filter: blur(6px);
}
.topo h1 {
  font-family: var(--fonte-display);
  font-size: 16px; letter-spacing: .04em;
  color: var(--prata);
  flex: 1;
}
.topo .hoje { color: var(--cinza); font-size: 13px; }
.topo select, .campo select, .acoes select {
  background: var(--carvao); color: var(--prata);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 8px 34px 8px 12px; font: inherit; font-size: 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23D2B25A' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  cursor: pointer;
}
.topo .emblema { display: none; }
.sm { display: none; }
.topo .usuario {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--ouro-escuro); background: var(--carvao);
  color: var(--ouro); display: grid; place-items: center;
  font: 600 13px var(--fonte-texto);
}
.topo .usuario:hover, .topo .usuario.aberta { border-color: var(--ouro); background: var(--carvao-2); }

.conteudo {
  margin-left: var(--lateral-w);
  padding: 26px 32px 48px;
  max-width: calc(1400px + var(--lateral-w));
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--raio);
  border: 1px solid var(--ouro-escuro);
  background: linear-gradient(180deg, #E4C56B, #B8963E);
  color: #1A1503; font-weight: 600; font-size: 14px;
  cursor: pointer;
}
.btn:hover { background: linear-gradient(180deg, #F0D47C, #C5A249); }
.btn.fantasma { background: transparent; color: var(--ouro); }
.btn.fantasma:hover { background: var(--carvao-2); }

/* ---------- painel de instrumentos (o elemento ousado) ---------- */
.cluster {
  position: relative;
  border: 1px solid var(--linha); border-radius: 6px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(210,178,90,.10), transparent 60%),
    linear-gradient(180deg, #0E0D0A, #060605);
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: end;
  padding: 18px 24px 10px;
  overflow: hidden;
}
.cluster::before {           /* filete dourado superior, como o do logo */
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
}
.cluster .gauge { display: block; margin: 0 auto; width: 250px; max-width: 100%; }
.cluster .gauge.central { width: 320px; }

/* velocímetro (SVG gerado por js/gauge.js) */
.gauge .trilho { fill: none; stroke: #23201A; stroke-width: 10; }
.gauge .zona { fill: none; stroke-width: 4; opacity: .9; }
.gauge .tique { stroke: #6A6455; stroke-width: 1.2; }
.gauge .tique.maior { stroke: var(--prata-2); stroke-width: 2; }
.gauge .escala { fill: var(--prata-2); font: 500 9.5px var(--fonte-texto); text-anchor: middle; }
.gauge .ponteiro { fill: var(--ouro); filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.gauge .ponteiro-cabo { fill: #0A0906; stroke: var(--ouro-escuro); stroke-width: 2; }
.gauge .ponteiro-grupo {
  transform-box: view-box; transform-origin: 120px 118px;
  transition: transform 1.4s cubic-bezier(.2,.8,.25,1);
}
.gauge .leitura { fill: var(--prata); font: 14.5px var(--fonte-display); text-anchor: middle; }
.gauge.central .leitura { font-size: 22px; }
.gauge .unidade { fill: var(--cinza); font: 500 10px var(--fonte-texto); text-anchor: middle; letter-spacing: .06em; }
.gauge .rotulo { fill: var(--prata-2); font: 500 12px var(--fonte-texto); text-anchor: middle; }
.gauge .estado { font: 600 11px var(--fonte-texto); text-anchor: middle; }
.gauge .marca-alvo { stroke: var(--ouro); stroke-width: 2; stroke-dasharray: 2 2; }
@media (prefers-reduced-motion: reduce) {
  .gauge .ponteiro-grupo { transition: none; }
}

/* ---------- faixa de indicadores (hodômetros) ---------- */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 22px 0 24px;
}
.kpi { padding: 4px 22px; border-left: 1px solid var(--linha); }
.kpi:first-child { padding-left: 2px; border-left: 0; }
.kpi .valor { font-family: var(--fonte-display); font-size: 20px; color: var(--prata); line-height: 1.25; white-space: nowrap; }
.kpi .nome { color: var(--prata-2); font-size: 13px; margin-top: 4px; }
.kpi .delta { font-size: 12px; margin-top: 2px; color: var(--cinza); }
.kpi .delta.pos { color: var(--verde); }
.kpi .delta.neg { color: var(--vermelho); }

/* ---------- painéis ---------- */
.paineis { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
.coluna { display: grid; gap: 20px; }
.painel {
  background: var(--carvao); border: 1px solid var(--linha); border-radius: var(--raio);
}
.painel > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--linha);
}
.painel > header h2 { font-size: 15px; font-weight: 600; color: var(--prata); }
.painel > header a, .painel > header .nota { font-size: 13px; }
.painel > header .nota { color: var(--cinza); }
.painel .corpo { padding: 14px 18px; }

/* tabela de lista */
table.lista { width: 100%; border-collapse: collapse; }
table.lista th {
  text-align: left; font-weight: 500; color: var(--cinza); font-size: 12.5px;
  padding: 10px 18px 8px; border-bottom: 1px solid var(--linha);
}
table.lista td { padding: 11px 18px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.lista tr:last-child td { border-bottom: 0; }
table.lista .num, table.lista th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lista tr.clicavel { cursor: pointer; }
table.lista tr.clicavel:hover td { background: var(--carvao-2); }
.carro { display: flex; align-items: center; gap: 12px; }
.carro .foto {
  width: 52px; height: 36px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, #2A2620, #171511);
  display: grid; place-items: center; color: var(--ouro-escuro);
}
.carro .foto svg { width: 30px; height: 20px; }
.carro .nome { color: var(--prata); font-weight: 500; }
.carro .sub { color: var(--cinza); font-size: 12.5px; }

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap;
}
.chip.venda { color: var(--verde); border-color: rgba(63,199,119,.35); }
.chip.preparacao { color: var(--ambar); border-color: rgba(227,167,58,.4); }
.chip.vendido { color: var(--prata-2); border-color: var(--linha); }

.margem { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.margem .barra { flex: 1; height: 4px; background: #24211A; border-radius: 2px; overflow: hidden; }
.margem .barra i { display: block; height: 100%; background: var(--ouro); }
.margem b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.margem.baixa .barra i { background: var(--vermelho); }
.margem.media .barra i { background: var(--ambar); }
.margem.alta .barra i { background: var(--verde); }

/* gráfico de barras em SVG */
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .eixo { stroke: var(--linha); }
.grafico .rot { fill: var(--cinza); font: 500 11px var(--fonte-texto); text-anchor: middle; }
.grafico .rot.num { text-anchor: end; }
.grafico .barra-receita { fill: var(--ouro); }
.grafico .barra-custo { fill: #4A4130; }
.grafico .barra-despesa { fill: #8A2F26; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--prata-2); padding: 0 18px 14px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; background: var(--cor); }

/* últimos lançamentos */
.movs { list-style: none; margin: 0; padding: 0; }
.movs li { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--linha); align-items: center; }
.movs li:last-child { border-bottom: 0; }
.movs li.clicavel { cursor: pointer; }
.movs li.clicavel:hover { background: var(--carvao-2); }
.movs .data { color: var(--cinza); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.movs .desc { color: var(--prata); font-size: 14px; }
.movs .desc small { display: block; color: var(--cinza); font-size: 12px; }
.movs .valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.movs .valor.saida { color: var(--prata-2); }
.movs .valor.entrada { color: var(--verde); }

/* utilitários */
.pos { color: var(--verde); }
.neg { color: var(--vermelho); }
.muted { color: var(--cinza); }
.vazio { padding: 28px 18px; color: var(--cinza); text-align: center; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .cluster { grid-template-columns: 1fr 1.2fr 1fr; }
  .cluster .gauge { width: 210px; }
  .cluster .gauge.central { width: 270px; }
  .paineis { grid-template-columns: 1fr; }
}

/* =====================================================================
   Componentes das demais telas (Estoque, Ficha, Despesas, Pessoas, Resultados)
   ===================================================================== */

/* barra de ações da página (título secundário à esquerda, botões à direita) */
.acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.acoes .espaco { flex: 1; }
.resumo-linha { color: var(--prata-2); font-size: 14px; margin: 0; }
.resumo-linha b { color: var(--prata); font-weight: 600; }
main > .resumo-linha { margin: -6px 0 18px; }

/* filtros por situação (chips clicáveis) */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros button {
  background: transparent; color: var(--prata-2); border: 1px solid var(--linha);
  border-radius: 2px; padding: 6px 12px; font-size: 13.5px; cursor: pointer;
}
.filtros button:hover { color: var(--prata); border-color: var(--ouro-escuro); }
.filtros button.ativo { color: var(--ouro); border-color: var(--ouro); }
.filtros button small { color: var(--cinza); margin-left: 4px; }

.busca {
  background: var(--carvao); color: var(--prata); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 8px 12px; font: inherit; font-size: 14px; min-width: 220px;
}
.busca::placeholder { color: var(--cinza); }
.busca:focus { border-color: var(--ouro-escuro); outline: none; }

/* grade de cards de veículos */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.card {
  background: var(--carvao); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
}
.card:hover { border-color: var(--ouro-escuro); }
.card .foto {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--tinta, #2A2620), #100F0C 85%);
  color: rgba(210,178,90,.55);
}
.card .foto svg { width: 96px; height: 64px; }
.card .foto .chip { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.55); }
.card .foto .dias { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: var(--prata-2); background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 2px; }
.card .info { padding: 14px 16px 6px; }
.card .info .nome { color: var(--prata); font-weight: 600; font-size: 15.5px; }
.card .info .sub { color: var(--cinza); font-size: 12.5px; margin-top: 2px; }
.card .dados {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  padding: 12px 16px 14px; border-top: 1px solid var(--linha); margin-top: 10px;
}
.card .dados div { font-size: 12px; color: var(--cinza); }
.card .dados b { display: block; color: var(--prata); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 1px; }
.card .dados b.pos { color: var(--verde); }
.card .dados b.neg { color: var(--vermelho); }

/* ficha do veículo */
.ficha-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ficha-topo .voltar { color: var(--cinza); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ficha-topo .voltar:hover { color: var(--ouro); }
.ficha-topo h2 { font-family: var(--fonte-display); font-size: 19px; color: var(--prata); letter-spacing: .02em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficha-topo .meta { color: var(--prata-2); font-size: 13.5px; margin-top: 6px; }
.ficha-topo .meta span + span::before { content: "·"; margin: 0 8px; color: var(--cinza); }
.ficha-topo .botoes { display: flex; gap: 10px; margin-left: auto; align-self: center; flex-wrap: wrap; }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); margin-bottom: 20px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--carvao); overflow: hidden; }
.resumo > div { padding: 14px 18px; box-shadow: 1px 0 0 var(--linha), 0 1px 0 var(--linha); }   /* hairlines entre as células, sem sobrar célula vazia colorida */
.resumo .nome { color: var(--cinza); font-size: 12.5px; }
.resumo .valor { font-family: var(--fonte-display); font-size: 14.5px; color: var(--prata); margin-top: 4px; white-space: nowrap; }
.resumo .valor.pos { color: var(--verde); }
.resumo .valor.neg { color: var(--vermelho); }
.resumo .valor.ouro { color: var(--ouro); }
.resumo .obs { color: var(--cinza); font-size: 12px; margin-top: 3px; }
.resumo .obs.neg { color: var(--vermelho); }

/* termômetro de negociação */
.negociacao .entrada { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.negociacao .entrada label { color: var(--prata-2); font-size: 14px; }
.negociacao .entrada input { width: 170px; }
.negociacao .veredito { font-size: 14.5px; color: var(--prata); }
.negociacao .veredito b { font-weight: 600; }
.escala-neg { position: relative; margin: 34px 8px 34px; height: 10px; border-radius: 5px; overflow: visible; }
.escala-neg.com-baixo { margin-bottom: 62px; }
.escala-neg .marco.baixo span { top: 54px; }
.escala-neg .marco.baixo { height: 50px; }
.escala-neg .faixa { position: absolute; top: 0; bottom: 0; }
.escala-neg .faixa.vermelha { background: #7A2A22; border-radius: 5px 0 0 5px; }
.escala-neg .faixa.ambar { background: #7E5C1E; }
.escala-neg .faixa.verde { background: #245C3A; border-radius: 0 5px 5px 0; }
.escala-neg .marco { position: absolute; top: -6px; width: 2px; height: 22px; background: var(--prata-2); transform: translateX(-1px); }
.escala-neg .marco span { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; color: var(--cinza); text-align: center; line-height: 1.3; }
.escala-neg .marco span b { display: block; color: var(--prata-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.escala-neg .marco.primeiro span { left: 0; transform: none; text-align: left; }
.escala-neg .marco.ultimo span { left: auto; right: 0; transform: none; text-align: right; }
.escala-neg .marco.ouro { background: var(--ouro); }
.escala-neg .marco.ouro span { color: var(--ouro-escuro); }
.escala-neg .marco.ouro span b { color: var(--ouro); }
.escala-neg .oferta {
  position: absolute; top: -22px; transform: translateX(-50%); transition: left .5s cubic-bezier(.2,.8,.25,1);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--ouro-claro); white-space: nowrap;
}
.escala-neg .oferta span { display: block; transition: transform .3s; }
.escala-neg .oferta::after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-top: 9px solid var(--ouro); border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .escala-neg .oferta { transition: none; } }

/* bloco da venda (ficha de carro vendido) */
.venda-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px; }
.venda-info .nome { color: var(--cinza); font-size: 12.5px; }
.venda-info .valor { color: var(--prata); font-size: 15px; margin-top: 2px; }

/* modal + formulário */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--carvao); border: 1px solid var(--linha); border-radius: 6px;
}
.modal > header { padding: 16px 20px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; }
.modal > header h2 { font-size: 16px; font-weight: 600; flex: 1; }
.modal > header button { background: none; border: 0; color: var(--cinza); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.modal > header button:hover { color: var(--prata); }
.modal .campos { padding: 18px 20px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.modal .campos .largo { grid-column: 1 / -1; }
.modal > footer { padding: 14px 20px 18px; display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--carvao); border-top: 1px solid var(--linha); }
.campo label { display: block; color: var(--prata-2); font-size: 12.5px; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea, .negociacao input {
  width: 100%; background-color: #0C0B09; color: var(--prata); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 9px 11px; font: inherit; font-size: 14.5px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus, .negociacao input:focus { border-color: var(--ouro-escuro); outline: none; }
.campo input[type="number"] { font-variant-numeric: tabular-nums; }
.campo .dica { color: var(--cinza); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.campo.erro input, .campo.erro select { border-color: var(--vermelho); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #1A1710; color: var(--prata); border: 1px solid var(--ouro-escuro);
  padding: 10px 18px; border-radius: var(--raio); font-size: 14px; z-index: 60;
  opacity: 0; transition: opacity .25s, transform .25s;
}
.toast.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }

/* abas (Pessoas) */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.abas button {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--prata-2); padding: 10px 16px; font-size: 14.5px; cursor: pointer;
}
.abas button:hover { color: var(--prata); }
.abas button.ativo { color: var(--ouro); border-bottom-color: var(--ouro); }
.abas button small { color: var(--cinza); margin-left: 5px; }

/* despesas por categoria (barras horizontais) */
.cats { list-style: none; margin: 0; padding: 4px 18px 10px; }
.cats li { display: grid; grid-template-columns: 120px 1fr 90px; gap: 12px; align-items: center; padding: 7px 0; font-size: 13.5px; }
.cats .nome { color: var(--prata-2); }
.cats .barra { height: 6px; background: #24211A; border-radius: 3px; overflow: hidden; }
.cats .barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro)); }
.cats .valor { text-align: right; font-variant-numeric: tabular-nums; color: var(--prata); }

/* tabela de resultados: linhas de total e destaque */
table.lista tr.total td { border-top: 1px solid var(--ouro-escuro); font-weight: 600; color: var(--prata); }
table.lista td.destaque { color: var(--ouro); }

/* ranking (resultados) */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--linha); }
.ranking li:last-child { border-bottom: 0; }
.ranking .pos-n { color: var(--ouro); font-family: var(--fonte-display); font-size: 12px; }
.ranking .nome { color: var(--prata); font-size: 14px; }
.ranking .nome small { display: block; color: var(--cinza); font-size: 12px; }
.ranking .valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking .valor small { display: block; color: var(--cinza); font-size: 12px; font-weight: 400; }

/* botão-link discreto no rodapé da lateral */
.lateral .rodape a { display: block; margin-top: 6px; color: var(--ouro-escuro); }
.lateral .rodape a:hover { color: var(--ouro); }


/* =====================================================================
   Ajuda "?" (balão explicativo), agrupamento por mês no estoque
   ===================================================================== */
.ajuda {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--cinza); color: var(--cinza); background: none; padding: 0;
  font: 600 10.5px/1 var(--fonte-texto); cursor: pointer; vertical-align: middle; margin-left: 6px; flex: none;
}
.ajuda { position: relative; }
.ajuda::before { content: ""; position: absolute; inset: -8px; }
.ajuda:hover, .ajuda.aberta, [data-ajuda].aberta { color: var(--ouro); border-color: var(--ouro); }
.ajuda-pop {
  position: fixed; z-index: 70; max-width: min(360px, calc(100vw - 16px)); max-height: 70vh; overflow: auto;
  background: #1A1710; border: 1px solid var(--ouro-escuro); border-radius: 6px;
  padding: 14px 16px; font-size: 13.5px; line-height: 1.5; color: var(--prata-2);
  box-shadow: 0 12px 34px rgba(0,0,0,.65);
}
.ajuda-pop h3 { font-size: 13.5px; font-weight: 600; color: var(--prata); margin: 0 0 6px; }
.ajuda-pop b { color: var(--prata); font-weight: 600; }
.ajuda-pop ul { margin: 6px 0 0; padding-left: 18px; }
.ajuda-pop li { margin: 3px 0; }
.ajuda-pop p { margin: 6px 0 0; }
.ajuda-pop .formula { display: block; margin: 8px 0; padding: 8px 10px; background: #0C0B09; border-radius: 3px; color: var(--ouro); font-variant-numeric: tabular-nums; }
.cluster > div { position: relative; }
.cluster .ajuda { position: absolute; top: 6px; right: 10px; margin: 0; }
.kpi .nome .ajuda, .painel > header h2 .ajuda, .resumo .nome .ajuda, table.lista th .ajuda { margin-left: 5px; }
.painel > header h2 { display: flex; align-items: center; }

/* estoque: vendidos por mês */
.grupo-mes {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px;
  padding: 6px 2px 0; margin-top: 6px; color: var(--prata); font-weight: 600; font-size: 14.5px;
}
.grupo-mes small { color: var(--cinza); font-weight: 400; font-size: 13px; }
.grupo-mes::after { content: ""; flex: 1; height: 1px; background: var(--linha); align-self: center; }
.cards .grupo-mes:first-child { margin-top: 0; }
table.lista td .sub { font-size: 12.5px; margin-top: 1px; }

/* =====================================================================
   MOBILE (até 900px): menu vira barra inferior, topo compacto com o
   emblema, tabelas enxutas, formulários em coluna única (fonte 16px para
   o iPhone não dar zoom), modal como folha inferior.
   ===================================================================== */
@media (max-width: 900px) {
  :root { --lateral-w: 0px; --topo-h: 54px; }
  .lg { display: none; }
  .sm { display: inline; }

  /* --- barra inferior de navegação --- */
  .lateral {
    inset: auto 0 0 0; width: 100%; height: auto;
    flex-direction: row; border-right: 0; border-top: 1px solid var(--linha);
    background: rgba(0,0,0,.96); backdrop-filter: blur(8px); z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lateral .logo, .lateral .rodape { display: none; }
  .lateral nav { display: flex; width: 100%; padding: 0; }
  .lateral nav a {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    padding: 8px 2px 7px; font-size: 10.5px; letter-spacing: .01em;
    border-left: 0; border-top: 2px solid transparent; min-height: 56px;
  }
  .lateral nav a svg { width: 22px; height: 22px; }
  .lateral nav a:hover { background: none; }
  .lateral nav a.ativo { background: none; border-top-color: var(--ouro); }

  /* --- topo --- */
  .topo { margin-left: 0; padding: 0 12px; gap: 10px; }
  .topo .emblema { display: block; width: 36px; height: 36px; padding: 0; border: 0; background: none; border-radius: 6px; cursor: pointer; flex: none; }
  .topo .emblema img { width: 100%; height: 100%; display: block; border-radius: 6px; }
  .topo h1 { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topo .hoje, .topo .usuario { display: none; }
  .topo select { padding: 8px 28px 8px 10px; font-size: 16px; max-width: 48vw; background-position: right 9px center; }

  .conteudo { margin-left: 0; padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }

  /* --- inputs: 16px evita o zoom automático do iOS --- */
  .campo input, .campo select, .campo textarea, .busca, .negociacao input, .acoes select { font-size: 16px; }

  /* --- painel de instrumentos --- */
  .cluster { grid-template-columns: 1fr; padding: 14px 10px 4px; gap: 4px; }
  .cluster .gauge { width: 232px; }
  .cluster .gauge.central { width: 264px; order: -1; }
  .cluster .ajuda { top: 4px; right: 4px; }

  .kpis { grid-template-columns: 1fr 1fr; gap: 14px 0; margin: 18px 0 18px; }
  .kpi { padding: 2px 12px; }
  .kpi:nth-child(odd) { border-left: 0; padding-left: 2px; }
  .kpi .valor { font-size: 15px; }
  .kpi .nome { font-size: 12.5px; }

  .paineis { grid-template-columns: 1fr; gap: 14px; }
  .coluna { gap: 14px; }
  .painel > header { padding: 12px 14px 10px; }
  .painel > header h2 { font-size: 14.5px; }
  .painel .corpo { padding: 12px 14px; }
  .painel:has(> table.lista) { overflow-x: auto; }

  /* --- tabelas --- */
  .so-desktop { display: none !important; }
  table.lista th { padding: 8px 9px 7px; font-size: 12px; white-space: normal; }
  table.lista td { padding: 9px 9px; font-size: 14px; }
  .carro { gap: 8px; }
  .carro .foto { display: none; }
  .carro .sub { font-size: 12px; }
  .movs li { padding: 9px 14px; grid-template-columns: 40px 1fr auto; gap: 8px; }
  .cats { padding: 4px 14px 10px; }
  .cats li { grid-template-columns: 88px 1fr 76px; gap: 8px; font-size: 13px; }
  .ranking li { padding: 9px 14px; }
  .legenda { padding: 0 14px 12px; gap: 10px; }

  /* --- barra de ações (estoque, despesas, pessoas) --- */
  .acoes { gap: 10px; margin-bottom: 14px; }
  .acoes .espaco { display: none; }
  .acoes .resumo-linha { order: 0; width: 100%; }
  .acoes .filtros { order: 1; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .acoes .filtros::-webkit-scrollbar { display: none; }
  .acoes .filtros button { white-space: nowrap; padding: 8px 12px; }
  .acoes .busca { order: 2; flex: 1 1 100%; min-width: 0; }
  .acoes select { order: 2; flex: 1 1 100%; }
  .acoes .btn { order: 3; width: 100%; justify-content: center; padding: 12px 16px; }
  main > .resumo-linha { margin: -2px 0 14px; }

  /* --- abas (pessoas) --- */
  .abas { overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { padding: 10px 11px; font-size: 13.5px; white-space: nowrap; }

  /* --- cards do estoque --- */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card .foto { aspect-ratio: 2.6; }
  .card .foto svg { width: 72px; height: 48px; }
  .card .info { padding: 12px 14px 4px; }
  .card .dados { padding: 10px 14px 12px; gap: 8px 12px; }
  .grupo-mes { font-size: 14px; }

  /* --- ficha do veículo --- */
  .ficha-topo { gap: 10px; margin-bottom: 14px; }
  .ficha-topo h2 { font-size: 15px; }
  .ficha-topo .meta { font-size: 13px; }
  .ficha-topo .botoes { margin-left: 0; width: 100%; gap: 8px; }
  .ficha-topo .botoes .btn { flex: 1 1 45%; justify-content: center; padding: 11px 10px; }
  .resumo { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
  .resumo > div { padding: 11px 12px; }
  .resumo .valor { font-size: 13px; }
  .resumo .nome { font-size: 12px; }
  .negociacao .entrada { gap: 10px; margin-bottom: 14px; }
  .negociacao .entrada input { width: 100%; }
  .negociacao .veredito { font-size: 14px; }
  .escala-neg { margin: 34px 14px 40px; }
  .escala-neg.com-baixo { margin-bottom: 66px; }
  .escala-neg .marco span { font-size: 10.5px; }
  .venda-info { grid-template-columns: 1fr 1fr; gap: 12px 16px; }

  /* --- modal como folha inferior --- */
  .modal-fundo { align-items: flex-end; padding: 16px 12px calc(12px + env(safe-area-inset-bottom)); }
  .modal { max-width: none; max-height: calc(100vh - 32px); border-radius: 12px; }
  .modal > header { position: sticky; top: 0; background: var(--carvao); z-index: 1; padding: 14px 18px; }
  .modal .campos { grid-template-columns: 1fr; padding: 16px 18px 8px; gap: 14px; }
  .modal .campos .largo { grid-column: auto; }
  .modal > footer { padding: 12px 18px 16px; }
  .modal > footer .btn { flex: 1; justify-content: center; padding: 12px 14px; }

  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 32px); text-align: center; }
}

/* =====================================================================
   Alertas do painel e tela de login
   ===================================================================== */
.alertas { margin-bottom: 20px; }
.avisos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.avisos li { border-top: 1px solid var(--linha); }
.avisos li:nth-child(-n+2) { border-top: 0; }
.avisos li:nth-child(odd) { border-right: 1px solid var(--linha); }
.avisos li:last-child:nth-child(odd) { border-right: 0; }
.avisos .vazio { grid-column: 1 / -1; }
.avisos a { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 10px 18px; color: var(--prata); }
.avisos a:hover { background: var(--carvao-2); }
.avisos .ponto { width: 8px; height: 8px; border-radius: 50%; }
.avisos .vermelho .ponto { background: var(--vermelho); box-shadow: 0 0 6px rgba(226,75,59,.6); }
.avisos .ambar .ponto { background: var(--ambar); }
.avisos .texto { font-size: 14px; }
.avisos .texto small { display: block; color: var(--cinza); font-size: 12px; }
.avisos .seta { color: var(--cinza); font-size: 16px; }
.avisos .vazio { padding: 22px 18px; }

body.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(210,178,90,.10), transparent 70%), #000;
}
.login-caixa {
  position: relative; width: min(420px, 100%); padding: 36px 32px 28px;
  background: var(--carvao); border: 1px solid var(--linha); border-radius: 8px;
}
.login-caixa::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro), transparent); }
.login-caixa .logo { display: block; width: 230px; max-width: 80%; margin: 0 auto 26px; }
.login-caixa .campo + .campo { margin-top: 14px; }
.login-caixa .lembrar { display: flex; align-items: center; gap: 8px; margin: 16px 0 20px; color: var(--prata-2); font-size: 13.5px; cursor: pointer; }
.login-caixa .lembrar input { accent-color: var(--ouro); width: 16px; height: 16px; }
.login-caixa .btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
.login-caixa .esqueci { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--cinza); }
.login-caixa .esqueci:hover { color: var(--ouro); }
.login-caixa .nota { margin: 26px 0 0; text-align: center; color: var(--cinza); font-size: 12px; }
@media (max-width: 900px) {
  .alertas { margin-bottom: 14px; }
  .avisos { grid-template-columns: 1fr; }
  .avisos li:nth-child(-n+2) { border-top: 1px solid var(--linha); }
  .avisos li:first-child { border-top: 0; }
  .avisos li:nth-child(odd) { border-right: 0; }
  .avisos a { padding: 10px 14px; gap: 10px; }
  body.login { padding: 16px; align-items: start; padding-top: 12vh; }
  .login-caixa { padding: 28px 22px 22px; }
}

/* =====================================================================
   Configurações, Usuários e permissões, exclusões, menu "Mais"
   ===================================================================== */
.btn.perigo { background: transparent; color: var(--vermelho); border-color: rgba(226,75,59,.5); }
.btn.perigo:hover { background: rgba(226,75,59,.12); }
.modal > footer .espaco { flex: 1; }
.excluir-linha {
  background: none; border: 1px solid transparent; color: var(--cinza); border-radius: 50%;
  width: 24px; height: 24px; line-height: 1; font-size: 16px; cursor: pointer; padding: 0;
}
.excluir-linha:hover { color: var(--vermelho); border-color: rgba(226,75,59,.5); }

/* menu: separador antes das telas administrativas; "Mais" só no celular */
.lateral nav a.divisor { margin-top: 8px; border-top: 1px solid var(--linha); padding-top: 14px; }
.lateral nav .mais { display: none; }
.menu-pop { display: grid; min-width: 180px; margin: -4px -6px; }
.menu-pop a { padding: 9px 8px; color: var(--prata); border-bottom: 1px solid var(--linha); }
.menu-pop a:last-child { border-bottom: 0; color: var(--cinza); }
.menu-pop a.ativo { color: var(--ouro); }
.menu-pop a:hover { color: var(--ouro); }

/* configurações: formulários em linha e listas de categorias */
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grade .largo { grid-column: 1 / -1; }
.form-grade .rodape-form { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.campo .sufixo { position: relative; }
.campo .sufixo input { padding-right: 34px; }
.campo .sufixo span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--cinza); font-size: 13px; }
.listas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lista-cat { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.lista-cat h3 { font-size: 13.5px; font-weight: 600; color: var(--prata); margin-bottom: 2px; }
.lista-cat .uso { color: var(--cinza); font-size: 12px; margin-bottom: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--linha); border-radius: 2px; font-size: 13px; color: var(--prata); background: #0F0E0B;
}
.tag small { color: var(--cinza); font-size: 11px; }
.tag button { background: none; border: 0; color: var(--cinza); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tag button:hover { color: var(--vermelho); }
.tag button:disabled { color: #3A3730; cursor: not-allowed; }
.tag.fixa { border-style: dashed; }
.adicionar { display: flex; gap: 8px; }
.adicionar input { flex: 1; min-width: 0; background-color: #0C0B09; color: var(--prata); border: 1px solid var(--linha); border-radius: var(--raio); padding: 7px 10px; font: inherit; font-size: 14px; }
.adicionar input:focus { border-color: var(--ouro-escuro); outline: none; }
.adicionar .btn { padding: 7px 12px; }

/* usuários: grade de permissões (módulo × ação) */
.permissoes { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.permissoes th { text-align: left; color: var(--cinza); font-weight: 500; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.permissoes th.c, .permissoes td.c { text-align: center; width: 64px; }
.permissoes td { padding: 7px 8px; border-bottom: 1px solid var(--linha); color: var(--prata); }
.permissoes tr:last-child td { border-bottom: 0; }
.permissoes input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ouro); cursor: pointer; vertical-align: middle; }
.permissoes input:disabled { opacity: .35; cursor: not-allowed; }
.permissoes tr.tudo td { background: #0F0E0B; color: var(--prata-2); font-size: 12.5px; }
.modelos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; color: var(--cinza); }
.modelos button { background: none; border: 1px solid var(--linha); color: var(--prata-2); border-radius: 2px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.modelos button:hover { color: var(--ouro); border-color: var(--ouro-escuro); }
.perfil-resumo { display: flex; flex-wrap: wrap; gap: 4px; }
.perfil-resumo span { font-size: 11.5px; padding: 2px 7px; border: 1px solid var(--linha); border-radius: 2px; color: var(--prata-2); }
.perfil-resumo span.ver { color: var(--cinza); }
.perfil-resumo span.editar { color: var(--prata-2); border-color: rgba(210,178,90,.35); }
.perfil-resumo span.excluir { color: var(--ouro); border-color: rgba(210,178,90,.55); }
.login-caixa .demo { margin: 14px 0 0; text-align: center; color: var(--cinza); font-size: 12.5px; line-height: 1.5; }
.login-caixa .demo b { color: var(--prata-2); font-weight: 500; }

@media (max-width: 900px) {
  .lateral nav a.secundario { display: none; }
  .lateral nav a.divisor { margin-top: 0; border-top: 0; padding-top: 8px; }
  .lateral nav .mais {
    display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
    background: none; border: 0; border-top: 2px solid transparent; color: var(--prata-2); padding: 8px 2px 7px; font-size: 10.5px; min-height: 56px; cursor: pointer; font-family: inherit;
  }
  .lateral nav .mais svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .lateral nav .mais.ativo, .lateral nav .mais.aberta { color: var(--ouro); }
  .form-grade { grid-template-columns: 1fr; }
  .listas { grid-template-columns: 1fr; }
  .permissoes th.c, .permissoes td.c { width: 52px; }
  .permissoes td, .permissoes th { padding: 7px 4px; }
}

/* =====================================================================
   Fotos dos veículos: "cheia" preenche o quadro; "recorte" (fundo
   transparente) flutua sobre o fundo tingido com a cor do carro
   ===================================================================== */
.card .foto.com-foto, .card .foto.com-recorte { padding: 0; }
.card .foto img.cheia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .foto img.recorte { max-width: 84%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)); }
.card .foto.com-recorte { background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255,255,255,.07), transparent 60%), linear-gradient(160deg, var(--tinta, #2A2620), #100F0C 85%); }
.card .foto.com-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 42%); pointer-events: none; }
.card .foto .chip, .card .foto .dias { z-index: 1; }

.carro .foto { overflow: hidden; }
.carro .foto.com-recorte { background: linear-gradient(160deg, var(--tinta, #2A2620), #171511); }
.carro .foto img.cheia { width: 100%; height: 100%; object-fit: cover; }
.carro .foto img.recorte { max-width: 88%; max-height: 84%; object-fit: contain; }

.ficha-topo .foto-carro {
  position: relative; width: 250px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; flex: none;
  display: grid; place-items: center; color: rgba(210,178,90,.55);
  background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255,255,255,.07), transparent 60%), linear-gradient(160deg, var(--tinta, #2A2620), #100F0C 85%);
  border: 1px solid var(--linha);
}
.ficha-topo .foto-carro svg { width: 90px; height: 60px; }
.ficha-topo .foto-carro img.cheia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha-topo .foto-carro img.recorte { max-width: 86%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
.ficha-topo .titulo-carro { flex: 1; min-width: 240px; }

@media (max-width: 900px) {
  .ficha-topo .foto-carro { width: 100%; aspect-ratio: 2.2; }
  .ficha-topo .titulo-carro { width: 100%; }
}

/* =====================================================================
   Remodelagem (pedidos do cliente): semáforos, meta do mês, consignados,
   dia a dia, faixas de idade, margem de contribuição, auditoria, diretoria
   ===================================================================== */
.semaforos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 14px; }
.semaforo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--carvao); border: 1px solid var(--linha); border-radius: var(--raio); }
.semaforo .luz { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.semaforo.verde .luz { background: var(--verde); box-shadow: 0 0 10px rgba(63,199,119,.6); }
.semaforo.ambar .luz { background: var(--ambar); box-shadow: 0 0 10px rgba(227,167,58,.6); }
.semaforo.vermelho .luz { background: var(--vermelho); box-shadow: 0 0 10px rgba(226,75,59,.6); }
.semaforo.cinza .luz { background: #4A4740; }
.semaforo b { display: block; font-size: 13.5px; color: var(--prata); font-weight: 600; }
.semaforo small { color: var(--cinza); font-size: 12px; }

.painel.meta { margin-bottom: 8px; }
.meta-grade { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr; gap: 18px; }
.meta-bloco .rotulo { color: var(--cinza); font-size: 12.5px; }
.meta-bloco .valor { font-size: 15px; color: var(--prata-2); margin: 4px 0 6px; }
.meta-bloco .valor b { font-family: var(--fonte-display); font-size: 19px; color: var(--prata); }
.meta-bloco .valor.pos b { color: var(--verde); } .meta-bloco .valor.neg b { color: var(--vermelho); }
.meta-bloco .barra { position: relative; height: 8px; background: #24211A; border-radius: 4px; overflow: visible; }
.meta-bloco .barra i { display: block; height: 100%; border-radius: 4px; background: var(--ouro); }
.meta-bloco .barra i.pos { background: var(--verde); } .meta-bloco .barra i.neg { background: var(--ambar); }
.meta-bloco .barra em { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--prata-2); transform: translateX(-1px); }
.meta-bloco .sub { color: var(--cinza); font-size: 12px; margin-top: 5px; }
.meta-bloco.contador .valor b { font-size: 26px; color: var(--ouro); }
.meta-situacao { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--prata); }
.meta-situacao.neg b { color: var(--vermelho); } .meta-situacao.pos { color: var(--prata-2); }

.kpis.patio { margin-top: -8px; padding-top: 14px; border-top: 1px solid var(--linha); }
.kpi .delta .pos { color: var(--verde); } .kpi .delta .neg { color: var(--vermelho); }
.chip.consignado { color: #B9A7E6; border-color: rgba(185,167,230,.45); }
.detalhe-dia { border-top: 1px solid var(--linha); font-size: 13.5px; color: var(--prata-2); line-height: 1.6; }
.cats.faixas li { grid-template-columns: 110px 1fr 90px; }

/* margem de contribuição (ficha) */
.mc { list-style: none; margin: 0; padding: 0; }
.mc li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 18px; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.mc li:last-child { border-bottom: 0; }
.mc li.venda, .mc li.total { color: var(--prata); font-weight: 600; }
.mc li.total { border-top: 1px solid var(--ouro-escuro); background: #0F0E0B; }
.mc li.deducao span:first-child::before { content: "− "; color: var(--cinza); }
.mc li.retorno { color: var(--verde); }
.mc li .est { color: var(--cinza); font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.mc .num { font-variant-numeric: tabular-nums; }

/* despesas: filtros de período */
.filtro-periodo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtro-periodo input[type="date"] { background-color: #0C0B09; color: var(--prata); border: 1px solid var(--linha); border-radius: var(--raio); padding: 7px 10px; font: inherit; font-size: 14px; }
.filtro-periodo label { color: var(--cinza); font-size: 13px; }
tr.preparacao td { color: var(--prata-2); }
tr.preparacao td:first-child { border-left: 2px solid var(--ouro-escuro); }

/* resultados: DRE e alternância %/R$ */
table.dre td.grupo { color: var(--ouro); font-weight: 600; padding-top: 12px; }
table.dre td.sub { padding-left: 30px; color: var(--prata-2); }
table.dre tr.resultado td { font-weight: 600; color: var(--prata); border-top: 1px solid var(--ouro-escuro); }
.alternar { display: inline-flex; border: 1px solid var(--linha); border-radius: 2px; overflow: hidden; }
.alternar button { background: none; border: 0; color: var(--prata-2); padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.alternar button.ativo { color: var(--ouro); background: var(--carvao-2); }

/* auditoria */
.acao-inseriu { color: var(--verde); } .acao-alterou { color: var(--ambar); } .acao-excluiu { color: var(--vermelho); }

/* visão diretoria (uma página) */
.diretoria .grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.diretoria .grade .coluna { display: grid; gap: 20px; }
.diretoria table.lista td { vertical-align: top; }
.diretoria table.lista td.num { white-space: nowrap; }
.diretoria .cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.diretoria .cabecalho h2 { font-family: var(--fonte-display); font-size: 17px; color: var(--prata); }
.diretoria table.lista td.rotulo { color: var(--prata-2); }
.diretoria table.lista td.grupo { color: var(--ouro); font-weight: 600; padding-top: 14px; }
.diretoria .observacao { color: var(--cinza); font-size: 12.5px; margin-top: 12px; }
@media print {
  body { background: #fff; color: #111; }
  .lateral, .topo, .btn, .ajuda, .toast { display: none !important; }
  .conteudo { margin: 0; padding: 0; }
  .painel, .semaforo, .kpi { background: #fff !important; border-color: #ccc !important; color: #111 !important; }
  .painel > header h2, .kpi .valor, .resumo .valor, table.lista td, .diretoria table.lista td.rotulo { color: #111 !important; }
  .semaforo b, .semaforo small, .kpi .nome, .diretoria .observacao { color: #333 !important; }
}
@media (max-width: 1180px) { .meta-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .semaforos { grid-template-columns: 1fr; gap: 8px; margin: 14px 0 10px; }
  .semaforo { padding: 8px 12px; }
  .meta-grade { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cats.faixas li { grid-template-columns: 90px 1fr 76px; }
  .mc li { padding: 7px 14px; }
}
/* caixas de confirmação/aviso (no lugar do confirm/alert do navegador) */
.modal-fundo.confirmacao { z-index: 60; }
.modal.caixa { max-width: 440px; }
.modal.caixa .texto { padding: 18px 20px 4px; color: var(--prata-2); font-size: 14px; line-height: 1.55; }
.modal.caixa .texto b { color: var(--prata); }
.modal .campos .campo[hidden] { display: none; }
a.zap { display: inline-flex; align-items: center; gap: 5px; color: var(--prata-2); }
a.zap svg { color: #25D366; flex: none; }
a.zap:hover { color: #25D366; }
a.ligar { color: var(--cinza); font-size: 12px; margin-left: 4px; text-decoration: none; }
a.ligar:hover { color: var(--prata); }
tr.adicionar-linha td { padding-top: 12px; }
tr.adicionar-linha input, tr.adicionar-linha select { width: 100%; }
/* galeria de fotos da ficha */
.galeria-fotos { margin-bottom: 20px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px 18px 18px; }
.galeria figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden; background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--tinta) 25%, #0B0A08) 0%, #0B0A08 70%); border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; }
.galeria figure.principal { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro) inset; }
.galeria img.cheia { width: 100%; height: 100%; object-fit: cover; }
.galeria img.recorte { max-width: 88%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.galeria figcaption { position: absolute; top: 8px; left: 8px; background: var(--ouro); color: #000; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 2px; }
.galeria .btn.mini { position: absolute; bottom: 8px; left: 8px; padding: 4px 8px; font-size: 11.5px; background: rgba(0,0,0,.65); }
.galeria .excluir-linha { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.65); border-radius: 50%; width: 24px; height: 24px; line-height: 22px; }
.galeria .adicionar-foto { aspect-ratio: 4 / 3; border: 1px dashed var(--ouro-escuro); border-radius: var(--raio); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ouro); cursor: pointer; }
.galeria .adicionar-foto span { font-size: 28px; line-height: 1; }
.galeria .adicionar-foto small { font-size: 12px; color: var(--cinza); }
.galeria .adicionar-foto:hover { background: var(--carvao-2); }
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 14px; } }

/* ---------- responsividade dos blocos novos ---------- */
@media (max-width: 1180px) { .diretoria .grade { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .form-grade { grid-template-columns: 1fr; }
  .acoes .filtro-periodo { order: 2; width: 100%; gap: 8px; }
  .acoes .filtro-periodo select, .acoes .filtro-periodo input[type="date"] { flex: 1 1 46%; min-width: 0; order: 0; font-size: 16px; }
  .acoes .filtro-periodo label { flex: 0 0 auto; }
  .acoes .filtro-periodo .lembrar { width: 100%; }
  .diretoria .cabecalho h2 { font-size: 15px; }
  .diretoria .grade, .diretoria .grade .coluna { gap: 14px; }
  .kpi .delta { white-space: normal; }
  .painel > header .alternar { margin-left: auto; }
  table.dre td.sub { padding-left: 18px; }
  .galeria figure .btn.mini { font-size: 11px; padding: 4px 7px; }
}
@media print {
  .diretoria .grade { grid-template-columns: 1fr; gap: 12px; }
  .diretoria table.lista td { padding: 5px 10px; font-size: 11px; }
  .diretoria .semaforos { margin: 8px 0; }
  .acoes { display: none; }
}

/* =====================================================================
   Ficha de venda (folha imprimível) + documentos digitalizados
   ===================================================================== */
.docs-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.docs-venda .docs-acoes { margin-bottom: 14px; }
.composicao-pag { border-top: 1px solid var(--linha); }
.composicao-pag .rotulo { color: var(--cinza); font-size: 12.5px; margin-bottom: 8px; }
.composicao-pag ul { list-style: none; margin: 0; padding: 0; }
.composicao-pag li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--linha); font-size: 13.5px; }
.composicao-pag li small { display: block; color: var(--cinza); font-size: 12px; }
.composicao-pag li.total { border-bottom: 0; color: var(--prata); font-weight: 600; }
.composicao-pag .obs { margin: 10px 0 0; color: var(--prata-2); font-size: 13px; font-style: italic; }

.folha { background: #fff; color: #111; max-width: 860px; margin: 0 auto; padding: 34px 42px 30px; border-radius: 3px; box-shadow: 0 20px 50px rgba(0,0,0,.6); font-family: var(--fonte-texto); font-size: 13px; line-height: 1.45; }
.folha-topo { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: #000; color: #EFEFEF; margin: -34px -42px 22px; padding: 18px 42px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.folha-topo .marca { display: flex; align-items: center; gap: 12px; }
.folha-topo .marca img { width: 54px; height: 54px; object-fit: contain; }
.folha-topo .marca b { display: block; font-family: var(--fonte-display); font-size: 20px; letter-spacing: .12em; color: #EFEFEF; line-height: 1; }
.folha-topo .marca small { display: block; font-family: var(--fonte-display); font-size: 10px; letter-spacing: .38em; color: var(--ouro); margin-top: 4px; }
.folha-topo .loja { font-size: 11.5px; color: #B5B3AD; display: grid; gap: 2px; }
.folha-topo .loja b { color: #EFEFEF; font-size: 13px; }
.folha-topo .numero { text-align: right; display: grid; gap: 2px; }
.folha-topo .numero small { color: var(--ouro); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.folha-topo .numero b { font-family: var(--fonte-display); font-size: 15px; color: #EFEFEF; }
.folha-topo .numero span { font-size: 12px; color: #B5B3AD; }
.folha .bloco { margin-bottom: 18px; }
.folha h3 { font-family: var(--fonte-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #111; border-bottom: 2px solid var(--ouro); padding-bottom: 5px; margin: 0 0 10px; }
.folha .dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.folha .dado { border-bottom: 1px solid #DDD; padding: 4px 0; }
.folha .dado.largo { grid-column: 1 / -1; }
.folha .dado span { display: block; font-size: 10.5px; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.folha .dado b { display: block; font-weight: 600; color: #111; font-size: 13px; }
.folha table.negociacao { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.folha table.negociacao th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #666; border-bottom: 1px solid #BBB; padding: 6px 8px; }
.folha table.negociacao td { padding: 7px 8px; border-bottom: 1px solid #E5E5E5; }
.folha table.negociacao .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.folha table.negociacao tr.total td { font-weight: 700; font-size: 14px; border-top: 2px solid #111; border-bottom: 0; background: #F6F3EA; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.folha .troca { font-size: 12.5px; background: #F6F3EA; padding: 8px 10px; border-left: 3px solid var(--ouro); margin-bottom: 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.folha .obs { font-size: 12.5px; margin-top: 10px; }
.folha .condicoes p { font-size: 11.5px; color: #333; text-align: justify; margin: 0; }
.folha .assinaturas { margin-top: 26px; }
.folha .assinaturas .local { text-align: right; font-size: 12.5px; margin: 0 0 30px; }
.folha .assinaturas .linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 30px; }
.folha .assinaturas .linhas div { text-align: center; }
.folha .assinaturas .linhas span { display: block; border-top: 1px solid #111; margin: 0 20px 6px; }
.folha .assinaturas .linhas b { display: block; font-size: 12.5px; }
.folha .assinaturas .linhas small { display: block; font-size: 10.5px; color: #666; }
.folha .assinaturas .testemunhas { margin-top: 6px; }
.folha-rodape { border-top: 1px solid #DDD; margin-top: 14px; padding-top: 8px; font-size: 10px; color: #777; text-align: center; }

.anexos .ds-anexo { background: #0C0B09; border-color: var(--linha); }
.anexos .ds-anexo-icone { background: #1F1B12; color: var(--ouro); }
.anexos .ds-anexo-nome { color: var(--prata); }
.anexos .ds-anexo-meta { color: var(--cinza); }
.anexos .text-claro { color: var(--cinza); }

/* ---------- adaptação do DocScanner (classes e variáveis do template do Fellipe) ---------- */
:root { --cor-primaria: #D2B25A; --cor-primaria-light: #2A2416; --cor-erro: #E24B3B; --cor-fundo-card: #14120E; --cor-borda-sutil: #2A2620; --cor-texto-claro: #8F8B80; --espaco-sm: 8px; --raio-sm: 4px; --raio-full: 999px; }
.btn-primario { background: var(--ouro); color: #000; border: 1px solid var(--ouro); }
.btn-secundario { background: transparent; color: var(--prata); border: 1px solid rgba(239,239,239,.35); }
.btn-perigo { background: var(--vermelho); color: #fff; border: 1px solid var(--vermelho); }
.btn-primario, .btn-secundario, .btn-perigo { border-radius: var(--raio); padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-sm { padding: 5px 9px; font-size: 12.5px; }
.form-grupo { display: grid; gap: 6px; margin-bottom: 12px; }
.form-label { font-size: 12.5px; color: var(--cinza); }
.form-input, .form-select { border: 1px solid var(--linha); border-radius: var(--raio); padding: 9px 10px; font: inherit; font-size: 14px; }
.skeleton { background: linear-gradient(90deg, #1A1712 25%, #24211A 50%, #1A1712 75%); background-size: 200% 100%; animation: skel 1.2s infinite; border-radius: 4px; height: 14px; }
@keyframes skel { to { background-position: -200% 0; } }
.text-claro { color: var(--cinza); }
.ds-overlay { font-family: var(--fonte-texto); }
.ds-overlay .btn { background: transparent; }
.ds-overlay .btn.btn-primario { background: var(--ouro); color: #000; }
#ds-poly { fill: rgba(210,178,90,.18); }

@media (max-width: 900px) {
  .folha { padding: 22px 16px 18px; font-size: 12.5px; box-shadow: none; }
  .folha-topo { margin: -22px -16px 16px; padding: 14px 16px; grid-template-columns: 1fr; gap: 8px; }
  .folha-topo .numero { text-align: left; }
  .folha .dados { grid-template-columns: 1fr 1fr; }
  .folha .assinaturas .linhas { gap: 18px; }
  .docs-acoes .voltar { width: 100%; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  body[data-pagina="ficha-venda"] .conteudo { padding: 0; margin: 0; }
  body[data-pagina="ficha-venda"] .docs-acoes, body[data-pagina="ficha-venda"] #painel-anexos, body[data-pagina="ficha-venda"] .lateral, body[data-pagina="ficha-venda"] .topo { display: none !important; }
  .folha { max-width: none; box-shadow: none; border-radius: 0; padding: 0; font-size: 11.5px; }
  .folha-topo { margin: 0 0 14px; padding: 12px 16px; }
  .folha .bloco { margin-bottom: 12px; break-inside: avoid; }
  .folha .assinaturas { break-inside: avoid; }
}
/* livro caixa */
table.caixa td.pos { color: var(--verde); } table.caixa td.neg { color: var(--vermelho); }
table.caixa tr.novo-dia td { border-top: 1px solid var(--linha-forte, #2E2A22); }
table.caixa tr.previsto td { opacity: .55; font-style: italic; }
table.caixa tr.previsto td small { color: var(--ouro); font-style: normal; }
table.caixa tr.total td { color: var(--prata); }
.topo #unidade { max-width: 200px; }
@media (max-width: 900px) { .topo #unidade { max-width: 120px; font-size: 13px; } }
/* plano de contas */
.plano details.grupo-contas { border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 8px; background: #0F0E0B; }
.plano summary { cursor: pointer; padding: 10px 14px; color: var(--prata); list-style: none; display: flex; gap: 8px; align-items: baseline; }
.plano summary::-webkit-details-marker { display: none; }
.plano summary::before { content: "▸"; color: var(--ouro); font-size: 12px; }
.plano details[open] summary::before { content: "▾"; }
.plano summary b { color: var(--ouro); font-family: var(--fonte-display); font-size: 13px; }
.plano .corpo-grupo { padding: 6px 14px 14px; border-top: 1px solid var(--linha); }
.plano table.lista input, .plano table.lista select { width: 100%; padding: 6px 8px; font-size: 13px; }
.plano table.lista td { padding: 5px 8px; }
table.dre tr.grupo-linha td { padding-top: 10px; }
table.dre tr.grupo-linha td.grupo { color: var(--ouro); font-weight: 600; }
/* inputs dentro de tabelas (plano de contas, unidades, categorias): mesmo visual dos formulários */
table.lista input[type="text"], table.lista input[type="number"], table.lista select {
  background-color: #0C0B09; color: var(--prata); border: 1px solid var(--linha); border-radius: var(--raio); padding: 7px 9px; font: inherit; font-size: 13.5px;
}
table.lista input:focus, table.lista select:focus { border-color: var(--ouro-escuro); outline: none; }
.plano table.lista select { background-image: linear-gradient(45deg, transparent 50%, var(--cinza) 50%), linear-gradient(135deg, var(--cinza) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; -webkit-appearance: none; appearance: none; padding-right: 26px; }
/* carregando dados da API */
body.carregando-dados main { visibility: hidden; }
body.carregando-dados::after { content: "Carregando…"; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ouro); font-family: var(--fonte-display); font-size: 13px; letter-spacing: .12em; z-index: 5; }