/* Visão do Campo — Alterações: uma FERRAMENTA da barra (`ferramentas.js`/`ferramentas.css` já dão
   o ícone, o rótulo, a contagem e a navegação com "Índices" — nada disso é redesenhado aqui). Este
   arquivo é só o CONTEÚDO da ferramenta: a lista (72 dp por linha), o detalhe e o mapa de quadrados.
   Grade de 8 px, botões de 40 px com raio 20 (Material 3, como `ferramentas.css`); cores das
   categorias e das pílulas de situação são as mesmas de `alteracoes.js` — nunca duplicadas aqui
   em hexadecimal solto. A régua de cada indicador é `.regua` (estilo.css): nenhuma classe nova. */

/* ------------------------------------------------------------------------------- o mapa
   Na aba Alterações o raster de calor e os controles de índice somem — são perguntas de
   ÍNDICES, e por cima dos quadrados das alterações ficavam ilegíveis (o canvas aprovado já
   separa os dois painéis). Pane criada por `mapa.createPane('raster-calor')` em app.js. */
.pagina.em-alteracoes-mapa #painel-mapa,
.pagina.em-alteracoes-mapa .legenda-mapa,
.pagina.em-alteracoes-mapa .leaflet-raster-calor-pane { display: none; }
.alt-legenda-mapa { position: absolute; left: 16px; bottom: 16px; z-index: 650; display: flex; flex-wrap: wrap;
  gap: 12px; max-width: 70%; padding: 8px 12px; border-radius: var(--r-s); background: var(--vidro); color: var(--vidro-tinta);
  font: 500 12px var(--ui); }
.alt-legenda-mapa-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.alt-legenda-mapa-item i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.alt-legenda-mapa-tracejada { box-sizing: border-box; border: 1.5px dashed var(--vidro-tinta); background: transparent !important; }
.alt-legenda-mapa-recuperando { background: #2E7D4F !important; }

/* ------------------------------------------------------------------------------- a lateral
   A barra (`ferramentas.js`) já põe `data-ferramenta="alteracoes"` no `.sidebar-direita` quando
   esta ferramenta está aberta — nenhum atributo novo. O cabeçalho padrão de toda ferramenta
   (nome da área + estado, `cabecaDaFerramenta` em ferramentas.js) fica escondido só aqui: esta
   ferramenta não é de uma área só, e o "nome · propriedade" de cada alteração já vem no corpo. */
.sidebar-direita[data-ferramenta="alteracoes"] .sidebar-cabeca { display: none; }
.sidebar-direita[data-ferramenta="alteracoes"] .sidebar-corpo,
.com-ferramentas .sidebar-direita.em-ferramenta[data-ferramenta="alteracoes"] .sidebar-corpo { padding: 0; }   /* a regra geral das ferramentas (24/16 px) somava ao recuo da lista: busca a 32–40 px da borda, abas a 16 */

/* ------------------------------------------------------------------------------- busca e filtros */
.alt-barra-busca { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.alt-busca { flex: 1; min-width: 0; height: var(--alvo); box-sizing: border-box; padding: 0 12px; border: 1px solid var(--linha-forte);
  border-radius: var(--r-s); outline: none; background: var(--superficie-2); color: var(--tinta); font: 400 14px var(--ui); }
.alt-busca::placeholder { color: var(--tinta-2); }
.alt-busca:focus { border-color: var(--verde); box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 16%, transparent); }
.alt-filtro-botao { position: relative; flex: 0 0 var(--alvo); width: var(--alvo); height: var(--alvo); display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); color: var(--tinta); cursor: pointer; }
.alt-filtro-botao:hover, .alt-filtro-botao.ativo { border-color: var(--verde); color: var(--verde); background: var(--verde-claro); }
.alt-filtro-contagem { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  border-radius: var(--r-s); background: var(--verde); color: #fff; font: 600 12px/16px var(--ui); text-align: center; }
.alt-filtros-ancora { position: relative; flex: 0 0 var(--alvo); height: var(--alvo); }
.alt-filtro-painel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1000; width: min(300px, calc(100vw - 32px));
  max-height: min(70vh, 480px); overflow-y: auto; box-sizing: border-box; padding: 6px 0; border: 1px solid var(--linha-forte);
  border-radius: var(--r-s); background: var(--superficie); color: var(--tinta); box-shadow: var(--elev-2); }
