/* estilo.css — Verde Premium (pt-BR) — Maringá */
:root{
  --green:#087f5b;--green-2:#05a66f;--green-light:#dff8ed;--green-border:#bfe6d8;
  --dark:#12352d;--text:#19332c;--muted:#5c6f69;--bg:#f3f7f5;--white:#fff;--line:#dce9e3;
  --yellow:#ffbd2e;--orange:#f27635;--blue:#2f80ed;--purple:#8d5bd5;--red:#df5361;
  --shadow:0 8px 24px #163c3210;
  --raio:12px;--raio-sm:8px;--raio-lg:14px;
  --largura:1120px;
  /* aliases para compatibilidade com painel admin */
  --primaria:#087f5b;--primaria-hover:#056b4b;--primaria-clara:#dff8ed;
  --premium:#ffbd2e;--premium-escuro:#6b4b00;--premium-clara:#fff3cd;
  --sucesso:#05a66f;--sucesso-clara:#dff8ed;
  --alerta:#ffbd2e;--alerta-clara:#fff3cd;
  --perigo:#df5361;--perigo-clara:#fff0f2;
  --fundo:#f3f7f5;--fundo-card:#fff;
  --texto:#19332c;--texto-suave:#5c6f69;--texto-claro:#6f8079;
  --borda:#dce9e3;--borda-forte:#b6dbce;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font:15px Arial,Helvetica,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
a{color:var(--green);text-decoration:none}a:hover{color:var(--green-2)}
img{max-width:100%;display:block}

/* Top bar */
.top-bar{background:var(--dark);color:#d9eee8;font-size:12px}
.top-bar .wrap{height:32px;display:flex;justify-content:space-between;align-items:center}
.top-bar b{color:#fff}.top-bar a{color:#a9d8cb}

/* Header */
.topo{background:#fff;border-bottom:1px solid var(--line)}
.topo__interno{height:68px;display:flex;align-items:center;justify-content:space-between}
.marca{display:flex;align-items:center;gap:9px;font-weight:900;font-size:20px;letter-spacing:-1px;color:var(--green)}
.marca__icone{width:36px;height:36px;border-radius:11px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.marca__icone img{width:100%;height:100%;object-fit:cover;display:block}
.marca__texto{font-size:20px}
.marca__sub{display:none}
.navegacao{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:13px;font-weight:bold}
.navegacao a{padding:0;color:var(--muted)}
.navegacao a:hover{color:var(--green)}
.navegacao a.ativo{color:var(--green)}
.btn{
  appearance:none;border:0;border-radius:var(--raio-sm);
  padding:12px 16px;font-weight:800;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:.18s;
}
.btn--primario{background:var(--green);color:#fff}.btn--primario:hover{background:#056b4b}
.btn--premium{background:var(--green);color:#fff}.btn--premium:hover{background:#056b4b}
.btn--fantasma{background:#fff;color:var(--green);border:1px solid var(--green-border)}
.btn--fantasma:hover{border-color:var(--green)}
.btn--suave{background:var(--green-light);color:var(--green);border:1px solid var(--green-border)}
.btn--ativo{background:var(--perigo-clara);color:#991b1b;border:1px solid #fecaca}
.btn--pequeno{padding:9px 13px;font-size:11px}
.btn--login{padding:9px 13px;border:1px solid var(--line);border-radius:var(--raio-sm);color:var(--green);background:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Layout */
.wrap{width:min(1120px,calc(100% - 28px));margin:auto}
.conteiner{width:min(1120px,calc(100% - 28px));margin-left:auto;margin-right:auto}
.secao{padding:31px 0 60px}
.cartao{background:#fff;border:1px solid var(--line);border-radius:var(--raio);box-shadow:var(--shadow)}

/* Hero VERDE */
.hero{
  background:linear-gradient(120deg,#e1f8ee,#effcf5 58%,#fff6d9);
  padding:43px 0 31px;border-bottom:1px solid #d2e9df;
}
.hero__grade{display:grid;grid-template-columns:1.25fr .75fr;gap:38px;align-items:center}
@media(max-width:850px){.hero__grade{grid-template-columns:1fr}.winner{max-width:520px}}
.hero__texto .tag{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.7px}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#18b879;box-shadow:0 0 0 4px #18b87922;vertical-align:middle}
.hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-3px;line-height:.98;margin:13px 0 12px;color:var(--dark)}
.hero h1 span,.hero .destaque{color:var(--green)}
.hero p{max-width:560px;margin:0;color:#55706a;font-size:16px;line-height:1.55}
.hero__acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:21px}
.hero-stat{display:flex;gap:20px;margin-top:20px;color:var(--muted);font-size:11px}
.hero-stat strong{display:block;color:var(--dark);font-size:18px}

/* Winner / Campeão */
.winner{background:#fff;border-radius:var(--raio-lg);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--green-border)}
.winner-title{background:var(--yellow);color:#6b4b00;padding:11px 15px;font-size:11px;font-weight:900;display:flex;justify-content:space-between;align-items:center;gap:10px}
.winner-title>span{display:inline-flex;align-items:center;gap:7px}
.winner-title .dot{width:7px;height:7px;background:#6b4b00;box-shadow:0 0 0 3px #6b4b0026}
.winner-body{padding:18px}
.winner .fuel{font-size:12px;font-weight:900;color:var(--green)}
.winner-price{font-size:43px;line-height:1;color:var(--green);font-weight:900;letter-spacing:-2px;margin:4px 0}
.winner-price small{font-size:15px;letter-spacing:0}
.winner h2{font-size:17px;margin:7px 0 2px}
.winner p{font-size:12px;color:var(--muted);margin:0}
.winner-meta{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.pill{padding:6px 8px;border-radius:99px;background:#f0f5f3;color:var(--muted);font-size:11px;font-weight:bold}
.pill--green{background:var(--green-light);color:#066e4e} /* verde um pouco mais escuro: garante 4.5:1 no texto de 11px */

/* Filtros */
.heading{display:flex;justify-content:space-between;gap:15px;align-items:end;margin-bottom:16px}
.heading h2{margin:0;font-size:27px;letter-spacing:-1.2px}
.heading p{margin:4px 0 0;color:var(--muted);font-size:13px}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:bold;font-size:11px}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--raio);padding:13px;box-shadow:var(--shadow)}
.filter-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-line+.filter-line{margin-top:12px}
.label{color:#4a5f59;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;min-width:80px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
/* Chip de combustivel.
   Antes: fundo branco sobre um card tambem branco, com borda #dce9e3 quase
   invisivel e texto cinza — nao lia como botao. E o estado ativo trocava de cor
   por tipo (laranja, roxo, chumbo, verde), brigando com o verde do sistema.
   Agora: superficie propria, texto escuro e UM acento verde. O tipo de
   combustivel continua sinalizado pelo icone, que ja vem do cadastro. */
.chip{
  padding:9px 14px;border:1px solid #c8ded5;border-radius:99px;
  background:#f4f9f7;color:var(--text);font-weight:600;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{background:#fff;border-color:var(--green);color:var(--green)}
.chip.active{
  color:#fff;border-color:transparent;background:var(--green);font-weight:700;
  box-shadow:0 2px 8px rgba(8,127,91,.22);
}
.chip.active:hover{background:#056b4b;color:#fff}
.search,.selecao{
  border:1px solid var(--line);border-radius:var(--raio-sm);
  padding:10px;background:#fcfefd;color:var(--text);outline:0;
}
.search{flex:1;min-width:200px}
.search:focus,.selecao:focus{border-color:var(--green);box-shadow:0 0 0 3px #087f5b18}
.campo{border:1px solid var(--line);border-radius:var(--raio-sm);padding:10px;background:#fcfefd;color:var(--text);outline:0;min-width:0}
.campo:focus{border-color:var(--green);box-shadow:0 0 0 3px #087f5b18}

/* Barra de ordenação */
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 11px}
.count{color:var(--muted);font-size:12px}.count b{color:var(--dark);font-size:14px}
.count__faixa{white-space:nowrap}
.sort{display:flex;gap:3px;background:#e6efeb;padding:3px;border-radius:var(--raio-sm)}
.sort button{border:0;background:transparent;padding:7px 10px;border-radius:6px;color:var(--muted);font-size:11px;font-weight:bold;cursor:pointer}
.sort button.active{background:#fff;color:var(--green);box-shadow:0 2px 5px #12352d12}

/* Cards VERDE */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:850px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--raio);
  padding:15px;min-height:285px;display:flex;flex-direction:column;transition:.18s;
  position:relative;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card--best{border:2px solid #8bd8bd;padding:14px}
.card-top{display:flex;gap:10px;align-items:center}
.card-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#fff0e5;color:var(--orange);font-size:19px;flex:0 0 40px}
.card h3{font-size:15px;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-address{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price-row{display:flex;justify-content:space-between;align-items:end;margin:19px 0 11px}
.card-price{font-size:29px;font-weight:900;letter-spacing:-1.5px;color:var(--green)}
.card-price small{font-size:13px;letter-spacing:0}
.fuel-name{font-size:10px;text-align:right;color:var(--cor-combustivel,var(--muted));font-weight:600}.fuel-name b{color:var(--text)}
.card hr{border:0;border-top:1px solid var(--line);margin:0}
.card-meta{display:flex;gap:5px;flex-wrap:wrap;margin:11px 0}
.service-list{min-height:29px;display:flex;gap:5px;flex-wrap:wrap}
.service{font-size:10px;font-weight:bold;color:var(--muted);background:#f2f6f4;border-radius:5px;padding:5px 6px}
.card-actions{display:flex;gap:6px;margin-top:auto;padding-top:13px}
.card-actions .btn{flex:1;padding:9px 10px;font-size:11px}
.fav{width:35px;border:1px solid var(--line);background:#fff;color:var(--green);border-radius:7px;font-size:17px;cursor:pointer;transition:.15s}
.fav.active{color:var(--red);background:#fff0f2}

/* Vazio */
.vazio{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--raio);background:#fff}

/* Paginação */
.paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:22px}
.paginacao__num,.paginacao__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 11px;
  border:1px solid var(--line);border-radius:var(--raio-sm);background:#fff;
  color:var(--text);font-size:13px;font-weight:bold;text-decoration:none
}
.paginacao__num:hover,.paginacao__btn:hover{border-color:var(--green);color:var(--green);background:var(--green-light)}
.paginacao__num--atual,.paginacao__num--atual:hover{background:var(--green);border-color:var(--green);color:#fff;cursor:default}
.paginacao__btn--inativo,.paginacao__btn--inativo:hover{opacity:.45;background:#fff;border-color:var(--line);color:var(--muted);cursor:not-allowed}
.paginacao__salto{padding:0 2px;color:var(--muted)}
.paginacao__ajuda{margin-top:9px;text-align:center;color:var(--muted);font-size:11px}
@media(max-width:520px){.paginacao__num,.paginacao__btn{min-width:32px;height:32px;padding:0 8px;font-size:12px}}

/* Economia */
.economy{display:flex;align-items:center;gap:15px;margin-top:26px;padding:16px;border-radius:var(--raio);background:linear-gradient(100deg,var(--green-light),#fff3cd);border:1px solid var(--green-border)}
.economy-icon{font-size:24px}
.economy h3{margin:0 0 3px;font-size:15px}
.economy p{margin:0;color:var(--muted);font-size:11px}
.economy-fields{display:flex;gap:6px;margin-left:auto}
.mini{width:72px;border:1px solid var(--green-border);background:#fff;border-radius:7px;padding:9px}
.eco-result{font-weight:900;color:var(--green);font-size:12px;white-space:nowrap}
@media(max-width:560px){.economy{align-items:start;flex-wrap:wrap}.economy-fields{margin-left:0;width:100%}.mini{flex:1;width:auto}.eco-result{width:100%}}

/* Formularios (admin/posto) */
.form{display:grid;gap:14px}
.form__linha{display:grid;gap:8px}
.form__rotulo{font-size:13px;font-weight:800;color:var(--text)}
.entrada{
  width:100%;border:1px solid var(--line);background:#fff;
  border-radius:var(--raio-sm);padding:12px 14px;font-size:14px;outline:none;transition:.15s
}
.entrada:focus{border-color:var(--green);box-shadow:0 0 0 3px #087f5b18}
.entrada--erro{border-color:#fecaca;box-shadow:0 0 0 3px #fee2e2}
.ajuda{font-size:12px;color:var(--muted)}
.grade-form{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.grade-form{grid-template-columns:1fr}}

/* Mensagens */
.mensagem{padding:12px 14px;border-radius:var(--raio-sm);border:1px solid var(--line);font-size:14px;font-weight:600}
.mensagem--sucesso{background:var(--sucesso-clara);border-color:#a7f3d0;color:#065f46}
.mensagem--erro{background:var(--perigo-clara);border-color:#fecaca;color:#7f1d1d}
.mensagem--info{background:var(--primaria-clara);border-color:#bae6fd;color:#0c4a6e}

/* Tabelas */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.tabela td{padding:12px;border-bottom:1px solid #f1f5f9;vertical-align:top}
/* Tabela que pode quebrar linha para caber no painel, em vez de empurrar a
   página para fora. Só a coluna de ações continua sem quebrar. */
.tabela--quebra td,.tabela--quebra th{white-space:normal}
.tabela--quebra .acoes{white-space:nowrap}
.col-email{overflow-wrap:anywhere;word-break:break-word} /* e-mail é um token só e não quebraria sozinho */
.tabela tr:hover td{background:#f8fafc}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.etiqueta{display:inline-flex;padding:4px 8px;border-radius:99px;font-size:12px;font-weight:800;border:1px solid var(--line);background:#fff}
.etiqueta--ativa{background:var(--sucesso-clara);border-color:#a7f3d0;color:#065f46}
.etiqueta--inativa{background:#f1f5f9;color:#64748b}

/* Paineis admin/posto */
.painel{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}
.painel .grade{min-width:0}
.painel .grade > *{min-width:0}
@media(max-width:900px){.painel{grid-template-columns:1fr}}
.menu-lateral{
  background:#fff;border:1px solid var(--line);border-radius:var(--raio);
  padding:10px;box-shadow:var(--shadow);align-self:start;position:sticky;top:74px
}
.menu-lateral a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--raio-sm);
  color:var(--muted);font-weight:700;font-size:14px
}
.menu-lateral a:hover{background:#f8fafc;color:var(--text)}
.menu-lateral a.ativo{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(8,127,91,.2)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:640px){.kpis{grid-template-columns:1fr}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--raio);padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--yellow))}
.kpi__valor{font-size:24px;font-weight:900;letter-spacing:-.03em}
.kpi__rotulo{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* Posto — atualizacao simples */
.preco-edicao{
  display:grid;grid-template-columns:1fr 160px 120px;gap:10px;align-items:end;
  padding:12px;border:1px solid var(--line);border-radius:var(--raio-sm);background:#fff
}
@media(max-width:640px){.preco-edicao{grid-template-columns:1fr}}
.rotulo{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.interruptor{display:inline-flex;align-items:center;gap:6px;background:#e6efeb;border-radius:var(--raio-sm);padding:3px}
.interruptor button{border:0;background:transparent;padding:7px 10px;border-radius:6px;color:var(--muted);font-size:11px;font-weight:bold;cursor:pointer}
.interruptor button.active{background:#fff;color:var(--green);box-shadow:0 2px 5px #12352d12}

/* Badge (compat) */
.badge{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.02em;border:1px solid transparent}
.badge--barato{background:var(--green-light);color:var(--green);border-color:var(--green-border)}
.badge--perto{background:var(--green-light);color:#065f46;border-color:#a7f3d0}
.badge--neutro{background:#f0f5f3;color:var(--muted);border-color:var(--line)}
.badge--premium{background:var(--green);color:#fff;border-color:var(--green)}

/* Rodape */
.rodape{background:var(--dark);color:#b6d2c9;padding:27px 0;font-size:11px}
.rodape .wrap{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;align-items:center}
.rodape .marca{color:#fff;font-size:11px}
.rodape .marca__icone{background:#fff;border:1px solid #1a4a3d;width:28px;height:28px;font-size:14px;border-radius:8px;overflow:hidden}
.rodape .marca__icone img{width:100%;height:100%;object-fit:cover;display:block}
.rodape .marca__texto{font-size:11px}
.rodape .marca__sub{display:none}

/* Grade auxiliar */
.grade{display:grid;gap:12px}
.grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grade--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grade--2,.grade--3{grid-template-columns:1fr}}

/* Complementos para painéis (cartao__corpo, divisor, note) */
.cartao__corpo{padding:18px}
.divisor{border-top:1px solid var(--line);margin:14px 0}
.note{padding:10px 12px;border:1px solid var(--green-border);border-radius:var(--raio-sm);background:#fff;font-size:13px}
.note strong{color:var(--green)}

/* ===========================================================================
   Utilitários e componentes — substituem o CSS inline que existia nos .php.
   Regra do projeto: nada de style="" no HTML; se precisar de um ajuste novo,
   crie a classe aqui.
   =========================================================================== */

/* Visibilidade */
.oculto{display:none!important}
.sr-apenas{ /* visível só para leitor de tela */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Espaçamento vertical */
.espaco-t-4{margin-top:4px}
.espaco-t-6{margin-top:6px}
.espaco-t-8{margin-top:8px}
.espaco-t-10{margin-top:10px}
.espaco-t-12{margin-top:12px}
.espaco-t-14{margin-top:14px}
.espaco-t-16{margin-top:16px}
.espaco-t-18{margin-top:18px}

/* Texto */
.txt-centro{text-align:center}
.txt-nowrap{white-space:nowrap}
.txt-negrito{font-weight:700}
.txt-forte{font-weight:800}
.txt-15{font-size:15px}
.txt-28{font-size:28px}

/* Layout */
.larg-total{width:100%}
.flex-preencher{flex:1;min-width:0}
.rolagem-x{overflow-x:auto}
.linha-acoes{display:flex;gap:8px;flex-wrap:wrap}
.linha-acoes--espalhada{justify-content:space-between;align-items:center}
.linha-inline{display:inline-flex;gap:4px;align-items:center}
.linha-topo{display:flex;gap:12px;flex-wrap:wrap;align-items:end;justify-content:space-between}
.conteiner--estreito{max-width:520px}
.conteiner--medio{max-width:720px}

/* Cartões e notas */
.cartao--suave{background:#f6faf8}
.cartao--linha{padding:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.note--destaque{background:var(--green-light);border-color:var(--green-border)}
.subtitulo-secao{font-size:16px;letter-spacing:-.02em}

/* Formulários */
.form__rotulo--mini{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.entrada--leitura{background:#f1f5f4;color:var(--texto)} /* campo só leitura (só admin altera) */
.entrada--tabela{width:110px;padding:4px 7px;font-size:12px}
.entrada--icone{width:42px;padding:4px 7px;font-size:12px;text-align:center}
.entrada--preco{width:100px;padding:4px 7px;font-size:12px}
.btn--mini{padding:4px 8px;font-size:10px}
.etiqueta--mini{padding:2px 6px;font-size:11px}

/* Colunas de tabela dos painéis */
.col-icone{width:36px}
.col-mini{width:46px;text-align:center}
.col-num{width:52px;text-align:center}
.col-preco{width:80px}
.col-data{width:110px}
.col-larga{width:120px}

/* Barra fixa "salvar" do painel do posto */
.barra-salvar{
  position:sticky;bottom:0;z-index:10;margin-top:16px;padding:12px;
  background:#f3f7f5f2;backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--raio-lg);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between
}

/* Check de serviços do posto (admin cadastra, posto só marca) */
.check-servico{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;
  background:#fff;border:1px solid var(--line)
}
.check-servico:hover{border-color:var(--green)}
.check-servico--ativo{background:var(--green-light);border-color:var(--green-border)}

/* Preço antigo demais para ser tratado como "de agora" */
.pill--alerta{background:var(--alerta-clara);color:#7a5200;border:1px solid #f5d78a}

/* Retorno da geolocalização (permissão negada, sem suporte, etc.) */
.status-localizacao{margin:8px 0 0;font-size:12px;color:var(--muted);min-height:1em}
.status-localizacao:empty{margin:0}
.status-localizacao--erro{color:#a13b47;font-weight:bold}

/* Acessibilidade: foco sempre visível, inclusive nos botões coloridos */
:focus-visible{outline:3px solid var(--green-2);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.chip:focus-visible,.fav:focus-visible,
.paginacao__num:focus-visible,.paginacao__btn:focus-visible{outline-offset:3px}

/* Seletor de posto — aparece só quando o mesmo dono tem dois ou mais postos */
.seletor-posto{padding:12px;border:1px solid var(--line);border-radius:var(--raio);background:#fff}
.seletor-posto__rotulo{display:block;font-size:12px;font-weight:bold;color:var(--muted);margin-bottom:9px}
.seletor-posto__lista{display:flex;gap:8px;flex-wrap:wrap}
.seletor-posto__item{
  display:flex;flex-direction:column;gap:3px;min-width:190px;
  padding:10px 13px;border:1px solid var(--line);border-radius:var(--raio-sm);
  background:#fff;color:var(--text);text-decoration:none
}
.seletor-posto__item:hover{border-color:var(--green);background:var(--green-light);color:var(--text)}
.seletor-posto__item strong{font-size:14px}
.seletor-posto__item .pill{align-self:flex-start;margin-top:3px}
.seletor-posto__item--atual,.seletor-posto__item--atual:hover{
  border-color:var(--green);border-width:2px;background:var(--green-light)
}
@media(max-width:520px){.seletor-posto__item{min-width:100%}}

/* ===========================================================================
   Gráfico de linha (histórico de preços) — SVG puro, sem biblioteca.
   Linha 2px, grade hairline SÓLIDA um passo fora do fundo, área a 10% de
   opacidade, marcador de 8px com anel de 2px na cor do fundo. Texto sempre em
   cor de texto: a identidade vem da linha, nunca de colorir a letra.
   =========================================================================== */
.grafico{margin:0}
.grafico__titulo{font-size:13px;font-weight:bold;color:var(--text);margin-bottom:8px}
.grafico__area{position:relative}
.grafico__svg{width:100%;height:auto;display:block;overflow:visible}

.grafico__grade{stroke:var(--line);stroke-width:1}      /* hairline, sólida */
.grafico__eixo{font:11px Arial,Helvetica,sans-serif;fill:var(--muted)}

.grafico__area-fill{fill:var(--green);fill-opacity:.10}  /* lavagem, não bloco */
.grafico__linha{
  fill:none;stroke:var(--green);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round
}
.grafico__ponta{fill:var(--green);stroke:#fff;stroke-width:2} /* anel de 2px no fundo */
.grafico__ponta-rotulo{font:bold 12px Arial,Helvetica,sans-serif;fill:var(--text)}

/* alvo de hover maior que o marcador, como manda a especificação de interação */
.grafico__alvo{fill:transparent;cursor:pointer}
.grafico__alvo:hover{fill:var(--green);fill-opacity:.15}

.grafico__dica{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--dark);color:#fff;border-radius:var(--raio-sm);
  padding:7px 10px;font-size:12px;line-height:1.45;
  box-shadow:0 6px 18px #163c3233;transform:translate(-50%,-115%);white-space:nowrap
}
.grafico__dica b{display:block;font-size:13px}
.grafico__dica span{color:#bfe6d8}

.grafico__tabela{margin-top:10px}
.grafico__tabela summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:bold}
.grafico__tabela summary:hover{color:var(--green)}
.grafico__tabela table{margin-top:8px}

.grafico-vazio{
  padding:22px;text-align:center;background:#fff;
  border:1px dashed var(--line);border-radius:var(--raio)
}
.grafico-vazio__valor{font-size:30px;font-weight:900;color:var(--green);letter-spacing:-1px}

/* ===========================================================================
   Refinamento visual da experiência pública
   =========================================================================== */
:root{
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sombra-flutuante:0 16px 40px rgba(18,53,45,.12);
}
body{font-family:var(--font-ui);font-size:16px}
.pular-conteudo{position:fixed;left:16px;top:-56px;z-index:100;color:#fff;background:var(--dark);padding:10px 14px;border-radius:8px;font-weight:800}
.pular-conteudo:focus{top:12px;color:#fff}
.btn{min-height:44px;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.hero{background:linear-gradient(135deg,#e8f7ef 0%,#f7fcf9 52%,#fff8e7 100%);padding:58px 0 46px}
.hero h1{max-width:660px;letter-spacing:-.055em;line-height:1.02}
.hero p{max-width:530px;color:#46635a;font-size:17px}
.btn--hero{box-shadow:0 8px 18px rgba(8,127,91,.2)}
.hero-stat{gap:0;margin-top:28px}
.hero-stat>div{padding:0 20px;border-left:1px solid var(--green-border)}
.hero-stat>div:first-child{padding-left:0;border-left:0}
.hero-stat strong{font-variant-numeric:tabular-nums;font-size:20px}
.winner{border:0;box-shadow:var(--sombra-flutuante);border-radius:18px}
.winner-title{padding:12px 18px;background:#f7bf3b;color:#503900;letter-spacing:.05em}
.winner-title__principal{letter-spacing:.07em}
.winner-body{padding:24px}
.winner-price{font-size:52px;font-variant-numeric:tabular-nums;margin:6px 0 10px}
.winner h2{font-size:19px}
.winner-meta{margin:18px 0}
.btn--rota{font-size:14px;box-shadow:0 8px 16px rgba(8,127,91,.18)}
.heading h2{font-size:30px;letter-spacing:-.045em}
.filters{padding:18px;box-shadow:0 4px 14px rgba(18,53,45,.05)}
.chip{min-height:40px;padding:9px 15px}
.search,.selecao{min-height:44px;font-size:16px}
.bar{margin:22px 0 14px}
.sort{padding:4px;border-radius:10px}.sort button{min-height:36px;padding:8px 12px}
.cards{gap:16px}
.card{min-height:0;padding:18px;border-radius:14px;box-shadow:0 2px 8px rgba(18,53,45,.03)}
.card:hover{box-shadow:0 12px 24px rgba(18,53,45,.09)}
.card--best{border-color:#62c9a5;box-shadow:0 10px 24px rgba(8,127,91,.10)}
/* O icone e o nome do combustivel acompanham a cor cadastrada em
   admin/combustiveis.php. A reserva e o verde do sistema, entao pagina
   sem combustivel selecionado (admin, login) continua identica. */
.card-icon{
  background:var(--cor-combustivel-clara,var(--green-light));
  color:var(--cor-combustivel,var(--green));
}
.card-icon{width:44px;height:44px;flex-basis:44px;border-radius:12px}
.card h3{font-size:16px}.card-address{font-size:12px}
.price-row{margin:22px 0 13px}.card-price{font-size:32px;font-variant-numeric:tabular-nums}
.fuel-name{font-size:11px;max-width:42%}
.pill{padding:6px 9px;font-size:11px}.service-list{min-height:28px}.service{padding:5px 7px}
.service--mais{color:var(--green);background:var(--green-light)}
.card-actions{padding-top:16px}.card-actions .btn{min-height:42px;font-size:12px}.fav{width:44px;min-height:42px;border-radius:9px}
@media (max-width:700px){
  .top-bar{display:none}.topo__interno{height:auto;min-height:62px;padding:10px 0;align-items:flex-start}.marca{font-size:18px}.marca__texto{font-size:18px}
  .navegacao{gap:12px;justify-content:flex-end;flex-wrap:wrap;font-size:12px}.navegacao a:not(.btn){padding-top:7px}
  .hero{padding:38px 0 32px}.hero h1{font-size:clamp(36px,10vw,48px)}.hero p{font-size:16px}.hero__acoes{display:grid;grid-template-columns:1fr}.hero__acoes .btn{width:100%}
  .hero-stat{justify-content:space-between}.hero-stat>div{padding:0 10px}.hero-stat>div:first-child{padding-left:0}
  .winner-body{padding:20px}.winner-price{font-size:46px}.heading{align-items:flex-start;flex-direction:column}.heading h2{font-size:27px}
  .filters{padding:14px}.filter-line{align-items:stretch}.label{min-width:100%;margin-bottom:1px}.search{min-width:0;flex-basis:100%}.selecao{flex:1}.filter-line .btn{flex:1}
  .bar{align-items:stretch;flex-direction:column}.count__faixa{white-space:normal}.sort{width:100%}.sort button{flex:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Primeira dobra: deixa a pessoa comparar e agir antes de abrir a lista inteira. */
.hero__decisao{width:min(100%,900px);margin:26px auto 0;padding-top:20px;border-top:1px solid var(--green-border)}
.hero__decisao-cabecalho{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:10px}
.hero__decisao h2{font-size:17px;letter-spacing:-.02em;color:var(--dark)}
.hero__ver-todos{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;font-weight:800}
.hero__atalhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.atalho{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:center;padding:14px 15px;background:rgba(255,255,255,.9);border:1px solid var(--green-border);border-radius:12px}
.atalho__tipo{grid-column:1/-1;color:var(--green);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.atalho strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--dark)}
.atalho>span:not(.atalho__tipo){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}
.atalho a,.atalho button{justify-self:end;grid-row:2/4;grid-column:2;align-self:center;border:0;background:transparent;color:var(--green);font:inherit;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap}
.atalho a:hover,.atalho button:hover{text-decoration:underline}
.atalho--gps{border-style:dashed;background:transparent}
@media (min-width:851px){.hero{padding-top:38px;padding-bottom:28px}.hero h1{font-size:clamp(34px,4.3vw,48px)}.hero__acoes{margin-top:16px}.hero-stat{margin-top:18px}.winner-body{padding:20px}.winner-price{font-size:46px}}
@media (max-width:700px){.hero__decisao{margin-top:20px;padding-top:16px}.hero__decisao-cabecalho{align-items:start;flex-direction:column;gap:3px}.hero__ver-todos{min-height:36px}.hero__atalhos{grid-template-columns:1fr}.atalho{min-height:104px}.atalho strong{font-size:15px}}

/* KPIs do histórico */
.kpi-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi-caixa{background:#fff;border:1px solid var(--line);border-radius:var(--raio);padding:13px 15px}
.kpi-caixa__rotulo{font-size:11px;color:var(--muted);font-weight:bold;text-transform:uppercase;letter-spacing:.06em}
.kpi-caixa__valor{font-size:24px;font-weight:900;color:var(--dark);letter-spacing:-1px;margin-top:3px}
.kpi-caixa__nota{font-size:11px;color:var(--muted);margin-top:2px}
.variacao--sobe{color:#a13b47;font-weight:bold}
.variacao--desce{color:#066e4e;font-weight:bold}
.variacao--igual{color:var(--muted);font-weight:bold}

/* Refatoração da página pública: menos introdução, mais comparação. */
.hero{padding:30px 0 24px;background:linear-gradient(135deg,#e8f7ef 0%,#f8fcfa 60%,#fff8e7 100%)}
.hero__grade{grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);gap:28px}
.hero h1{font-size:clamp(32px,4.2vw,46px);margin:9px 0 10px;letter-spacing:-.06em}
.hero p{font-size:15px;max-width:500px}
.hero__acoes{margin-top:16px}
.hero-stat{margin-top:17px}
.winner{border-radius:16px;box-shadow:0 10px 26px rgba(18,53,45,.1)}
.winner-title{padding:10px 15px}
.winner-body{padding:16px 18px}
.winner-price{font-size:42px;margin:3px 0 7px}
.winner-meta{margin:11px 0}
.secao{padding-top:26px}
.heading{margin-bottom:12px}
.heading h2{font-size:26px}
.filters{padding:14px}
.bar{margin:15px 0 10px}
@media(max-width:850px){
  .hero{padding:27px 0 22px}
  .hero__grade{grid-template-columns:1fr;gap:18px}
  .winner{max-width:none}
}
@media(max-width:560px){
  .hero h1{font-size:36px;line-height:1.01}
  .hero p{font-size:15px}
  .hero__acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero__acoes .btn{width:100%;padding-left:10px;padding-right:10px}
  .hero-stat{justify-content:space-between;gap:0}
  .hero-stat>div{padding:0 9px}
  .winner-price{font-size:38px}
  .winner-body{padding:15px}
  .secao{padding-top:22px}
  .heading h2{font-size:24px}
}

/* Bandeira do posto (Ipiranga, Shell, Branca...) — a marca, nao o nome.
   Discreta de proposito: e um dado de apoio, nunca compete com o preco. */
.bandeira{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;
  background:#eef4f1;color:#3f5b52;font-size:11px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.6}
.winner .bandeira{background:rgba(255,255,255,.16);color:#eaf5f0}

/* "Etanol ou gasolina?" — a pergunta classica do motorista brasileiro.
   O veredito e grande, mas os dois precos ficam do lado: ninguem decide
   confiando so no rotulo, e a regra dos 70% e referencia, nao lei. */
.comparador{margin-top:22px;background:#fff;border:1px solid var(--linha);
  border-radius:16px;padding:20px;box-shadow:0 6px 18px rgba(18,53,45,.05)}
.comparador__cabecalho h3{font-size:20px;margin:0 0 4px}
.comparador__grade{display:grid;grid-template-columns:minmax(200px,260px) 1fr;
  gap:20px;align-items:start;margin-top:16px}
.comparador__veredito{border-radius:14px;padding:18px;text-align:center;color:#fff}
.comparador__veredito--etanol{background:linear-gradient(160deg,#087f5b,#12352d)}
.comparador__veredito--gasolina{background:linear-gradient(160deg,#b45309,#7c2d12)}
.comparador__proporcao{font-size:46px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.comparador__proporcao span{font-size:24px;font-weight:700;margin-left:2px}
.comparador__rotulo{font-size:12px;opacity:.85;margin-top:4px}
.comparador__resposta{margin-top:10px;font-size:15px;line-height:1.35}
.comparador__par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.comparador__preco{background:var(--fundo);border:1px solid var(--linha);
  border-radius:12px;padding:12px 14px}
.comparador__preco-rotulo{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.comparador__preco b{font-size:22px;font-variant-numeric:tabular-nums}
.comparador__frase{margin:12px 0 0;font-size:14px;line-height:1.5}
@media(max-width:760px){
  .comparador{padding:16px}
  .comparador__grade{grid-template-columns:1fr;gap:16px}
  .comparador__proporcao{font-size:40px}
}

/* "De onde vêm estes preços" — a origem do dado, escrita.
   O aviso de valor de referência sai sozinho quando config/cidade.php
   marcar 'precos_de_referencia' => false. */
.procedencia{margin-top:22px;background:#fff;border:1px solid var(--linha);
  border-radius:16px;padding:20px}
.procedencia h3{font-size:20px;margin:0 0 12px}
.procedencia__aviso{background:#fff8e6;border-left:3px solid #b45309;color:#5a3a12;
  border-radius:8px;padding:12px 14px;margin:0 0 14px;font-size:14px;line-height:1.55}
.procedencia__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.procedencia__item{background:var(--fundo);border:1px solid var(--linha);
  border-radius:12px;padding:12px 14px}
.procedencia__num{display:block;font-size:26px;font-weight:800;color:var(--verde);
  font-variant-numeric:tabular-nums;line-height:1.1}
.procedencia__txt{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.procedencia__lista{margin:0;padding-left:18px}
.procedencia__lista li{font-size:14px;line-height:1.6;margin-bottom:5px}
@media(max-width:760px){
  .procedencia{padding:16px}
  .procedencia__grade{grid-template-columns:1fr}
}

/* Perguntas frequentes — <details> nativo: abre e fecha sem uma linha de JS,
   e continua legível se o JS falhar. */
.faq{display:grid;gap:10px}
.faq__item{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:0}
.faq__pergunta{cursor:pointer;padding:15px 18px;font-weight:700;font-size:15px;
  line-height:1.45;list-style:none;display:flex;gap:10px;align-items:flex-start}
.faq__pergunta::-webkit-details-marker{display:none}
.faq__pergunta::before{content:"+";color:var(--verde);font-size:19px;line-height:1.15;flex:none}
.faq__item[open] .faq__pergunta::before{content:"–"}
.faq__item[open] .faq__pergunta{padding-bottom:6px}
.faq__resposta{margin:0;padding:0 18px 16px 40px;font-size:14px;line-height:1.65;color:var(--texto)}
.faq__acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media(max-width:560px){
  .faq__resposta{padding-left:18px}
}

/* Campo de cor do cadastro de combustivel. O input nativo vem com moldura
   grossa em alguns navegadores; aqui ele fica do tamanho de um botao. */
.entrada--cor{width:46px;height:34px;padding:2px;border:1px solid var(--linha);
  border-radius:8px;background:#fff;cursor:pointer;vertical-align:middle}
.entrada--cor::-webkit-color-swatch-wrapper{padding:0}
.entrada--cor::-webkit-color-swatch{border:0;border-radius:5px}
.entrada--cor::-moz-color-swatch{border:0;border-radius:5px}
.txt-alerta{color:#a5370a;font-weight:700}


/* Botões dos cards seguem a cor do combustível selecionado.
   O verde continua sendo a reserva, então tela sem combustível não muda. */
.card .btn--primario,
.winner .btn--primario{background:var(--cor-combustivel,var(--green));color:var(--cor-combustivel-texto,#fff)}
.card .btn--primario:hover,
.winner .btn--primario:hover{background:var(--cor-combustivel-hover,#056b4b);color:var(--cor-combustivel-texto,#fff)}
.card .btn--fantasma:hover{border-color:var(--cor-combustivel,var(--green));color:var(--cor-combustivel,var(--green))}
/* a sombra do botão de rota era verde fixa e destoava de qualquer outra cor */
.winner .btn--rota{box-shadow:0 8px 16px rgba(18,53,45,.16)}

/* Selo da bandeira no ícone do card: cor da marca + sigla.
   NÃO é o logotipo — reproduzir a arte de marca registrada é outra conversa,
   e imagem de fora nem entraria (a CSP só aceita img da própria origem).
   As cores vêm de config/cores.php e todas foram medidas em 4,5:1 ou mais.
   `.card-icon--marca` precisa vencer a regra do ícone que usa a cor do
   combustível, por isso repete a classe (especificidade). */
.card-icon.card-icon--marca{
  font-size:14px;font-weight:800;letter-spacing:.01em;
  font-family:Arial,Helvetica,sans-serif;
}
.card-icon.card-icon--marca-3{font-size:11px;letter-spacing:0}

/* Prévia da cor no cadastro de combustível: mostra o botão como ele fica no
   site, em vez de deixar só um número de contraste que ninguém sabe ler. */
.previa-cor{display:flex;flex-direction:column;gap:4px;align-items:flex-start;margin-top:6px}
.previa-cor__amostra{cursor:default;pointer-events:none;font-size:12px;padding:6px 11px;min-height:0}