/* iZZi Carros — sistema visual
 *
 * Direção: PREGÃO, não showroom.
 *
 * Quem usa isto é lojista no pátio, no celular, decidindo em segundos se um
 * carro vale e se dá tempo de pegar antes do concorrente. A tela não precisa
 * seduzir — precisa deixar decidir. Por isso o fundo é papel e não vitrine
 * escura: o mundo desse negócio é documento (nota, CRLV, tabela FIPE impressa),
 * e documento se lê em papel.
 *
 * A assinatura é a PLACA. O código público do carro é o que o lojista fala no
 * telefone, e aqui ele aparece como placa Mercosul — a identidade que essa
 * gente já reconhece de longe. Não é enfeite: é o mesmo papel que o código
 * cumpre na conversa real.
 *
 * Toda medida sai da escala de espaço abaixo. Não existe margem solta no HTML:
 * valor cravado no template é o que faz duas telas do mesmo produto respirarem
 * diferente, e é a diferença mais visível entre uma tela profissional e uma
 * tela montada.
 */

:root {
  /* --- papel ---
   * Branco frio de escritório, não creme quente. O creme é o clichê. */
  --papel: #f5f5f2;
  --papel-alto: #ffffff;
  --papel-fundo: #eaeae5;
  --papel-tinto: #f0f2f7;

  /* --- tinta --- */
  --tinta: #0e1c28;
  --tinta-media: #46586a;
  --tinta-fraca: #8194a4;

  /* --- caneta: a única cor de ação --- */
  --caneta: #14459b;
  --caneta-forte: #0d3277;
  --caneta-clara: #e6ecfa;

  /* --- semântica de dinheiro --- */
  --ganho: #0a6b3d;
  --ganho-fraco: #e2f2e9;
  --espera: #96590a;
  --espera-fraco: #fbf0dc;
  --perda: #a32019;
  --perda-fraco: #fbe9e7;

  --borda: #dededa;
  --borda-forte: #c3c3bc;

  --raio: 5px;
  --raio-placa: 6px;
  --raio-grande: 8px;

  /* Sombra em duas camadas: um fio escuro que assenta o elemento no papel e um
   * halo largo e quase invisível. Uma sombra só sempre parece adesivo. */
  --sombra: 0 1px 1px rgba(14, 28, 40, .05), 0 2px 10px -4px rgba(14, 28, 40, .10);
  --sombra-alta: 0 2px 3px rgba(14, 28, 40, .06), 0 14px 34px -14px rgba(14, 28, 40, .26);

  /* --- escala de espaço, base 4 --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;

  --serif: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --corpo: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --largura: 1180px;
  --transicao: 140ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] com !important porque QUALQUER classe de layout (.acoes é flex) tem
 * especificidade maior que a regra do navegador e reexibe o elemento escondido.
 * Foi assim que os botões de envio apareceram antes de haver foto escolhida. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.55;
  /* Sem isto o Plex Sans fica com aparência de rascunho no macOS. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e8);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.021em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
/* clamp em vez de breakpoint: o título acompanha a largura de forma contínua e
 * nunca dá o salto que denuncia layout feito só para duas telas. */
h1 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.3rem); }
h2 { font-size: 1.16rem; letter-spacing: -.012em; }
h3 { font-size: 1rem; letter-spacing: -.008em; }
p { margin: 0; }