.alt-filtro-painel[hidden] { display: none; }
.alt-filtro-grupo + .alt-filtro-grupo { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 6px; }
.alt-filtro-rotulo { padding: 6px 16px 4px; font: 500 12px var(--ui); letter-spacing: .02em; text-transform: uppercase; color: var(--tinta-2); }
.alt-filtro-opcao { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--alvo); padding: 0 16px 0 10px; border: 0;
  background: transparent; color: var(--tinta); font: 400 14px var(--ui); text-align: left; cursor: pointer; }
.alt-filtro-opcao:hover, .alt-filtro-opcao:focus-visible { background: var(--superficie-2); outline: none; }
.alt-filtro-opcao.ativa { color: var(--verde); font-weight: 600; }
.alt-filtro-marca { flex: 0 0 18px; display: inline-flex; }
.alt-filtro-nome { flex: 1; min-width: 0; }
.alt-filtro-qtd { flex: 0 0 auto; font-size: 12px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------------- a lista */
.alt-lista-wrap { display: flex; flex-direction: column; min-height: 0; }
.alt-lista { display: flex; flex-direction: column; padding-bottom: 16px; }
.alt-grupo-nome { padding: 8px 16px 4px; font: 500 12px var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-2); }
.alt-vazio { padding: 16px; }
/* a ação do estado de falha: botão do tamanho do texto, à esquerda, não uma pílula de ponta a ponta */
.alt-tentar { align-self: flex-start; margin: 0 16px 16px; }
.alt-aviso-conclusoes { margin: 0 16px 12px; padding: 12px; border-radius: var(--r-s); background: var(--verde-claro); color: var(--tinta);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 14px var(--ui); }
.alt-aviso-conclusoes-botao { border: 0; background: transparent; color: var(--verde); font: 600 14px var(--ui); cursor: pointer; white-space: nowrap; }
.alt-linha { width: 100%; min-height: 72px; display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; font: 400 var(--t-body-m)/20px var(--ui);
  border: 0; border-bottom: 1px solid var(--linha); background: transparent; text-align: left; color: var(--tinta); cursor: pointer; }
.alt-linha:hover { background: var(--superficie-2); }
.alt-amostra { flex-shrink: 0; margin-top: 5px; width: 12px; height: 12px; border-radius: 2px; }
.alt-linha-corpo { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.alt-linha-topo { display: flex; align-items: center; gap: 8px; }
.alt-flex { flex-grow: 1; }
.alt-linha-area { font: 500 16px var(--ui); }
.alt-linha-cat { font: 500 14px var(--ui); }
.alt-linha-tam { color: var(--tinta-2); font-weight: 400; }
.alt-linha-txt { font: 400 14px/20px var(--ui); color: var(--tinta-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }   /* até duas linhas (com reticências) em vez de cortar no meio da frase */

/* pílulas de situação — as mesmas cores dos tokens que `estilo.css` já define para âmbar/cinza/verde */
.alt-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--r-xs); font: 600 12px/16px var(--ui); white-space: nowrap; }   /* a etiqueta única do produto (raio 4, 24 px) */
.alt-pill-novo { background: var(--ambar-claro); color: var(--ambar); }
.alt-pill-cinza { background: var(--cinza-claro); color: var(--tinta-2); }
.alt-pill-ok { background: var(--verde-claro); color: var(--verde); }

