/* Pagina de analise (18/10/2026). Os tokens (cor, tipo, raio) sao os do
   estilo.css; daqui so sai o desenho proprio da pagina. A unica coisa com
   enfase e a regua de preco -- o resto e tabela e texto quieto. */

/* ---------------------------------------------------------------- topo */
.a-topo { background: var(--barra); color: var(--barra-texto); border-bottom: 3px solid var(--acento); }
.a-topo-linha {
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 24px; min-height: 56px; flex-wrap: wrap;
}
.a-marca { color: inherit; text-decoration: none; font-weight: 500; font-size: var(--t-titulo); }
.a-abas { display: flex; gap: 4px; align-self: stretch; }
.a-abas a {
  color: inherit; text-decoration: none; padding: 0 14px; display: flex; align-items: center;
  border-bottom: 3px solid transparent; margin-bottom: -3px; opacity: .8;
}
.a-abas a:hover { opacity: 1; }
.a-abas a[aria-current="page"] { opacity: 1; border-bottom-color: var(--barra-texto); font-weight: 500; }
.a-topo-acoes { margin-left: auto; display: flex; gap: 16px; font-size: var(--t-menor); }
.a-topo-acoes a, .a-topo .a-link-botao { color: inherit; }
.a-link-botao {
  background: none; border: 0; padding: 0; font: inherit; color: var(--destaque);
  cursor: pointer; text-decoration: underline; text-align: left;
}

.a-erro {
  max-width: 1280px; margin: 16px auto 0; padding: 10px 16px; color: var(--ruim);
  background: var(--papel); border-left: 3px solid var(--ruim);
}
.a-fraco { color: var(--fraco); font-size: var(--t-menor); }
.a-nota { color: var(--fraco); font-size: var(--t-menor); max-width: 72ch; }
.a-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-vazio { color: var(--fraco); padding: 24px 0; list-style: none; }
.a-aba { max-width: 1280px; margin: 0 auto; padding: 16px; }
.a-largura h2 { font-size: var(--t-titulo); margin: 8px 0 4px; }
.a-largura h3 { font-size: var(--t-corpo); margin: 32px 0 4px; }

.a-campo { display: grid; gap: 4px; font-size: var(--t-mini); color: var(--fraco); }
.a-campo input, .a-campo select {
  font: inherit; font-size: var(--t-controle); color: var(--texto); background: var(--papel);
  border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 7px 9px; min-width: 0;
}
.a-numero-campo { display: flex; align-items: center; gap: 6px; font-size: var(--t-menor); color: var(--texto); }
.a-numero-campo input { width: 5.5em; }

/* Cores das zonas e etiquetas (handoff de 20/10/2026). No escuro saem da mistura
   do token com o papel, para o tema continuar valendo. */