a { color: var(--caneta); text-decoration-color: color-mix(in srgb, var(--caneta) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------ primitivas
 * Layout mora aqui, nunca em style="" no template. Uma margem cravada num
 * template é uma medida que não existe na escala, e é assim que a mesma seção
 * respira diferente em duas páginas. */

.pilha    { display: flex; flex-direction: column; gap: var(--e4); }
.pilha-g  { display: flex; flex-direction: column; gap: var(--e5); }
.pilha-p  { display: flex; flex-direction: column; gap: var(--e2); }
.linha    { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.linha-topo { display: flex; gap: var(--e4); align-items: flex-start; flex-wrap: wrap; }
.empurra  { margin-left: auto; }
.cresce   { flex: 1; min-width: 220px; }

/* Duas colunas que viram uma sem media query: a coluna lateral tem largura
 * mínima e, quando ela não cabe, o grid quebra sozinho. */
.duas { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.duas-assim { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1.7fr) minmax(290px, .9fr); align-items: start; }
@media (max-width: 900px) { .duas-assim { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- barra */

.barra {
  background: var(--tinta);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  /* Fio de luz no rodapé da barra: separa do conteúdo sem uma borda cinza que
   * pareceria um segundo elemento. */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .09), 0 1px 12px rgba(14, 28, 40, .16);
}

.barra-int {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--e5);
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: var(--e5);
}

.marca {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.marca em {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8fa8d8;
  border-left: 1px solid rgba(255, 255, 255, .22);
  padding-left: 7px;
}

.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  color: #c6d2e0;
  text-decoration: none;
  font-size: .855rem;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: var(--raio);
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a[aria-current="page"] { background: var(--caneta); color: #fff; }

.sino { position: relative; }
.sino .contagem {
  display: inline-block;
  min-width: 17px;
  margin-left: 5px;
  padding: 1px 5px;
  background: var(--perda);
  color: #fff;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  text-align: center;
  vertical-align: 1px;
}

/* ------------------------------------------------------------- cabeçalho */

.topo { margin-bottom: var(--e5); }
.topo > * + * { margin-top: var(--e2); }

.sobrenome {
  display: inline-block;
  font-family: var(--mono);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--caneta);
  background: var(--caneta-clara);
  padding: 3px 8px;
  border-radius: 3px;
}
.legenda { color: var(--tinta-media); max-width: 64ch; }
.legenda-p { color: var(--tinta-media); font-size: .855rem; max-width: 60ch; }

/* --------------------------------------------------------------- a placa
 * A assinatura do produto. Proporção, tarja azul e monoespaçado da Mercosul —
 * o objeto que essa gente reconhece antes de ler. */

/* O código NÃO se veste de placa de veículo.
 *
 * Era uma placa Mercosul: moldura preta, tarja escura em cima com a marca no
 * lugar do país, monoespaçado na proporção certa. Numa tela de carro isso é
 * lido como o emplacamento — e o lojista sai consultando um código interno
 * achando que é placa. A identidade continua (mono, caixa alta, espaçado),
 * a fantasia saiu: sem moldura fechada, sem tarja, alinhado à esquerda. */
.placa {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  flex: none;
  gap: 3px;
  transition: color var(--transicao);
}
.placa .tarja {
  color: var(--tinta-media);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.placa .codigo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .1em;
  color: var(--tinta);
  white-space: nowrap;
  /* Sublinhado fino em vez de caixa: marca o valor sem fechar um retângulo. */
  border-bottom: 2px solid var(--tinta);
  padding-bottom: 3px;
}
.placa.pequena .codigo { font-size: .78rem; letter-spacing: .08em; border-bottom-width: 1px; }
.placa.grande .codigo  { font-size: 1.4rem; }
.placa.reservada .codigo { color: var(--espera); border-bottom-color: var(--espera); }
.placa.vendida .codigo { color: var(--perda); border-bottom-color: var(--perda); opacity: .74; }

@keyframes carimbo {
  0%   { transform: scale(1.14) rotate(-1.6deg); }
  60%  { transform: scale(.985) rotate(.4deg); }
  100% { transform: scale(1) rotate(0); }
}
.placa.mudou { animation: carimbo .34s cubic-bezier(.2, .8, .3, 1); }

/* --------------------------------------------------------------- cartão */

.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  padding: var(--e4) var(--e5);
  box-shadow: var(--sombra);
}
.cartao > * + * { margin-top: var(--e3); }
.cartao.justo { padding: var(--e3) var(--e4); }
.cartao.solto { padding: var(--e5); }

/* Cabeçalho de cartão sangrando até a borda: separa comando de conteúdo sem
 * gastar mais uma caixa. */
.cartao-topo {
  margin: calc(var(--e4) * -1) calc(var(--e5) * -1) 0;
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--borda);
  background: var(--papel-tinto);
  border-radius: var(--raio-grande) var(--raio-grande) 0 0;
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.cartao-topo h2, .cartao-topo h3 { margin: 0; }

.grade { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

/* ------------------------------------------------------- cartão do carro */

.carro {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.carro:hover {
  border-color: var(--caneta);
  box-shadow: var(--sombra-alta);
  transform: translateY(-2px);
}
.carro:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; }

/* A foto é a primeira coisa. Um marketplace de carro com cartão só de texto
 * parece protótipo por melhor que seja a tipografia. */
.carro .capa { position: relative; aspect-ratio: 4 / 3; background: var(--papel-fundo); overflow: hidden; }
.carro .capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms cubic-bezier(.2, .7, .3, 1); }
.carro:hover .capa img { transform: scale(1.035); }
.carro .capa .placa { position: absolute; left: var(--e3); bottom: var(--e3); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.carro .capa .selo  { position: absolute; right: var(--e3); top: var(--e3); box-shadow: 0 1px 4px rgba(0,0,0,.14); }

.carro .corpo { padding: var(--e3) var(--e4) var(--e4); display: flex; flex-direction: column; gap: var(--e2); flex: 1; }
.carro .nome  { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; letter-spacing: -.014em; }
.carro .ficha { font-family: var(--mono); font-size: .715rem; color: var(--tinta-media); letter-spacing: .035em; }
.carro .preco { margin-top: auto; padding-top: var(--e2); border-top: 1px dashed var(--borda); }
.carro .preco .spread { margin-top: 6px; }

/* Sem foto: o vazio é DESENHADO, com a marca d'água da placa. Um bloco cinza
 * liso lê como imagem que falhou ao carregar; este lê como intenção. */
.sem-capa {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(14, 28, 40, .028) 11px 22px),
    var(--papel-fundo);
}
.sem-capa span {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* -------------------------------------------------------------- dinheiro */

.valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; }
.valor.destaque { font-size: 1.42rem; letter-spacing: -.025em; }
.valor.ganho { color: var(--ganho); }
.valor.perda { color: var(--perda); }

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  /* Fundo BRANCO, não cor de borda.
   *
   * O truque clássico — pintar o container da cor da borda e deixar 1px de gap
   * fazer as divisórias — mostra a cor do container onde NÃO há filho. Com três
   * números em duas colunas (o que acontece em todo celular), a quarta célula
   * virava um retângulo cinza que parece defeito de renderização. Aqui as
   * divisórias são sombra de cada filho, então célula que não existe não pinta
   * nada. */
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.numeros > div {
  background: var(--papel-alto);
  padding: var(--e3) var(--e3);
  box-shadow: 0 0 0 1px var(--borda);
}
.numeros .rotulo { display: block; font-family: var(--mono); font-size: .615rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 3px; }
.numeros .dado   { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.01rem; }
.numeros .dado.ganho { color: var(--ganho); }

/* Números grandes do painel: o operador precisa ler de longe. */
.destaques { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.destaques > div { background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio-grande); padding: var(--e4); box-shadow: var(--sombra); }
.destaques .rotulo { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: var(--e2); }
.destaques .numero { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.72rem; letter-spacing: -.03em; line-height: 1; display: block; }
.destaques .nota { display: block; color: var(--tinta-media); font-size: .78rem; margin-top: 5px; }

/* ------------------------------------------- a régua de preço (assinatura)
 * O instrumento recorrente do produto: onde o preço cai entre a tabela cheia e
 * 30% abaixo dela. É a única métrica que decide o negócio, então ela tem forma
 * própria e reaparece no cartão, na ficha e no painel. */

.spread .trilho {
  height: 7px;
  background: linear-gradient(90deg, var(--ganho) 0%, #cfa93a 62%, var(--perda) 100%);
  border-radius: 4px;
  position: relative;
}
.spread .marca-preco {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 15px;
  background: var(--tinta);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--papel-alto);
}
.spread .escala { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .615rem; color: var(--tinta-fraca); margin-top: 5px; letter-spacing: .05em; }
.spread.mini .trilho { height: 5px; }
.spread.mini .marca-preco { top: -3px; height: 11px; }

/* ----------------------------------------------------------------- selos */

.selo {
  display: inline-block;
  font-family: var(--mono);
  font-size: .645rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.selo.disponivel { background: var(--ganho-fraco); border-color: var(--ganho); color: var(--ganho); }
.selo.reservado  { background: var(--espera-fraco); border-color: var(--espera); color: var(--espera); }
.selo.vendido    { background: var(--perda-fraco); border-color: var(--perda); color: var(--perda); }
.selo.neutro     { background: var(--papel-fundo); border-color: var(--borda-forte); color: var(--tinta-media); }

/* --------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--corpo);
  font-size: .885rem;
  font-weight: 600;
  padding: 9px 15px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--papel-alto);
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.btn:hover { border-color: var(--tinta-media); box-shadow: var(--sombra); }
.btn:active { transform: translateY(1px); }
.btn.principal { background: var(--caneta); border-color: var(--caneta); color: #fff; }
.btn.principal:hover { background: var(--caneta-forte); border-color: var(--caneta-forte); }
.btn.perigo { background: var(--papel-alto); border-color: var(--perda); color: var(--perda); }
.btn.perigo:hover { background: var(--perda); color: #fff; }
.btn.grande { padding: 12px 22px; font-size: .95rem; }
.btn.cheio { width: 100%; }
.btn.discreto { border-color: transparent; background: transparent; color: var(--tinta-media); padding-inline: 9px; }
.btn.discreto:hover { background: var(--papel-fundo); border-color: transparent; box-shadow: none; color: var(--tinta); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.acoes.centro { justify-content: center; margin-top: var(--e5); }
.grade + .acoes, .cartao + .acoes, .topo + .acoes { margin-top: var(--e4); }

:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; border-radius: 3px; }

/* --------------------------------------------------------------- formas */

.campo { display: block; }
.campo + .campo, .linha-campos + .campo, .campo + .acoes { margin-top: var(--e3); }
.campo > span { display: block; font-family: var(--mono); font-size: .645rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-media); margin-bottom: 5px; }
.campo > small { display: block; color: var(--tinta-fraca); font-size: .775rem; margin-top: 5px; line-height: 1.45; }

input, select, textarea {
  font-family: var(--corpo);
  font-size: .93rem;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--papel-alto);
  color: var(--tinta);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta-fraca); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--caneta);
  box-shadow: 0 0 0 3px var(--caneta-clara);
}
textarea { resize: vertical; min-height: 76px; }
input[inputmode="numeric"], input[inputmode="decimal"], input[inputmode="tel"], .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.linha-campos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(162px, 1fr)); }
.linha-campos + .linha-campos { margin-top: var(--e3); }

