/* Visse o Preço? — identidade provisória do logotipo "olho na etiqueta":
   turquesa, amarelo e tinta escura sobre fundo claro. */
:root {
  --bg: #F6FAFA;
  --surface: #FFFFFF;
  --line: #D9E6E7;
  --text: #10272A;
  --muted: #4A6366;
  --turquesa: #0E7C86;
  --turquesa-escuro: #0B6770;
  --turquesa-claro: #E1F3F4;
  --amarelo: #F5B700;
  --amarelo-claro: #FDF2D6;
  --amarelo-texto: #6E5100;
  --erro: #B42318;
  --erro-claro: #FEE4E2;
  --radius: 16px;
  --fonte: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--fonte); font-size: 16px; line-height: 1.4; }
a { color: var(--turquesa-escuro); }
h1, h2, p { margin: 0; }
.hidden { display: none !important; }

.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* Cabeçalho */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px 20px; padding-top: max(12px, env(safe-area-inset-top)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo__conta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--turquesa-claro);
  color: var(--turquesa-escuro); font-weight: 700; text-decoration: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo__conta.is-active { background: var(--turquesa); color: #FFFFFF; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 44px; }
.marca__icone { width: 30px; height: 44px; }
.marca__nome { font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }
.marca__destaque { color: var(--turquesa-escuro); }

/* Conteúdo */
.conteudo { flex: 1; padding: 16px 20px 112px; display: flex; flex-direction: column; gap: 16px; }
.titulo { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }
.secao { font-size: 18px; font-weight: 800; margin-top: 4px; }
.sub { color: var(--muted); font-size: 15px; }
.resumo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.resumo--centro { align-items: center; text-align: center; padding: 32px 0; gap: 14px; }
.texto { display: flex; flex-direction: column; gap: 10px; }
.lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rodape-dados { color: var(--muted); font-size: 13px; }

/* Formulários */
.formulario { display: flex; flex-direction: column; gap: 14px; }
.entrada { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.entrada:focus { outline: 3px solid var(--turquesa-claro); border-color: var(--turquesa); }
.entrada--codigo { font-size: 28px; font-weight: 800; letter-spacing: 8px; text-align: center; }
.marcar { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.marcar input { width: 22px; height: 22px; accent-color: var(--turquesa); }
.link-acao { align-self: center; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.aviso--ok { background: var(--turquesa-claro); color: var(--turquesa-escuro); }
.botao--pequeno { min-height: 40px; padding: 0 14px; font-size: 14px; background: var(--turquesa-claro); color: var(--turquesa-escuro); }
.botao--pequeno:hover { background: #CDEBED; color: var(--turquesa-escuro); }
.botao--largo { width: 100%; }
.aparelhos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aparelho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.aparelho__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filtro, .busca { display: flex; gap: 12px; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.campo__rotulo { font-size: 13px; font-weight: 700; color: var(--muted); }
select, input[type="search"] { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; }
select:focus, input:focus { outline: 3px solid var(--turquesa-claro); border-color: var(--turquesa); }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 0; background: var(--turquesa); color: #FFFFFF; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.botao:hover { background: var(--turquesa-escuro); color: #FFFFFF; }
.botao:disabled { opacity: 0.6; cursor: wait; }
.botao--secundario { background: var(--turquesa-claro); color: var(--turquesa-escuro); }
.botao--secundario:hover { background: #CDEBED; color: var(--turquesa-escuro); }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Abas de combustível */
.chips { position: relative; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.chip.is-active { background: var(--text); border-color: var(--text); color: #FFFFFF; }

/* Lista de preços */
.ofertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oferta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.oferta:hover { border-color: var(--turquesa); color: var(--text); }
.oferta--primeira { border: 2px solid var(--amarelo); }
.oferta__pos { font-weight: 800; color: var(--muted); min-width: 28px; }
.oferta--primeira .oferta__pos { color: var(--amarelo-texto); }
.oferta__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oferta__nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oferta__onde, .oferta__quando { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oferta__info .selo { align-self: flex-start; margin-top: 4px; }
.oferta__preco { font-size: 20px; font-weight: 800; white-space: nowrap; }

.selo { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--amarelo-claro); color: var(--amarelo-texto); white-space: nowrap; }
.selo--barato { background: var(--turquesa-claro); color: var(--turquesa-escuro); }

/* Ficha do posto */
.ficha { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bandeira { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--text); color: #FFFFFF; }
.precos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.preco { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.preco__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preco__info .selo { align-self: flex-start; margin-top: 4px; }
.preco__produto { font-weight: 700; }
.preco__valor { font-size: 20px; font-weight: 800; white-space: nowrap; }
.preco__quando { font-size: 13px; color: var(--muted); }
.preco__quando--antigo { color: var(--amarelo-texto); }
.preco__confirmado { font-size: 13px; font-weight: 700; color: var(--turquesa-escuro); }
.preco__acao { grid-column: 1 / -1; }
.preco--pendente { border-style: dashed; }
.botao--tracejado { width: 100%; background: var(--surface); color: var(--turquesa-escuro); border: 2px dashed var(--turquesa); }
.botao--tracejado:hover { background: var(--turquesa-claro); color: var(--turquesa-escuro); }
.entrada--preco { font-size: 24px; font-weight: 800; }
.link-acao--inicio { align-self: flex-start; }

/* Busca */
.sugestoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sugestao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; min-height: 48px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.sugestao:hover { border-color: var(--turquesa); color: var(--text); }
.sugestao__tipo { font-size: 12px; font-weight: 700; color: var(--turquesa-escuro); text-transform: uppercase; letter-spacing: 0.5px; }
.sugestao__nome { font-weight: 700; }
.sugestao__extra { width: 100%; font-size: 13px; color: var(--muted); }

/* Avisos e estados vazios */
.aviso { padding: 12px 14px; border-radius: 12px; font-size: 15px; }
.aviso--erro { background: var(--erro-claro); color: var(--erro); }
.aviso--simulado { background: var(--amarelo-claro); color: var(--amarelo-texto); font-size: 14px; }
.vazio { padding: 24px 16px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 6px; }
.erro__codigo { font-size: 48px; font-weight: 800; color: var(--turquesa); }

/* Navegação inferior */
.abas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; background: var(--surface);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.aba { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 56px;
  font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
.aba svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aba.is-active { color: var(--turquesa-escuro); }

/* Carregamento animado com o logo (etiqueta balançando, olho piscando e procurando) */
.carregando { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(246, 250, 250, 0.82); opacity: 0; transition: opacity 0.15s ease; }
.carregando[hidden] { display: none; }
.carregando.is-visivel { opacity: 1; }
.carregando__caixa { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.carregando__logo { width: 72px; height: 93px; overflow: visible; }
.carregando__texto { font-weight: 700; color: var(--turquesa-escuro); }

.anim-etiqueta { transform-box: view-box; transform-origin: 85px 4px; animation: balanco 1.4s ease-in-out infinite; }
.anim-olho { transform-box: fill-box; transform-origin: center; animation: piscar 2.8s ease-in-out infinite; }
.anim-iris { animation: procurar 2.8s ease-in-out infinite; }

@keyframes balanco { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes piscar { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.08); } }
@keyframes procurar { 0%, 15%, 100% { transform: translateX(0); } 25%, 38% { transform: translateX(-12px); } 58%, 72% { transform: translateX(12px); } 85% { transform: translateX(0); } }

/* Indicador pequeno no campo de busca (autocomplete) */
.buscando { width: 28px; height: 44px; flex: none; opacity: 0; transition: opacity 0.15s ease; }
.buscando svg { width: 28px; height: 42px; overflow: visible; }
.buscando.htmx-request { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .anim-etiqueta, .anim-olho, .anim-iris { animation: none; }
}

/* Painel admin */
.chips--admin { margin-bottom: 4px; }
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.numero { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text); text-decoration: none; }
.numero strong { font-size: 26px; font-weight: 800; }
.numero span { font-size: 13px; color: var(--muted); }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.tabela td:last-child { white-space: normal; min-width: 180px; }
.tabela th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.item--linha { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.item__acao { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.entrada--pequena { min-height: 40px; padding: 6px 10px; font-size: 14px; }
.botao--perigo { background: var(--erro-claro); color: var(--erro); }
.botao--perigo:hover { background: #FDD3CF; color: var(--erro); }
.perigo { color: var(--erro); }
.etiqueta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--text); }
.etiqueta--pendente { background: var(--amarelo-claro); color: var(--amarelo-texto); }
.etiqueta--publicado { background: var(--turquesa-claro); color: var(--turquesa-escuro); }
.etiqueta--rejeitado { background: var(--erro-claro); color: var(--erro); }