/* Visão do Campo — a barra de ferramentas e os componentes Material 3 adaptados à marca.
   TUDO AQUI MORA SOB `.com-ferramentas` ou em classes que só as ferramentas criam (`m3-*`, `bf-*`):
   quem não tem recurso nenhum não recebe a classe nem os nós, e nenhum pixel da tela dele muda.
   Grade de 4/8: todo espaçamento é múltiplo de 4. Tipografia 12/14/16. */

.com-ferramentas {
  --m3-contorno: #8A938A; --m3-selecionado: #D6EADC; --m3-sobre-selecionado: #0F3D26;
  --m3-snack: #2E3430; --m3-snack-acao: #9FD3B0;
}

/* ------------------------------------------------------------------ a barra (78 px) */
.barra-ferramentas { width: 80px; flex: 0 0 80px; background: var(--superficie); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 6px; overflow-y: auto; z-index: 2; }
.bf-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 8px 4px;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--tinta-2); cursor: pointer;
  font: 500 12px/1.2 var(--ui); text-align: center; }
.bf-item:hover { background: var(--superficie-2); color: var(--tinta); }
.bf-item[aria-pressed="true"] { background: var(--verde-claro); color: var(--verde); font-weight: 600; }
.bf-item:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.bf-icone { position: relative; display: inline-flex; }
.bf-contagem { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-s);
  background: var(--fogo); color: #FFFFFF; font: 600 12px/18px var(--ui); text-align: center; box-shadow: 0 0 0 2px var(--superficie); }
.bf-sep { height: 1px; background: var(--linha); margin: 4px 8px; }

/* O CABEÇALHO DE TODA FERRAMENTA É O MESMO (auditoria D-11): o nome da ferramenta como título (20/28) e o nome da
   área embaixo (14/20). Cada ferramenta repetia, antes do conteúdo, o bloco "área + Por quê + selo do veredito"
   (~90 px) — o veredito é assunto de Índices e continua lá. Ocorrências ainda mostrava o título duas vezes. */
.com-ferramentas .sidebar-direita.em-ferramenta .titulo-area { font: 600 20px/28px var(--ui); letter-spacing: -0.01em; text-transform: none; color: var(--tinta); margin-right: var(--alvo); }
.com-ferramentas .sidebar-direita.em-ferramenta .veredito { margin: 0; font: 400 14px/20px var(--ui); letter-spacing: 0; color: var(--tinta-2); }
.com-ferramentas .sidebar-direita.em-ferramenta .veredito .lapis-area { display: none; }
.com-ferramentas .sidebar-direita.em-ferramenta .sidebar-cabeca .estado-linha { display: none; }

/* a lateral da ferramenta: margem lateral de 24 px, como as telas aprovadas */
.com-ferramentas .sidebar-direita.em-ferramenta .sidebar-cabeca { padding: 16px 24px; }
.com-ferramentas .sidebar-direita.em-ferramenta .sidebar-corpo { padding: 0 24px 24px; }
.com-ferramentas .sidebar-direita.em-ferramenta .fechar-sidebar { right: 16px; }
/* O × NÃO FLUTUA MAIS (Monday, "Retirar o x flutuante"). Era um botão absoluto no canto da lateral, por cima das abas e da
   faixa de busca/funil. Com a barra de ferramentas a lateral fecha tocando de novo na ferramenta ativa (`escolher` alterna)
   ou, no computador, com Esc (app.js); no celular a folha ainda recolhe pela alça e fecha arrastando. O seletor é o ID:
   `.fechar-sidebar` também é a classe do × da gaveta "Veja mais" (evidencia.js), que continua. Sem a barra (conta sem
   ferramentas) o × segue na linha do título, que reserva o lugar dele. */
.com-ferramentas #fechar-sidebar { display: none; }
/* e a reserva de margem que o × pedia no título da ferramenta também sai */
.com-ferramentas .sidebar-direita.em-ferramenta .titulo-area { margin-right: 0; }

/* ------------------------------------------------------------------ abas Alterações | Índices
   Ficam dentro da lateral, coladas no topo (sticky) para não sumir com a rolagem.
   Mostradas apenas nos modos Índices (sem .em-ferramenta) e Alterações (data-ferramenta="alteracoes").
   Para os demais ferramentas (Manejo, Análises…) o CSS esconde — nenhum JS extra necessário. */