.filtros {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  padding: var(--e4);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra);
}
.filtros .acoes { margin-top: var(--e3); }

/* --------------------------------------------------------------- avisos */

.aviso {
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  border: 1px solid;
  border-left-width: 3px;
  font-size: .885rem;
}
.aviso + .aviso, .aviso + .cartao, .topo + .aviso { margin-top: var(--e3); }
.aviso.erro    { background: var(--perda-fraco); border-color: var(--perda); color: #7d1710; }
.aviso.ok      { background: var(--ganho-fraco); border-color: var(--ganho); color: #07502d; }
.aviso.atencao { background: var(--espera-fraco); border-color: var(--espera); color: #6f420a; }

.vazio {
  text-align: center;
  padding: var(--e7) var(--e5);
  color: var(--tinta-media);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-grande);
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(14, 28, 40, .016) 13px 26px),
    var(--papel-alto);
}
.vazio h3 { margin-bottom: var(--e2); }
.vazio .legenda { margin: 0 auto; }
.vazio .acoes { justify-content: center; margin-top: var(--e4); }

/* ---------------------------------------------------------------- fotos */

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--e2); }
.galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio); border: 1px solid var(--borda); display: block; background: var(--papel-fundo); }

.foto-capa { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--raio-grande); border: 1px solid var(--borda); background: var(--papel-fundo); display: block; }
.sem-foto {
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-grande);
  color: var(--tinta-fraca);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(14, 28, 40, .026) 13px 26px),
    var(--papel-fundo);
}

