/* Visão do Campo — o primeiro uso guiado e as dicas do mapa (onboarding.js).
   Os tokens são os de `estilo.css` (--r-s, --r-m, --e-*, --alvo, --t-*, --elev-*), a mesma política de formas do resto:
   raio pequeno em controle e cartão, médio no que cobre a tela. Sem degradê, sem emoji, sem borda lateral colorida;
   o que separa as coisas é linha e espaço. Uma coluna estreita, que se lê de cima para baixo, em qualquer largura. */

/* ---------------------------------------------------------- a tela cheia (passos 1 e 3) */
/* abaixo dos diálogos (2000: login que volta com a sessão vencida, "Pedir ajuda", o cadastro) e do sino (2900) */
.onb { position: fixed; inset: 0; z-index: 1900; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--papel); color: var(--tinta); font: 400 var(--t-title-m)/24px var(--ui); -webkit-font-smoothing: antialiased; }
.onb :focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.onb-topo { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  min-height: 64px; padding: 0 var(--e-6); background: var(--superficie); border-bottom: 1px solid var(--linha); }
.onb-topo-acoes { display: flex; align-items: center; gap: var(--e-2); }
.onb-corpo { flex: 1 0 auto; display: flex; justify-content: center; padding: var(--e-8) var(--e-6) 48px; }
.onb-coluna { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: var(--e-4); }

/* "Passo 1 de 3", com a barra de três segmentos */
.onb-passos { display: flex; flex-direction: column; gap: var(--e-2); }
.onb-passos-texto { font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.onb-passos-barra { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-1); }
.onb-passos-barra i { display: block; height: 4px; border-radius: var(--r-xs); background: var(--linha-forte); }
.onb-passos-barra i.feito { background: var(--verde); }

.onb-titulo { margin: 0; font: 600 28px/36px var(--ui); letter-spacing: -0.01em; color: var(--tinta); }
.onb-titulo:focus { outline: none; }
.onb-titulo:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }
.onb-subtitulo { margin: var(--e-2) 0 0; font: 600 var(--t-title-m)/24px var(--ui); }
.onb-texto-corrido { margin: 0; font: 400 var(--t-title-m)/24px var(--ui); color: var(--tinta-2); }
.onb-apoio { margin: 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
/* o que impede salvar (o limite do plano): a cor de erro no texto, sem caixa — padrão M3 do texto de apoio */
.onb-apoio.onb-apoio-erro { color: var(--erro); font-weight: 500; }
.onb-apoio.onb-apoio-zoom { color: var(--aviso); font-weight: 500; }
.onb-ok { display: flex; align-items: center; gap: var(--e-2); color: var(--sucesso); font-weight: 500; }

.onb-form { display: flex; flex-direction: column; gap: 0; }
.onb-form > .erro { margin-top: var(--e-4); }
.onb-opcional { margin-top: var(--e-4); }
.onb-opcional > summary { display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--e-2); margin-left: calc(-1 * var(--e-2));
  border-radius: var(--r-s); font: 500 var(--t-body-m)/20px var(--ui); color: var(--verde); cursor: pointer; list-style: none; }
.onb-opcional > summary::-webkit-details-marker { display: none; }
.onb-opcional > summary::before { content: ''; width: 8px; height: 8px; margin-right: var(--e-3); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
.onb-opcional[open] > summary::before { transform: rotate(45deg); }
.onb-opcional > summary:hover { background: var(--verde-claro); }
.onb-opcional .campo { margin-top: var(--e-2); }

.onb-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-6); }
.onb-primario, .onb-acao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--alvo-toque); padding: 0 var(--e-6); font: 600 var(--t-body-m)/20px var(--ui); }
.onb-primario svg, .onb-acao svg { flex: none; }
/* botão de texto: "Fazer depois", "Precisa de ajuda?", "Pular dicas" — discreto, mas com alvo de dedo inteiro */
.onb-texto { display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--e-3); border: 0; border-radius: var(--r-s); background: none;
  font: 500 var(--t-body-m)/20px var(--ui); color: var(--verde); cursor: pointer; }
.onb-texto:hover { background: var(--verde-claro); }
.onb-texto { white-space: nowrap; }
.onb-curto { display: none; }
/* no celular a barra de cima tem a marca e dois botões: "Precisa de ajuda?" vira "Ajuda" para os três caberem numa linha */
@media (max-width: 480px) { .onb-longo { display: none; } .onb-curto { display: inline; } .onb-topo-acoes { gap: 0; } }
.onb-acoes-3 { flex-direction: column; align-items: stretch; }
.onb-acoes-3 .onb-primario, .onb-acoes-3 .onb-acao { width: 100%; }
.onb-acoes-3 .onb-apoio { margin-top: var(--e-1); }

