/*
 * Observatório (spec 2026-10-04, parte A): uma tela só, no padrão do sistema logado. O satélite ocupa a tela abaixo do
 * cabeçalho; um painel de vidro à esquerda traz a busca no alto e um dos estados (feed, resultados, ficha do titular,
 * ficha do processo), que troca deslizando 16 px e esmaecendo. Só tokens --ds-* e --lp-*; movimento só com transform e
 * opacity. Rótulos de tipo sem caixa alta (regra da revisão de peça).
 */

/* a página não rola: quem rola é o painel */
html, body { height: 100%; overflow: hidden; }
body { background: var(--ds-cor-fundo); }
/* o cabeçalho fica sempre com a faixa sólida (sem a cauda que escurecia o que passa embaixo) */
.topo > .topo-veu { opacity: 1; }
.topo > .topo-veu::after { content: none; }

/* --obs-esq e --obs-painel vêm do cabeçalho (observatorio.js mede a marca e a aba "Observatório"); estes são a reserva */
.obs { position: fixed; inset: 0; z-index: 1; --obs-esq: var(--lp-margem); --obs-painel: clamp(440px, 34vw, 520px); --obs-vao: 16px; }

/* ---------- o mapa ---------- */
.obs-mapa { position: absolute; left: 0; right: 0; top: var(--lp-topo); bottom: 0; overflow: clip; background: var(--ds-cor-fundo); }
.obs-mapa-fundo { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ds-curva); background: var(--mapa-mar, #060606); }
.obs-mapa-fundo[data-pronto] { opacity: 1; }
/* o esboço: a forma da vista antes de o satélite pintar (observatorio.js, desenharEsboco); esmaece quando o mapa aparece
   (html[data-mapa-vivo], de mapa-mapbox.js), 300 ms depois, quando o dado do mapa já entrou no mesmo lugar */
#obs-esboco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 1; transition: opacity 400ms var(--ds-curva) 300ms; }
html[data-mapa-vivo] #obs-esboco { opacity: 0; }
/* o crédito só com o mapa à mostra (sobre o vazio parecia defeito) */
.obs .atribuicao { transition: opacity 300ms var(--ds-curva); }
/* no feed o crédito acompanha a capa de reserva (imagem do Mapbox); nas outras vistas, só com o mapa */
html[data-obs-espera]:not([data-mapa-vivo]) .obs .atribuicao, html:not([data-mapa-vivo]) #obs:has(#obs-vista:not([data-estado="feed"])) .atribuicao { opacity: 0; }
/* a capa de reserva do feed (o Brasil do próprio mapa, escurecido): por baixo do mapa até ele pintar; num endereço de ficha
   nem aparece (nem baixa: a imagem é lazy); fora do feed, sai, e o esboço da vista nova fica no lugar */
.obs-mapa .mapa-reserva { z-index: 0; }
.obs-mapa .logo-reserva { left: 6px; bottom: 6px; }
html[data-obs-espera] .obs-mapa .mapa-reserva, html[data-obs-espera] .obs-mapa .logo-reserva { display: none; }
#obs:has(#obs-vista:not([data-estado="feed"])) .obs-mapa .mapa-reserva, #obs:has(#obs-vista:not([data-estado="feed"])) .obs-mapa .logo-reserva { display: none; }
/* com movimento reduzido a câmera não voa: salta atrás desta cortina (observatorio.js, irPara) */
.obs-cortina { position: absolute; inset: 0; background: var(--ds-cor-fundo); opacity: 0; pointer-events: none; }
/* o véu de leitura atrás do painel: o satélite claro (areia, nuvem, cava) não sobe o fundo do vidro além do que o texto
   aguenta (medido: o texto secundário caía a 4,1:1 sobre lavoura clara); à direita do painel o mapa fica inteiro */
.obs-mapa::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) calc(var(--obs-esq) + var(--obs-painel)), transparent calc(var(--obs-esq) + var(--obs-painel) + 160px)); }
/* a borda de cima do satélite entra na faixa do cabeçalho sem linha dura */
.obs-mapa::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40px; pointer-events: none;
  background: linear-gradient(180deg, var(--ds-cor-fundo) 0, color-mix(in srgb, var(--ds-cor-fundo) 40%, transparent) 50%, transparent 100%); }