/* Grade de edição da galeria: cada foto com a própria ação de remover. */
.fotos-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--e3); }
.fotos-edit figure { margin: 0; position: relative; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--papel-alto); }
.fotos-edit img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.fotos-edit figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 6px 8px; border-top: 1px solid var(--borda);
  font-family: var(--mono); font-size: .64rem; color: var(--tinta-fraca); letter-spacing: .08em;
}
.fotos-edit .capa-marca { position: absolute; top: 7px; left: 7px; background: var(--caneta); color: #fff; font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; }
.fotos-edit button { border: 0; background: transparent; color: var(--perda); font-family: var(--corpo); font-size: .74rem; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.fotos-edit button:hover { background: var(--perda-fraco); }

.solta {
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio-grande);
  padding: var(--e6) var(--e4);
  text-align: center;
  background: var(--papel-alto);
  transition: border-color var(--transicao), background var(--transicao);
  cursor: pointer;
  display: block;
}
.solta:hover, .solta.sobre { border-color: var(--caneta); background: var(--caneta-clara); }
.solta input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.solta:focus-within { outline: 2px solid var(--caneta); outline-offset: 3px; }
.solta .titulo { display: block; font-family: var(--serif); font-weight: 700; font-size: 1rem; }
.solta .sub { display: block; color: var(--tinta-media); font-size: .83rem; margin-top: 5px; }
.solta .conta { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); margin-top: var(--e3); }

/* ------------------------------------------------------ trilha da entrega
 * Régua horizontal de quatro passos. Não é decoração: as duas pontas precisam
 * ver de quem é a vez sem ler texto, porque é isso que destrava o carro. */

.trilha { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: var(--e2) 0; }
.trilha .passo { position: relative; padding-top: 26px; text-align: center; }
/* A linha entre os pontos: pseudo-elemento no passo, não uma barra separada,
 * porque assim ela acompanha a largura da coluna em qualquer tela. */