.sidebar-abas {
  display: none;          /* escondido por padrão; os seletores abaixo ativam */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  padding: 0 16px;
  flex-shrink: 0;
}
/* modo Índices: lateral sem classe .em-ferramenta */
.com-ferramentas .sidebar-direita:not(.em-ferramenta) .sidebar-abas { display: flex; }
/* modo Alterações: lateral com data-ferramenta="alteracoes" */
.com-ferramentas .sidebar-direita[data-ferramenta="alteracoes"] .sidebar-abas { display: flex; }

.sidebar-aba {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  min-height: var(--alvo);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font: 500 14px/1 var(--ui);
  color: var(--tinta-2);
  cursor: pointer;
  transition: color 0.15s;
}
.sidebar-aba:hover { color: var(--tinta); }
.sidebar-aba.ativa {
  color: var(--tinta);
  border-bottom-color: var(--verde);
  font-weight: 600;
}
/* o × no fim da linha das abas: botão de ícone do Material 3 (alvo de 48 px, sem pílula nem borda) */
.sidebar-aba-fechar {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; flex: none;
  width: 48px; height: 48px; margin-right: -12px;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-2); cursor: pointer;
}
.sidebar-aba-fechar:hover { background: var(--superficie-2); color: var(--tinta); }
.sidebar-aba-fechar:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.aba-contagem {
  display: inline-block;
  font: 500 12px/1 var(--ui);
  color: var(--tinta-2);
}
.sidebar-aba.ativa .aba-contagem { color: var(--verde); }


