/* Visão do Campo — "Primeiros passos" e o tutorial em loop. Os tokens são os de `estilo.css` (--r-s, --r-m,
   --r-full, --alvo, --t-*); o cartão mora em cima do mapa, no canto de baixo à esquerda, e no celular vira uma folha
   colada embaixo. Sem degradê, sem borda lateral colorida, sem emoji: o que separa as coisas é linha. */

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

.aj-cartao { --aj-contorno: #8A938A; --aj-verde-escuro: #17593A; --aj-sobre-verde: #0F3D26;
  position: absolute; left: 12px; bottom: 64px; z-index: 1100; display: flex; flex-direction: column; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 200px);
  overflow: hidden; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); color: var(--tinta);
  box-shadow: 0 2px 10px rgba(14, 17, 15, 0.22); font-family: var(--ui); }
.aj-cartao :focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.aj-cab { display: flex; align-items: center; flex: none; padding-right: 4px; }
.aj-cab-botao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 8px 8px 8px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-s) 0 0 0; }
.aj-cab-botao:hover { background: var(--cinza-claro); }
.aj-cab-botao svg { flex: none; color: var(--tinta-2); }
.aj-cab-texto { display: flex; flex-direction: column; min-width: 0; }
.aj-titulo { font: 600 var(--t-title-m)/24px var(--ui); }
.aj-progresso-texto { font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.aj-icone-botao { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinta-2); cursor: pointer; }
.aj-icone-botao:hover { background: var(--cinza-claro); color: var(--tinta); }

.aj-barra { flex: none; height: 4px; background: var(--cinza-claro); }
.aj-barra i { display: block; height: 100%; background: var(--verde); }

.aj-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.aj-corpo[hidden] { display: none; }
.aj-cartao.recolhido { max-height: none; }
.aj-cartao.recolhido .aj-barra { display: none; }

.aj-lista { margin: 0; padding: 0; list-style: none; }
.aj-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-top: 1px solid var(--linha); }
.aj-item:first-child { border-top: 0; }
.aj-marca { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 0; border-radius: 50%; border: 1.5px solid var(--aj-contorno); background: var(--superficie); color: var(--tinta-2); font: 600 12px/1 var(--mono); }
.aj-marca.feito { border-color: var(--verde); background: var(--verde); color: #fff; }
.aj-item-titulo { margin: 0; font: 600 var(--t-title-m)/24px var(--ui); }
.aj-item.feito .aj-item-titulo { color: var(--tinta-2); }
/* passo FEITO: o "Como fazer" vira botão de texto — três botões contornados de largura inteira para o que já foi feito
   pesavam mais que o próximo passo (revisão de design, rodada 2) */
.aj-item.feito .aj-botao-contorno { border-color: transparent; background: none; color: var(--verde); padding: 0 8px; margin-left: -8px; }
.aj-item.feito .aj-botao-contorno:hover { background: var(--cinza-claro); }
.aj-item.feito .aj-item-acoes .aj-botao { flex: 0 0 auto; }
.aj-item-resumo { margin: 2px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.aj-aviso { color: var(--ambar); font-weight: 500; }
.aj-item-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aj-todos { margin: 0; padding: 12px 16px; background: var(--verde-claro); color: var(--aj-sobre-verde); font: 500 var(--t-body-m)/20px var(--ui); }

.aj-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alvo); padding: 0 16px; border-radius: var(--r-s); font: 600 var(--t-body-m)/20px var(--ui); cursor: pointer; border: 1px solid var(--verde); }
.aj-botao-cheio { background: var(--verde); color: #fff; }
.aj-botao-cheio:hover { background: var(--aj-verde-escuro); border-color: var(--aj-verde-escuro); }
.aj-botao-contorno { background: transparent; color: var(--tinta); border-color: var(--aj-contorno); }
.aj-botao-contorno:hover { background: var(--cinza-claro); border-color: var(--tinta-2); }
.aj-botao:disabled { opacity: .55; cursor: default; }
.aj-botao-texto { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 12px 0 8px; border: 0; border-radius: var(--r-s); background: none; color: var(--verde); font: 600 var(--t-body-m)/20px var(--ui); cursor: pointer; }
.aj-botao-texto:hover { background: var(--cinza-claro); }

/* o "Como fazer" aberto */
.aj-detalhe-topo { display: flex; align-items: center; gap: 4px; padding: 4px 16px 0 4px; }
.aj-detalhe-titulo { margin: 0; font: 600 var(--t-title-m)/24px var(--ui); outline: none; }
.aj-tut { margin: 8px 16px 0; }
.aj-tut-palco { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-s); background: var(--cinza-claro); }
.aj-tut-midia { width: 100%; height: 100%; object-fit: contain; display: block; }
.aj-tut-midia[hidden] { display: none; }
.aj-tut-palco canvas.aj-tut-midia { grid-area: 1 / 1; }
.aj-tut-vazio { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--tinta-2); font: 500 var(--t-body-m)/20px var(--ui); }
.aj-tut-legenda { margin-top: 8px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.aj-tut-rodape { display: flex; margin: 0 0 0 -8px; }
.aj-tut-rodape:empty { display: none; }
.aj-passos { margin: 8px 0 0; padding: 0 16px 0 40px; font: 400 var(--t-body-m)/20px var(--ui); }
.aj-passos li { padding: 4px 0 4px 4px; }
.aj-passos li::marker { font-weight: 600; color: var(--tinta-2); }
.aj-detalhe-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; }
.aj-detalhe-acoes + .aj-aviso { margin: -4px 16px 16px; }

@media (max-width: 700px) {
  /* no celular o cartão é uma folha colada embaixo, de ponta a ponta */
  .aj-cartao { left: 0; right: 0; bottom: 0; width: auto; max-height: 78%; border-width: 1px 0 0; border-radius: var(--r-m) var(--r-m) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .aj-cab-botao { border-radius: var(--r-m) 0 0 0; }
  .aj-botao, .aj-botao-texto { min-height: 48px; }
  .aj-item-acoes .aj-botao { flex: 1 1 auto; }
}