.trilha .passo::before {
  content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px;
  background: var(--borda-forte);
}
.trilha .passo:first-child::before { display: none; }
.trilha .passo::after {
  content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--papel); border: 2px solid var(--borda-forte);
}
.trilha .passo .rot { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); display: block; line-height: 1.35; }
.trilha .passo.feito::before, .trilha .passo.atual::before { background: var(--caneta); }
.trilha .passo.feito::after { background: var(--caneta); border-color: var(--caneta); }
.trilha .passo.feito .rot { color: var(--tinta-media); }
.trilha .passo.atual::after {
  background: var(--papel-alto); border-color: var(--caneta);
  box-shadow: 0 0 0 4px var(--caneta-clara);
}
.trilha .passo.atual .rot { color: var(--caneta); font-weight: 700; }
.trilha.parada .passo::after { border-color: var(--perda); }
.trilha.parada .passo::before { background: var(--perda-fraco); }

@media (max-width: 620px) {
  .trilha { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--e3); }
  .trilha .passo { padding: 0 0 0 26px; text-align: left; }
  .trilha .passo::before { top: -14px; left: 6px; width: 2px; height: 14px; }
  .trilha .passo::after { top: 2px; left: 0; transform: none; }
}

/* Histórico da entrega: linha do tempo vertical. */
.rastro { list-style: none; margin: 0; padding: 0; }
.rastro li { position: relative; padding: 0 0 var(--e4) var(--e5); border-left: 2px solid var(--borda); }
.rastro li:last-child { padding-bottom: 0; border-left-color: transparent; }
.rastro li::before {
  content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--caneta-clara); border: 2px solid var(--caneta);
}
.rastro .quando { font-family: var(--mono); font-size: .655rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); display: block; }
.rastro .oque { font-weight: 600; font-size: .9rem; }
.rastro .obs { color: var(--tinta-media); font-size: .845rem; }

/* -------------------------------------------------------- barras do funil */

.funil { display: flex; flex-direction: column; gap: var(--e3); }
.funil .item { display: grid; grid-template-columns: 148px 1fr 58px; gap: var(--e3); align-items: center; }
.funil .rot { font-family: var(--mono); font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-media); }
.funil .trilho { height: 22px; background: var(--papel-fundo); border: 1px solid var(--borda); border-radius: 3px; overflow: hidden; }
.funil .preenche { height: 100%; border-radius: 3px; min-width: 2px; transition: width 420ms cubic-bezier(.2,.7,.3,1); }
.funil .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.funil .item .preenche.disponivel { background: var(--ganho); }
.funil .item .preenche.reservado  { background: var(--espera); }
.funil .item .preenche.vendido    { background: var(--perda); }
/* Cinza-médio, não --borda-forte: a barra fica SOBRE um trilho já cinza-claro,
 * e o tom da borda desaparecia dentro dele. Uma barra que não se vê conta que a
 * fila está vazia justamente quando ela é o maior número da tela. */
.funil .item .preenche.neutro     { background: var(--tinta-fraca); }
@media (max-width: 620px) {
  .funil .item { grid-template-columns: 1fr 46px; grid-template-areas: "rot n" "trilho trilho"; row-gap: 5px; }
  .funil .rot { grid-area: rot; } .funil .n { grid-area: n; } .funil .trilho { grid-area: trilho; }
}

/* ------------------------------------------------------------------ tabela */