/* ------------------------------------------------------------------ celular: abas embaixo */
@media (max-width: 900px) {
  .barra-ferramentas { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: auto; min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    flex-direction: row; padding: 0 0 env(safe-area-inset-bottom, 0px); gap: 0; border-right: 0; border-top: 1px solid var(--linha);
    z-index: 700; overflow: visible; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .bf-sep { display: none; }
  /* `min-width: 0` é o que deixa a COLUNA DO GRID encolher de verdade — sem ele cada item mede
     pela largura intrínseca do rótulo, e com a sexta ferramenta (Alterações) "Ocorrências" e
     "Calculadora" não cabiam mais em 1/6 de 360 px e vazavam para cima da vizinha. O rótulo trunca
     com reticências em vez de quebrar linha ou vazar — mesmo ícone, nome ainda reconhecível. */
  .bf-item { border-radius: 0; height: auto; min-height: 64px; justify-content: center; padding: 8px 0; font-size: 12px; min-width: 0; }   /* com o texto grande o rótulo pode ter duas linhas: o item cresce (a barra encosta 4 px no mapa, sem cobrir controle) */
  .bf-rotulo { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; text-align: center; line-height: 16px; }   /* texto grande: "Ocorrên-cias" quebra (com hífen) em vez de virar "Ocorrê…" */
  .bf-item[aria-pressed="true"] { background: transparent; }
  .bf-item[aria-pressed="true"] .bf-icone::before { content: ''; position: absolute; inset: -4px -16px; border-radius: var(--r-s); background: var(--verde-claro); z-index: -1; }
  .bf-icone { z-index: 0; }
  .com-ferramentas .mapa-area { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .com-ferramentas .sidebar-direita { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); height: calc(100% - 72px - env(safe-area-inset-bottom, 0px)); padding-bottom: 24px; }
  .com-ferramentas .sidebar-direita.em-ferramenta .sidebar-cabeca { padding: 8px 16px 12px; }
  .com-ferramentas .sidebar-direita.em-ferramenta .sidebar-corpo { padding: 0 16px 24px; }
  .com-ferramentas .sidebar-direita.em-ferramenta .fechar-sidebar { right: 10px; }
}

/* ------------------------------------------------------------------ componentes M3 */
.m3 { font-size: 14px; line-height: 20px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.m3 h2 { margin: 0; font: 600 16px/24px var(--ui); }
.m3 h3 { margin: 0; font: 600 14px/20px var(--ui); }
.m3-secao { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.m3-grupo { display: flex; flex-direction: column; gap: 8px; }
.m3-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.m3-titulo > span { font-size: 12px; line-height: 16px; color: var(--tinta-2); text-align: right; }
.m3-sub { font-size: 14px; font-weight: 500; margin: 0; }
.m3-apoio { margin: 0; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.m3-corrido { margin: 0; font-size: 14px; color: var(--tinta-2); }
.m3-grade { display: grid; gap: 24px 12px; grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); padding-top: 8px; }
.m3-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m3-fim { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.m3-entre { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

/* campo com contorno: 48 px, rótulo SOBRE a borda, unidade DENTRO */
.m3-campo { position: relative; display: block; min-width: 0; }
.m3-entrada { display: block; width: 100%; height: 48px; box-sizing: border-box; border: 1px solid var(--m3-contorno); border-radius: var(--r-s);
  padding: 0 12px; font: 400 16px var(--ui); color: var(--tinta); background: var(--superficie); font-variant-numeric: tabular-nums; }
.m3-entrada:hover { border-color: var(--tinta); }
.m3-entrada:focus { outline: none; border: 2px solid var(--verde); padding: 0 11px; }
.m3-campo.com-unidade .m3-entrada { padding-right: var(--folga-unidade, 56px); }
.m3-campo.com-unidade .m3-entrada:focus { padding-right: calc(var(--folga-unidade, 56px) - 1px); }
select.m3-entrada { appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.m3-rotulo { position: absolute; left: 8px; top: -8px; padding: 0 4px; background: var(--superficie); font: 400 12px/16px var(--ui);
  color: var(--tinta-2); max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 1; }
.m3-campo:focus-within .m3-rotulo { color: var(--verde); }
.m3-unidade { position: absolute; right: 12px; top: 12px; line-height: 24px; font-size: 12px; color: var(--tinta-2); pointer-events: none; white-space: nowrap; }
.m3-nota { display: block; margin: 4px 12px 0; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.m3-nota.m3-erro { color: var(--fogo); }
/* Campo que difere da recomendação NÃO é erro (dono, 2026-09-27: "no design pareceu erro"): a borda
   fica a normal e a nota diz a recomendação, em cinza. Só o erro de verdade (.com-erro) pinta. */
.m3-campo.alterado .m3-nota { color: var(--tinta-2); }
.m3-campo.com-erro .m3-entrada { border: 2px solid var(--fogo); padding-left: 11px; }
.m3-campo.com-erro .m3-rotulo { color: var(--fogo); }
.m3-campo.destaque .m3-entrada { border: 2px solid var(--verde); padding-left: 11px; }
.m3-campo.destaque .m3-rotulo { color: var(--verde); }
/* UM jeito de rotular campo no produto (política de 2026-10-04): o rótulo vai EM CIMA, 14/20, como no cadastro da
   área, na ocorrência, no login e na conta — o rótulo sobre a borda ficava só aqui. O campo curto de tabela segue
   com o dele (a linha da tabela não pode crescer). */
.m3-campo:not(.curto) .m3-rotulo { position: static; display: block; max-width: 100%; margin: 0 0 4px; padding: 0; background: none;
  font: 500 14px/20px var(--ui); color: var(--tinta); }
.m3-campo:not(.curto):focus-within .m3-rotulo { color: var(--tinta); }
.m3-campo:not(.curto) .m3-unidade { top: 36px; }
.m3-campo:not(.curto) .m3-nota { margin: 4px 0 0; }
/* segmentado AO LADO de um campo (dose | unidade, parte | guia): desce o rótulo do vizinho e fica com a altura dele (48) */
:is(.manejo-dose-linha, .calc-dose-linha, .calc-produto-ctl, .manejo-completar .m3-linha):has(> .m3-campo:not(.curto) > .m3-rotulo) > .m3-seg { margin-top: 24px; }
:is(.manejo-dose-linha, .calc-dose-linha, .calc-produto-ctl, .manejo-completar .m3-linha):has(> .m3-campo:not(.curto) > .m3-rotulo) > .m3-seg { border: 0; outline: 1px solid var(--m3-contorno); outline-offset: -1px; }   /* contorno sem somar altura: 48 como o campo, e cada botão com os 48 do alvo */
.m3-campo:not(.curto).com-erro .m3-rotulo { color: var(--fogo); }
.m3-entrada:disabled, .m3-entrada[readonly] { background: var(--superficie-2); color: var(--tinta-2); border-color: var(--linha); }
/* campo curto dentro de tabela: 40 px, número à direita */
.m3-campo.curto .m3-entrada { height: 40px; font-size: 14px; text-align: right; padding: 0 8px; }
.m3-campo.curto .m3-entrada:focus { padding: 0 7px; }

/* segmentado: uma escolha entre poucas */
.m3-seg { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 1px; background: var(--m3-contorno);
  border: 1px solid var(--m3-contorno); border-radius: var(--r-s); overflow: hidden; }
.m3-seg button { min-height: var(--alvo); padding: 0 12px; border: 0; background: var(--superficie); color: var(--tinta);
  font: 500 14px/20px var(--ui); cursor: pointer; }
.m3-seg button:hover:not(.ativo):not(:disabled) { background: var(--superficie-2); }
.m3-seg button.ativo { background: var(--m3-selecionado); color: var(--m3-sobre-selecionado); }
.m3-seg button:disabled { color: var(--m3-contorno); cursor: not-allowed; }
.m3-seg button:focus-visible { outline: 2px solid var(--verde); outline-offset: -3px; }

/* chip de filtro */
.m3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m3-chip { height: 32px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--m3-contorno); background: var(--superficie);
  color: var(--tinta-2); font: 500 14px var(--ui); cursor: pointer; min-width: 48px; }
.m3-chip.ativo { border-color: transparent; background: var(--m3-selecionado); color: var(--m3-sobre-selecionado); }
.m3-chip:hover:not(.ativo) { background: var(--superficie-2); }

/* botões: 40 px (48 no toque, `--alvo`), raio pequeno como todo controle (política de formas, estilo.css) */
.m3-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alvo); padding: 0 24px;
  border-radius: var(--r-s); font: 500 14px/20px var(--ui); cursor: pointer; white-space: nowrap; }
.m3-botao svg { flex-shrink: 0; }
.m3-cheio { border: 0; background: var(--verde); color: #FFFFFF; }
.m3-cheio:hover:not(:disabled) { background: #185A3A; }
.m3-contorno { border: 1px solid var(--m3-contorno); background: transparent; color: var(--verde); }
.m3-contorno:hover:not(:disabled) { background: var(--verde-claro); }
.m3-contorno:has(svg), .m3-tonal:has(svg) { padding-left: 16px; }
.m3-tonal { border: 1px solid transparent; background: var(--m3-selecionado); color: var(--m3-sobre-selecionado); }
.m3-tonal:hover:not(:disabled) { background: #C6E0CD; }
.m3-botao.m3-texto { border: 0; background: transparent; color: var(--verde); padding: 0 12px; }
.m3-botao.m3-texto:hover:not(:disabled) { background: var(--verde-claro); }
.m3-botao:disabled { color: var(--m3-contorno); cursor: not-allowed; }
.m3-cheio:disabled { background: var(--linha); color: var(--tinta-3); }
.m3-botao.perigo { color: var(--fogo); }
.m3-botao.perigo:hover:not(:disabled) { background: var(--fogo-claro); }

/* interruptor */
.m3-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--tinta); }
.m3-interruptor-txt b { display: block; font: 500 14px/20px var(--ui); }
.m3-interruptor-txt small { display: block; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.m3-trilho { position: relative; flex-shrink: 0; width: 52px; height: 32px; border-radius: 16px; box-sizing: border-box;
  background: var(--linha); border: 2px solid var(--m3-contorno); transition: background 0.15s; }
.m3-botao-trilho { position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--m3-contorno);
  transform: translateY(-50%); transition: left 0.15s, width 0.15s, height 0.15s; }
.m3-interruptor[aria-checked="true"] .m3-trilho { background: var(--verde); border-color: var(--verde); }
.m3-interruptor[aria-checked="true"] .m3-botao-trilho { left: 22px; width: 24px; height: 24px; background: #FFFFFF; }
.m3-interruptor:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; border-radius: var(--r-s); }

/* aviso: ícone + texto, sem caixa de fundo */
.m3-aviso { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0 12px 4px; border-bottom: 1px solid var(--linha); font-size: 14px; }
.m3-aviso > svg { flex-shrink: 0; }
.m3-aviso.aviso-ambar > svg { color: var(--ambar); }
.m3-aviso.aviso-fogo > svg { color: var(--fogo); }
.m3-aviso.aviso-verde > svg { color: var(--verde); }
.m3-aviso.aviso-cinza > svg { color: var(--tinta-3); }
.m3-aviso-txt { flex: 1 1 auto; min-width: 0; }
.m3-aviso-txt > span { display: block; }
.m3-aviso-acao { margin: 4px 0 0 -12px; }

/* tabela: números à direita */
.m3-tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.m3-tabela th { height: 40px; text-align: left; font: 500 12px/16px var(--ui); color: var(--tinta-2); border-bottom: 1px solid var(--linha-forte); padding: 0 4px; vertical-align: bottom; padding-bottom: 8px; }
.m3-tabela td { height: 44px; border-bottom: 1px solid var(--linha); padding: 0 4px; }
.m3-tabela .num { text-align: right; white-space: nowrap; }
.m3-tabela th:first-child, .m3-tabela td:first-child { padding-left: 0; }
.m3-tabela th:last-child, .m3-tabela td:last-child { padding-right: 0; }
.m3-tabela tr.total td { font-weight: 500; border-bottom: 0; }
.m3-tabela .mudo { color: var(--tinta-2); }
.m3-tabela .falta { color: var(--fogo); font-weight: 500; }
.m3-tabela .sobra { color: var(--ambar); font-weight: 500; }
.m3-tabela .ok { color: var(--verde); font-weight: 500; }
.m3-tabela .nd { color: var(--tinta-3); font-size: 12px; }

/* lista de uma linha/duas linhas */
.m3-lista { list-style: none; margin: 0; padding: 0; }
.m3-lista > li { border-bottom: 1px solid var(--linha); padding: 12px 0; }
.m3-item { display: flex; gap: 16px; align-items: flex-start; }
.m3-item > svg { flex-shrink: 0; }
.m3-item-txt { flex: 1 1 auto; min-width: 0; }
.m3-item-txt b { display: block; font: 400 14px/20px var(--ui); }
.m3-item-txt small { display: block; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.m3-item-lado { font-size: 12px; line-height: 20px; color: var(--tinta-2); white-space: nowrap; }
.m3-recuo { margin: 12px 0 0 40px; display: flex; flex-direction: column; gap: 8px; }

/* snackbar */
.m3-snackbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 8px;
  min-height: 48px; max-width: min(560px, calc(100vw - 32px)); padding: 0 8px 0 16px; border-radius: var(--r-s); background: #2E3430; color: #F0F2ED;
  font-size: 14px; box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.m3-snackbar-txt { flex: 1 1 auto; padding: 14px 0; }
.m3-snackbar-acao { min-height: var(--alvo); padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; color: #9FD3B0; font: 500 14px var(--ui); cursor: pointer; }
.m3-snackbar-acao:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 900px) { .com-ferramentas ~ .m3-snackbar, .m3-snackbar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* diálogo básico */
.m3-veu { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.32); display: flex; align-items: center; justify-content: center; padding: 16px; }
.m3-dialogo { width: min(360px, 100%); background: var(--superficie-2); border-radius: var(--r-m); box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 24px; }
.m3-dialogo h2 { margin: 0 0 16px; font: 500 22px/28px var(--ui); }
.m3-dialogo-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }   /* com texto grande as duas ações descem uma por linha em vez de sair do diálogo */
/* texto de apoio do diálogo (M3: 14/20) e o respiro entre os parágrafos — a dose absurda tinha dois blocos colados, o segundo em 12 px */
.m3-dialogo .m3-corrido { line-height: 20px; color: var(--tinta); }
.m3-dialogo .m3-corrido + .m3-apoio { margin-top: 8px; font-size: var(--t-body-m, 14px); line-height: 20px; }
.m3-radio { display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--tinta); }
.m3-radio-bola { width: 20px; height: 20px; margin: 2px; border-radius: 50%; border: 2px solid var(--tinta-2); box-sizing: border-box; flex-shrink: 0; display: grid; place-items: center; }
.m3-radio[aria-checked="true"] .m3-radio-bola { border-color: var(--verde); }
.m3-radio[aria-checked="true"] .m3-radio-bola::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.m3-radio-txt b { display: block; font: 400 16px/24px var(--ui); }
.m3-radio-txt small { display: block; font-size: 14px; line-height: 20px; color: var(--tinta-2); }

/* o esqueleto das ferramentas: forma do que vem, com classe própria (nunca a da coisa real) */
.m3-esqueleto { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.m3-esqueleto .esqueleto { height: 48px; }
.m3-esqueleto .esqueleto.fino { height: 16px; width: 60%; }

/* a lateral larga (largura.js) vira duas colunas para a foto e os índices; a ferramenta é UMA coluna,
   com largura de leitura */
.com-ferramentas .sidebar-direita.em-ferramenta #corpo-area { display: block !important; }
.com-ferramentas .sidebar-direita.em-ferramenta #corpo-area > .m3 { max-width: 640px; }

/* ------------------------------------------------------------------ celular: os filtros do mapa numa linha
   Só com a barra (`.com-ferramentas`); no computador o botão nem aparece. Fechada, a linha resume
   indicador · comparação · data; aberta, o painel de sempre aparece embaixo dela. */
.filtros-linha { display: none; }
@media (max-width: 900px) {
  .com-ferramentas .filtros-linha { display: flex; flex: 1 1 100%; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 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); }
  .com-ferramentas .filtros-linha b { font-weight: 600; }
  .com-ferramentas .filtros-linha svg { flex: 0 0 auto; }
  .filtros-linha-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .com-ferramentas .painel-mapa:not(.filtros-abertos) > .painel-grupo { display: none; }
}
/* TABLET EM PAISAGEM com a lateral aberta (901–1200 px): o mapa sobra com ~430–530 px e os três seletores
   viravam um painel de 130 px de altura sobre ele (auditoria D-14). Mesmo chip de resumo do celular. */
@media (min-width: 901px) and (max-width: 1200px) {
  .com-ferramentas .corpo:has(.sidebar-direita:not([hidden])) .filtros-linha { display: flex; flex: 1 1 100%; align-items: center; gap: 8px; height: var(--alvo); padding: 0 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); }
  .com-ferramentas .corpo:has(.sidebar-direita:not([hidden])) .filtros-linha b { font-weight: 600; }
  .com-ferramentas .corpo:has(.sidebar-direita:not([hidden])) .filtros-linha svg { flex: 0 0 auto; }
  .com-ferramentas .corpo:has(.sidebar-direita:not([hidden])) .painel-mapa:not(.filtros-abertos) > .painel-grupo { display: none; }
}
/* o chip também é alvo de toque: chip de filtro com 32 px de altura cresce no toque */
@media (pointer: coarse), (max-width: 900px) { .m3-chip { height: 48px; } }
/* Ocorrências na barra reusa o bloco de ocorrencia.js: a mesma largura das outras ferramentas, e sem o
   fio de cima quando ele abre a lateral (o cabeçalho da lateral já separa) */
.com-ferramentas .sidebar-direita.em-ferramenta #corpo-area > .bloco-lateral { max-width: 640px; }
.com-ferramentas .sidebar-direita.em-ferramenta #corpo-area > .bloco-lateral:first-child { margin-top: 16px; border-top: 0; padding-top: 0; }

/* na folha de baixo (celular e tablet em pé) a coluna de leitura de 640 px deixava o "+ Nova ocorrência" e os
   blocos no meio da largura, com um vazio à direita (820 px): ali o conteúdo ocupa a folha inteira */
@media (max-width: 900px) {
  .com-ferramentas .sidebar-direita.em-ferramenta #corpo-area > .m3,
  .com-ferramentas .sidebar-direita.em-ferramenta #corpo-area > .bloco-lateral { max-width: none; }
}
/* o chip de resumo dos filtros entre 901 e 1200 px: uma linha só, com reticências (quebrava em duas dentro dos 40 px) */
@media (min-width: 901px) and (max-width: 1200px) {
  .com-ferramentas .corpo:has(.sidebar-direita:not([hidden])) .filtros-linha-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}