/* 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.
 */

@font-face { font-family: 'ArchivoFallback'; src: local('Archivo'); }

:root {
  /* Papel, não creme. O creme quente é o clichê; este é um branco frio de
     impresso, que faz o azul-caneta e o verde do spread cantarem. */
  --papel: #f6f6f4;
  --papel-alto: #ffffff;
  --papel-fundo: #ebebe7;

  /* Tinta: azul-petróleo profundo. Escuro o bastante para texto corrido,
     azul o bastante para não ser "preto de dashboard". */
  --tinta: #101f2c;
  --tinta-media: #41566a;
  --tinta-fraca: #7b8ea1;

  /* Azul-caneta: a cor da estrutura e do que é clicável. Documento assinado. */
  --caneta: #14459b;
  --caneta-clara: #e7edfa;

  /* Semântica de estado. Verde de coluna de crédito, não verde-ácido. */
  --ganho: #0a6b3d;
  --ganho-fraco: #e3f2e9;
  --espera: #9a5b06;
  --espera-fraco: #fbf0dd;
  --perda: #a32019;
  --perda-fraco: #fbe9e7;

  --borda: #d9d9d3;
  --borda-forte: #b9b9b1;

  --raio: 4px;          /* quase reto: documento, não app de banco */
  --raio-placa: 6px;
  --sombra: 0 1px 0 rgba(16,31,44,.06), 0 2px 8px rgba(16,31,44,.05);

  --serif: 'Archivo', 'Archivo Expanded', '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;
}

* { box-sizing: border-box; }

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;
  /* Textura de papel: ruído mínimo, quase subliminar. Sem isto o fundo chapado
     denuncia "template"; com excesso vira skeuomorfismo de 2010. */
  background-image: radial-gradient(rgba(16,31,44,.018) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ---------------------------------------------------------------- estrutura */

.barra {
  background: var(--tinta);
  color: var(--papel);
  border-bottom: 3px solid var(--caneta);
}
.barra-int {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 26px; min-height: 60px;
}
.marca {
  font-family: var(--serif); font-weight: 800; font-size: 1.12rem;
  letter-spacing: -.02em; color: var(--papel); text-decoration: none;
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.marca em {
  font-style: normal; font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-fraca);
}
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  color: #c6d2de; text-decoration: none; font-size: .86rem; font-weight: 500;
  padding: 7px 11px; border-radius: var(--raio);
}
.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 {
  position: absolute; top: -2px; right: 1px; min-width: 17px; height: 17px;
  background: var(--perda); color: #fff; border-radius: 9px;
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  display: grid; place-items: center; padding: 0 4px;
}

main { max-width: 1180px; margin: 0 auto; padding: 26px 20px 72px; }

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