.rolavel { overflow-x: auto; margin: 0 calc(var(--e5) * -1) calc(var(--e4) * -1); padding: 0 var(--e5) var(--e4); }
table { width: 100%; border-collapse: collapse; font-size: .885rem; }
th {
  text-align: left;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 600;
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--borda-forte);
  white-space: nowrap;
}
td { padding: var(--e3); border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr { transition: background var(--transicao); }
tbody tr:hover { background: var(--papel-tinto); }
tr:last-child td { border-bottom: 0; }
/* Dinheiro alinhado à direita, em tabular: é o que faz coluna de valor parecer
 * relatório em vez de lista. */
td.valor, th.valor { text-align: right; }

/* -------------------------------------------------------------- utilidades */

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.miudo { font-size: .8rem; }
.centro { text-align: center; }
.dir { text-align: right; }
.som-nao { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- respons. */

@media (max-width: 760px) {
  main { padding: var(--e5) var(--e4) var(--e7); }

  /* Os filtros em UMA coluna comiam a tela inteira antes de aparecer um carro,
   * e este produto é usado no pátio, no celular, por quem tem trinta segundos.
   * Busca ocupa a linha toda; o resto vai a dois por linha. */
  .filtros .linha-campos { grid-template-columns: 1fr 1fr; gap: var(--e2) var(--e3); }
  .filtros .campo.largo { grid-column: 1 / -1; }
  .filtros { padding: var(--e3); }
  .barra-int { gap: var(--e3); padding: 0 var(--e4); flex-wrap: wrap; min-height: 54px; }
  .nav { width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 7px; flex-wrap: nowrap; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .valor.destaque { font-size: 1.24rem; }
  .cartao { padding: var(--e4); }
  .cartao-topo { margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); }
  .rolavel { margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); }
  .destaques .numero { font-size: 1.5rem; }
}

/* Quem pediu menos movimento recebe menos movimento. O carimbo da placa é o
 * único momento animado do produto, e nem ele vale um enjoo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .carro:hover { transform: none; }
}

/* Impressão: o lojista imprime a ficha do carro para levar ao pátio. */
@media print {
  .barra, .acoes, .filtros, .solta { display: none; }
  body { background: #fff; }
  .cartao, .carro { border-color: #999; box-shadow: none; break-inside: avoid; }
}

/* Listas de texto corrido dentro de cartão: recuo curto e respiro por item. */
.cartao ul, .cartao ol.numerada { margin: 0; padding-left: 17px; }
.cartao ul li + li, .cartao ol.numerada li + li { margin-top: 5px; }
.cartao form + form { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px dashed var(--borda); }

/* Formulário de uma coluna: largura de leitura, não largura da tela. Campo de
 * 1100px é o que faz um cadastro parecer planilha. */
.estreito { max-width: 620px; }

/* Título de seção depois de um bloco: o respiro é da regra, não do template. */
.secao { margin-top: var(--e6); margin-bottom: var(--e3); }

/* Faixa de resposta da reserva: o aviso nasce do JS e precisa do respiro daqui,
 * senão ele encosta no botão que acabou de ser clicado. */
#msg-reserva:not(:empty) { margin-top: var(--e3); display: block; }
#msg-reserva .aviso { margin: 0; }

.estreito-p { max-width: 420px; }
/* .pos: "o elemento seguinte precisa de um respiro". Um nome só para o que
 * antes era style="margin-top:14px" repetido em oito lugares com três valores
 * ligeiramente diferentes. */
.pos { margin-top: var(--e4); }
.linha.entre { justify-content: space-between; align-items: baseline; flex-wrap: nowrap; gap: var(--e3); }

/* Aviso não lido: um fio azul na borda esquerda. É o suficiente para a pessoa
 * achar o que ainda não viu numa lista de sessenta. */
.cartao.novo { border-left: 3px solid var(--caneta); }

/* ---------------------------------------------------------------- laudo
 *
 * O laudo é o documento que faz alguém comprar um carro que nunca viu. No
 * cartão ele não pode ser mais um selo igual aos outros: "sem laudo" precisa
 * ser lido como ausência, não como uma etiqueta neutra a mais. */

.selo-laudo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selo-laudo b { font-weight: 700; }
.selo-laudo.disponivel { background: var(--ganho-fraco); border-color: var(--ganho); color: var(--ganho); }
.selo-laudo.reservado  { background: var(--espera-fraco); border-color: var(--espera); color: var(--espera); }
.selo-laudo.vendido    { background: var(--perda-fraco); border-color: var(--perda); color: var(--perda); }
.selo-laudo.neutro     { background: var(--papel-fundo); border-color: var(--borda-forte); color: var(--tinta-media); }
/* Ausência de laudo é tracejada: a borda interrompida já diz "falta algo" antes
 * de a pessoa ler a palavra. */
.selo-laudo.faltando {
  background: transparent;
  border-style: dashed;
  border-color: var(--borda-forte);
  color: var(--tinta-fraca);
}

/* Linha do documento: ícone, nome, ação. */
.doc {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel-tinto);
  text-decoration: none;
  color: inherit;
}
.doc + .aviso, .doc + form { margin-top: var(--e3); }
.doc .icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 50px;
  border-radius: 3px;
  background: var(--papel-alto);
  border: 1px solid var(--borda-forte);
  /* Canto dobrado: o retângulo vira "folha" sem custar um ícone SVG. */
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tinta-media);
}
.doc .nome { display: block; font-weight: 600; font-size: .92rem; word-break: break-word; }
a.doc:hover { border-color: var(--caneta); background: var(--caneta-clara); }
a.doc.compacto { margin-top: var(--e2); }
a.doc.compacto .icone { width: 34px; height: 40px; }

/* O anexo do laudo é um arquivo só: a área é mais baixa que a das fotos. */
.solta.compacta { padding: var(--e4); }
.solta + .linha-campos { margin-top: var(--e3); }