.obs .atribuicao { position: absolute; left: auto; right: 16px; bottom: 10px; z-index: 1; margin: 0; color: var(--ds-cor-texto-2); font-size: 11px; line-height: 14px;
  text-shadow: 1px 0 0 var(--ds-cor-fundo), -1px 0 0 var(--ds-cor-fundo), 0 1px 0 var(--ds-cor-fundo), 0 -1px 0 var(--ds-cor-fundo), 0 0 4px var(--ds-cor-fundo); }

/* ---------- o painel de vidro ---------- */
.obs-painel {
  position: absolute; left: var(--obs-esq); top: calc(var(--lp-topo) + var(--obs-vao)); bottom: var(--obs-vao); z-index: 2; width: var(--obs-painel);
  display: flex; flex-direction: column; border-radius: var(--ds-raio-grande); overflow: clip;
  background: var(--ds-material-forte); -webkit-backdrop-filter: var(--ds-material-desfoque); backdrop-filter: var(--ds-material-desfoque);
  box-shadow: var(--ds-sombra-popover), inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 8%, transparent);
}
.obs-busca-faixa { position: relative; flex: none; padding: 20px 24px 12px; z-index: 3; }
/* um fio sob a busca só quando o conteúdo já rolou por baixo dela */
.obs-busca-faixa::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ds-cor-borda); opacity: 0; transition: opacity var(--ds-dur-media) var(--ds-curva); }
.obs-painel[data-rolado] .obs-busca-faixa::after { opacity: 1; }
/* o pé do rolo esmaece em 24 px (o texto era cortado seco na borda do vidro); a vista termina com 32 px de folga, então no fim da
   rolagem o último item fica inteiro fora do esmaecer */
