/* Precos de combustivel — /preco-da-gasolina e paginas de cidade.

   IDENTIDADE: o totem de preco da beira da estrada. O topo da pagina e um
   painel escuro com os combustiveis em fila, cada um na cor do bico da bomba e
   o preco em digitos de display. E o unico lugar do WebTeck com fundo escuro, e
   e proposital: da a estas paginas uma cara propria sem inventar uma segunda
   marca — o verde continua sendo o do site, so muda de papel (deixa de ser o
   fundo e vira o etanol e os links).

   Abaixo do painel a pagina volta ao claro: tabela de 265 postos em fundo
   escuro cansa a vista, e e onde a pessoa fica mais tempo. */

/* O atributo hidden do HTML esconde pela folha do navegador (display:none), e
   QUALQUER regra de display escrita aqui ganha dela — foi assim que o botao
   "Ver todos os N postos" continuava na tela mesmo com hidden ligado. Esta
   regra devolve a autoridade ao hidden para tudo que este arquivo estiliza. */
[hidden] { display: none !important; }

:root {
  /* Painel */
  --comb-noite: #0f1f1a;
  --comb-painel: #17302a;
  --comb-painel-alto: #1d3a33;
  --comb-linha: #2a5147;
  --comb-claro: #ecf5f0;
  --comb-apagado: #9cb5aa;

  /* Cor do bico de cada combustivel — mesma logica das bombas: a pessoa
     reconhece o combustivel pela cor antes de ler o rotulo. */
  --bico-gasolina: #f7b93e;
  --bico-gasolina-aditivada: #f2782f;
  --bico-etanol: #3ecf74;
  --bico-diesel-s10: #57aee6;
  --bico-diesel: #a8b5af;
  --bico-gnv: #8b9bfa;

  /* Digitos de preco: mono do sistema, sem baixar fonte nenhuma. Da o ar de
     display sem custar uma requisicao numa pagina que ja carrega JSON. */
  --comb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* Icone de bomba desenhado por mascara CSS: uma definicao so, e serve tanto
   para o HTML das paginas quanto para o que o JS monta. Herda a cor do texto. */
.comb-icone {
  --comb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M2.5 21h12'/%3E%3Cpath d='M4 10h9'/%3E%3Cpath d='M16.5 8.5 18.5 6.5l2.5 2.5v7.5a1.75 1.75 0 0 1-3.5 0V12h-1.5'/%3E%3C/svg%3E");
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  background: currentColor;
  -webkit-mask: var(--comb-mask) center / contain no-repeat;
  mask: var(--comb-mask) center / contain no-repeat;
  flex: none;
}
.comb-icone-pino {
  --comb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.comb-icone-gota {
  --comb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c0 0 6 6.6 6 10.1a6 6 0 0 1-12 0C6 10.1 12 3.5 12 3.5z'/%3E%3C/svg%3E");
}

/* --- Painel escuro (hero + totem) --- */
.comb-painel-topo {
  background:
    radial-gradient(120% 80% at 15% 0%, #1c3a32 0%, transparent 60%),
    var(--comb-noite);
  color: var(--comb-claro);
  padding: 36px 0 32px;
  /* Faixa com a cor dos bicos na base: a assinatura visual da pagina, e o que
     separa o painel do conteudo claro sem precisar de borda. */
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,
    var(--bico-gasolina), var(--bico-gasolina-aditivada), var(--bico-etanol),
    var(--bico-diesel-s10), var(--bico-gnv)) 1;
}
.comb-painel-topo h1 {
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  line-height: 1.2;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: -0.01em;
}
.comb-painel-topo .lead {
  font-size: 1.05rem;
  color: var(--comb-apagado);
  margin: 0 0 20px;
  max-width: 62ch;
}
.comb-painel-topo .lead strong { color: #fff; font-weight: 600; }
.comb-painel-topo h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--comb-apagado);
  margin: 26px 0 12px;
  font-weight: 600;
}

/* Selo de procedencia. Fica no topo de proposito: a primeira duvida de quem
   chega e "isso e de quando?" — se a resposta demora, a pagina perde a
   confianca antes de ser lida. */
.comb-fonte {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--comb-apagado);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--comb-linha);
  border-radius: 999px;
  padding: 7px 15px;
  margin: 0;
}
.comb-fonte strong { color: var(--comb-claro); font-weight: 600; }