/* ------------------------------------------------------------- a rede
 *
 * O sistema é uma rede fechada por broker. Estes dois estados aparecem no
 * cartão e precisam ser lidos sem esforço: "não posso ver o preço" e "este eu
 * já pus na minha vitrine". */

/* Preço sob consulta: cinza, peso normal e sem tabular. Deixá-lo com a mesma
 * força visual de um valor faria o olho ler número onde não há. */
.valor.destaque.sob-consulta {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0;
  color: var(--tinta-media);
}

.ficha.na-vitrine {
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 3px;
  background: var(--caneta-clara);
  color: var(--caneta);
  font-weight: 600;
}

/* ------------------------------------------------- ficha no cartão
 *
 * O que entrou no cartão entrou por decisão: são os cinco dados que decidem em
 * dois segundos no pátio — qual carro, de onde, quanto, tem laudo, está pronto.
 * O resto vai para a ficha completa. */

/* A versão ("EXL AUT") em mono e menor: ela qualifica o modelo sem competir
 * com ele pelo olho. */
.carro .nome .versao {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tinta-media);
}

/* Localização com o alfinete: um carro em Campos e outro em São Paulo, pelo
 * mesmo preço, não são a mesma oferta — muda frete e muda prazo. */
.carro .ficha.local::before { content: "◉ "; color: var(--caneta); }
.carro .ficha.local { color: var(--tinta); font-weight: 600; }

.carro .marcas { display: flex; flex-wrap: wrap; gap: 5px; }

/* A comissão cobrada por fora, colada ao preço: é o que impede comparar
 * "119.900 + 1" com "120.500" como se fossem a mesma coisa. */
.carro .ficha.comissao { color: var(--espera); font-weight: 600; }

/* -------------------------------------------------------- ficha técnica
 *
 * Lista de definição de verdade (dl/dt/dd), e não uma tabela: são pares
 * rótulo-valor sem relação de linha entre si, e o leitor de tela anuncia cada
 * par como par. Tabela ali obrigaria cabeçalho que não existe. */

.ficha-tecnica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.ficha-tecnica > div { background: var(--papel-alto); padding: var(--e3); box-shadow: 0 0 0 1px var(--borda); }
.ficha-tecnica dt {
  font-family: var(--mono);
  font-size: .615rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: 3px;
}
.ficha-tecnica dd { margin: 0; font-weight: 600; font-size: .93rem; }
/* Opcionais e despesas são frases, não valores: ocupam a linha inteira. */
.ficha-tecnica.larga { grid-template-columns: 1fr; margin-top: var(--e3); }
.ficha-tecnica.larga dd { font-weight: 400; }

.secao-mini {
  font-family: var(--mono);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: var(--e4) 0 var(--e2);
}

.checagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: var(--e2); }
.checagens > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel-alto);
  font-size: .87rem;
}

.numeros .dado.espera { color: var(--espera); }

/* Mensagem de WhatsApp na fila: monoespaçada e com as quebras preservadas —
 * o broker precisa ver o texto EXATO que vai chegar no celular dele. */
.mensagem-whats {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: .78rem;
  background: var(--papel-tinto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e2) var(--e3);
  margin-top: 4px;
}
.obs.erro-envio { color: var(--perda); font-size: .78rem; margin-top: 4px; }

/* O cartão que pede a identificação depois do pagamento: é a única ação da
 * tela naquele momento, e precisa se destacar do resto sem virar alerta. */
.cartao.destaque-modal { border-color: var(--caneta); box-shadow: 0 0 0 3px var(--caneta-clara), var(--sombra); }

/* O código do carro no cartão, no lugar da placa.
 *
 * A placa é a assinatura do produto e continua grande na ficha do veículo —
 * no cartão ela competia com a foto e com o preço, que é o que decide. O código
 * precisa continuar visível porque é ele que o lojista fala no telefone, mas
 * como etiqueta discreta, acima do nome. */
.carro .codigo-carro {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--tinta-fraca);
  margin-bottom: 2px;
}

/* .par é o que não pode quebrar no meio.
 *
 * "FIPE R$ 138.532,00 · R$ 17.632,00 abaixo" quebrava deixando a palavra
 * "abaixo" sozinha na linha seguinte, e palavra órfã lê como erro de
 * renderização. O par quebra inteiro ou não quebra. */
.par { white-space: nowrap; }

/* O caminho de volta na barra.
 *
 * Vale para logado e deslogado: quem entra por um link de broker ou de loja e
 * clica num carro precisa voltar para AQUELA listagem, não para a porta do
 * sistema. Sem isto, o visitante ficava num beco — a barra só oferecia
 * "Entrar". */
