/* Visão do Campo — perguntas no mapa (manchas.js). Só existe para quem tem o recurso
   `perguntas_mapa`: todas as classes aqui são criadas por manchas.js (`mancha-*`, `manchas-*`, `mb-*`).
   Grade de 4/8; aviso é ícone + texto, sem caixa colorida; o TRACEJADO é só do contorno da mancha
   aberta, no mapa (desenhado pelo Leaflet), nunca de controle. */

/* ------------------------------------------------------------------ chips sobre o mapa */
.mancha-ancora { background: none; border: 0; }
.mancha-chip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center;
  min-height: 24px; padding: 2px 8px; border-radius: var(--r-s); font: 600 12px/16px var(--ui); white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,0.5); }
/* aberta: branco com borda escura, como um "?" que pede resposta */
.mancha-chip.aberta { background: #FFFFFF; color: #0E110F; border: 2px solid #0E110F; min-width: 24px; justify-content: center; }
/* respondida: vidro escuro com o nome */
.mancha-chip.respondida { background: rgba(14,17,15,0.88); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.6); }
.mancha-chip.melhora { background: var(--verde); border: 1.5px solid #FFFFFF; }
/* a pergunta SEM balão aberto: só o ícone de informação, pequeno, no lugar da mancha (dono,
   2026-09-28: "se eu clico para fechar, ele deve continuar apenas o ícone de info"). O ícone é SVG. */
.mancha-chip.mancha-info { min-width: 22px; min-height: 22px; width: 22px; height: 22px; padding: 0; justify-content: center;
  border-radius: 11px; background: #FFFFFF; color: #0E110F; border: 1.5px solid #0E110F; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.mancha-chip.mancha-info.melhora { background: var(--verde); color: #FFFFFF; border-color: #FFFFFF; }
.mancha-chip.mancha-info svg { display: block; }
/* o que já foi dito: a etiqueta discreta ("Estrada", "Praga · broca-do-café · 28/09"), abaixo dos ícones */
.mancha-chip.mancha-rotulo { min-height: 20px; padding: 1px 6px; border-radius: var(--r-s); background: rgba(14,17,15,0.7); color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.35); font: 500 12px/16px var(--ui); box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.mancha-chip.mancha-rotulo:hover { background: rgba(14,17,15,0.9); color: #FFFFFF; }
.mancha-chip.em-foco { outline: 3px solid var(--verde); outline-offset: 1px; }
.mancha-chip:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
@media (max-width: 900px) {
  /* alvo de dedo: 32 px de altura no chip, o "?" redondo de 36 (Celular.dc.html) */
  .mancha-chip { min-height: 32px; padding: 4px 10px; font-size: 12px; }
  .mancha-chip.aberta { min-width: 36px; min-height: 36px; border-radius: 18px; box-shadow: 0 0 0 4px rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.5); }
  /* o ícone segue pequeno, com o alvo do dedo em volta dele (a borda clara de 4 px conta) */
  .mancha-chip.mancha-info { width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 50%; padding: 0;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.28), 0 1px 4px rgba(0,0,0,0.5); }
  .mancha-chip.mancha-rotulo { min-height: 28px; padding: 4px 8px; font-size: 12px; }
  /* o desenho do ícone fica em 28 px; a área de acerto do dedo chega a 48 */
  .mancha-chip.mancha-info::after { content: ''; position: absolute; inset: -10px; }
}

/* ------------------------------------------------------------------ o aviso no topo do mapa
   Uma linha por pendência, no vidro escuro do painel; a linha inteira é o alvo do toque. */
.manchas-aviso { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.manchas-aviso[hidden] { display: none; }
.manchas-linha { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 4px 12px;
  border-radius: var(--r-s); background: var(--vidro); border: 1px solid var(--vidro-linha); color: rgba(240,242,237,0.92);
  font: 400 var(--t-body-m)/20px var(--ui); text-align: left; cursor: pointer; backdrop-filter: blur(8px); }
button.manchas-linha:hover { background: rgba(14,17,15,0.96); color: #FFFFFF; }
.manchas-linha.discreta { cursor: default; color: rgba(240,242,237,0.82); }
.manchas-linha.agenda { background: var(--verde); border-color: rgba(255,255,255,0.35); color: #FFFFFF; font-weight: 600; }
button.manchas-linha.agenda:hover { background: #185A3A; }
.manchas-linha svg { flex: 0 0 auto; }
.manchas-q { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; color: #0E110F;
  font: 700 12px/18px var(--ui); text-align: center; }
.manchas-q.melhora { background: var(--verde); color: #FFFFFF; }
.manchas-linha-acao { border: 0; border-radius: var(--r-s); background: none; color: #9FD3B0; font: 600 var(--t-body-m) var(--ui); cursor: pointer; padding: 0 12px; min-height: var(--alvo); }
.manchas-giro { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(240,242,237,0.3);
  border-top-color: rgba(240,242,237,0.9); animation: manchas-giro 0.9s linear infinite; }
@keyframes manchas-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .manchas-giro { animation: none; } }
@media (max-width: 900px) { .manchas-linha { min-height: 48px; width: 100%; } }

/* ------------------------------------------------------------------ o balão */
.manchas-balao { position: absolute; z-index: 560; width: 344px; max-width: calc(100% - 16px); box-sizing: border-box;
  padding: 8px 16px 16px; border-radius: 8px; background: var(--superficie); color: var(--tinta);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35); font-size: 14px; line-height: 20px; }
.mb-topo { display: flex; align-items: center; gap: 8px; min-height: 32px; }
/* o balão se arrasta (dono, 2026-09-29): a mão aberta sobre o que não é botão, a fechada enquanto
   puxa, e a alça de três pontinhos no topo. `touch-action: none` para o dedo puxar em vez de rolar. */
.manchas-balao:not(.no-celular) { cursor: grab; touch-action: none; }
.manchas-balao.no-celular .mb-topo { touch-action: none; }
.manchas-balao.arrastando, .manchas-balao.arrastando * { cursor: grabbing !important; user-select: none; }
.mb-alca { flex: none; display: inline-grid; grid-template-columns: repeat(3, 3px); gap: 3px; padding: 4px 2px; }
.mb-alca > span { width: 3px; height: 3px; border-radius: 50%; background: var(--linha-forte); }
.manchas-balao :is(input, textarea, select) { cursor: auto; }
.mb-voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 8px 0 0; border: 0; background: none;
  color: var(--tinta-2); font: 600 14px var(--ui); cursor: pointer; border-radius: var(--r-s); }
.mb-voltar:hover { color: var(--tinta); }
.mb-lugar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/16px var(--ui);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-3); }
.mb-pontos { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.mb-pontos > span { width: 6px; height: 6px; border-radius: 3px; background: var(--linha-forte); }
.mb-pontos > span.feito { background: var(--verde); }
.mb-pontos > span.atual { width: 16px; background: var(--tinta); }
.mb-fechar { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 16px; background: none; color: var(--tinta-2); cursor: pointer; }
.mb-fechar:hover { background: var(--superficie-2); color: var(--tinta); }
.mb-sobre { font: 500 12px/16px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-3); }
.mb-titulo { margin: 4px 0 0; font: 600 16px/24px var(--ui); }
.mb-titulo:focus { outline: none; }
.mb-sub { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--tinta-2); }

.mb-opcoes { display: grid; grid-template-columns: repeat(var(--col, 2), minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mb-opcao { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--m3-contorno, #8A938A);
  border-radius: 8px; background: var(--superficie); color: var(--tinta); font: 500 14px/16px var(--ui); text-align: left; cursor: pointer; }
.mb-opcao:hover:not(:disabled):not(.sel) { background: var(--superficie-2); }
.mb-opcao:disabled { cursor: progress; opacity: 0.6; }
/* o lado da escada que acabou (dono, 2026-09-29): desligado, não "esperando" */
.mb-opcao.bloq:disabled { cursor: not-allowed; opacity: 0.45; border-style: dashed; color: var(--tinta-3); background: none; }
.mb-opcao-txt { flex: 1 1 auto; min-width: 0; }
.mb-opcao.sel { border-color: transparent; background: var(--m3-selecionado, #D6EADC); color: var(--m3-sobre-selecionado, #0F3D26); font-weight: 600; }
/* a SUGESTÃO se destaca sem vir marcada: borda verde contínua e o rótulo "sugerido" — nunca o fundo do escolhido */
.mb-opcao.sug { border: 2px solid var(--verde); padding: 7px 11px; color: var(--verde); font-weight: 600; }
.mb-sugerido { flex: 0 0 auto; font: 600 12px/16px var(--ui); color: var(--verde); }
.mb-opcao:focus-visible, .mb-mudar:focus-visible, .mb-voltar:focus-visible, .mb-fechar:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
/* A pergunta de absorção de água: os fatos, o "Pode sinalizar…" e o já descartado, acima das opções */
.mb-contexto { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mb-fatos { margin: 0; font-size: 14px; line-height: 18px; color: var(--tinta); }
.mb-sinaliza { margin: 0; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.mb-descartado { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.mb-descartado-rot { font-weight: 600; }
.mb-descartado ul { margin: 0; padding-left: 16px; }
.mb-pergunta-das-opcoes { margin: 4px 0 0; font: 600 14px/20px var(--ui); color: var(--tinta); }
.manchas-balao.no-celular .mb-fatos { font-size: 14px; line-height: 20px; }
.manchas-balao.no-celular .mb-sinaliza, .manchas-balao.no-celular .mb-descartado { font-size: 14px; line-height: 18px; }
/* ------------------------------------------------------------------ a pergunta por PADRÃO (Material Design 3)
   Dono, 2026-09-29: as métricas do M3 (a identidade — IBM Plex, o verde — continua): grade de 4/8 px; título 22/28 no
   computador e 24/32 na folha do celular; fatos 14/20 e 16/24; etiquetas 12/16; botões de 40 de altura, raio 20,
   padding 24 e alvo de toque de 48 ("Já verifiquei" cheio, "Responder depois" contorno); no celular os dois no pé da
   folha, lado a lado, 8 de espaço e 16 de margem; lista do "O que era?" com linhas de 56, radio à direita e um divisor
   antes de "Nenhuma delas"/"Ainda não fui ver". Sóbrio: só as cores e a fonte do produto, nenhum ícone de brilho. */
.manchas-balao.padrao { width: 380px; padding: 8px 16px 0; border-radius: var(--r-m); }
.manchas-balao.padrao:not(.no-celular) { max-height: min(640px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain; }
.manchas-balao.padrao .mb-escopo { margin: 8px 0 0; font: 600 12px/16px var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-2); }
.manchas-balao.padrao .mb-titulo { margin: 4px 0 0; font: 600 22px/28px var(--ui); letter-spacing: -0.01em; }
.manchas-balao.padrao .mb-sub { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--tinta-2); }
.manchas-balao.padrao .mb-contexto { margin: 8px 0 0; gap: 12px; }
.mb-fatos-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; color: var(--tinta); }
.mb-como-caiu { margin: 0; align-self: flex-start; padding: 4px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie-2);
  font-size: 14px; line-height: 20px; color: var(--tinta); }
.mb-como-caiu b { font-weight: 600; }
.manchas-balao.padrao .mb-sinaliza { padding: 8px 12px; border-radius: 8px; background: var(--papel); font-size: 14px; line-height: 20px; color: var(--tinta); }
.manchas-balao.padrao .mb-descartado { font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.manchas-balao.padrao .mb-pergunta-das-opcoes { margin: 12px 0 0; font: 600 16px/24px var(--ui); }
.mb-registrado { border: 1px solid var(--linha); border-radius: 8px; }
.mb-registrado summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 12px; cursor: pointer;
  list-style: none; font: 600 14px/20px var(--ui); color: var(--tinta); }
.mb-registrado summary::-webkit-details-marker { display: none; }
.mb-registrado summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; }
.mb-registrado[open] summary::after { transform: rotate(225deg); }
.mb-registrado .mb-contexto { margin: 0; padding: 0 12px 12px; }
.mb-lista { margin: 8px 0 0; display: flex; flex-direction: column; }
.mb-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0;
  border-radius: 8px; background: none; color: var(--tinta); font: 400 16px/24px var(--ui); text-align: left; cursor: pointer; }
.mb-linha:hover:not(:disabled) { background: var(--superficie-2); }
.mb-linha:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.mb-linha:disabled { cursor: progress; opacity: 0.6; }
.mb-linha-txt { flex: 1 1 auto; min-width: 0; }
.mb-radio { flex: none; position: relative; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--m3-contorno, #8A938A); border-radius: 50%; }
.mb-linha.sel .mb-radio { border-color: var(--verde); }
.mb-linha.sel .mb-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--verde); }
.mb-lista-divisor { height: 1px; margin: 8px 16px; background: var(--linha); }
.mb-rodape-padrao { position: sticky; bottom: 0; margin: 16px -16px 0; padding: 12px 16px 16px; background: var(--superficie); border-top: 1px solid var(--linha); }
.mb-recomenda { margin: 0 0 12px; font: 600 14px/20px var(--ui); color: var(--tinta); }
.mb-botoes { display: flex; gap: 8px; }
.mb-botoes .m3-botao { position: relative; flex: 1 1 0; min-width: 0; min-height: 40px; height: 40px; padding: 0 24px; border-radius: var(--r-s); }
.mb-botoes .m3-botao::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }   /* o alvo de toque tem 48 */
.manchas-balao.padrao.no-celular { width: auto; padding: 8px 16px 0; border-radius: var(--r-m) var(--r-m) 0 0; }
.manchas-balao.padrao.no-celular .mb-titulo { font-size: 24px; line-height: 32px; }
.manchas-balao.padrao.no-celular .mb-sub,
.manchas-balao.padrao.no-celular .mb-fatos-lista, .manchas-balao.padrao.no-celular .mb-como-caiu,
.manchas-balao.padrao.no-celular .mb-sinaliza { font-size: 16px; line-height: 24px; }
.manchas-balao.padrao.no-celular .mb-descartado { font-size: 12px; line-height: 16px; }
.manchas-balao.padrao.no-celular .mb-rodape-padrao { margin: 16px -16px 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.mb-sug-nota { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.mb-sug-nota svg { flex: 0 0 auto; color: var(--verde); margin-top: 0; }
.mb-sug-nota b { color: var(--verde); font-weight: 600; }
.mb-apoio { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.mb-erro { color: var(--fogo); }

.mb-campo { position: relative; margin-top: 16px; }
.mb-rotulo { position: absolute; left: 8px; top: -8px; padding: 0 4px; background: var(--superficie); font: 400 12px/16px var(--ui); color: var(--tinta-2); }
.mb-campo:focus-within .mb-rotulo { color: var(--verde); }
.mb-entrada { display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px; border: 1px solid var(--m3-contorno, #8A938A);
  border-radius: var(--r-s); font: 400 16px/24px var(--ui); color: var(--tinta); background: var(--superficie); resize: vertical; }
.mb-entrada:focus { outline: none; border: 2px solid var(--verde); padding: 11px; }
.mb-acao-principal, .mb-salvar { width: 100%; margin-top: 12px; }
.mb-salvar:disabled { opacity: 0.7; cursor: progress; }

.mb-resumo { margin-top: 12px; border: 1px solid var(--linha); border-radius: 8px; }
.mb-resumo-linha { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 8px 12px; }
.mb-resumo-linha + .mb-resumo-linha { border-top: 1px solid var(--linha); }
.mb-resumo-rot { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.mb-resumo-val { font: 600 14px/16px var(--ui); overflow-wrap: anywhere; }
.mb-mudar { min-height: 32px; margin: -8px -4px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: none; color: var(--verde);
  font: 600 12px var(--ui); cursor: pointer; }
.mb-mudar:hover { background: var(--verde-claro); }
.mb-rodape { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--tinta-3); text-align: center; }
.mb-rodape.esq { text-align: left; }

/* ------------------------------------------------------------------ no celular a pergunta ocupa a folha
   (Cel-Pergunta-*.dc.html): acima das abas, opções de 48 px uma embaixo da outra. */
.manchas-balao.no-celular { position: absolute; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); top: auto;
  width: auto; max-width: none; max-height: min(620px, calc(100% - 132px)); overflow-y: auto; overscroll-behavior: contain; z-index: 680;
  border-radius: var(--r-m) var(--r-m) 0 0; padding: 8px 16px 24px; box-shadow: 0 -8px 28px rgba(0,0,0,0.3); }
.manchas-balao.no-celular::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto 4px; border-radius: 2px; background: var(--linha-forte); }
.manchas-balao.no-celular .mb-topo { min-height: 44px; }
.manchas-balao.no-celular .mb-voltar { min-height: 44px; font-size: 14px; }
.manchas-balao.no-celular .mb-fechar { flex-basis: 44px; width: 44px; height: 44px; border-radius: 22px; }
.manchas-balao.no-celular .mb-titulo { font-size: 18px; line-height: 24px; }
.manchas-balao.no-celular .mb-sub { font-size: 14px; line-height: 20px; }
.manchas-balao.no-celular .mb-opcoes { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.manchas-balao.no-celular .mb-opcao { min-height: 48px; padding: 12px 16px; font-size: 16px; line-height: 20px; }
.manchas-balao.no-celular .mb-opcao.sug { padding: 11px 15px; }
.manchas-balao.no-celular .mb-mudar { min-height: 40px; }
.manchas-balao.no-celular .mb-resumo-linha { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 12px; }
.manchas-balao.no-celular .mb-resumo-val { font-size: 14px; }

/* ------------------------------------------------------------------ em Ocorrências: a em andamento */
.manchas-andamento { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.manchas-andamento-tit { margin: 0; font: 600 12px/16px var(--ui) !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-3); }
.manchas-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--linha); border-radius: 8px; }
.manchas-card .m3-botao { align-self: flex-start; margin-top: 4px; }
.manchas-em-curso { font-size: 12px; font-weight: 600; color: var(--ambar); }
.manchas-voltando { margin: 0; font-size: 12px; font-weight: 500; color: var(--verde); }
/* "+ Nova ocorrência" → "Onde está?" (Seg-Ocorrencias.dc.html): três escolhas, uma embaixo da outra */
.manchas-onde-caixa { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; padding: 12px; border: 1px solid var(--linha); border-radius: 8px; }
.manchas-onde { display: flex; align-items: center; flex-wrap: wrap; column-gap: 4px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--m3-contorno, #8A938A);
  border-radius: 8px; background: var(--superficie); color: var(--tinta); font: 600 14px/16px var(--ui); text-align: left; cursor: pointer; }
.manchas-onde:hover:not(:disabled) { background: var(--superficie-2); }
.manchas-onde:disabled { cursor: default; color: var(--tinta-3); border-color: var(--linha); }
.manchas-onde:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.manchas-onde-nota { font-weight: 500; color: var(--tinta-3); }
@media (max-width: 900px) { .manchas-onde { min-height: 48px; font-size: 14px; } }

/* o adubo pelo catálogo, dentro do balão: nome e garantias numa opção */
.mb-achados .mb-opcoes { margin-top: 8px; }
.mb-opcao-txt small { display: block; margin-top: 2px; font: 400 12px/16px var(--ui); color: var(--tinta-2); }
.mb-opcao.sel .mb-opcao-txt small { color: inherit; }

/* "Ver foto deste ponto" (só no celular: no computador a lateral já mostra o ponto ao lado do balão) */
.mb-ver-ponto { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 12px 0 8px;
  border: 0; border-radius: 8px; background: none; color: var(--verde); font: 600 14px/20px var(--ui); cursor: pointer; }
.mb-ver-ponto:hover { background: var(--superficie-2); }
.mb-ver-ponto:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ------------------------------------------------------------------ "Editar no mapa"
   O link discreto na pergunta da marcação (em destaque, o botão de contorno de sempre); no modo de
   edição, os dois modos, o tamanho e Desfazer · Cancelar · Pronto. O mapa não arrasta com um dedo
   (é ele que marca): `touch-action: none` para o navegador não tomar o dedo para rolar. */
.mb-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 8px; padding: 0 4px; border: 0; background: none;
  color: var(--verde); font: 600 14px/16px var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--r-s); }
.mb-link:hover { color: var(--tinta); }
.mb-link:disabled { color: var(--tinta-3); cursor: progress; }
.mb-link:focus-visible, .mb-modo:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.mb-modos { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border: 1px solid var(--m3-contorno, #8A938A); border-radius: var(--r-s); overflow: hidden; }
.mb-modo { min-height: 36px; border: 0; background: var(--superficie); color: var(--tinta); font: 500 14px/16px var(--ui); cursor: pointer; }
.mb-modo + .mb-modo { border-left: 1px solid var(--m3-contorno, #8A938A); }
.mb-modo.sel { background: var(--m3-selecionado, #D6EADC); color: var(--m3-sobre-selecionado, #0F3D26); font-weight: 600; }
.mb-ed-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.leaflet-container.mancha-editando { touch-action: none !important; cursor: crosshair; }
.manchas-balao.no-celular.editando { max-height: none; padding-bottom: 16px; }
.manchas-balao.no-celular.editando .mb-titulo { font-size: 16px; }
.manchas-balao.no-celular.editando .mb-modo { min-height: 44px; font-size: 16px; }
.manchas-balao.no-celular .mb-link { min-height: 44px; font-size: 14px; }