/* ==========================================================================
   KmCerto — design system (mobile-first, claro/escuro, safe areas)
   Identidade: verde de placa rodoviária + âmbar de painel.
   ========================================================================== */

:root {
  --cor-primaria: #0b6e4f;
  --cor-primaria-forte: #084f39;
  --cor-primaria-suave: #d9efe6;
  --cor-destaque: #f2b300;
  --cor-destaque-texto: #1b1f24;
  --cor-perigo: #c0392b;
  --cor-aviso: #d97706;
  --cor-ok: #0b6e4f;

  --cor-fundo: #f6f5f1;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #efede7;
  --cor-borda: #e2dfd7;
  --cor-texto: #1b1f24;
  --cor-texto-suave: #5d6570;
  --cor-texto-invertido: #ffffff;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
  --sombra-2: 0 6px 16px rgba(0, 0, 0, 0.12);

  --raio: 14px;
  --raio-pequeno: 8px;
  --espaco: 16px;
  --altura-topo: 60px;
  --altura-inferior: 64px;

  --fonte: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light dark;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--cor-primaria);
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 0.75rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
}

small {
  color: var(--cor-texto-suave);
}

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

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.conteudo {
  flex: 1;
  padding: var(--espaco) var(--espaco) calc(var(--altura-inferior) + var(--safe-bottom) + 24px);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- barra inferior ---------- */

/* ---------- seletor de veículo ---------- */

/* ---------- seções e cartões ---------- */

.titulo-pagina {
  font-size: 24px;
  margin-bottom: var(--espaco);
}

.secao {
  margin-bottom: 20px;
}

.selo {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- estado vazio ---------- */

/* ---------- grade de ações (tela Novo) ---------- */

/* ---------- menus e listas ---------- */

/* ---------- formulários ---------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  flex: 1;
}

.campo-linha {
  display: flex;
  gap: 12px;
}

.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.campo > input,
.campo > select,
.campo > textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: 16px;
}

.campo > input:focus,
.campo > select:focus,
.campo > textarea:focus {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 0;
  border-color: var(--cor-primaria);
}

.campo .invalid {
  border-color: var(--cor-perigo);
}

.validation-message {
  color: var(--cor-perigo);
  font-size: 13px;
}

/* ---------- utilitários ---------- */

.texto-suave {
  color: var(--cor-texto-suave);
}

.texto-centro {
  text-align: center;
}

/* ---------- Blazor: erro não tratado ---------- */

#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--altura-inferior) + var(--safe-bottom));
  z-index: 50;
  padding: 12px 16px;
  background: var(--cor-aviso);
  color: #fff;
  box-shadow: var(--sombra-2);
}

#blazor-error-ui .dismiss {
  position: absolute;
  right: 12px;
  top: 10px;
  cursor: pointer;
}

.blazor-error-boundary {
  background: var(--cor-perigo);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--raio);
}

/* ==========================================================================
   Fase 1 — componentes das telas de lançamento, lembretes, pneus,
   aditivos, oficinas, relatórios e calculadora flex
   ========================================================================== */

:root {
  --cor-aviso-suave: #fdf1df;
  --cor-perigo-suave: #fbe7e4;
  --cor-gasolina: #d9480f;
  --cor-roda: #4b5563;
}

/* ---------- utilitários ---------- */

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.texto-maiusculo {
  text-transform: uppercase;
}

.inativo {
  opacity: 0.6;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/* ---------- cabeçalhos ---------- */

.subtitulo-pagina {
  margin: -10px 0 var(--espaco);
  color: var(--cor-texto-suave);
}

.cabecalho-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--espaco);
}

.cabecalho-pagina .titulo-pagina {
  margin-bottom: 0;
}

.acoes-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--espaco);
}

.alerta {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio-pequeno);
  background: var(--cor-aviso-suave);
}

.alerta p:last-child {
  margin-bottom: 0;
}

.botao-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-primaria);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.botao-link:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 2px;
}

/* ---------- campos ---------- */

.campo__rotulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.campo__dica {
  display: block;
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

.campo__aviso {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-perigo);
}

p.campo__dica,
p.campo__aviso {
  margin-bottom: 12px;
}

.campo > textarea {
  min-height: 72px;
  padding: 10px 12px;
  resize: vertical;
}

.campo > input[type="checkbox"],
.campo > input[type="radio"] {
  width: auto;
  min-height: 0;
}