.nav .volta {
  margin-right: auto;
  color: #fff;
  font-weight: 600;
  background: rgba(255, 255, 255, .1);
}
.nav .volta:hover { background: rgba(255, 255, 255, .2); }

/* O desconto ganha a linha dele: é a informação que decide, e colada à FIPE
 * disputava o olho com ela. */
.carro .ficha.abaixo-fipe { color: var(--ganho); font-weight: 600; margin-top: 1px; }

/* O texto original do anúncio, para conferir o que o extrator leu.
 * Fechado por padrão: quem confia no palpite não precisa ver, e quem desconfia
 * precisa do texto inteiro, não de um resumo. */
.original { margin-top: var(--e3); }
.original summary {
  cursor: pointer; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-media);
}
.original summary:hover { color: var(--caneta); }
pre.cru {
  margin: var(--e2) 0 0; padding: var(--e3);
  background: var(--papel-fundo); border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-family: var(--mono); font-size: .76rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}

/* Ação destrutiva dentro de uma linha de tabela: o formulário não pode empurrar
 * a linha para baixo. */
form.em-linha { display: inline; }
.btn.miudo { padding: 4px 9px; font-size: .74rem; }

/* Canal de onde o anúncio veio.
 *
 * Grupo e privado precisam se distinguir de relance: no privado o broker sabe
 * quem mandou e responde à pessoa; no grupo, o autor pode ser qualquer um dos
 * participantes, e o botão de responder nem aparece. */
.canal {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-weight: 600; letter-spacing: .06em;
}
.canal.privado { background: var(--caneta-clara); color: var(--caneta); }
.canal.grupo   { background: var(--papel-fundo); color: var(--tinta-media); }
.canal.manual  { background: transparent; color: var(--tinta-fraca); border: 1px dashed var(--borda-forte); }

.filtros-canal { margin-bottom: var(--e4); }
.conta-filtro {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  border-radius: 8px; background: rgba(0,0,0,.12);
  font-family: var(--mono); font-size: .7rem;
}

/* Pareamento: o QR ao lado dos controles, empilhando no celular — que é onde a
 * pessoa provavelmente NÃO está, já que precisa do outro aparelho para
 * escanear. */
.pareamento { display: flex; gap: var(--e4); align-items: flex-start; flex-wrap: wrap; }
.pareamento img {
  width: 320px; height: 320px; background: var(--papel-fundo);
  border: 1px solid var(--borda); border-radius: var(--raio);
}

/* ------------------------------------------------- para onde o anúncio vai
 * O broker decide aceitar um carro nesta tela, e o alcance dessa decisão é o
 * grupo de WhatsApp dele. A lista fica em coluna e com o nome inteiro: um
 * "14 grupos" sozinho não responde a pergunta que ele faz de verdade, que é
 * "esse carro vai cair no grupo X?". */
.lista-destinos {
  list-style: none; margin: var(--e2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2);
}
.lista-destinos li {
  font-size: .855rem; color: var(--tinta);
  background: var(--papel-fundo); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .15rem .5rem;
}

/* --------------------------------------------------- a ficha do anúncio
 * O que a mensagem declarou além dos números: câmbio, IPVA, chave reserva,
 * pneus, despesas. Fica ACIMA do texto original e ABAIXO do formulário porque
 * é o que o broker confere antes de aceitar — e era o que ele redigitava à mão
 * olhando para a mensagem que já estava na tela. */
.ficha { margin-top: var(--e3); }
.ficha-titulo {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-media); margin: 0;
}

/* ------------------------------------------------------------- o PIX na tela
 * O pagamento acontece AQUI, e não na página do provedor: mandar embora perde
 * a pessoa no minuto em que o carro já está travado no nome dela. */
#painel-pix { display: flex; flex-direction: column; gap: var(--e2); }
.pix-titulo { margin: 0; font-size: 1rem; }
.pix-qr {
  align-self: center; width: 100%; max-width: 280px; height: auto;
  background: #fff; padding: var(--e2); border: 1px solid var(--borda);
  border-radius: var(--raio);
}
/* O código é longo e ninguém o lê: monoespaçado e miúdo deixa claro que ele é
 * para copiar, não para conferir. */
#pix-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
}

/* Menu reduzido do broker: todos os destinos visíveis também no celular. */
.painel-broker .sino { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.painel-broker .nav { flex-wrap: wrap; }
@media (max-width: 760px) {
 .painel-broker .nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:4px; }
 .painel-broker .nav a { text-align:center; padding:10px 4px; min-height:40px; }
 .painel-broker .sino .contagem { position:static; margin-left:5px; }
}