.obs-rolo { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); }
.obs-rolo { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 0;
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
/* a barra de rolagem só aparece com o ponteiro no painel ou enquanto ele rola */
.obs-painel:hover .obs-rolo, .obs-painel[data-rolando] .obs-rolo { scrollbar-color: color-mix(in srgb, var(--ds-cor-texto) 18%, transparent) transparent; }
.obs-vista { padding-bottom: 32px; }
[data-obs-espera] .obs-vista { opacity: 0; }

/* a busca dentro do vidro: campo chapado (vidro sobre vidro não se empilha), foco fino */
.obs-busca.busca { width: 100%; height: 48px; margin: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.obs-busca.busca::before { background: var(--ds-cor-campo); box-shadow: inset 0 0 0 1px var(--ds-cor-borda); }
.obs-busca.busca:hover::before { background: color-mix(in srgb, var(--ds-cor-texto) 9%, transparent); }
.obs-busca.busca:focus-within::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 60%, transparent), 0 0 0 3px color-mix(in srgb, var(--ds-cor-texto) 8%, transparent); }
.obs-busca.busca input { padding: 0 52px 0 14px; font-size: 15px; }
.obs-busca .lupa { top: 6px; right: 6px; }
.obs-busca .busca-sug { background: var(--ds-cor-superficie-elevada); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- tipografia do painel ---------- */
.obs-tipo { display: block; margin: 0; color: var(--ds-cor-texto-2); font: 500 12px/16px var(--lp-fonte-texto); letter-spacing: 0.01em; }
.obs-h1 { margin: 6px 0 0; font-family: var(--lp-fonte-titulo); font-weight: 300; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; font-optical-sizing: auto; text-wrap: balance; color: var(--ds-cor-texto); }
.obs-h1:focus { outline: none; }
.obs-h1 .num, .obs-res-titulo .num { font-variant-numeric: lining-nums tabular-nums; }
.obs-lead { margin: 10px 0 0; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; text-wrap: pretty; }
.obs-h2 { margin: 0 0 10px; color: var(--ds-cor-texto); font: 500 15px/20px var(--lp-fonte-texto); letter-spacing: -0.005em; }
.obs-cnpj { margin: 6px 0 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
.obs-contagem { margin: 10px 0 0; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; }
.obs-contagem b, .obs-linha-info b { color: var(--ds-cor-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.obs-bloco { margin-top: 28px; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* a fase do processo: um ponto na cor de regime do sistema, a palavra no tom do texto */
.obs-ponto { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c, #c9c5bc); vertical-align: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.obs-fase { display: flex; align-items: center; margin: 10px 0 0; color: var(--ds-cor-texto); font: 500 15px/22px var(--lp-fonte-texto); }
@media (forced-colors: active) { .obs-ponto { forced-color-adjust: none; } }

/* ---------- "Voltar" ---------- */
.obs-voltar { display: inline-flex; align-items: center; gap: 4px; height: 32px; margin: 0 0 12px -8px; padding: 0 10px 0 6px; border: 0; border-radius: var(--ds-raio-medio);
  background: transparent; color: var(--ds-cor-texto-2); font: 500 13px/18px var(--lp-fonte-texto); cursor: pointer;
  transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva); }
.obs-voltar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.obs-voltar:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); }
.obs-voltar:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
.obs-voltar:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }

/* ---------- filtro do feed: texto com o fio que desliza até o escolhido ---------- */
.obs-filtro { position: relative; display: flex; gap: 22px; margin: 22px 0 6px; box-shadow: inset 0 -1px 0 var(--ds-cor-borda); }
.obs-filtro button { position: relative; padding: 10px 4px; margin: 0 -4px; border: 0; border-radius: var(--ds-raio-pequeno); background: transparent; color: var(--ds-cor-texto-2); cursor: pointer;
  font: 500 13px/18px var(--lp-fonte-texto); transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
.obs-filtro button:hover, .obs-filtro button[aria-pressed='true'] { color: var(--ds-cor-texto); }
.obs-filtro button:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }
.obs-filtro button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: -2px; }
.obs-fio { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; background: var(--ds-cor-texto); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 280ms var(--ds-curva-painel); pointer-events: none; }
/* sem JavaScript o fio fica sob o primeiro */
html:not(.js) .obs-filtro button[aria-pressed='true']::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 1px; background: var(--ds-cor-texto); }
@media (forced-colors: active) { .obs-fio { background: CanvasText; forced-color-adjust: none; } }

/* ---------- linhas (feed e resultados): sem caixa, fio entre elas, fundo no hover ---------- */
.obs-lista { list-style: none; margin: 0; padding: 0; }
/* a borda só existe depois de um item visível: com o filtro escondendo os primeiros, o primeiro item à mostra não leva
   borda, que ficava a 6 px do sublinhado das abas (linha dupla) */
.obs-lista > li:not([hidden]) ~ li { box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
.obs-lista > li[hidden] { display: none; }
.obs-linha { display: grid; row-gap: 4px; margin: 0 -12px; padding: 14px 12px; border-radius: var(--ds-raio-medio); color: var(--ds-cor-texto); text-decoration: none;
  transition: background-color var(--ds-dur-rapida) var(--ds-curva); }
.obs-linha:hover { background-color: var(--ds-cor-realce-leve); }
.obs-linha:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }
.obs-linha:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: -2px; }
.obs-linha-nome { font-family: var(--lp-fonte-titulo); font-weight: 300; font-size: 22px; line-height: 27px; letter-spacing: -0.012em; font-optical-sizing: auto; text-wrap: balance; }
.obs-linha-texto { color: var(--ds-cor-texto-2); font-size: 13px; line-height: 19px; text-wrap: pretty; }
/* o ponto de regime fica na primeira linha e o texto quebra ao lado dele, nunca embaixo */
.obs-linha-info { display: flex; align-items: flex-start; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 19px; }
.obs-linha-info > span { min-width: 0; }
.obs-linha-info .obs-ponto { margin-top: 5.5px; }
.obs-linha .obs-tipo { margin-bottom: 1px; }