/* --- Totem: os combustiveis em fila, como na placa da rua --- */
.comb-cards {
  display: grid;
  /* 160px deixa os 6 combustiveis numa fileira so no desktop, inclusive dentro
     do painel do hub (que perde 44px para o proprio padding). Com valor maior o
     GNV caia sozinho numa segunda linha e o totem perdia a leitura de placa. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.comb-card {
  position: relative;
  background: var(--comb-painel);
  border: 1px solid var(--comb-linha);
  border-radius: 12px;
  padding: 15px 16px 14px;
  overflow: hidden;
}
/* Filete da cor do bico no alto do cartao. */
.comb-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--bico, var(--comb-linha));
}
.comb-card[data-bico="gasolina"] { --bico: var(--bico-gasolina); }
.comb-card[data-bico="gasolina-aditivada"] { --bico: var(--bico-gasolina-aditivada); }
.comb-card[data-bico="etanol"] { --bico: var(--bico-etanol); }
.comb-card[data-bico="diesel-s10"] { --bico: var(--bico-diesel-s10); }
.comb-card[data-bico="diesel"] { --bico: var(--bico-diesel); }
.comb-card[data-bico="gnv"] { --bico: var(--bico-gnv); }

.comb-card h3 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
  /* Duas linhas reservadas: "Gasolina aditivada" nao cabe em uma so, e sem
     reservar a altura o preco dela desce e os digitos deixam de alinhar entre
     os cartoes — numa placa de preco, alinhamento e metade da leitura. */
  line-height: 1.25;
  min-height: 2.5em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--comb-apagado);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.comb-card h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bico, var(--comb-apagado));
  box-shadow: 0 0 10px var(--bico, transparent);
  flex: none;
  margin-top: 0.32em;   /* acompanha a primeira linha do rotulo */
}
.comb-card .valor {
  display: block;
  font-family: var(--comb-mono);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--bico, #fff);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.comb-card .valor small {
  display: block;
  margin-top: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--comb-apagado);
  letter-spacing: 0;
}
.comb-card dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 10px;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--comb-linha);
  font-size: 0.82rem;
}
.comb-card dt { color: var(--comb-apagado); }
.comb-card dd {
  margin: 0;
  text-align: right;
  color: var(--comb-claro);
  font-family: var(--comb-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Busca de cidade (fica dentro do painel escuro) --- */
.comb-busca { position: relative; max-width: 520px; margin: 0 0 14px; }
.comb-busca input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 2px solid var(--comb-linha);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.comb-busca input::placeholder { color: var(--comb-apagado); }
.comb-busca input:focus {
  outline: none;
  border-color: var(--bico-etanol);
  background: rgba(255, 255, 255, 0.09);
}
.comb-sugestoes {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--comb-painel);
  border: 1px solid var(--comb-linha);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  list-style: none;
  margin: 0;
  padding: 4px;
}
.comb-sugestoes li button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  color: var(--comb-claro);
  cursor: pointer;
}
.comb-sugestoes li button:hover,
.comb-sugestoes li button:focus,
.comb-sugestoes li[aria-selected="true"] button {
  background: var(--comb-painel-alto);
  outline: none;
}
.comb-sugestoes .uf { color: var(--comb-apagado); font-size: 0.85rem; }
.comb-sugestoes .vazio { padding: 12px; color: var(--comb-apagado); }