.topo { margin-bottom: 22px; }
.sobrenome {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--caneta);
  display: block; margin-bottom: 5px;
}
h1 {
  font-family: var(--serif); font-size: clamp(1.55rem, 3.4vw, 2.1rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 6px;
}
h2 { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px; }
h3 { font-family: var(--serif); font-size: .97rem; font-weight: 700; margin: 0; }
.legenda { color: var(--tinta-media); margin: 0; max-width: 62ch; }

/* ------------------------------------------------------------------- placa
 *
 * A assinatura do produto. Proporção e partes seguem a placa Mercosul: tarja
 * superior azul, corpo branco, caracteres monoespaçados bem espaçados.
 * Deliberadamente NÃO é uma réplica exata — é uma citação, não uma
 * falsificação: placa de verdade num anúncio confundiria o lojista sobre qual
 * é o carro.
 */

.placa {
  display: inline-flex; flex-direction: column; align-items: stretch;
  background: #fff; border: 2px solid var(--tinta); border-radius: var(--raio-placa);
  overflow: hidden; box-shadow: var(--sombra); line-height: 1;
}
.placa .tarja {
  background: var(--caneta); color: #fff; font-family: var(--mono);
  font-size: .52rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  padding: 3px 8px 2px; text-align: center;
}
.placa .codigo {
  font-family: var(--mono); font-weight: 700; letter-spacing: .13em;
  font-size: 1.02rem; padding: 7px 13px 8px; text-align: center; color: var(--tinta);
  white-space: nowrap;
}
.placa.pequena .codigo { font-size: .8rem; padding: 5px 9px 6px; letter-spacing: .1em; }
.placa.grande .codigo { font-size: 1.5rem; padding: 10px 20px 12px; }

/* Carimbo de estado sobre a placa. O único momento com movimento no produto
   inteiro: quando o carro é reservado, a placa "bate" o carimbo uma vez. */
.placa.reservada { border-color: var(--espera); }
.placa.reservada .tarja { background: var(--espera); }
.placa.vendida { border-color: var(--perda); opacity: .72; }
.placa.vendida .tarja { background: var(--perda); }
@keyframes carimbo {
  0% { transform: scale(1.12); opacity: .4; }
  60% { transform: scale(.98); opacity: 1; }
  100% { transform: scale(1); }
}
.placa.mudou { animation: carimbo .34s cubic-bezier(.2,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .placa.mudou { animation: none; } }

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

.cartao {
  background: var(--papel-alto); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra);
}
.cartao + .cartao { margin-top: 14px; }

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

/* Cartão de carro: a placa é o cabeçalho, o spread é o número grande. */
.carro { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.carro:hover { border-color: var(--caneta); }
.carro:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; }
.carro .nome { font-family: var(--serif); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.carro .ficha { font-family: var(--mono); font-size: .74rem; color: var(--tinta-media); letter-spacing: .02em; }

/* ------------------------------------------------------------------- dinheiro
 *
 * Tabular de propósito: coluna de números que não dança quando o valor muda é
 * o que deixa comparar dois carros de relance.
 */
.valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.valor.destaque { font-size: 1.46rem; letter-spacing: -.02em; }
.valor.ganho { color: var(--ganho); }
.valor.perda { color: var(--perda); }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.numeros > div { background: var(--papel-alto); padding: 11px 13px; }
.numeros .rotulo { display: block; font-family: var(--mono); font-size: .62rem; 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.02rem; }

/* --------------------------------------------------------------- barra de spread
 *
 * Onde o preço pedido cai entre "de graça" e a tabela. Codifica informação
 * real: quanto mais à esquerda o marcador, melhor o negócio. Sem isto, o
 * desconto é um número solto que só quem conhece o modelo sabe julgar.
 */
.spread { margin-top: 4px; }
.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: .62rem; color: var(--tinta-fraca); margin-top: 4px; letter-spacing: .04em; }

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

.selo {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
  font-size: .67rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; border: 1px solid;
}
.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); }

/* ----------------------------------------------------------------- controles */

.btn {
  font-family: var(--corpo); font-size: .89rem; font-weight: 600;
  padding: 10px 17px; border-radius: var(--raio); border: 1px solid var(--borda-forte);
  background: var(--papel-alto); color: var(--tinta); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { border-color: var(--tinta-media); }
.btn.principal { background: var(--caneta); border-color: var(--caneta); color: #fff; }
.btn.principal:hover { background: #0e3579; }
.btn.perigo { background: var(--perda); border-color: var(--perda); color: #fff; }
.btn.grande { padding: 13px 24px; font-size: .97rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--caneta); outline-offset: 2px;
}

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-media); margin-bottom: 5px; }
.campo > small { display: block; color: var(--tinta-fraca); font-size: .78rem; margin-top: 4px; }
input, select, textarea {
  font-family: var(--corpo); font-size: .94rem; width: 100%; padding: 9px 11px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--papel-alto); color: var(--tinta);
}
input[inputmode="numeric"], input[inputmode="decimal"], .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.linha-campos { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.acoes { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

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

.aviso { padding: 11px 14px; border-radius: var(--raio); border-left: 3px solid; margin: 0 0 14px; font-size: .89rem; }
.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: #74440a; }

.vazio { text-align: center; padding: 52px 20px; color: var(--tinta-media); border: 1px dashed var(--borda-forte); border-radius: var(--raio); background: var(--papel-alto); }
.vazio h3 { margin-bottom: 6px; }

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

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 7px; }
.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); border: 1px solid var(--borda); background: var(--papel-fundo); display: block; }
.sem-foto { aspect-ratio: 16/9; display: grid; place-items: center; background: var(--papel-fundo); border: 1px dashed var(--borda-forte); border-radius: var(--raio); color: var(--tinta-fraca); font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }

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

table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th { text-align: left; font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; padding: 9px 11px; border-bottom: 1px solid var(--borda-forte); }
td { padding: 11px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.rolavel { overflow-x: auto; }

/* ------------------------------------------------------------------- filtros */

.filtros { background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio); padding: 15px; margin-bottom: 18px; box-shadow: var(--sombra); }

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 720px) {
  main { padding: 18px 14px 56px; }
  .barra-int { gap: 12px; padding: 0 14px; flex-wrap: wrap; min-height: 54px; }
  .nav { width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 7px; flex-wrap: nowrap; }
  .nav a { white-space: nowrap; }
  .valor.destaque { font-size: 1.26rem; }
}

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