:root {
  --z-verde: light-dark(#d9efe3, color-mix(in srgb, var(--bom) 22%, var(--papel)));
  --z-ambar: light-dark(#f5e9c8, color-mix(in srgb, var(--medio) 22%, var(--papel)));
  --z-vermelho: light-dark(#f6dade, color-mix(in srgb, var(--ruim) 22%, var(--papel)));
  --z-neutro: light-dark(#eef0f3, color-mix(in srgb, var(--fraco) 18%, var(--papel)));
  --etq-ruim: light-dark(#8f2330, var(--ruim));
  --etq-medio: light-dark(#6e4d0c, var(--medio));
  --etq-bom: light-dark(#14663f, var(--bom));
  --etq-neutro: light-dark(#3d4552, var(--texto));
  --c-arremate: light-dark(#102246, #7aa7e8);
  --c-comissao: light-dark(#3b5287, #5d7fc0);
  --c-despesas: light-dark(#7186b3, #4b6496);
  --c-despachante: light-dark(#a7b3cc, #3a4a6d);
  --c-ipva: #c9a43a;
  --sombra-janela: 0 24px 48px -12px light-dark(rgba(16,34,70,.45), rgba(0,0,0,.8)),
                   0 0 0 1px light-dark(rgba(16,34,70,.08), rgba(255,255,255,.08));
}
.a-aba { font-variant-numeric: tabular-nums; }
#aba-comprar { display: grid; gap: 16px; padding: 16px 24px 32px; }
#aba-comprar[hidden] { display: none; }
#aba-comprar > * { min-width: 0; }   /* senao a agenda, que rola, alarga a pagina */
.a-caixa { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }

/* ----------------------------------------------------------- premissas */
.a-premissas {
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 24px; align-items: end;
}
.a-deslize { display: grid; gap: 6px; font-size: var(--t-mini); color: var(--fraco); }
.a-deslize > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.a-deslize strong { color: var(--texto); font-weight: 500; font-size: var(--t-controle); white-space: nowrap; }
.a-deslize input[type=range], .a-fipe-ref input { accent-color: var(--destaque); width: 100%; }
.a-segmentos { display: flex; border: 1px solid var(--borda-campo); border-radius: var(--raio); overflow: hidden; }
.a-segmentos button {
  flex: 1; font: inherit; font-size: var(--t-menor); padding: 6px 4px; border: 0; cursor: pointer;
  background: var(--papel); color: var(--texto);
}
.a-segmentos button[aria-pressed="true"] { background: var(--destaque); color: var(--sobre-destaque); }

/* -------------------------------------------------------------- agenda */
/* um botao por pregao, numa faixa que rola */
.a-agenda { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; align-items: start; }
.a-pregao {
  flex: 1 0 140px; display: grid; gap: 4px; text-align: left; font: inherit; font-size: var(--t-menor);
  background: var(--papel); color: var(--texto); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 8px 10px; cursor: pointer;
}
.a-pregao:hover { border-color: var(--borda-campo); }
.a-pregao[aria-pressed="true"] { border-color: var(--destaque); box-shadow: inset 3px 0 0 var(--destaque); }
.a-pregao-nome { font-size: var(--t-mini); color: var(--fraco); font-weight: 500; text-transform: capitalize; }
.a-pontos { display: flex; flex-wrap: wrap; gap: 3px; min-height: 10px; }
.a-pontos i { width: 10px; height: 10px; border-radius: 50%; }

/* ------------------------------------------------------------- comprar */
.a-ranking { display: grid; gap: 10px; }
.a-ranking-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.a-ranking-topo h2 { margin: 0; font-size: var(--t-titulo); font-weight: 500; }
.a-ranking-topo p { margin: 0; }
.a-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-mini); color: var(--fraco); margin: 0; align-items: center; }
.a-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.a-legenda i { display: inline-block; }
.l-verde, .l-ambar, .l-vermelho { width: 20px; height: 10px; }
.l-verde { background: var(--z-verde); }
.l-ambar { background: var(--z-ambar); }
.l-vermelho { background: var(--z-vermelho); }
.l-hoje { width: 2px; height: 14px; background: var(--texto); }
.l-faixa { width: 20px; height: 6px; border: 1.5px solid var(--calma); border-top: 0; }
.l-max { width: 8px; height: 8px; background: var(--destaque); transform: rotate(45deg); }

.a-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.a-ficha {
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-card); padding: 16px;
  display: grid; gap: 12px; cursor: pointer; box-shadow: var(--sombra-card);
  transition: box-shadow var(--dur-rapida), transform var(--dur-rapida);
}
.a-ficha:hover { box-shadow: var(--sombra-flutua); transform: translateY(-2px); }
.a-ficha.aberta { border-color: var(--destaque); box-shadow: 0 0 0 2px var(--destaque); }
.a-ficha-topo { display: flex; gap: 12px; align-items: flex-start; }
.a-ficha-foto { width: 84px; flex: none; aspect-ratio: 4 / 3; border-radius: var(--raio); object-fit: cover; background: var(--borda); }
.a-sem-foto { display: grid; place-items: center; font-size: 10px; color: var(--fraco);
  background: repeating-linear-gradient(135deg, var(--fundo) 0 6px, var(--borda) 6px 12px); }
.a-ficha-nome { min-width: 0; flex: 1; }
.a-ficha-nome h3 { margin: 0; font-size: var(--t-corpo); font-weight: 500; line-height: 1.25; }
.a-ficha-nome p { margin: 2px 0 0; font-size: var(--t-mini); color: var(--fraco); }
.a-ficha-margem { text-align: right; flex: none; display: grid; gap: 4px; }
.a-ficha-margem strong { font-size: var(--t-numero); font-weight: 500; line-height: 1; }
.a-ficha-margem span { font-size: var(--t-mini); }

/* o corredor do lance: zonas, losango do maximo, colchete dos parecidos, traco de hoje */
.a-corredor { position: relative; height: 58px; }
.a-corredor > span { position: absolute; }
.z-verde, .z-ambar, .z-vermelho { top: 18px; height: 18px; }
.z-verde { left: 0; background: var(--z-verde); border-radius: 3px 0 0 3px; }
.z-ambar { background: var(--z-ambar); }
.z-vermelho { right: 0; background: var(--z-vermelho); border-radius: 0 3px 3px 0; }
.c-max { top: 21px; width: 12px; height: 12px; margin-left: -6px; background: var(--destaque);
  transform: rotate(45deg); box-shadow: 0 0 0 2px var(--papel); }
.c-faixa { top: 40px; height: 6px; border: 1.5px solid var(--calma); border-top: 0; }
.c-hoje { top: 12px; width: 2px; height: 30px; margin-left: -1px; background: var(--texto); }
.c-rot { top: 0; font-size: 11px; white-space: nowrap; transform: translateX(-50%); }
.c-rot.calma { top: 44px; color: var(--calma); }

.a-ficha-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0;
  border-top: 1px solid var(--borda); padding-top: 10px; }
.a-ficha-numeros dt { font-size: 11px; color: var(--fraco); }
.a-ficha-numeros dd { margin: 0; font-size: var(--t-corpo); }
.a-ficha-numeros dd:not(:last-child), .destaque { font-weight: 500; }
.a-ficha-numeros div:nth-child(n+3) dd { font-weight: 400; }
.destaque { color: var(--destaque); }

.a-etqs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.a-etq { font-size: var(--t-mini); padding: 2px 8px; border-radius: var(--raio-pill); }
.a-etq.ruim { background: var(--z-vermelho); color: var(--etq-ruim); }
.a-etq.medio { background: var(--z-ambar); color: var(--etq-medio); }
.a-etq.bom { background: var(--z-verde); color: var(--etq-bom); }
.a-etq.neutro { background: var(--z-neutro); color: var(--etq-neutro); }
.a-ver { margin-left: auto; font-size: var(--t-mini); }

.a-sem-base summary { cursor: pointer; color: var(--destaque); font-size: var(--t-menor); padding: 8px 0; }
.a-sem-base ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--t-menor); }
.a-sem-base a { color: var(--texto); margin-right: 8px; }

/* ------------------------------------------- janela de analise do lote */
html:has(.a-janela[open]) { overflow: hidden; }   /* a pagina trava, como no painel */
.a-janela {
  position: fixed; inset: 72px 0 auto; margin: 0 auto; padding: 0; border: 0;
  width: min(940px, calc(100% - 64px)); max-width: none; max-height: calc(100% - 144px);
  overflow-y: auto; border-radius: var(--raio-card); background: var(--fundo); color: var(--texto);
  box-shadow: var(--sombra-janela);
}
.a-janela::backdrop { background: rgba(16, 34, 70, .45); }
.a-janela[open] { animation: a-chega var(--dur-entrada) var(--curva-chega); }
@keyframes a-chega { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .a-janela[open] { animation: none; } .a-ficha:hover { transform: none; } }
.a-janela-barra {
  position: sticky; top: 0; z-index: 1; background: var(--papel); border-bottom: 1px solid var(--borda);
  padding: 10px 20px; display: flex; gap: 12px; align-items: center; font-size: var(--t-menor);
}
.a-botao { font: inherit; background: none; border: 1px solid var(--borda-campo); border-radius: var(--raio);
  padding: 5px 10px; cursor: pointer; color: var(--texto); }
.a-fechar { margin-left: auto; min-height: 32px; }
.a-janela-corpo { padding: 16px 20px 28px; display: grid; gap: 14px; }
.a-janela-corpo > *, .a-j-cabeca > div { min-width: 0; }   /* senao o celular rola de lado */
.a-j-cabeca { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.a-j-cabeca > div { flex: 1; min-width: 200px; }
.a-j-cabeca p { margin: 4px 0 0; }
.a-j-cabeca a { color: var(--destaque); }
.a-j-foto { width: 132px; aspect-ratio: 4 / 3; border-radius: var(--raio); object-fit: cover; background: var(--borda); }
.a-j-titulo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.a-j-titulo h2 { margin: 0; font-size: 20px; font-weight: 500; }
.a-selo { font-size: var(--t-mini); font-weight: 500; padding: 2px 8px; border-radius: var(--raio); color: var(--sobre-destaque); }

.a-j-quatro { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
  background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.a-j-quatro > div { background: var(--papel); padding: 12px 14px; display: grid; }
.a-j-quatro span, .a-j-quatro small { font-size: var(--t-mini); color: var(--fraco); }
.a-j-quatro strong { font-size: 24px; font-weight: 500; line-height: 1.2; }

.a-j-caixa { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }
.a-j-caixa h3 { margin: 0; font-size: var(--t-corpo); font-weight: 500; }
.a-j-sub { margin: 2px 0 10px; font-size: var(--t-mini); color: var(--fraco); }

.a-trilho-j { position: relative; height: 40px; margin-top: 10px; }
.a-trilho-j > span { position: absolute; }
.t-base { left: 0; right: 0; top: 19px; height: 2px; background: var(--borda); }
.t-prejuizo { top: 6px; height: 28px; right: 0; background: linear-gradient(90deg, rgba(176,42,55,0), rgba(176,42,55,.14)); }
.a-trilho-j .t-faixa { top: 11px; height: 18px; border-radius: 3px; }
.t-faixa { background: color-mix(in srgb, var(--calma) 20%, transparent); border: 1px solid var(--calma); }
.t-mediana { top: 7px; height: 26px; width: 2px; margin-left: -1px; background: var(--calma); }
.t-subida { top: 19px; height: 2px; background: var(--texto); opacity: .5; }
.a-trilho-j .t-hoje { top: 2px; height: 36px; margin-left: -1px; }
.t-hoje { width: 2px; background: var(--texto); }
.a-trilho-j .t-zero { top: 4px; height: 32px; }
.t-zero { width: 0; border-left: 2px dashed var(--ruim); }
.a-trilho-j .t-max { top: 13px; width: 14px; height: 14px; margin-left: -7px; box-shadow: 0 0 0 2px var(--papel); }
.t-max { background: var(--destaque); transform: rotate(45deg); }
.a-trilho-j .t-revenda { top: 13px; width: 14px; height: 14px; margin-left: -7px; box-shadow: 0 0 0 2px var(--papel); }
.t-revenda { border-radius: 50%; background: var(--acento); }
.a-j-legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px;
  margin-top: 12px; font-size: var(--t-menor); }
.a-j-legenda span { display: flex; gap: 8px; align-items: center; }
.a-j-legenda em { font-style: normal; color: var(--fraco); white-space: nowrap; }
.a-j-legenda b { margin-left: auto; font-weight: 400; white-space: nowrap; }
.a-j-legenda i { display: inline-block; flex: none; }
.a-j-legenda .t-hoje { height: 14px; }
.a-j-legenda .t-faixa { width: 14px; height: 10px; border-radius: 2px; }
.a-j-legenda .t-max { width: 9px; height: 9px; }
.a-j-legenda .t-zero { height: 14px; }
.a-j-legenda .t-revenda { width: 10px; height: 10px; }

.a-cascata, .a-cascata-rotulos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.a-cascata { height: 150px; align-items: end; border-bottom: 1px solid var(--borda-campo); margin-top: 12px; }
.a-cascata > div { position: relative; height: 100%; }
.a-cascata span { position: absolute; left: 0; right: 0; border-radius: 2px 2px 0 0; }
.a-cascata-rotulos { margin-top: 6px; }
.a-cascata-rotulos div { font-size: 10px; color: var(--fraco); text-align: center; line-height: 1.2; }
.a-cascata-rotulos b { display: block; font-size: 11px; font-weight: 400; color: var(--texto); margin-top: 2px; }
.a-aviso { margin: 10px 0 0; font-size: var(--t-mini); color: var(--medio); }

.a-j-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.a-j-duas .a-j-caixa { display: grid; gap: 8px; align-content: start; }
.a-cenario {
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid;
  grid-template-columns: 5.5em 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 10px;
  border-radius: var(--raio); border: 1px solid var(--borda); background: var(--papel); font-size: var(--t-menor);
}
.a-cenario[aria-pressed="true"] { border-color: var(--destaque); background: var(--fundo); }
.a-cenario .a-fraco { font-size: var(--t-mini); }
.a-cenario strong { font-size: var(--t-controle); font-weight: 500; text-align: right; }
.a-cenario small { font-size: var(--t-mini); }
.a-depois { list-style: none; margin: 0; padding: 0; }
.a-depois li { display: flex; gap: 8px; align-items: baseline; font-size: var(--t-menor); padding: 4px 0; border-bottom: 1px solid var(--borda); }
.a-depois small { color: var(--fraco); font-size: var(--t-mini); }
.a-depois b, .a-depois-total b { margin-left: auto; font-weight: 400; white-space: nowrap; }
.a-depois-total { display: flex; margin: 0; font-size: var(--t-menor); font-weight: 500; padding-top: 4px; }
.a-depois-total b { font-weight: 500; }

.a-parecidos { list-style: none; margin: 0; padding: 0; }
/* o iframe do painel embutido: tela inteira e transparente; o fundo escuro e
   a janela vem do proprio detalhe do painel, la dentro */
.a-lote-painel { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; }
.a-lote-painel::backdrop { background: transparent; }
.a-lote-painel iframe { display: block; width: 100%; height: 100%; border: 0; }
.a-parecidos li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 4px 12px;
  align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: var(--t-menor); }
.a-p-foto { width: 56px; aspect-ratio: 4 / 3; border-radius: var(--raio); object-fit: cover; background: var(--borda); }
.a-p-nome a { color: var(--texto); }
.a-p-nome small, .a-p-num small { display: block; font-size: var(--t-mini); color: var(--fraco); }
.a-p-num { text-align: right; white-space: nowrap; }
.a-p-num b { font-weight: 500; }
.a-p-num b.cabe { color: var(--bom); }

/* ------------------------------------------------------------- avarias */
.a-fipe-ref { display: flex; gap: 12px; align-items: center; font-size: var(--t-mini); color: var(--fraco); max-width: 440px; margin: 10px 0 14px; }
.a-fipe-ref input { flex: 1; }
.a-fipe-ref strong { color: var(--texto); font-weight: 500; font-size: var(--t-controle); white-space: nowrap; }
.a-saldo {
  display: grid; grid-template-columns: minmax(9em, 13em) minmax(240px, 1fr) 7em; gap: 12px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: var(--t-menor); min-width: 480px;
}
.a-saldo.incerto { opacity: .45; }
.a-saldo-cabeca { font-size: var(--t-mini); color: var(--fraco); padding: 8px 0; border-bottom-color: var(--borda-campo); }
.a-saldo-cabeca > :last-child { text-align: right; }
.a-saldo-escala { display: flex; justify-content: space-between; }
.a-saldo-trilho { position: relative; height: 16px; }
.a-saldo-trilho i { position: absolute; }
.s-liga { top: 7px; height: 2px; opacity: .6; }
.s-desc, .l-desc { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--calma); background: var(--papel); box-sizing: border-box; }
.s-cons, .l-cons { width: 12px; height: 12px; border-radius: 2px; background: var(--ruim); }
.s-desc, .s-cons { top: 2px; margin-left: -6px; }
.a-caixa .a-legenda { padding: 10px 0 4px; }

.a-num small, .a-tabela small { font-size: var(--t-mini); color: var(--fraco); margin-left: 4px; }

.a-tabela { border-collapse: collapse; font-size: var(--t-menor); min-width: 100%; }
.a-tabela th { text-align: left; font-weight: 500; font-size: var(--t-mini); color: var(--fraco);
  padding: 6px 10px; border-bottom: 1px solid var(--borda-campo); white-space: nowrap; }
.a-tabela td { padding: 6px 10px; border-bottom: 1px solid var(--borda); }
.a-tabela tr.incerto td { color: var(--fraco); }
#controles { min-width: 0; max-width: 560px; }
.a-cobertura td.nao { color: var(--fraco); font-style: italic; }
.a-rola { overflow-x: auto; }

/* ------------------------------------------------------------- mercado */
.a-mercado-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.a-busca { flex: 1 1 14em; }
.a-trilha { margin: 16px 0 8px; font-size: var(--t-menor); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.a-trilha button { background: none; border: 0; padding: 0; font: inherit; color: var(--destaque); cursor: pointer; text-decoration: underline; }
.a-trilha [aria-current="page"] { color: var(--texto); text-decoration: none; font-weight: 500; cursor: default; }
.a-mercado td:first-child { max-width: 22em; }
.a-mercado th:nth-child(n+2):not(:nth-child(5)) { text-align: right; }
/* mini regua do arremate: 0 a 120% da FIPE, faixa do 1o ao 3o quartil */
.a-faixa { position: relative; display: inline-block; width: 90px; height: 10px; vertical-align: middle;
  margin-right: 6px; background: linear-gradient(var(--borda), var(--borda)) center / 100% 2px no-repeat; }
.a-faixa i { position: absolute; top: 1px; height: 8px; border-radius: 2px;
  background: color-mix(in srgb, var(--calma) 35%, transparent); border: 1px solid var(--calma); }
.a-faixa b { position: absolute; top: -2px; width: 2px; height: 14px; margin-left: -1px; background: var(--texto); }

.a-serie { margin: 8px 0 16px; max-width: 720px; }
.a-serie figcaption { font-size: var(--t-menor); color: var(--fraco); margin-bottom: 4px; }
.a-serie svg { width: 100%; height: auto; display: block; }
.s-grade { stroke: var(--borda); stroke-width: 1; }
.s-eixo { fill: var(--fraco); font-size: 11px; }
.s-linha { fill: none; stroke: var(--destaque); stroke-width: 2; stroke-linejoin: round; }
.s-ponto circle { fill: var(--destaque); stroke: var(--fundo); stroke-width: 2; }
.s-ponto .s-alvo { fill: transparent; stroke: none; }
.s-ponto:hover circle:first-child { r: 6; }
.s-barra { fill: var(--borda-campo); }
.s-banda { fill: color-mix(in srgb, var(--calma) 16%, transparent); }

/* quanto o lance sobe no pregao: vespera (vazio) ao martelo (cheio) */
.a-sobe-lista { display: grid; gap: 14px; margin-bottom: 10px; }
.a-sobe { display: grid; grid-template-columns: 5em 1fr 6.5em; gap: 12px; align-items: center; }
.a-sobe-casa { font-weight: 500; }
.a-sobe-trilho { position: relative; height: 20px; background: linear-gradient(var(--borda), var(--borda)) center / 100% 2px no-repeat; }
.a-sobe-trilho i { position: absolute; }
.s-linha-sobe { top: 9px; height: 2px; background: var(--acento); }
.s-vespera, .s-martelo { top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; box-sizing: border-box; }
.s-vespera { border: 2px solid var(--borda-campo); background: var(--papel); }
.s-martelo { background: var(--destaque); }

/* ------------------------------------------------------------- celular */
@media (max-width: 760px) {
  .a-topo-linha { gap: 8px 16px; padding-top: 8px; }
  .a-abas { order: 3; width: 100%; min-height: 44px; }
  .a-abas a { flex: 1; justify-content: center; }
  .a-aba, #aba-comprar { padding-left: 14px; padding-right: 14px; }
  .a-campo input, .a-campo select { font-size: 16px; }   /* o iOS nao da zoom */
  .a-fichas { grid-template-columns: minmax(0, 1fr); }
  .a-ficha-numeros { gap: 4px; }
  .a-janela { inset: 0; width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .a-janela-barra, .a-janela-corpo { padding-left: 14px; padding-right: 14px; }
  .a-cascata-rotulos div { font-size: 9px; }
  .a-parecidos li { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .a-parecidos li > :last-child { grid-column: 2 / -1; text-align: left; }
}