/* passo 3: a área e o andamento da leitura */
.onb-cartao-area { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); }
.onb-area-nome { margin: 0; font: 400 var(--t-title-m)/24px var(--ui); color: var(--tinta-2); }
.onb-area-nome b { color: var(--tinta); font-weight: 600; }
.onb-status { display: flex; flex-direction: column; gap: var(--e-2); }
.onb-status-titulo { display: flex; align-items: center; gap: var(--e-2); margin: 0; font: 500 var(--t-title-m)/24px var(--ui); }
.onb-status-titulo.chegou { color: var(--sucesso); }
.onb-andamento { height: 8px; border-radius: var(--r-xs); background: var(--cinza-claro); overflow: hidden; }
.onb-andamento i { display: block; height: 100%; min-width: 4px; background: var(--verde); transition: width 0.4s ease; }
.onb-giro { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cinza-claro); border-top-color: var(--verde); animation: onb-gira 0.9s linear infinite; }
@keyframes onb-gira { to { transform: rotate(360deg); } }
.onb-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--e-2); font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }

/* ---------------------------------------------------------- o passo 2, no mapa */
/* O MAPA FICA SÓ COM O QUE O DESENHO USA: a busca, o zoom, a propriedade e a conta. Indicador, comparação, data,
   filtro, legenda, imagem por área, os dois "criar", os hectares, o sino, a barra de ferramentas e o cartão de
   Primeiros passos saem enquanto a pessoa desenha a primeira área — são do mapa pintado, que ainda não existe. */
body.onb-desenho #painel-mapa > .painel-grupo,
body.onb-desenho .legenda-mapa, body.onb-desenho #alt-legenda-mapa,
body.onb-desenho .controle-imagem-satelite,
body.onb-desenho #btn-nova-area, body.onb-desenho #btn-nova-propriedade,
body.onb-desenho #hectares-propriedade,
body.onb-desenho #nt-sino,
body.onb-desenho #barra-ferramentas,
body.onb-desenho #ajuda-cartao,
body.onb-desenho #propriedade-vazia,
body.onb-desenho .perfil-grupo-criar { display: none !important; }

.onb-titulo-lateral { font-size: var(--t-headline-s); line-height: 28px; }
#titulo-area .onb-passos { padding-bottom: var(--e-1); }
/* "Passo 2 de 3" igual ao "Passo 1 de 3" da tela cheia: o #titulo-area da lateral é sobrancelha em mono e caixa alta,
   e o texto do passo herdava isso (revisão de design, rodada 2) */
#titulo-area .onb-passos-texto { font: 500 var(--t-body-m)/20px var(--ui); letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.onb-desenho-form { display: flex; flex-direction: column; gap: var(--e-4); max-width: 560px; padding-top: var(--e-2); }
.onb-desenho-form > .campo { margin-top: 0; }
.onb-achar { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.onb-local { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo-toque); }
.onb-como > summary { display: inline-flex; align-items: center; min-height: var(--alvo-toque); font: 500 var(--t-body-m)/20px var(--ui); color: var(--verde); cursor: pointer; }
.onb-como .aj-tut { margin: var(--e-2) 0 0; max-width: 360px; }
.onb-cantos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); padding: var(--e-3) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.onb-contagem { margin: 0; font: 400 var(--t-title-m)/24px var(--ui); font-variant-numeric: tabular-nums; }
.onb-ha { color: var(--tinta-2); }
.onb-cantos-botoes { display: flex; gap: var(--e-2); }
.onb-cantos-botoes .btn-mini { min-height: var(--alvo); }
.onb-desenho-form .onb-acoes { margin-top: 0; }

/* a barra de ação do desenho: os cantos, o nome com Salvar ao lado, o que falta e "Fazer depois" */
.onb-barra { display: flex; flex-direction: column; gap: var(--e-3); }
.onb-barra-nome { display: flex; align-items: flex-end; gap: var(--e-3); }
.onb-barra-nome .campo { flex: 1 1 auto; margin-top: 0; }
.onb-barra-nome .onb-primario { flex: none; }
.onb-barra .onb-acoes { margin-top: 0; }
.onb-barra-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); flex-wrap: wrap; }
.onb-barra-rodape .onb-apoio { flex: 1 1 200px; min-width: 0; }
.onb-local-barra { display: inline-flex; align-items: center; gap: var(--e-2); }
/* o aviso curto ("Propriedade criada.") sobe acima da barra fixa, em vez de cobrir o nome e o Salvar */
body.onb-com-barra #m3-snackbar { bottom: calc(var(--onb-barra, 210px) + 8px) !important; }
/* computador: GRUDADA no pé da lateral, que rola — o Salvar à vista mesmo com o tutorial aberto em 900 px de altura */
.onb-barra:not(.onb-barra-fixa) { position: sticky; bottom: 0; z-index: 2; margin: 0 -20px; padding: var(--e-3) 20px;
  background: var(--superficie); border-top: 1px solid var(--linha); }