.obs-res-titulo { margin: 4px 0 0; font-family: var(--lp-fonte-titulo); font-weight: 300; font-size: 28px; line-height: 1.15; letter-spacing: -0.018em; color: var(--ds-cor-texto-2); text-wrap: balance; }
.obs-res-titulo .num { color: var(--ds-cor-texto); font-weight: 400; }
.obs-res-titulo q { color: var(--ds-cor-texto); quotes: '\201C' '\201D'; }
.obs-res-titulo:focus { outline: none; }
.obs-res-cab { margin-bottom: 10px; }
.obs-mais { margin: 14px 0 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
.obs-sugestoes { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 0; }
.obs-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.obs-acoes .botao { height: 44px; padding: 0 18px; font-size: 15px; }
/* dentro do vidro o botão secundário é um preenchimento quieto (vidro sobre vidro não se empilha) */
.obs-painel .botao-vidro { background: var(--ds-cor-realce); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--ds-cor-borda); }
.obs-painel .botao-vidro:hover { background: var(--ds-cor-preenchimento); }
.obs-painel .botao-vidro:active { background: color-mix(in srgb, var(--ds-cor-texto) 22%, transparent); }

/* ---------- fichas ---------- */
/* as duas listas uma embaixo da outra: é a disposição que o dono viu e aprovou ("o formato está bom"); a regra em colunas
   vinha sendo engolida por um resto de CSS do "Em alta" retirado, corrigido em 04/10 */
.obs-dist { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 24px; }
.obs-barras { list-style: none; margin: 0; padding: 0; }
/* sem fio entre as linhas: o trilho de cada barra já separa uma da outra */
.obs-barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 5px; padding: 7px 0 8px; font-size: 13px; line-height: 18px; }
.obs-barras .b-nome { color: var(--ds-cor-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-barras .b-valor { color: var(--ds-cor-texto-2); text-align: right; font-variant-numeric: tabular-nums; }
.obs-barras .b-barra { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ds-cor-texto) 8%, transparent); overflow: hidden; }
/* "Por substância": a barra na cor da família (--c, vinda de observatorio.js); sem família confirmada, neutra */
.obs-barras .b-barra span { display: block; height: 100%; border-radius: 2px; background: var(--c, var(--ds-cor-texto-2)); transform-origin: 0 50%; transform: scaleX(var(--w));
  animation: obs-barra 640ms var(--ds-curva-painel) 160ms backwards; }
@keyframes obs-barra { from { transform: scaleX(0); } }
/* "Por estado" fica neutro: o nome no texto secundário, o número no principal; a barra no mesmo neutro da substância
   sem família (texto-2, um pouco abaixo dos 72% de antes). Um cinza mais escuro (52%) ficava igual ao cinza da família
   Materiais de Construção (#888780) */
.obs-barras[data-barras='estado'] .b-nome { color: var(--ds-cor-texto-2); }
.obs-barras[data-barras='estado'] .b-valor { color: var(--ds-cor-texto); }
@media (forced-colors: active) { .obs-barras .b-barra span { forced-color-adjust: none; } }

.obs-tabela { list-style: none; margin: 0; padding: 0; }
.obs-tabela li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--ds-cor-borda); font-size: 13px; line-height: 18px; }
.obs-tabela li:first-child { box-shadow: inset 0 1px 0 var(--ds-cor-borda), inset 0 -1px 0 var(--ds-cor-borda); }
.obs-tabela li > span:last-child { color: var(--ds-cor-texto-2); }
.obs-tabela .link-texto { margin: -6px -4px; padding: 6px 4px; color: var(--ds-cor-texto); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ds-cor-texto) 36%, transparent); text-underline-offset: 3px; }
.obs-tabela .link-texto:hover { text-decoration-color: currentColor; }