.campo-linha > .campo {
  min-width: 0;
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}

.opcao input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 1px 0 0;
  accent-color: var(--cor-primaria);
}

.opcao span {
  display: flex;
  flex-direction: column;
}

.opcao small {
  font-size: 13px;
}

.detalhes {
  margin: 0 0 14px;
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
}

.detalhes[open] {
  padding-bottom: 12px;
}

.detalhes summary {
  display: flex;
  align-items: center;
  min-height: 46px;
  color: var(--cor-primaria);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.detalhes summary::-webkit-details-marker {
  display: none;
}

.detalhes summary::before {
  content: "▸";
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.detalhes[open] summary::before {
  transform: rotate(90deg);
}

/* ---------- sim/não (o controle segmentado em si está na seção Syncfusion: .e-btn-group.segmentado) ---------- */

.sim-nao {
  margin-bottom: 14px;
}

.sim-nao__pergunta {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.filtro {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.filtro::-webkit-scrollbar {
  display: none;
}

.filtro .chip {
  flex-shrink: 0;
}

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

.selo {
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- cartões e listas ---------- */

/* ---------- aviso rápido (toast) ---------- */

@keyframes aviso-entrar {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - var(--safe-top) - 24px);
  padding-bottom: var(--safe-bottom);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--sombra-2);
  animation: modal-subir 0.2s ease-out;
}

@media (min-width: 640px) {

  .modal {
    max-height: 88vh;
    border-radius: 18px;
  }
}

@keyframes modal-subir {
  from {
    opacity: 0.6;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- lembretes ---------- */

.lembrete {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 4px solid var(--cor-borda);
}

/* ---------- linha do tempo ---------- */

/* ---------- serviço: itens e totais ---------- */

.totais {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.totais > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.explicacao-consumo {
  margin-bottom: 14px;
}

/* ---------- anexos ---------- */

.anexos__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.anexos__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0;
  overflow: hidden;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

.anexos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anexos__arquivo {
  font-size: 32px;
}

.anexos__remover {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.anexos__adicionar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 88px;
  height: 88px;
  padding: 4px;
  overflow: hidden;
  border: 2px dashed var(--cor-borda);
  border-radius: var(--raio-pequeno);
  color: var(--cor-primaria);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.anexos__adicionar span[aria-hidden="true"] {
  font-size: 24px;
}

.anexos__entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---------- pneus: carrinho, calibragem e resumo ---------- */

.carrinho {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto;
}

.calibragem {
  display: grid;
  grid-template-columns: 1fr minmax(90px, 130px) 1fr;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}

/* !important: o tema do Syncfusion pinta o fundo do .e-input-group com seletores mais específicos. */

/* ---------- aditivos ---------- */

/* ---------- oficinas ---------- */

.oficina {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.posicao {
  margin: 0 0 14px;
  padding: 10px 12px 2px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

.posicao legend {
  padding: 0 4px;
}

.fipe {
  display: flex;
  flex-direction: column;
}

/* ---------- importação ---------- */

.bloqueio-conteudo {
  display: contents;
}

.bloqueio {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  background: var(--cor-fundo);
  color: var(--cor-texto);
  text-align: center;
}

.exportar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

/* ---------- relatórios ---------- */

/* ---------- calculadora flex ---------- */

.campo__dica .botao-link {
  margin-left: 6px;
}

/* ---------- barras próprias (relatórios sem licença Syncfusion) ---------- */

/* Uma grade só para todas as linhas: as barras começam e terminam no mesmo lugar e ficam comparáveis. */
.barras {
  display: grid;
  grid-template-columns: minmax(48px, max-content) minmax(60px, 1fr) max-content;
  align-items: center;
  gap: 8px 10px;
  font-size: 14px;
}

/* O Blazor põe o foco no título a cada troca de tela (leitores de tela); o contorno não precisa aparecer. */
h1:focus {
  outline: none;
}

/* Valores do resumo numa linha só (R$ 2.333,52 não quebra no celular). */

/* Gráficos Syncfusion com a fonte do app (sem o tema CSS do Syncfusion, que buscaria a Roboto no Google). */

/* ==========================================================================
   Ícones (Font Awesome Pro Duotone Solid, SVG embutido)
   ========================================================================== */

.icone {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.15em;
  overflow: visible;
  --icone-primaria: currentColor;
  --icone-secundaria: currentColor;
  --icone-secundaria-opacidade: 0.4;
}

.icone--pequeno {
  font-size: 1em;
}

.icone--medio {
  font-size: 1.4em;
}

.icone--grande {
  font-size: 2em;
}

.icone--enorme {
  font-size: 3em;
}

.icone__primario {
  fill: var(--icone-primaria);
}

.icone__secundario {
  fill: var(--icone-secundaria);
  opacity: var(--icone-secundaria-opacidade);
}

/* Verde + âmbar: a dupla de cores do KmCerto. */
.icone--primaria {
  --icone-primaria: var(--cor-primaria);
  --icone-secundaria: var(--cor-destaque);
  --icone-secundaria-opacidade: 0.75;
}

.icone--destaque {
  --icone-primaria: var(--cor-destaque-texto);
  --icone-secundaria: var(--cor-destaque-texto);
}

.icone--mono {
  --icone-secundaria-opacidade: 1;
}

.icone--perigo {
  --icone-primaria: var(--cor-perigo);
  --icone-secundaria: var(--cor-perigo);
}

.icone--aviso {
  --icone-primaria: var(--cor-aviso);
  --icone-secundaria: var(--cor-destaque);
  --icone-secundaria-opacidade: 0.8;
}

.icone--suave {
  --icone-primaria: var(--cor-texto-suave);
  --icone-secundaria: var(--cor-texto-suave);
}

.lista-opcao .icone {
  --icone-primaria: var(--cor-primaria);
  --icone-secundaria: var(--cor-destaque);
  --icone-secundaria-opacidade: 0.8;
}

.lista-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lista-opcao small {
  margin-left: auto;
  font-size: 12px;
}

.chip .icone {
  margin-right: 6px;
}

.campo__dica .icone,
.campo__aviso .icone,
.texto-suave .icone,
.subtitulo-pagina .icone,
.alerta .icone,
.detalhes summary .icone,
.botao-link .icone {
  vertical-align: -0.2em;
  margin-right: 4px;
}

/* Âncora com a cara do SfButton (links que levam a outra tela). */

/* Caixa de busca com a lupa dentro */

/* ==========================================================================
   Syncfusion Material 3: cores do KmCerto, fonte do sistema e ajustes para o celular
   ========================================================================== */

:root {
  --e-font-family: var(--fonte);
  --color-sf-primary: 11, 110, 79;
  --color-sf-primary-container: 217, 239, 230;
  --color-sf-on-primary: 255, 255, 255;
  --color-sf-on-primary-container: 8, 79, 57;
  --color-sf-secondary: 93, 101, 112;
  --color-sf-secondary-container: 239, 237, 231;
  --color-sf-on-secondary-container: 27, 31, 36;
  --color-sf-tertiary: 160, 112, 0;
  --color-sf-tertiary-container: 255, 236, 179;
  --color-sf-surface: 255, 255, 255;
  --color-sf-surface-variant: 239, 237, 231;
  --color-sf-on-surface: 27, 31, 36;
  --color-sf-on-surface-variant: 93, 101, 112;
  --color-sf-outline: 160, 166, 174;
  --color-sf-outline-variant: 226, 223, 215;
  --color-sf-surface-tint-color: 11, 110, 79;
  --color-sf-error: 192, 57, 43;
  --color-sf-inverse-surface: 27, 31, 36;
  --color-sf-inverse-on-surface: 246, 245, 241;
  --color-sf-inverse-primary: 47, 191, 143;
}

/* Tema escuro escolhido em Configurações (o sistema pode estar no claro): as mesmas variáveis do bloco acima. */

/* Controles nativos (barras de rolagem, campos sem estilo) seguem o tema escolhido, não o do sistema. */

/* Campos de entrada: altura de toque, cantos e fundo iguais aos do app. */

.campo--segmentado .campo__rotulo {
  margin-bottom: 2px;
}

/* Listas suspensas abertas */

/* Controle segmentado (SfButtonGroup) */

/* Especificidade acima da regra de reset logo acima (que tem :not(:first-of-type):not(:last-of-type)). */

.segmentado.filtro {
  margin-bottom: 14px;
}

/* Chips (SfChip) */

/* O SfChip põe o texto antes do template (ícone): o CSS inverte a ordem. */

.campo.filtro {
  margin-bottom: 14px;
}

/* Botões (SfButton) */

/* Switch e checkbox */

/* Diálogo (SfDialog): painel de baixo para cima no celular, caixa no centro na tela larga. */

/* Excluir/Parar de avisar vai para a linha de baixo, sozinho: cabe no celular e fica longe do Salvar. */

/* Aviso rápido (SfToast) acima da barra inferior */

/* Calendário em tela cheia (FullScreen) com a fonte do app */

/* ---------- viagens por GPS ---------- */

@keyframes gravando-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.trajeto {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trajeto li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}

.trajeto small {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 12px;
}

/* mapa em SVG */

.mapa-viagem {
  position: relative;
  margin: 0 0 12px;
  aspect-ratio: 3 / 2; /* o mesmo tamanho para o SVG, para o aviso de "sem rota" e para o mapa com ruas por cima */
}

.mapa-viagem__svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--cor-borda);
}

/* Mapa com ruas (MapLibre): fica por cima do SVG, invisível até carregar; quando pronto o SVG some e o mapa ocupa o lugar. */
/* Seletor mais específico: o CSS do MapLibre carrega depois e define .maplibregl-map { position: relative }. */
.mapa-viagem .mapa-viagem__gl {
  position: absolute;
  inset: 0;
  visibility: hidden;
  border-radius: 12px;
  border: 1px solid var(--cor-borda);
  overflow: hidden;
  z-index: 1;
}

.mapa-viagem--gl .mapa-viagem__gl {
  visibility: visible;
}

.mapa-viagem--gl .mapa-viagem__svg {
  visibility: hidden;
}

/* Mapa online no tema escuro: o estilo do OpenFreeMap é claro, só escurece um pouco. */

.maplibregl-ctrl-attrib {
  font-size: 10px;
}

.mapa-viagem__fundo {
  fill: var(--cor-superficie-2);
}

.mapa-viagem__rota {
  fill: none;
  stroke: var(--cor-primaria);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mapa-viagem__inicio {
  fill: var(--cor-primaria);
  stroke: var(--cor-superficie);
  stroke-width: 2.5;
}

.mapa-viagem__fim {
  fill: var(--cor-destaque);
  stroke: var(--cor-superficie);
  stroke-width: 2.5;
}

.mapa-viagem__fim--ao-vivo {
  animation: gravando-pulso 1.4s ease-in-out infinite;
}

.mapa-viagem__evento {
  stroke: var(--cor-superficie);
  stroke-width: 1.5;
}

.mapa-viagem__evento--frenagem {
  fill: var(--cor-perigo);
}

.mapa-viagem__evento--aceleracao {
  fill: var(--cor-aviso);
}

.mapa-viagem__regua line {
  stroke: var(--cor-texto-suave);
  stroke-width: 2;
}

.mapa-viagem__regua text {
  fill: var(--cor-texto-suave);
  font-size: 12px;
  font-family: var(--fonte);
}

.mapa-viagem__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed var(--cor-borda);
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  text-align: center;
}

/* ---------- galeria de fotos e vídeos do carro ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

/* ---------- mapas offline ---------- */

.valor-negativo {
  color: var(--cor-perigo);
}

.semaforo {
  border-left: 6px solid var(--cor-borda);
}

/* ---------- computador de bordo (Fase 8): medidores e painel ao vivo ---------- */

.medidor {
  margin: 0;
  text-align: center;
}

.medidor svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- falhas do carro (catálogo em português) ---------- */

.falha {
  padding: 10px 0;
  border-top: 1px solid var(--cor-borda);
}

.falha:first-child {
  border-top: 0;
}

/* Seletor de posto do abastecimento (estado, município, busca, produto) */
.seletor-posto {
  margin-bottom: var(--espaco);
}

.seletor-posto .campo-linha > .campo {
  flex: 2 1 0;
  min-width: 0;
}

.seletor-posto .campo-linha > .campo:first-child {
  flex-grow: 3;
}

.postos-recentes {
  margin-bottom: 0;
}

.seletor-posto__acao {
  margin: 4px 0 var(--espaco);
  font-size: 14px;
}

.lista-postos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  margin: 8px 0 6px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.posto-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.posto-item:hover,
.posto-item:focus-visible {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  outline: none;
}

.posto-item__texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.posto-item__texto strong,
.posto-item__texto small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.posto-item__texto small {
  color: var(--cor-texto-suave);
  font-size: 13px;
}