/* celular e tablet: FIXA embaixo da tela, por cima da folha (650) e dos controles do mapa — o Salvar sempre à vista */
.onb-barra.onb-barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; gap: var(--e-2);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); background: var(--superficie);
  border-top: 1px solid var(--linha-forte); box-shadow: 0 -4px 16px rgba(14,17,15,0.18); font-family: var(--ui); }
.onb-barra.onb-barra-fixa .onb-cantos { padding: 0; border: 0; }
.onb-barra.onb-barra-fixa .campo label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.onb-barra.onb-barra-fixa .onb-apoio { font-size: var(--t-body-s); line-height: 16px; }
.onb-barra.onb-barra-fixa .onb-barra-rodape .onb-texto { min-height: var(--alvo-toque, 48px); padding: 0 var(--e-2); margin-right: calc(-1 * var(--e-2)); }
.onb-barra.onb-barra-fixa .erro { padding-top: var(--e-2); padding-bottom: var(--e-2); }
/* a folha e os controles do mapa sobem acima da barra: nada fica escondido embaixo dela */
body.onb-com-barra .sidebar-direita { padding-bottom: calc(var(--onb-barra, 210px) + 16px); }
body.onb-com-barra .leaflet-bottom { bottom: calc(var(--onb-barra, 210px) + 8px); }

/* O CADASTRO DE ÁREA É A LATERAL INTEIRA, com as margens de sempre, mesmo para quem tem Alterações: a regra da aba
   Alterações tira o padding do corpo, e um resto dela deixava o formulário colado nas bordas (QA, 2026-10-04) */
.sidebar-direita.editando-area .sidebar-corpo { padding: 0 20px 24px; }
.sidebar-direita.editando-area .sidebar-cabeca { display: block; }
@media (max-width: 900px) { .sidebar-direita.editando-area .sidebar-corpo { padding: 0 16px 24px; } }

/* "Continuar de onde parou": o botão que volta ao passo certo, no topo do cartão de Primeiros passos (ajuda.js) */
.aj-continuar { padding: var(--e-3) var(--e-4) var(--e-1); }
.aj-continuar .aj-botao { width: 100%; justify-content: center; }

/* ---------------------------------------------------------- as dicas do mapa */
body.onb-tour #ajuda-cartao { display: none !important; }
.onb-dica { position: fixed; z-index: 1950; width: min(320px, calc(100vw - 24px)); padding: var(--e-4); border-radius: var(--r-m);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--elev-3); font-family: var(--ui); }
.onb-dica :focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.onb-dica-conta { margin: 0; font: 500 var(--t-label-s)/16px var(--ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.onb-dica-titulo { margin: var(--e-1) 0 0; font: 600 var(--t-title-m)/24px var(--ui); }
.onb-dica-titulo:focus { outline: none; }
.onb-dica-texto { margin: var(--e-2) 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.onb-dica-acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); margin-top: var(--e-4); }
.onb-dica-acoes .onb-primario { padding: 0 var(--e-4); }
.onb-dica-destaque { position: fixed; z-index: 1940; border: 2px solid #FFFFFF; border-radius: var(--r-s); box-shadow: 0 0 0 4px rgba(30,107,69,0.85); pointer-events: none; }

/* ---------------------------------------------------------- celular e tablet */
@media (max-width: 700px) {
  .onb-topo { padding: 0 var(--e-4); min-height: 56px; }
  .onb-corpo { padding: var(--e-6) var(--e-4) var(--e-8); }
  .onb-titulo { font-size: 24px; line-height: 32px; }
  .onb-acoes:not(.onb-acoes-3) .onb-primario { flex: 1 1 100%; }
  .onb-desenho-form { gap: var(--e-3); }
  .onb-desenho-form .onb-acoes .onb-primario { flex: 1 1 auto; }
  .onb-como .aj-tut { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-giro { animation: none; border-top-color: var(--cinza-claro); border-color: var(--verde); }
  .onb-andamento i, .onb-opcional > summary::before { transition: none; }
}