.obs-cad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; margin: 22px 0 0; }
.obs-cad div { padding: 10px 0; box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
.obs-cad .largo { grid-column: 1 / -1; }
.obs-cad dt { color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; }
.obs-cad dd { margin: 3px 0 0; color: var(--ds-cor-texto); font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.obs-cad dd .link-texto { margin: -4px -4px; padding: 4px 4px; color: var(--ds-cor-texto); font-size: 15px; line-height: 22px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ds-cor-texto) 36%, transparent); text-underline-offset: 3px; }
.obs-cad dd .link-texto:hover { text-decoration-color: currentColor; }
/* o nome de pessoa: o rótulo ao lado ("Empresário individual", "Pessoa física"); a nota sobre nomes de pessoas, no pé da ficha,
   logo abaixo do "Atualizado em", no mesmo corpo e na mesma cor */
.obs-tit-rotulo { color: var(--ds-cor-texto-2); }
.obs-nota-nome { margin: 8px 0 0; font-size: 12px; line-height: 16px; }
.obs-nota-nome .link-texto { margin: -4px -2px; color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ds-cor-texto-2) 40%, transparent); text-underline-offset: 3px; }
.obs-nota-nome .link-texto:hover { color: var(--ds-cor-texto); text-decoration-color: currentColor; }
/* o anel de foco junto do texto, para não cortar a linha do "Atualizado em" logo acima */
.obs-nota-nome .link-texto:focus-visible { outline-offset: 1px; }

/* o "Atualizado em", no pé dos campos abertos (só nas fichas) */
.obs-atualizado { margin: 12px 0 0; color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }

/* a etiqueta do último evento: borrada; a frase aparece no ponteiro ou no foco, só com opacidade, sem deslocar nada */
.obs-etiqueta { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 6px -4px 0; padding: 4px; border-radius: var(--ds-raio-pequeno); outline: none; }
.obs-dica { color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; opacity: 0; transition: opacity var(--ds-dur-rapida) var(--ds-curva); }
.obs-etiqueta:hover .obs-dica, .obs-etiqueta:focus-visible .obs-dica { opacity: 1; }
.obs-etiqueta:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
@media (hover: none) { .obs-dica { opacity: 1; } }

/* o bloco fechado: a leitura do TERRADAR, só marcador; os mesmos itens e o mesmo tamanho em toda ficha */
.obs-fechado { margin-top: 32px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
.obs-fe { margin: 0; }
.obs-fe > div { padding: 10px 0; box-shadow: inset 0 -1px 0 var(--ds-cor-borda); }
.obs-fe > div:first-child { box-shadow: inset 0 1px 0 var(--ds-cor-borda), inset 0 -1px 0 var(--ds-cor-borda); }
.obs-fe dt { color: var(--ds-cor-texto); font: 500 13px/18px var(--lp-fonte-texto); }
.obs-fe dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; margin: 2px 0 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; text-wrap: pretty; }
.obs-fe .obs-fe-largo dd { display: block; }
/* texto constante desfocado: lê como texto escondido; não tem valor nenhum por baixo */
.obs-borrao { justify-self: end; color: var(--ds-cor-texto); font-size: 13px; line-height: 18px; white-space: nowrap; filter: blur(4px); user-select: none; pointer-events: none; }
.obs-terr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; margin-top: 12px; }
.obs-terr-g { margin: 0 0 4px; color: var(--ds-cor-texto); font: 500 12px/16px var(--lp-fonte-texto); }
.obs-terr ul { list-style: none; margin: 0; padding: 0; }
.obs-terr li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 4px 0; font-size: 12px; line-height: 16px; }
.obs-terr li .obs-borrao { font-size: 12px; filter: blur(3.5px); }
/* a faixa de ação, presa ao pé do painel nas fichas: sempre à vista, sem cartão */
.obs-acao { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 24px 16px; box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
.obs-acao[hidden] { display: none; }
.obs-acao p { margin: 0; color: var(--ds-cor-texto); font-size: 15px; line-height: 20px; text-wrap: pretty; } /* 15 px, como o botão ao lado (14 px ficava fora da escala) */
.obs-acao .botao { flex: none; height: 44px; padding: 0 18px; font-size: 15px; }
@media (forced-colors: active) { .obs-borrao i { background: GrayText; forced-color-adjust: none; } }

/* links de texto do painel: a pressão responde no pointer-down */
.obs-painel .link-texto { transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva), text-decoration-color var(--ds-dur-rapida) var(--ds-curva); }
.obs-painel .link-texto:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }

/* ---------- rodapé curto, no fim do painel ---------- */
.obs-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 16px 0 20px; box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
.obs-rodape p { margin: 0; color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; }
.obs-rodape nav { display: flex; flex-wrap: wrap; gap: 0 14px; }
.obs-rodape .link-texto { font-size: 12px; line-height: 16px; }

/* ---------- celular: o mapa numa faixa no alto, o painel embaixo ---------- */
@media (max-width: 760px) {
  .obs-mapa { bottom: auto; height: 30vh; height: 30svh; } /* o Alex aprovou 30% (antes 38%): mais altura para ler o painel */
  .obs-mapa::before { content: none; }
  /* a atribuição à direita do logotipo do Mapbox, em duas linhas se precisar, terminando na mesma linha de base dele */
  .obs .atribuicao { bottom: auto; top: calc(var(--lp-topo) + 30svh - 48px); left: 104px; right: 12px; text-align: right; }
  /* o logotipo do Mapbox (obrigatório) na mesma linha da atribuição, acima da borda do painel que sobe sobre o mapa */
  .obs .mapboxgl-ctrl-bottom-left { bottom: 14px; }
  .obs-mapa .logo-reserva { bottom: 20px; }
  .obs-painel { left: 0; right: 0; width: auto; top: calc(var(--lp-topo) + 30svh - 12px); bottom: 0; border-radius: var(--ds-raio-grande) var(--ds-raio-grande) 0 0; }
  .obs-busca-faixa { padding: 14px 16px 10px; }
  .obs-rolo { padding: 2px 20px 0; }
  .obs-h1 { font-size: 27px; }
  .obs-res-titulo { font-size: 24px; }
  .obs-busca.busca input { font-size: 16px; }
  .obs-filtro { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .obs-filtro button { padding: 13px 4px; white-space: nowrap; }
  .obs-dist { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .obs-tabela li { grid-template-columns: 1fr; row-gap: 2px; }
  .obs-acao { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .obs-acao p { font-size: 13px; line-height: 18px; }
  .obs-terr { grid-template-columns: minmax(0, 1fr); }
  .obs-voltar { height: 44px; }
  /* a lupa responde em 44 px (busca.js/hero); no campo de 48 ela fica a 2 px das bordas, sem vazar */
  .obs-busca .lupa { top: 2px; right: 2px; }
  /* alvos de 44 px no dedo */
  .obs-sugestoes { gap: 0 20px; margin-top: 4px; }
  .obs-sugestoes .link-texto { padding: 13px 4px; margin: 0 -4px; }
}
@media (max-width: 760px) and (pointer: coarse) { .obs-tabela .link-texto, .obs-cad dd .link-texto { display: inline-block; padding: 13px 4px; margin: -13px -4px; } }
/* como no rodapé comum: no dedo, o link do rodapé responde em 44 px */
@media (pointer: coarse) { .obs-rodape { padding: 8px 0 12px; row-gap: 0; } .obs-rodape .link-texto { min-width: 44px; padding-top: 14px; padding-bottom: 14px; } }
@media (pointer: coarse) { .obs-nota-nome .link-texto { padding: 14px 2px; margin: -14px -2px; } }

@media (prefers-reduced-motion: reduce) {
  .obs-mapa-fundo { transition: opacity 180ms linear; }
  .obs-fio { transition: none; }
  .obs-barras .b-barra span { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .obs-painel { background: var(--ds-cor-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Metais Raros fica abaixo de 3:1 contra o vidro: a barra leva um contorno fino no tom do texto (observatorio.js, BAIXO_CONTRASTE) */
.obs-barras .b-barra span[data-contorno] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 30%, transparent); }

/* ---------- o painel largo no feed (aprovado pelo Alex; desenho em _ferramentas/paginas/PAINEL-LARGO-desenho.md) ----------
   Acima de 760 px o painel vira só leiaute; o vidro, o contorno e a sombra moram na .obs-sup, que muda de largura só por transform
   (a janela .sm-vidro em translateX(-d), o vidro dentro dela em translateX(d); o contorno e a sombra em duas cópias, cortadas a 12 px
   da borda esquerda). O campo da busca usa a mesma peça (.sm). d vem de --sm-d (no repouso) ou da animação (observatorio.js). */
.obs-sup, .obs-veu, .obs-busca .sm { display: none; }

@media (min-width: 761px) {
  /* o painel: só leiaute (o vidro passou para a .obs-sup) */
  .obs-painel { width: var(--obs-larg-atual, var(--obs-painel)); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  /* o conteúdo na largura do conteúdo, que só troca com ele escondido */
  .obs-rolo, .obs-acao { width: var(--obs-conteudo, 100%); }
  .obs-busca-faixa::after { right: auto; width: var(--obs-conteudo, 100%); }

  /* a peça que muda de largura por transform */
  .obs-sup { display: block; position: absolute; left: var(--obs-esq); top: calc(var(--lp-topo) + var(--obs-vao)); bottom: var(--obs-vao); width: var(--obs-largo, var(--obs-painel)); z-index: 2; pointer-events: none; }
  .obs-busca .sm { display: block; }
  .sm { position: absolute; left: 0; top: 0; bottom: 0; width: var(--sm-max); pointer-events: none; }
  .sm-vidro { position: absolute; inset: 0; border-radius: var(--sm-raio); overflow: clip; transform: translateX(calc(-1 * var(--sm-d, 0px))); }
  .sm-vidro > i { position: absolute; inset: 0; border-radius: var(--sm-raio); background: var(--sm-fundo); -webkit-backdrop-filter: var(--sm-desfoque, none); backdrop-filter: var(--sm-desfoque, none);
    transform: translateX(var(--sm-d, 0px)); transition: background-color var(--ds-dur-rapida) var(--ds-curva); }
  .sm-esq, .sm-dir { position: absolute; top: calc(-1 * var(--sm-folga)); bottom: calc(-1 * var(--sm-folga)); overflow: clip; }
  .sm-esq { left: calc(-1 * var(--sm-folga)); width: calc(var(--sm-folga) + var(--sm-raio)); }
  .sm-dir { left: var(--sm-raio); width: calc(var(--sm-max) - var(--sm-raio) + var(--sm-folga)); }
  .sm-esq > i, .sm-dir > i { position: absolute; top: var(--sm-folga); bottom: var(--sm-folga); border-radius: var(--sm-raio); box-shadow: var(--sm-contorno); transition: box-shadow var(--ds-dur-rapida) var(--ds-curva); }
  .sm-esq > i { left: var(--sm-folga); width: var(--sm-min); }
  .sm-dir > i { left: calc(-1 * var(--sm-raio)); width: var(--sm-max); transform: translateX(calc(-1 * var(--sm-d, 0px))); }

  /* o painel: o mesmo vidro, contorno e sombra de antes (observatorio.css, .obs-painel) */
  .obs-sup .sm { --sm-raio: var(--ds-raio-grande); --sm-folga: 24px; --sm-max: var(--obs-largo, var(--obs-painel)); --sm-min: var(--obs-painel);
    --sm-fundo: var(--ds-material-forte); --sm-desfoque: var(--ds-material-desfoque);
    --sm-contorno: var(--ds-sombra-popover), inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 8%, transparent); }
  /* o campo: o mesmo fundo, fio e anel de foco de antes (o ::before sai) */
  .obs-busca.busca::before { display: none; }
  .obs-busca .sm { --sm-raio: var(--ds-raio-grande); --sm-folga: 4px; --sm-max: calc(var(--obs-largo, var(--obs-painel)) - 48px); --sm-min: calc(var(--obs-painel) - 48px);
    --sm-fundo: var(--ds-cor-campo); --sm-contorno: inset 0 0 0 1px var(--ds-cor-borda); }
  .obs-busca.busca:hover .sm-vidro > i { background: color-mix(in srgb, var(--ds-cor-texto) 9%, transparent); }
  .obs-busca.busca:focus-within .sm { --sm-contorno: inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 60%, transparent), 0 0 0 3px color-mix(in srgb, var(--ds-cor-texto) 8%, transparent); }

  /* o véu de leitura atrás do painel (era .obs-mapa::before): um elemento mais largo para a esquerda, que anda com a borda */
  .obs-mapa::before { content: none; }
  .obs-veu { display: block; position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none;
    left: calc(var(--obs-painel) - var(--obs-largo, var(--obs-painel)));
    width: calc(var(--obs-esq) + 2 * var(--obs-largo, var(--obs-painel)) - var(--obs-painel) + 160px);
    background: linear-gradient(90deg, color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) calc(100% - 160px), transparent 100%);
    transform: translateX(calc(-1 * var(--sm-d, 0px))); }

  /* a largura a mais vira linha (a revisora, 06/10): o título na largura toda do conteúdo, quebrando com text-wrap: pretty (o balance
     partia em duas metades curtas), só no painel largo; o resumo em até 75 caracteres por linha: 470 px na fonte do corpo (75ch dá
     615 px, uns 95 caracteres: o ch é a largura do "0", mais largo que a letra média) */
  .obs-vista[data-estado='feed'] .obs-linha-texto { max-width: 470px; }
  #obs[data-largo] .obs-vista[data-estado='feed'] .obs-linha-nome { text-wrap: pretty; }

}

/* ---------- os estados, a etiqueta no ponto e o município de perto (observatorio-ufs.js; aprovado pelo Alex) ----------
   Texto da casa com o contorno na cor de fundo, sem caixa; a etiqueta e o nome do município com um véu curto (o fundo a 86%), sem
   raio. Só opacidade. A sigla mora dentro de uma caixa (.obs-uf-marca): o marcador do MapLibre põe opacity: 1 nela. */
.obs-uf-sigla, .obs-mun-rotulo, .obs-etiqueta-ponto {
  font-family: var(--lp-fonte-texto); white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity var(--ds-dur-media) var(--ds-curva);
  text-shadow: 1px 0 0 var(--ds-cor-fundo), -1px 0 0 var(--ds-cor-fundo), 0 1px 0 var(--ds-cor-fundo), 0 -1px 0 var(--ds-cor-fundo), 0 0 4px var(--ds-cor-fundo);
}
/* a caixa do marcador (o MapLibre põe opacity: 1 nela); a sigla dentro é que entra e sai. Acima dos véus de leitura do mapa
   (z-index 1: o de cima apagava o RR, o da esquerda as siglas perto do painel) e abaixo do painel e do vidro (2, que vêm depois) */
.obs-uf-marca { display: block; pointer-events: none; line-height: 0; z-index: 2; }
.obs-uf-sigla { display: block; font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; color: var(--ds-cor-texto-2); }
.obs-uf-sigla.visivel, .obs-mun-rotulo.visivel, .obs-etiqueta-ponto.visivel { opacity: 1; }
/* o município de perto e a etiqueta do ponto: um véu curto atrás (a cor de fundo a 86%, como o crédito), sem raio de cartão (sobre o
   relevo claro, o nome do município sem véu ficava a 3,5:1) */
.obs-mun-rotulo, .obs-etiqueta-ponto { position: absolute; left: 0; top: 0; padding: 3px 7px; font-size: 12px; line-height: 16px; color: var(--ds-cor-texto);
  background: color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent); }
.obs-mun-rotulo { z-index: 2; }
.obs-etiqueta-ponto { z-index: 3; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .obs-uf-sigla, .obs-mun-rotulo, .obs-etiqueta-ponto { transition: opacity var(--ds-dur-media) linear; } }