/* ------------------------------------------------------------------------------- o detalhe */
.alt-detalhe { display: flex; flex-direction: column; gap: 16px; padding: 12px 20px 24px; }
.alt-detalhe-topo { display: flex; align-items: center; gap: 8px; }
.alt-voltar { height: var(--alvo); padding: 0 12px 0 4px; border: 0; background: transparent; color: var(--verde); font: 500 14px var(--ui); cursor: pointer; }
.alt-voltar:hover { color: var(--tinta); }
.alt-detalhe-nome { font: 500 22px var(--ui); letter-spacing: -0.01em; }
.alt-detalhe-prop { color: var(--tinta-2); font-weight: 400; font-size: 16px; }
.alt-detalhe-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.alt-chip-cat { display: inline-block; padding: 4px 10px; border-radius: var(--r-s); color: #FFFFFF; font: 500 14px var(--ui); }
.alt-detalhe-tam { font: 400 14px var(--ui); color: var(--tinta-2); }
.alt-fatos { font: 400 14px var(--ui); color: var(--tinta-2); margin: 0; }
.alt-recencia { display: flex; flex-direction: column; gap: 8px; }
.alt-recencia .leitura-linha { margin-top: 0; }
.alt-recencia-nota { line-height: 20px; }
/* a foto do ponto com a data ESCRITA (a da foto, e a do alerta quando são diferentes) */
/* a foto do detalhe tem o MESMO tamanho máximo da aba Índices (420 px, `.col-foto` em largura.css): maior que isso ela só fica
   grande sem mostrar mais nada, e quem quer ver grande clica nela (tela cheia) */
.alt-foto-bloco { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 420px; }
.alt-foto-legenda { margin: 4px 0 0; font: 500 14px/20px var(--ui); color: var(--tinta); overflow-wrap: anywhere; }
.alt-foto-nota { margin: 0; font: 400 14px/20px var(--ui); color: var(--tinta-2); }
.alt-foto-legenda[hidden], .alt-foto-nota[hidden] { display: none; }
/* o estado da evolução sai no FUNDO e na cor do texto, sem filete colorido na lateral (era `border-left` de 3 px) */
.alt-evolucao { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--superficie-2); font: 500 14px var(--ui); }
.alt-evolucao-recuperando, .alt-evolucao-normalizado { background: var(--verde-claro); color: var(--verde); }
.alt-evolucao-piorando { background: var(--ambar-claro); color: var(--ambar); }
.alt-subtitulo { font: 600 16px var(--ui); margin-top: 4px; }

.alt-cartao { padding: 12px 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 4px; }
.alt-cartao-topo { display: flex; align-items: baseline; gap: 8px; }
.alt-cartao-nome { font: 600 14px var(--ui); flex-grow: 1; }
.alt-cartao-dif { margin: 0; font: 400 12px var(--ui); color: var(--tinta-2); }
.alt-cartao-dif b { font: 600 14px var(--mono); color: var(--tinta); }
/* a diferença leva a cor do SENTIDO: abaixo do normal em vermelho; acima ou igual, na tinta (QA, evidências) */
.alt-cartao-dif b.abaixo { color: var(--fogo); }
.alt-veja-mais { align-self: flex-start; height: var(--alvo); padding: 0 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-s);
  background: var(--superficie); font: 500 14px var(--ui); color: var(--tinta); cursor: pointer; margin-top: 4px; }
.alt-veja-mais:hover { background: var(--superficie-2); }

.alt-respostas { display: flex; flex-wrap: wrap; gap: 8px; }
.alt-resposta { height: var(--alvo); padding: 0 16px; border-radius: var(--r-s); border: 1px solid var(--linha-forte); background: var(--superficie);
  color: var(--tinta); font: 500 14px var(--ui); cursor: pointer; }
.alt-resposta:hover { border-color: var(--tinta-3); }
.alt-resposta.ativa { border-color: var(--verde); background: var(--verde-claro); color: var(--verde); }