/* --- Destaque de economia --- */
.comb-destaque {
  display: flex;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--bico-gasolina);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 28px;
}
.comb-destaque > .comb-icone {
  font-size: 1.5rem;
  color: var(--bico-gasolina);
  margin-top: 2px;
}
.comb-destaque h2 { margin: 0 0 6px; font-size: 1.1rem; }
.comb-destaque p { margin: 0; color: var(--color-muted); }
.comb-destaque .numero {
  color: var(--color-text);
  font-family: var(--comb-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Tabela de postos --- */
.comb-tabela-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin: 0 0 12px;
}
.comb-tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.comb-tabela th,
.comb-tabela td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.comb-tabela th {
  background: var(--color-bg);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-weight: 600;
}
/* Ponto da cor do bico no cabecalho: liga a coluna ao cartao la de cima.
   Tons um pouco mais fechados que os do painel — os do escuro nao teriam
   contraste sobre fundo claro. */
.comb-tabela th[data-bico]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 0.05em;
  background: var(--bico, var(--color-muted));
}
.comb-tabela th[data-bico="gasolina"] { --bico: #e0a01f; }
.comb-tabela th[data-bico="gasolina-aditivada"] { --bico: #dd5f16; }
.comb-tabela th[data-bico="etanol"] { --bico: #16a34a; }
.comb-tabela th[data-bico="diesel-s10"] { --bico: #2f8fce; }
.comb-tabela th[data-bico="diesel"] { --bico: #7d8a84; }
.comb-tabela th[data-bico="gnv"] { --bico: #6274e8; }

.comb-tabela tbody tr:last-child td { border-bottom: 0; }
.comb-tabela .posto { white-space: normal; min-width: 240px; }
.comb-tabela .posto strong { display: block; font-weight: 600; }
.comb-tabela .posto span { color: var(--color-muted); font-size: 0.85rem; }
.comb-tabela .posto .coleta {
  display: block;
  color: var(--color-muted);
  font-size: 0.78rem;
  margin-top: 2px;
}
/* Botao de rota. Mora dentro da celula do posto, e nao numa coluna propria: a
   tabela ja ocupa 1098 dos 1100px disponiveis no desktop, e uma coluna a mais
   cortaria os precos. Aqui ele acompanha o endereco, que e onde faz sentido. */
.comb-mapa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 4px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.comb-mapa:hover,
.comb-mapa:focus-visible {
  border-color: var(--color-primary);
  background: #f2fbf5;
  color: var(--color-primary-hover);
}
.comb-mapa .comb-icone { font-size: 0.95rem; }

.comb-tabela td.preco {
  font-family: var(--comb-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.comb-tabela td.preco.vazio { color: #c8d5cd; font-weight: 400; }

/* A linha mais barata ganha etiqueta, como o preco em destaque na placa do
   posto. */
.comb-tabela tr.barato { background: #f2fbf5; }
.comb-tabela tr.barato td.preco { color: var(--color-primary); }
.comb-tabela tr.barato .posto strong::after {
  content: "menor preço";
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
}
.comb-tabela .bandeira {
  font-size: 0.76rem;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.comb-mais {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 0 0 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.comb-mais:hover { background: var(--color-bg); }

/* --- Filtro por bairro --- */
.comb-filtro { margin: 0 0 14px; }
.comb-filtro label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.comb-filtro select {
  width: 100%;
  max-width: 420px;
  padding: 11px 14px;
  font: inherit;
  font-size: 0.95rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.comb-filtro select:focus { outline: none; border-color: var(--color-primary); }

.comb-contagem { margin: 10px 0 0; font-size: 0.88rem; color: var(--color-muted); }
.comb-contagem:empty { margin: 0; }

/* --- Blocos de texto e listas de cidades --- */
/* Tipografia da secao vale so para os titulos FILHOS DIRETOS dela. Sem o ">",
   ".comb-secao h3" alcancava tambem o rotulo dentro dos cartoes de combustivel
   e, por ter a mesma especificidade de ".comb-card h3" e vir depois no arquivo,
   ganhava dele: no hub (onde o resultado e uma .comb-secao) os cartoes saiam
   com rotulo de 1,05rem, e na pagina de cidade com 0,74rem — a MESMA placa com
   duas caras. */
.comb-secao { padding: 32px 0; border-top: 1px solid var(--color-border); }
.comb-secao > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.35rem;
  margin: 0 0 14px;
}
.comb-secao > h2 .comb-icone { color: var(--color-primary); font-size: 1.05rem; }
.comb-secao > h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.comb-secao p { max-width: 70ch; }

.comb-cidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.comb-cidades a {
  display: block;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.92rem;
}
.comb-cidades a:hover { border-left-color: var(--bico-gasolina); }
.comb-cidades .preco-mini {
  display: block;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-family: var(--comb-mono);
  font-variant-numeric: tabular-nums;
}

.comb-breadcrumb { font-size: 0.85rem; color: var(--color-muted); padding: 16px 0 0; }
.comb-breadcrumb a { color: var(--color-muted); }
.comb-breadcrumb a:hover { color: var(--color-primary); }

.comb-faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.comb-faq summary { cursor: pointer; font-weight: 600; }
.comb-faq summary::marker { color: var(--color-primary); }
.comb-faq p { margin: 10px 0 0; color: var(--color-muted); }

.comb-aviso {
  font-size: 0.85rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding: 18px 0 32px;
  max-width: 78ch;
}

.comb-estado { padding: 28px 0; color: var(--color-muted); }

/* Resultado da busca no hub: painel escuro tambem, para o visitante reconhecer
   que ali esta a mesma placa da pagina de cidade. */
.comb-resultado-painel {
  background:
    radial-gradient(120% 80% at 15% 0%, #1c3a32 0%, transparent 60%),
    var(--comb-noite);
  color: var(--comb-claro);
  border-radius: 14px;
  padding: 22px 22px 24px;
  margin: 24px 0 28px;
}
.comb-resultado-painel h2 { color: #fff; margin: 0 0 10px; font-size: 1.3rem; }
.comb-resultado-painel p { color: var(--comb-apagado); }
.comb-resultado-painel p strong { color: #fff; }

/* No celular a tabela de postos deixa de ser tabela: com 6 combustiveis, o
   preco — que e o motivo da visita — some para fora da tela e nao ha nem
   indicacao de que da para arrastar. Cada posto vira um cartao com o nome em
   cima e os precos embaixo, cada um carregando o proprio rotulo (data-label). */
@media (max-width: 760px) {
  .comb-tabela-wrap { overflow-x: visible; }
  .comb-tabela, .comb-tabela tbody, .comb-tabela tr, .comb-tabela td { display: block; width: 100%; }
  .comb-tabela thead { display: none; }
  .comb-tabela tr { position: relative; padding: 14px; border-bottom: 1px solid var(--color-border); }
  .comb-tabela td { border: 0; padding: 0; white-space: normal; }
  /* O espaco da bandeira e reservado so na linha do NOME (que e onde ela fica
     ancorada). Reservando na celula inteira, as linhas de baixo perdiam 78px a
     toa e a data da coleta nao cabia mais ao lado do botao de rota. */
  .comb-tabela .posto { min-width: 0; margin-bottom: 8px; }
  .comb-tabela .posto strong { padding-right: 78px; }
  /* No celular a celula do posto vira flex: nome e endereco ocupam a linha
     inteira, e a data da coleta divide a ultima linha com o botao de rota. Sem
     isso o botao come uma linha inteira antes dos precos, e sao os precos que a
     pessoa esta varrendo enquanto rola a lista. */
  .comb-tabela .posto { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
  .comb-tabela .posto strong,
  .comb-tabela .posto > span:not(.coleta) { flex: 0 0 100%; }
  .comb-tabela .posto .coleta { margin-top: 0; }
  /* Alvo de toque de 44px: com 36 o polegar erra. */
  .comb-tabela .comb-mapa {
    margin-top: 0;
    margin-left: auto;
    padding: 10px 16px;
    font-size: 0.82rem;
  }
  .comb-tabela .col-bandeira { position: absolute; top: 14px; right: 14px; width: auto; }
  /* Cada preco vira uma ficha com a faixa da cor do bico em cima — o mesmo
     codigo de cor do totem la do topo, para o combustivel ser reconhecido pela
     cor tambem aqui embaixo, onde a tabela ja nao tem cabecalho. */
  .comb-tabela td.preco {
    display: inline-block;
    width: auto;
    margin: 0 14px 6px 0;
    padding-top: 5px;
    border-top: 2px solid var(--bico, var(--color-border));
    font-size: 0.95rem;
  }
  .comb-tabela td[data-bico="gasolina"] { --bico: #e0a01f; }
  .comb-tabela td[data-bico="gasolina-aditivada"] { --bico: #dd5f16; }
  .comb-tabela td[data-bico="etanol"] { --bico: #16a34a; }
  .comb-tabela td[data-bico="diesel-s10"] { --bico: #2f8fce; }
  .comb-tabela td[data-bico="diesel"] { --bico: #7d8a84; }
  .comb-tabela td[data-bico="gnv"] { --bico: #6274e8; }
  .comb-tabela td.preco.vazio { display: none; }
  .comb-tabela td.preco::before {
    content: attr(data-label);
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .comb-tabela tr.barato .posto strong::after { margin-left: 6px; }
}

@media (max-width: 600px) {
  .comb-painel-topo { padding: 26px 0 24px; }
  .comb-card .valor { font-size: 1.5rem; }
  .comb-resultado-painel { padding: 18px 16px 20px; border-radius: 12px; }
}

/* Rotulo lido por leitor de tela sem ocupar espaco na tela — o campo de busca
   ja tem placeholder, mas placeholder nao e rotulo. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}