.alt-rodape { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.alt-corrigi { height: var(--alvo); padding: 0 24px; border-radius: var(--r-s); border: 0; background: var(--verde); color: #FFFFFF; font: 500 14px var(--ui); cursor: pointer; }
.alt-corrigi:hover { background: #17502F; }
.alt-corrigi.feito { background: var(--verde-claro); color: var(--verde); cursor: default; }
.alt-ver-indices { height: var(--alvo); padding: 0 12px; border: 0; background: transparent; color: var(--verde); font: 500 14px var(--ui); cursor: pointer; }
.alt-ver-indices:hover { color: var(--tinta); }

/* ------------------------------------------------------------------------------- celular (≤ 700 px)
   A lista e o detalhe vivem na MESMA folha que já existe (`folha` em app.js) — nada aqui muda a
   folha em si, só garante alvos de 48 dp, como o resto do produto no celular. */
@media (max-width: 900px) {
  .alt-linha { min-height: 48px; }
  .alt-resposta, .alt-corrigi, .alt-ver-indices, .alt-ainda-aberto, .alt-voltar { min-height: 48px; }
  .alt-filtro-opcao { min-height: 48px; }
  .alt-filtros-ancora { flex-basis: 48px; height: 48px; }
  .alt-filtro-botao { min-width: 48px; min-height: 48px; flex-basis: 48px; }
  /* O MENU DE FILTRO VIRA UMA SEÇÃO NO FLUXO (auditoria D-04). Flutuando, ele só tinha ~214 px entre o botão e a
     barra de baixo — uma "Situação" e o começo de "Categoria", com rolagem dentro de rolagem. Não dá para fazer a
     folha de baixo do Material 3 aqui: a lateral é uma folha com `transform`, e `position: fixed` dentro de um
     ancestral transformado deixa de ser da janela. No fluxo, o painel ocupa a largura toda embaixo da busca,
     as opções em duas colunas, e nada é cortado nem rola por dentro. */
  .alt-barra-busca { flex-wrap: wrap; }
  .alt-filtros-ancora { display: contents; }
  .alt-filtro-painel { position: static; order: 3; flex: 1 1 100%; width: 100%; max-height: none; overflow: visible;
    padding: 4px 0 8px; border-radius: var(--r-s); box-shadow: none; }
  .alt-filtro-grupo { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 0 8px; }
  .alt-filtro-grupo > .alt-filtro-rotulo { grid-column: 1 / -1; }
}

/* foto e linha do tempo lado a lado quando a lateral é larga o bastante; estreita, empilham */
.alt-por-que { margin: 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.alt-foto-trilha { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.alt-col-foto, .alt-col-trilha { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@container lateral (min-width: 780px) {
  .alt-foto-trilha { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
}

/* concluídas: cinza e riscadas, no fim da lista; abrir mostra quando foi a alteração e quando foi concluída */
.alt-grupo-concluidas { margin-top: 8px; border-top: 1px solid var(--linha); }
.alt-linha-concluida { color: var(--tinta-2); }
.alt-linha-concluida .alt-amostra { background: var(--linha-forte); }
.alt-linha-concluida .alt-linha-area { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--tinta-2); }
.alt-linha-concluida .alt-linha-cat, .alt-linha-concluida .alt-linha-tam, .alt-linha-concluida .alt-linha-txt { color: var(--tinta-3); }
.alt-concluida-datas { margin: 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.alt-ainda-aberto { display: block; margin-top: 2px; height: var(--alvo); padding: 0 12px 0 0; border: 0; background: transparent; color: var(--verde); font: 500 14px var(--ui); cursor: pointer; text-decoration: underline; text-align: left; }
.alt-ainda-aberto:hover { color: var(--tinta); }

/* esqueleto enquanto as alterações carregam: a forma do que vem; a animação é a do `.esqueleto` (estilo.css) */
.alt-esq { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.alt-esq-lista { padding: 0; gap: 0; }
.alt-esq-busca { display: flex; gap: 8px; padding: 12px 16px 8px; }
.alt-esq-campo { flex: 1; height: var(--alvo, 40px); }
.alt-esq-botao { width: var(--alvo, 40px); height: var(--alvo, 40px); }
.alt-esq-linha { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.alt-esq-amostra { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 5px; border-radius: 2px; }
.alt-esq-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.alt-esq-txt { height: 14px; border-radius: 4px; }
.alt-esq-titulo { width: 200px; height: 28px; }
.alt-esq-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.alt-esq-chip { width: 110px; height: 28px; border-radius: var(--r-s); }
.alt-esq-corpo { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.alt-esq-foto { width: min(260px, 100%); aspect-ratio: 1; }
.alt-esq-corpo > .alt-esq-col { flex: 1 1 200px; gap: 14px; }
.alt-esq-cartao { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-s); }
.alt-esq-grafico { height: 150px; }