/* ==========================================================================
   styles.css — Mapa de Obras Públicas de Iguape/SP

   Contém o layout essencial (não depende do Tailwind, que no protótipo é
   gerado no navegador), os componentes, os pinos e grupos do mapa, os
   popups, o foco visível e o modo de movimento reduzido.
   Tamanhos de texto: base 16 px, secundário ≥ 13 px, nada abaixo de 12 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis e base
   -------------------------------------------------------------------------- */
:root {
  --cor-principal: #1d4e89; /* substituída pelo valor de CONFIG.institucional.corPrincipal */
  --cor-principal-escura: color-mix(in srgb, var(--cor-principal) 78%, #000000);
  --cor-principal-funda: color-mix(in srgb, var(--cor-principal) 82%, #0b1f3a);
  --cor-principal-clara: color-mix(in srgb, var(--cor-principal) 9%, #ffffff);
  --cor-texto: #0f172a;
  --cor-texto-secundario: #475569;
  --cor-borda: #cbd5e1;
  --cor-borda-suave: #e2e8f0;
  --cor-fundo: #f1f5f9; /* faixas que seguram cards (KPIs, lista) */
  --cor-superficie: #ffffff;
  --cor-foco: #1d4ed8;
  --largura-barra: 410px; /* inclui o espaço reservado à barra de rolagem da coluna (ver seções 15 a 17) */
  /* Cantos e sombras: uma escala só para o site inteiro */
  --raio-p: 8px; /* etiquetas, avisos e itens pequenos */
  --raio-b: 10px; /* botões, campos e controles do mapa */
  --raio-m: 12px; /* cards, KPIs, legenda */
  --raio-g: 16px; /* popups, janelas e painel inferior */
  /* Margem lateral do cabeçalho, dos KPIs e da barra lateral (alinhados entre si) */
  --margem: 16px;
  --sombra-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1);
  --sombra-2: 0 4px 14px rgba(15, 23, 42, 0.12);
  --sombra-media: 0 6px 20px rgba(15, 23, 42, 0.16);
  --sombra-3: 0 16px 40px rgba(15, 23, 42, 0.26);
  --transicao: 0.15s ease;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/*
 * Navegadores sem color-mix() (Safari/iOS antes do 16.2, Chrome antes do 111): as cores
 * derivadas viram valores fixos, calculados a partir do azul institucional padrão (#1d4e89).
 */
@supports not (color: color-mix(in srgb, red, red)) {
  :root {
    --cor-principal-escura: #173d6b;
    --cor-principal-funda: #1a467b;
    --cor-principal-clara: #ebeff4;
  }
}

/* Barras de rolagem discretas, mas visíveis (Chrome, Edge e Firefox) */
* {
  scrollbar-color: #94a3b8 transparent;
}

/* Faixas que rolam na horizontal (KPIs e categorias no celular e no tablet): um degradê
   na borda mostra que há mais itens. O atributo data-rolagem é ligado em ui.js. */
.rolagem-horizontal[data-rolagem='inicio'] {
  -webkit-mask-image: linear-gradient(to right, #000000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000000 calc(100% - 32px), transparent);
}

.rolagem-horizontal[data-rolagem='meio'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000000 32px, #000000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000000 32px, #000000 calc(100% - 32px), transparent);
}

.rolagem-horizontal[data-rolagem='fim'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000000 32px);
  mask-image: linear-gradient(to right, transparent, #000000 32px);
}

/* Numa faixa que rola, o contorno de foco é desenhado por dentro do item: a borda da
   faixa (overflow) não o corta */
.rolagem-horizontal > :focus-visible,
.rolagem-horizontal > * > :focus-visible {
  outline-offset: -3px;
}

.icone {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Texto só para leitores de tela */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Foco visível em tudo que é operável pelo teclado */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

/* Links para pular direto à busca ou ao mapa */
.pular-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 4000;
  padding: 10px 16px;
  background: #ffffff;
  color: var(--cor-texto);
  font-weight: 600;
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-media);
  transform: translateY(-200%);
}

.pular-link:focus {
  transform: none;
}

/* Avisos de abertura pelo arquivo (file://) e sem JavaScript */
.aviso-arquivo,
.aviso-noscript {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: #ffffff;
  color: var(--cor-texto);
  font-size: 20px;
  text-align: center;
}

.aviso-arquivo strong,
.aviso-noscript strong {
  font-size: 26px;
}

/* --------------------------------------------------------------------------
   2. Botões, etiquetas e campos
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio-b);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word; /* rótulos longos quebram a linha em vez de transbordar */
  transition: background-color var(--transicao), border-color var(--transicao), box-shadow var(--transicao),
    color var(--transicao);
}

.botao--principal {
  background: var(--cor-principal);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.botao--principal:hover {
  background: var(--cor-principal-escura);
}

.botao--secundario {
  background: var(--cor-superficie);
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}

@media (hover: hover) {
  .botao--secundario:hover {
    background: var(--cor-principal-clara);
    border-color: color-mix(in srgb, var(--cor-principal) 45%, #ffffff);
    color: var(--cor-principal-funda);
  }
}

.botao--perigo {
  background: #b91c1c;
  color: #ffffff;
}

.botao--perigo:hover {
  background: #991b1b;
}

.botao--texto {
  min-height: 36px;
  padding: 6px 8px;
  background: transparent;
  color: var(--cor-principal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.botao--pequeno {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
}

.botao[disabled],
.botao[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Etiqueta de situação: ícone + texto (nunca só cor) */
.etiqueta-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cor-status, #64748b) 45%, #ffffff);
  background: var(--cor-status-fundo, #f8fafc);
  color: var(--cor-status-texto, #334155);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.etiqueta-teste {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  background: #111827;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.aviso-aproximado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  border: 1px dashed #92400e;
  background: #fffbeb;
  color: #78350f;
  font-size: 14px;
}

/* Local oficial com a localização ajustada neste navegador ("Mover ponto": modo teste e site aberto
   neste computador); também o aviso da janela "Baixar dados" */
.aviso-ajustado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  border: 1px solid #b45309;
  background: #fff7ed;
  color: #7c2d12;
  font-size: 14px;
}

.aviso-ajustado > .icone {
  flex: none;
  margin-top: 2px;
}

.aviso-ajustado p {
  margin: 0;
}

.aviso-ajustado p + p {
  margin-top: 2px;
}

.aviso-ajustado-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   3. Estrutura da página
   -------------------------------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.cabecalho,
.faixa-teste,
.kpis,
.alternador {
  flex: none;
}

.principal {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--largura-barra) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.barra-lateral,
.painel-detalhes {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid var(--cor-borda);
}

/* Faixa com a cor da situação no topo do painel de detalhes (--cor-status vem de ui.js).
   Recorte da tela (celular deitado): o painel de detalhes, todo branco, afasta o conteúdo
   inteiro; na lista e no formulário, cada bloco usa max(margem, recorte), alinhado ao
   cabeçalho e sem faixa branca ao lado do fundo cinza. */
.painel-detalhes {
  padding-left: env(safe-area-inset-left);
  border-top: 5px solid var(--cor-status, transparent);
}

.area-mapa {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  isolation: isolate; /* camadas e controles do Leaflet ficam contidos no mapa */
  z-index: 0;
}

.mapa {
  position: absolute;
  inset: 0;
  background: #dbe2ea;
}

/* Enquanto o Leaflet não monta o mapa (bibliotecas ainda carregando), um aviso discreto
   ocupa o lugar; a classe leaflet-container entra na montagem e o aviso some sozinho */
.mapa:not(.leaflet-container)::after {
  content: 'Carregando o mapa…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cor-texto-secundario);
  font-size: 15px;
  font-weight: 600;
}

/* Contorno de foco do mapa por dentro da borda (as bordas da tela não o cortam).
   O Leaflet foca o mapa a cada clique: depois de um clique o contorno some até
   a próxima tecla (classe mapa--foco-ponteiro, ver mapa.js) */
.mapa:focus-visible {
  outline-offset: -3px;
}

.mapa.mapa--foco-ponteiro:focus-visible {
  outline: none;
}

/* No computador, o painel de detalhes substitui a lista na barra lateral */
.app[data-painel='detalhes'] .barra-lateral {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Cabeçalho
   -------------------------------------------------------------------------- */
.cabecalho {
  position: relative;
  z-index: 1; /* a sombra fica por cima da faixa dos KPIs */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Margens laterais respeitam o recorte da tela (notch) no celular deitado */
  padding: 10px max(var(--margem), env(safe-area-inset-right)) 10px max(var(--margem), env(safe-area-inset-left));
  /* Cor sólida separada do degradê: se o degradê falhar, o fundo azul continua */
  background-color: var(--cor-principal);
  background-image: linear-gradient(100deg, var(--cor-principal) 0%, var(--cor-principal-funda) 100%);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 8px rgba(15, 23, 42, 0.18);
}

.cabecalho :focus-visible {
  outline-color: #fbbf24;
}

.cabecalho-marca {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cabecalho-brasao {
  display: block;
  height: 56px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
  flex: none;
  /* O contorno branco uniforme já está na imagem; a sombra só descola o brasão do azul */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

.cabecalho-prefeitura {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  opacity: 0.9;
}

.cabecalho-titulo {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cabecalho-data {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.88;
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.botao-cabecalho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--raio-b);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--transicao), border-color var(--transicao);
}

.botao-cabecalho:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   5. Faixa do modo teste
   -------------------------------------------------------------------------- */
.faixa-teste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 8px;
  padding-inline: max(var(--margem), env(safe-area-inset-left)) max(var(--margem), env(safe-area-inset-right));
  border-bottom: 2px solid #92400e;
  background: repeating-linear-gradient(-45deg, #fef3c7 0 14px, #fde68a 14px 28px);
  color: #451a03;
}

.faixa-teste-texto {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.faixa-teste-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   6. KPIs (filtros por situação)
   -------------------------------------------------------------------------- */
.kpis {
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}

.kpis-faixa {
  display: flex;
  gap: 10px;
  padding-block: 10px;
  padding-inline: max(var(--margem), env(safe-area-inset-left)) max(var(--margem), env(safe-area-inset-right));
  overflow-x: auto;
  scroll-padding-inline: 32px; /* o card encaixado fica fora do degradê da borda (32 px) */
  scrollbar-width: thin;
}

/* Encaixe dos cards só no toque (arrastar com o dedo): com mouse ou touchpad, o encaixe
   devolvia a faixa ao card anterior a cada giro curto da roda */
@media (pointer: coarse) {
  .kpis-faixa {
    scroll-snap-type: x proximity;
  }
}

.kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 54px;
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-align: left;
  box-shadow: var(--sombra-1);
  scroll-snap-align: start;
  transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}

@media (hover: hover) {
  .kpi:hover {
    border-color: color-mix(in srgb, var(--kpi-cor, var(--cor-principal)) 55%, #ffffff);
    box-shadow: var(--sombra-2);
  }
}

.kpi[aria-pressed='true'] {
  border: 2px solid var(--kpi-cor, var(--cor-principal));
  padding: 6px 15px 6px 7px;
  background: var(--kpi-fundo, var(--cor-principal-clara));
  box-shadow: var(--sombra-2);
}

.kpi-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kpi-fundo, var(--cor-principal-clara));
  color: var(--kpi-cor-texto, var(--cor-principal));
  border: 2px solid var(--kpi-cor, var(--cor-principal));
  flex: none;
}

.kpi-rotulo {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kpi-cor-texto, var(--cor-texto));
}

.kpi-valor {
  display: block;
  font-size: 14px;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

/* Números das contagens em destaque (o texto lido continua "8 contratos · 14 locais") */
.kpi-numero {
  color: var(--cor-texto);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kpi[aria-pressed='true'] .kpi-valor {
  color: var(--cor-texto);
  font-weight: 600;
}

/* Situação sem nenhum local (ex.: Paralisadas 0): cartão "vazio", tracejado e mais apagado */
.kpi--vazio:not([aria-pressed='true']) {
  border-style: dashed;
  border-color: var(--cor-borda);
  box-shadow: none;
  background: transparent;
}

.kpi--vazio:not([aria-pressed='true']) .kpi-icone {
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   7. Barra lateral: filtros, lista e cards
   -------------------------------------------------------------------------- */
.painel-lista,
.painel-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* A barra lateral rola inteira (filtros, lista e rodapé), como uma coluna só:
   em telas baixas a lista não fica espremida numa faixa estreita */
.painel-lista {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable; /* a largura não muda quando a lista fica curta */
}

.filtros {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a faixa rolável de categorias não alarga a coluna */
  gap: 14px;
  padding: 16px var(--margem) 14px;
  padding-left: max(var(--margem), env(safe-area-inset-left));
  border-bottom: 1px solid var(--cor-borda);
}

.rotulo-campo {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cor-texto);
}

.campo-busca {
  position: relative;
}

.campo-busca .icone {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cor-texto-secundario);
  pointer-events: none;
}

.campo-busca input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px 10px 42px;
  border: 1px solid #94a3b8;
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  font-size: 16px;
  transition: border-color var(--transicao);
}

@media (hover: hover) {
  .campo-busca input:hover {
    border-color: #64748b;
  }
}

/* Foco: o contorno de 3 px de todo o site (inclusive no Alto Contraste do Windows) + a borda azul */
.campo-busca input:focus-visible {
  border-color: var(--cor-foco);
  outline-offset: 1px;
}

.campo-busca input::placeholder {
  color: #64748b;
}

.pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 6px 4px 11px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

@media (hover: hover) {
  .pilula:hover {
    border-color: color-mix(in srgb, var(--cor-principal) 45%, #ffffff);
    background: var(--cor-principal-clara);
  }
}

.pilula[aria-pressed='true'] {
  border-color: var(--cor-principal);
  background: var(--cor-principal);
  color: #ffffff;
}

.pilula-contagem {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cor-fundo);
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pilula[aria-pressed='true'] .pilula-contagem {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.pilula--vazia:not([aria-pressed='true']) {
  color: var(--cor-texto-secundario);
  border-style: dashed;
}

.resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.resumo-texto {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
}

.resumo-acoes {
  display: flex;
  flex-wrap: wrap; /* "Limpar filtros" e "Ver todas no mapa" quebram a linha em barras estreitas */
  gap: 6px;
}

.lista {
  flex: none;
  margin: 0;
  padding: 14px var(--margem) 18px;
  padding-left: max(var(--margem), env(safe-area-inset-left));
  list-style: none;
  display: grid;
  align-content: start;
  gap: 10px;
}

/* A coluna da lista é um pouco mais escura que os cards, para eles se destacarem */
.painel-lista {
  background: var(--cor-fundo);
}

.card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 13px 14px 13px 13px;
  border: 1px solid var(--cor-borda-suave);
  border-left: 5px solid var(--cor-status, #64748b);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-align: left;
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}

@media (hover: hover) {
  .card:hover {
    border-color: #94a3b8;
    border-left-color: var(--cor-status, #64748b);
    box-shadow: var(--sombra-2);
  }
}

.card[aria-current='true'] {
  border-color: var(--cor-principal);
  border-left-color: var(--cor-status, #64748b);
  background: var(--cor-principal-clara);
  box-shadow: 0 0 0 2px var(--cor-principal), var(--sombra-2);
}

.card-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.card-contrato {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}

.card-titulo {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.card-linha {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  color: #334155;
}

.card-linha .icone {
  margin-top: 2px;
  color: var(--cor-texto-secundario);
}

.card-linha--ajuste,
.card-linha--ajuste .icone {
  color: #92400e;
}

/* Bloco do local (card, popup e detalhes): nome, endereço e "Bairro: …", cada um numa linha;
   endereço e bairro um pouco menores, abaixo do nome */
.local-bloco {
  display: grid;
  min-width: 0;
  line-height: 1.4;
}

.local-linha {
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

.lista-vazia {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 32px 16px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  text-align: center;
  color: var(--cor-texto-secundario);
}

.lista-vazia > .icone {
  margin-bottom: 4px;
  color: #94a3b8;
}

.lista-vazia strong {
  display: block;
  color: var(--cor-texto);
  font-size: 17px;
}

.barra-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: auto; /* fica no pé da coluna quando há poucos cards */
  padding: 8px var(--margem);
  padding-left: max(var(--margem), env(safe-area-inset-left));
  border-top: 1px solid var(--cor-borda-suave);
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

/* --------------------------------------------------------------------------
   8. Painel de detalhes
   -------------------------------------------------------------------------- */
.detalhes-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cor-borda-suave);
  background: var(--cor-superficie);
}

/* Cabeçalho do formulário de teste (na barra lateral): também desvia do recorte da tela */
.painel-form > .detalhes-cabecalho {
  padding-left: max(14px, env(safe-area-inset-left));
}

.detalhes-alca {
  display: none;
}

.detalhes-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 28px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.detalhes-titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Seções separadas por uma linha fina, com o título em destaque */
.detalhes-secao {
  padding-top: 14px;
  border-top: 1px solid var(--cor-borda-suave);
}

.detalhes-secao h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cor-texto);
}

.detalhes-secao p {
  margin: 0;
}

.detalhes-objeto {
  white-space: pre-line;
  font-size: 15px;
  color: #1e293b;
}

.lista-dados {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 15px;
}

.lista-dados dt {
  color: var(--cor-texto-secundario);
  font-size: 14px;
}

.lista-dados dd {
  margin: 0;
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.barra-progresso {
  height: 10px;
  border-radius: 999px;
  background: var(--cor-borda-suave);
  overflow: hidden;
  margin-top: 4px;
}

.barra-progresso span {
  display: block;
  height: 100%;
  background: var(--cor-principal);
}

.coordenadas {
  display: grid;
  gap: 8px;
}

/* Coordenada e botão "Copiar" sempre lado a lado (a coordenada quebra se não couber) */
.coordenada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-m);
  background: #f8fafc;
}

.coordenada code {
  font-family: var(--fonte-mono);
  font-size: 15px;
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.coordenada-rotulo {
  display: block;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

.acoes-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* Último botão sem par ocupa a linha toda (sem meia linha vazia ao lado) */
.acoes-grade > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.unidades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.unidade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-b);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 14px;
  text-align: left;
  transition: background-color var(--transicao), border-color var(--transicao);
}

@media (hover: hover) {
  .unidade:hover {
    border-color: var(--cor-principal);
    background: var(--cor-principal-clara);
  }
}

.unidade[aria-current='true'] {
  border-color: var(--cor-principal);
  background: var(--cor-principal);
  color: #ffffff;
  font-weight: 600;
}

.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
}

.fotos figure {
  margin: 0;
}

.fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-p);
  background: var(--cor-borda-suave);
}

.fotos figcaption {
  margin-top: 4px;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

/* --------------------------------------------------------------------------
   9. Formulário do modo teste
   -------------------------------------------------------------------------- */
.form-teste {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px var(--margem) 24px;
  padding-left: max(var(--margem), env(safe-area-inset-left));
  display: grid;
  align-content: start;
  gap: 14px;
  background: var(--cor-fundo); /* os blocos do formulário são cartões brancos sobre o cinza */
  container-type: inline-size;
}

/* Campos lado a lado só quando o próprio formulário é largo (não a janela): na barra
   lateral, "Categoria" e "Situação" ficam um embaixo do outro e não são cortados */
.form-grade-2 {
  display: grid;
  gap: 12px;
}

@container (min-width: 460px) {
  .form-grade-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-teste fieldset {
  margin: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-1);
  display: grid;
  gap: 12px;
}

.form-teste legend {
  padding: 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.form-teste details {
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-1);
  padding: 12px 14px;
}

.form-teste summary {
  font-weight: 700;
  cursor: pointer;
}

.form-teste details[open] summary {
  margin-bottom: 10px;
}

.campo {
  display: grid;
  gap: 4px;
}

.campo label,
.campo .rotulo-campo {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.campo input:not([type='checkbox']),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #94a3b8;
  border-radius: var(--raio-b);
  background: var(--cor-superficie);
  font-size: 15px;
  transition: border-color var(--transicao);
}

.campo input:not([type='checkbox']):focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--cor-foco);
  outline-offset: 1px;
}

.campo textarea {
  min-height: 84px;
  resize: vertical;
}

.campo input[disabled],
.campo select[disabled],
.campo textarea[disabled] {
  background: #f1f5f9;
  color: #475569;
}

.campo-marcar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.campo-marcar input {
  width: 20px;
  height: 20px;
}

.campo-ajuda {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

.campo-erro {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #b91c1c;
}

.campo [aria-invalid='true'] {
  border-color: #b91c1c;
  box-shadow: 0 0 0 1px #b91c1c;
}

.obrigatorio {
  color: #b91c1c;
}

.retorno-coordenada {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  font-size: 14px;
  border: 1px solid var(--cor-borda-suave);
  background: #f8fafc;
}

.retorno-coordenada--ok {
  border-color: #6ee7b7;
  background: #ecfdf5;
  color: #065f46;
}

.retorno-coordenada--erro {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.retorno-coordenada code {
  font-family: var(--fonte-mono);
}

.aviso-contrato {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 14px;
}

.form-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   10. Alternância Mapa | Lista (celular)
   -------------------------------------------------------------------------- */
.alternador {
  position: relative;
  z-index: 1; /* a sombra fica por cima do mapa */
  display: none;
  gap: 8px;
  padding: 7px var(--margem) calc(7px + env(safe-area-inset-bottom));
  padding-inline: max(var(--margem), env(safe-area-inset-left)) max(var(--margem), env(safe-area-inset-right));
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
}

.alternador button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 16px;
  font-weight: 600;
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.alternador button[aria-pressed='true'] {
  border-color: var(--cor-principal);
  background: var(--cor-principal);
  color: #ffffff;
}

.alternador-contador {
  min-width: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 13px;
  font-weight: 700;
}

.alternador button[aria-pressed='true'] .alternador-contador {
  background: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   11. Modais
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-fundo {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  animation: modal-fundo-entrada 0.18s ease-out;
}

.modal-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: calc(100vh - 32px); /* navegadores sem a unidade dvh */
  max-height: calc(100dvh - 32px);
  border-radius: var(--raio-g);
  background: var(--cor-superficie);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  animation: modal-entrada 0.2s ease-out;
}

@keyframes modal-fundo-entrada {
  from {
    opacity: 0;
  }
}

@keyframes modal-entrada {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes folha-entrada {
  from {
    transform: translateY(40px);
    opacity: 0.6;
  }
}

.modal-caixa--pequena {
  width: min(460px, 100%);
}

.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.modal-titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.modal-corpo {
  overflow-y: auto;
  padding: 16px 18px;
  display: grid;
  gap: 14px;
}

.modal-corpo h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.modal-corpo p,
.modal-corpo ul {
  margin: 0;
}

.modal-corpo section > p + p,
.modal-corpo section > p + ul {
  margin-top: 8px;
}

.modal-corpo ul {
  padding-left: 20px;
}

.modal-corpo ul:not(.lista-status):not(.lista-teste):not(.item-teste-locais) {
  list-style: disc;
}

.modal-corpo li + li {
  margin-top: 2px;
}

.modal-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--cor-borda-suave);
}

.botao-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  flex: none;
  transition: background-color var(--transicao);
}

.botao-fechar:hover {
  background: #f1f5f9;
  color: var(--cor-texto);
}

.lista-status {
  list-style: none;
  padding: 0 !important;
  display: grid;
  gap: 10px;
}

.lista-status li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
}

.lista-teste {
  list-style: none;
  padding: 0 !important;
  display: grid;
  gap: 12px;
}

.item-teste {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-b);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.item-teste-locais {
  list-style: none;
  padding: 0 !important;
  display: grid;
  gap: 8px;
}

.item-teste-local {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--cor-borda-suave);
}

/* Lista de ajustes de localização ("Mover ponto") no modal "Obras de teste" */
.secao-ajustes {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #b45309;
  border-radius: var(--raio-b);
  background: #fff7ed;
}

/* --------------------------------------------------------------------------
   12. Avisos rápidos (toasts)
   -------------------------------------------------------------------------- */
/* Avisos rápidos: só informam, nunca bloqueiam cliques (pointer-events: none).
   No computador ficam no canto inferior esquerdo do MAPA (sem cobrir a lista e o card
   selecionado), longe dos títulos dos modais. */
.toasts {
  position: fixed;
  left: calc(var(--largura-barra) + 16px);
  bottom: max(16px, env(safe-area-inset-bottom)); /* acima da barra de gestos do celular deitado */
  z-index: 3000;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - var(--largura-barra) - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px 12px 14px;
  border-radius: var(--raio-m);
  background: #0f172a;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: var(--sombra-3);
  pointer-events: none;
  animation: toast-entrada 0.2s ease-out;
}

.toast > .icone {
  flex: none;
  margin-top: 1px;
  opacity: 0.9;
}

.toast--erro {
  background: #7f1d1d;
}

.toast--sucesso {
  background: #064e3b;
}

@keyframes toast-entrada {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. Leaflet: controles e popups (sem !important)
   -------------------------------------------------------------------------- */
.leaflet-container {
  font-family: var(--fonte);
  font-size: 14px;
  background: #dbe2ea;
}

/* Botões do mapa (zoom, "ver todas" e camadas) no mesmo estilo: cartões brancos,
   cantos de 10 px, sombra suave e área de toque maior em telas de toque */
.leaflet-container .leaflet-bar {
  border: 0;
  border-radius: var(--raio-b);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar .controle-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-bottom-color: var(--cor-borda-suave);
  background: var(--cor-superficie);
  font-size: 20px;
  color: var(--cor-texto);
  transition: background-color var(--transicao), color var(--transicao);
}

.leaflet-container .leaflet-bar a:first-child,
.leaflet-container .leaflet-bar a:last-child {
  border-radius: 0;
}

.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar .controle-botao:hover {
  background: var(--cor-principal-clara);
  color: var(--cor-principal-funda);
}

.leaflet-container .leaflet-bar a.leaflet-disabled {
  background: #f8fafc;
  color: #94a3b8;
}

.leaflet-container .leaflet-bar .controle-botao {
  border: 0;
}

.leaflet-container .leaflet-bar a:focus-visible,
.leaflet-container .leaflet-bar .controle-botao:focus-visible,
.leaflet-container .leaflet-control-layers-toggle:focus-visible {
  outline-offset: -3px;
}

/* Camadas: ícone próprio (mapa.js troca a imagem do Leaflet pelo ícone "layers") */
.leaflet-container .leaflet-control-layers {
  border: 0;
  border-radius: var(--raio-b);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(15, 23, 42, 0.08);
  background: var(--cor-superficie);
}

.leaflet-container .leaflet-control-layers-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--raio-b);
  color: var(--cor-texto);
}

/* Sem a imagem PNG só quando o ícone entrou (se a biblioteca de ícones falhar, ela fica) */
.leaflet-container .leaflet-control-layers-toggle.com-icone {
  background-image: none;
}

/* Só com o controle fechado (aberto, o Leaflet esconde o botão e mostra a lista) */
.leaflet-container .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaflet-container .leaflet-control-layers-toggle:hover {
  background-color: var(--cor-principal-clara);
  color: var(--cor-principal-funda);
}

.leaflet-container .leaflet-control-layers-expanded {
  min-width: 210px;
  padding: 10px 10px 8px;
  font-size: 15px;
}

.leaflet-container .leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: grid;
  gap: 2px;
}

.camadas-titulo {
  margin: 0 0 2px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.leaflet-container .leaflet-control-layers-separator {
  margin: 6px 4px;
  border-top-color: var(--cor-borda-suave);
}

.leaflet-container .leaflet-control-layers label {
  margin: 0;
  padding: 0;
}

.leaflet-container .leaflet-control-layers label > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 8px;
  border-radius: var(--raio-p);
  cursor: pointer;
}

.leaflet-container .leaflet-control-layers label > span:hover {
  background: var(--cor-principal-clara);
}

.leaflet-container .leaflet-control-layers-selector {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cor-principal);
}

.leaflet-container .leaflet-control-layers label > span > span {
  font-weight: 500;
}

/*
 * Atribuição: o canto inferior direito nunca invade o esquerdo (escala e
 * legenda). O texto fica numa linha e expande ao passar o mouse, tocar ou focar.
 */
.leaflet-container .leaflet-bottom.leaflet-right {
  max-width: calc(100% - 150px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
}

.leaflet-container .leaflet-control-attribution {
  max-width: 100%;
  overflow: hidden;
  padding: 1px 6px;
  border-top-left-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #1f2937;
  cursor: default;
}

.leaflet-container .leaflet-control-attribution:hover,
.leaflet-container .leaflet-control-attribution:focus,
.leaflet-container .leaflet-control-attribution:focus-within {
  white-space: normal;
}

.leaflet-container .leaflet-control-attribution a {
  color: #1e40af;
}

.leaflet-container .leaflet-control-scale-line {
  border-color: #334155;
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  color: #111827;
}

/* Popup: cartão com a cor da situação numa faixa no topo (--cor-status vem de ui.js) */
.popup-obra .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-3);
}

.popup-obra .leaflet-popup-content {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.popup-obra .leaflet-popup-tip {
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
}

.popup-obra a.leaflet-popup-close-button {
  top: 10px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #334155;
  font: 24px/40px system-ui, sans-serif;
  transition: background-color var(--transicao);
}

.popup-obra a.leaflet-popup-close-button:hover {
  background: #f1f5f9;
  color: var(--cor-texto);
}

/* Botões que são links dentro do mapa: mesma cor dos outros botões (o Leaflet pinta links de azul) */
.leaflet-container a.botao--secundario {
  color: var(--cor-texto);
}

.leaflet-container a.botao--secundario:hover {
  color: var(--cor-principal-funda);
}

.popup {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 5px solid var(--cor-status, transparent);
}

.popup-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-right: 36px; /* espaço do botão de fechar */
}

/* No popup a etiqueta pode quebrar a linha (popup estreito): nunca passa por baixo do × */
.popup .etiqueta-status {
  white-space: normal;
}

/* Locais do contrato no popup: compactos, para o popup caber em mapas baixos e em 360 px */
.popup .unidade {
  min-height: 36px;
  padding: 5px 10px;
}

.popup-obra .popup p {
  margin: 0;
}

.popup-contrato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 14px;
  color: var(--cor-texto-secundario);
}

.popup-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.popup-local {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  color: #334155;
}

.popup-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.popup-acoes .botao:first-child,
.popup-acoes .botao:last-child:nth-child(even) {
  grid-column: 1 / -1; /* "Ver detalhes" e um último botão sem par ocupam a linha toda */
}

.popup-acoes .botao--secundario {
  padding-inline: 10px;
  font-size: 14px;
}

.popup-unidades {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--cor-borda-suave);
}

.popup-unidades-titulo {
  font-size: 14px;
  font-weight: 600;
}

/* Popup minimizado (o padrão ao abrir): só o título e "Ampliar", para não cobrir o ponto e o
   entorno; a faixa colorida do topo continua mostrando a situação */
.popup--minimizado {
  gap: 6px;
  padding: 10px 14px 12px;
}

.popup--minimizado .popup-titulo {
  padding-right: 34px; /* espaço do botão de fechar, em todas as linhas do título */
  font-size: 16px;
}

.popup-minimizado-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Obra de teste: a etiqueta TESTE fica à esquerda, na mesma linha do "Ampliar" */
.popup-minimizado-acoes .etiqueta-teste {
  margin-right: auto;
}

/* Ampliado: botão redondo de minimizar ao lado do × (mesma altura e tamanho); a linha da
   etiqueta reserva o espaço dos dois botões */
.popup--ampliado {
  position: relative;
}

.popup--ampliado .popup-etiquetas {
  padding-right: 84px;
}

.popup-minimizar {
  position: absolute;
  top: 5px; /* 5 px abaixo da faixa colorida = mesma altura do × (10 px do topo) */
  right: 52px; /* à esquerda do × (8 px da borda + 40 px + 4 px) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  transition: background-color var(--transicao);
}

@media (hover: hover) {
  .popup-minimizar:hover {
    background: #f1f5f9;
    color: var(--cor-texto);
  }
}

/* --------------------------------------------------------------------------
   14. Pinos, grupos e legenda do mapa
   -------------------------------------------------------------------------- */
/* O elemento do Leaflet tem 34×46 px e a ponta da gota fica no canto inferior central */
.marcador-local,
.marcador-previa {
  background: none;
  border: 0;
}

.pino {
  position: relative;
  width: 34px;
  height: 46px;
}

.pino-corpo {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%; /* a escala nunca desloca a ponta */
  transition: transform 0.15s ease;
}

.pino-svg {
  display: block;
  overflow: hidden; /* a ponta é cortada exatamente na base do ícone */
  filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.45));
}

.marcador-local:hover .pino-corpo,
.marcador-local:focus-visible .pino-corpo {
  transform: scale(1.12);
}

/* Pino ativo: maior também com o foco do teclado (a regra de foco acima é mais específica) */
.pino--ativo .pino-corpo,
.marcador-local:hover .pino--ativo .pino-corpo,
.marcador-local:focus-visible .pino--ativo .pino-corpo {
  transform: scale(1.28);
}

.marcador-local:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 6px;
}

.pino-anel {
  position: absolute;
  left: 17px;
  top: 16px;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  display: none;
  pointer-events: none;
}

.pino--ativo .pino-anel {
  display: block;
  border: 3px solid var(--cor-principal);
  box-shadow: 0 0 0 2px #ffffff, 0 0 12px rgba(15, 23, 42, 0.35);
}

/* Outros locais do mesmo contrato: anel discreto */
.pino--irmao .pino-anel {
  display: block;
  border: 2px dashed var(--cor-status-texto);
  background: rgba(255, 255, 255, 0.35);
}

/* Pulso só em "Em andamento": anima apenas transform e opacity */
.pino-pulso {
  position: absolute;
  left: 17px;
  top: 46px;
  width: 34px;
  height: 14px;
  margin: -7px 0 0 -17px;
  border-radius: 50%;
  background: var(--cor-status);
  opacity: 0;
  pointer-events: none;
  animation: pino-pulso 2.2s ease-out infinite;
}

@keyframes pino-pulso {
  0% {
    transform: scale(0.35);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Selo "T" das obras de teste */
.pino-selo,
.legenda-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.pino-selo {
  position: absolute;
  top: -5px;
  right: -7px;
}

/* Selo "A": localização ajustada neste navegador (modo teste) */
.pino-selo--ajuste,
.legenda-selo--ajuste {
  background: #b45309;
}

/* Grupos de locais próximos */
.marcador-cluster {
  background: none;
  border: 0;
}

.cluster-circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 3px solid var(--cor-principal);
  border-radius: 50%;
  /* Disco branco separado do degradê: se o degradê falhar, o número continua legível */
  background-color: #ffffff;
  background-image: radial-gradient(circle at 50% 35%, #ffffff 55%, var(--cor-principal-clara) 100%);
  color: var(--cor-principal-funda);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 3px 10px rgba(15, 23, 42, 0.4);
  transition: transform var(--transicao);
}

.marcador-cluster:hover .cluster-circulo {
  transform: scale(1.07);
}

.marcador-cluster:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Legenda recolhível */
.leaflet-container .legenda {
  max-width: min(270px, calc(100vw - 90px));
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-2), 0 0 0 1px rgba(15, 23, 42, 0.08);
  font-size: 14px;
  color: var(--cor-texto);
}

.legenda-botao {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--raio-m);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  transition: background-color var(--transicao);
}

.legenda-botao:hover {
  background: var(--cor-principal-clara);
}

.legenda-seta {
  margin-left: auto;
  transition: transform var(--transicao);
}

.legenda-botao[aria-expanded='true'] .legenda-seta {
  transform: rotate(180deg);
}

.legenda-conteudo ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 2px 12px 12px;
  list-style: none;
}

.legenda-conteudo li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}

.legenda .pino-svg {
  flex: none;
  filter: none;
}

.legenda-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border: 2px solid var(--cor-principal);
  border-radius: 50%;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}

/* Mapa estreito (menos de 640 px; classes ligadas em mapa.js, pelo tamanho do mapa e não
   da janela): com um popup aberto (.mapa--com-popup), os botões de zoom e "ver todas" saem
   da frente dele. Mapa baixo (menos de 420 px de altura): a legenda e a escala também
   saem, porque lá o popup ocupa quase toda a altura. O zoom com dois dedos ou com a roda
   continua. */
.mapa.mapa--estreito.mapa--com-popup .leaflet-top.leaflet-left,
.mapa.mapa--baixo.mapa--com-popup .leaflet-bottom.leaflet-left {
  visibility: hidden;
}

/* Modo "Marcar no mapa" */
.mapa--marcando,
.mapa--marcando .leaflet-interactive {
  cursor: crosshair;
}

.mapa--marcando .leaflet-marker-pane {
  pointer-events: none;
}

.aviso-marcacao {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 1100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: max-content;
  max-width: calc(100% - 120px);
  padding: 8px 12px;
  border-radius: var(--raio-b);
  background: #111827;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--sombra-media);
  transform: translateX(-50%);
}

.aviso-ajuste {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  gap: 10px 14px;
}

.aviso-ajuste code {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  color: #38bdf8;
}

.aviso-ajuste-erro {
  color: #fcd34d;
}

/* Pino em ajuste ("Mover ponto"): maior e com anel âmbar (o estado fica no próprio ícone) */
.pino--ajuste .pino-corpo,
.marcador-local:hover .pino--ajuste .pino-corpo,
.marcador-local:focus-visible .pino--ajuste .pino-corpo {
  transform: scale(1.3);
}

.pino--ajuste .pino-svg {
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.55));
}

.pino--ajuste .pino-anel {
  display: block;
  border: 3px solid #f59e0b;
  box-shadow: 0 0 0 2px #ffffff, 0 0 16px rgba(245, 158, 11, 0.7);
}

/* Pinos que podem ser arrastados (ajuste e pré-visualização do modo teste) */
.marcador-arrastavel {
  cursor: grab;
}

.marcador-arrastavel:active,
.marcador-arrastavel.leaflet-drag-target {
  cursor: grabbing;
}

/*
 * Recorte da tela e barra de gestos (celular deitado; o index.html usa viewport-fit=cover):
 * os controles do mapa e o fim das colunas não ficam atrás deles. O mapa sempre encosta na
 * borda direita; a partir de 768 px ele e a coluna da lista também vão até a borda de baixo
 * (no celular a barra "Mapa | Lista" já cuida disso, e a borda esquerda vem na seção 15).
 */
.leaflet-container .leaflet-right {
  right: env(safe-area-inset-right, 0px);
}

@media (min-width: 768px) {
  .leaflet-container .leaflet-bottom {
    bottom: env(safe-area-inset-bottom, 0px);
  }

  .barra-rodape {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .detalhes-corpo {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   15. Celular (até 767 px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root {
    --margem: 12px;
  }

  /* O mapa ocupa a largura toda: os controles da esquerda também desviam do recorte */
  .leaflet-container .leaflet-left {
    left: env(safe-area-inset-left, 0px);
  }

  .cabecalho {
    padding-block: 8px;
  }

  .cabecalho-marca {
    gap: 10px;
  }

  .cabecalho-brasao {
    height: 48px;
    max-width: 48px;
  }

  /* Peso 700 no celular: com 800 o título não cabe numa linha em 390 px */
  .cabecalho-titulo {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .cabecalho-prefeitura {
    font-size: 13px;
  }

  .cabecalho-data {
    margin-top: 0;
  }

  .botao-cabecalho {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    justify-content: center;
  }

  /* No celular os botões do cabeçalho mostram só o ícone; o texto continua para leitores de tela */
  .botao-cabecalho .texto-botao {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .faixa-teste {
    padding-block: 6px;
  }

  .kpis-faixa {
    padding-block: 8px;
    gap: 8px;
  }

  .kpi {
    min-height: 48px;
    padding: 5px 12px 5px 6px;
  }

  .kpi[aria-pressed='true'] {
    padding: 4px 11px 4px 5px;
  }

  .kpi-icone {
    width: 30px;
    height: 30px;
  }

  .kpi-rotulo {
    font-size: 14px;
  }

  .kpi-valor {
    font-size: 13px;
  }

  /* Janelas sobem de baixo, como folhas (mais fáceis de alcançar com o polegar) */
  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-caixa,
  .modal-caixa--pequena {
    width: 100%;
    max-height: 92vh; /* navegadores sem a unidade dvh */
    max-height: 92dvh;
    border-radius: var(--raio-g) var(--raio-g) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: folha-entrada;
  }

  /* "Sobre os dados": etiqueta da situação em cima e a descrição embaixo (sem coluna espremida) */
  .lista-status li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .principal {
    display: block;
  }

  .area-mapa {
    position: absolute;
    inset: 0;
  }

  /* Lista: tela cheia sobre o mapa, quando "Lista" está selecionada */
  .barra-lateral {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    border-right: 0;
  }

  .app[data-vista='lista'] .barra-lateral {
    display: flex;
  }

  .app[data-painel='detalhes'] .barra-lateral {
    display: none;
  }

  /* Detalhes: painel inferior sobre o mapa */
  .painel-detalhes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    max-height: 72%;
    border-right: 0;
    border-radius: var(--raio-g) var(--raio-g) 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.3);
  }

  /* Alça visual do painel inferior (centralizada, acima do cabeçalho) */
  .detalhes-alca {
    display: block;
    flex: none;
    width: 44px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: #cbd5e1;
  }

  .filtros {
    gap: 10px;
    padding-block: 12px 10px;
  }

  /* Faixa do modo teste compacta: texto em cima e ações numa faixa rolável */
  .faixa-teste {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
  }

  .faixa-teste > * {
    min-width: 0;
  }

  .faixa-teste-texto {
    font-size: 13px;
  }

  .faixa-teste-acoes {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .faixa-teste-acoes .botao {
    flex: none;
  }

  .alternador {
    display: flex;
  }

  /* No celular os avisos ficam centralizados, logo acima da alternância Mapa | Lista */
  .toasts {
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: min(440px, calc(100vw - 24px));
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   16. Tablet e janela estreita (768 a 1023 px): lista ao lado do mapa, mais
   estreita (com toque, as categorias ficam numa faixa rolável: regra abaixo)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root {
    --largura-barra: clamp(320px, 40vw, 410px);
  }

  .cabecalho-brasao {
    height: 48px;
    max-width: 48px;
  }

  .filtros {
    padding-block: 14px 12px;
  }
}

/*
 * Categorias numa faixa rolável, para a lista de obras começar logo abaixo: no celular e
 * nas telas baixas (a roda do mouse também rola a faixa, ver ligarIndicadorDeRolagem) e,
 * com toque, no tablet. Com mouse no tablet (coluna alta) as categorias quebram a linha.
 */
@media (max-width: 767.98px),
  (min-width: 768px) and (max-width: 1023.98px) and (pointer: coarse),
  (max-height: 500px) and (min-width: 560px) {
  .pilulas {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .pilula {
    flex: none;
  }
}

/* Computador com tela baixa (ex.: notebook 1366×768): filtros mais compactos,
   para a lista de obras começar mais acima (a coluna inteira rola). Fica depois da
   seção 16 para valer também nos tablets e janelas estreitas de pouca altura. */
@media (min-width: 768px) and (max-height: 860px) {
  .filtros {
    gap: 8px;
    padding-block: 10px;
  }

  /* Card um pouco mais justo: o primeiro cabe inteiro na primeira tela do notebook */
  .card {
    gap: 5px;
    padding-block: 12px;
  }

  .filtros .rotulo-campo {
    margin-bottom: 2px;
  }

  .campo-busca input {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .pilulas {
    gap: 5px;
  }

  .pilula {
    min-height: 32px;
    padding: 3px 6px 3px 10px;
  }
}

/* --------------------------------------------------------------------------
   17. Telas largas: KPIs numa grade de largura total; acima de 1600 px a
   lista fica um pouco mais larga e as margens acompanham
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* Uma coluna por KPI, todas iguais, qualquer que seja a quantidade */
  .kpis-faixa {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .kpi {
    min-width: 0;
  }

  /* Com espaço sobrando, os números ganham destaque e o texto quebra em vez de vazar */
  .kpi-valor {
    white-space: normal;
  }

  .kpi-numero {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
  }
}

@media (min-width: 1600px) {
  :root {
    --largura-barra: 440px;
    --margem: 24px;
  }
}

/* --------------------------------------------------------------------------
   18. Telas baixas (celular deitado, janelas achatadas: até 500 px de altura):
   cabeçalho, KPIs e barra Mapa | Lista compactos, para sobrar mapa
   -------------------------------------------------------------------------- */
/* min-width: 560px — no celular em pé, o teclado virtual também deixa a tela baixa, e o
   cabeçalho não deve mudar enquanto a pessoa digita na busca */
@media (max-height: 500px) and (min-width: 560px) {
  :root {
    --largura-barra: 300px;
    --margem: 12px;
  }

  .cabecalho {
    padding-block: 6px;
  }

  .cabecalho-brasao {
    height: 34px;
    max-width: 34px;
  }

  .cabecalho-titulo {
    font-size: 17px;
  }

  .cabecalho-data {
    display: none; /* a data continua em "Sobre os dados" */
  }

  .botao-cabecalho {
    min-height: 38px;
    padding: 6px 12px;
  }

  .kpis-faixa {
    display: flex;
    gap: 6px;
    padding-block: 6px;
    overflow-x: auto;
  }

  .kpi {
    min-height: 40px;
    gap: 8px;
    padding: 3px 12px 3px 5px;
  }

  /* Janela larga e baixa: os KPIs voltam ao tamanho compacto da faixa */
  .kpi-valor {
    white-space: nowrap;
  }

  .kpi-numero {
    font-size: inherit;
    font-weight: 700;
  }

  .kpi[aria-pressed='true'] {
    padding: 2px 11px 2px 4px;
  }

  .kpi-icone {
    width: 26px;
    height: 26px;
  }

  .kpi-rotulo,
  .kpi-valor {
    font-size: 13px;
  }

  .filtros {
    gap: 8px;
    padding-block: 10px;
  }

  .alternador {
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }

  .alternador button {
    min-height: 40px;
  }

  /* Faixa do modo teste numa linha: texto curto à esquerda e ações numa faixa rolável */
  .faixa-teste {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding-block: 4px;
  }

  .faixa-teste-texto {
    flex: none;
    font-size: 13px;
    white-space: nowrap;
  }

  .faixa-teste-acoes {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .faixa-teste-acoes .botao {
    flex: none;
    min-height: 34px;
    padding: 4px 10px;
  }

  .modal-caixa,
  .modal-caixa--pequena {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* Telas estreitas (até 400 px): brasão menor */
@media (max-width: 400px) {
  .cabecalho-brasao {
    height: 40px;
    max-width: 40px;
  }
}

/* Data do cabeçalho: a forma curta só aparece nos celulares de até 389 px (regra abaixo) */
.texto-data-curto {
  display: none;
}

/* Celulares de 360 a 389 px (ex.: Android de 360 px, iPhone SE, 12 mini, X e 11 Pro de 375 px):
   brasão, espaços e título menores e a data abreviada ("Atualizado em"), para cada texto do
   cabeçalho caber numa linha (sem isso, em 375 px, os três textos quebravam e ele ia a 127 px) */
@media (max-width: 389.98px) {
  :root {
    --margem: 10px;
  }

  .cabecalho {
    gap: 8px;
  }

  .cabecalho-marca {
    gap: 6px;
  }

  .cabecalho-acoes {
    gap: 6px;
  }

  .cabecalho-brasao {
    height: 28px;
    max-width: 28px;
  }

  .cabecalho-titulo {
    font-size: 16px;
  }

  .texto-data-longo {
    display: none;
  }

  .texto-data-curto {
    display: inline;
  }
}

/* Celulares bem pequenos (até 359 px, ex.: 320 px e a tela externa dobrável de 344 px): sem o
   brasão, para o nome da Prefeitura e o título caberem numa linha (o nome continua escrito
   logo acima do título) */
@media (max-width: 359.98px) {
  :root {
    --margem: 8px;
  }

  .cabecalho-acoes {
    gap: 4px;
  }

  .cabecalho-brasao {
    display: none;
  }
}

/*
 * Telas de toque: alvos de 44 px nos controles principais (mesmo no modo compacto das
 * telas baixas, que vale só para o tamanho visual com mouse) e 40 px nos botões pequenos
 */
@media (pointer: coarse) {
  .leaflet-container .leaflet-bar a,
  .leaflet-container .leaflet-bar .controle-botao,
  .leaflet-container .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }

  .legenda-botao,
  .leaflet-container .leaflet-control-layers label > span,
  .botao-cabecalho,
  .pilula,
  .botao {
    min-height: 44px;
  }

  .botao--pequeno,
  .unidade,
  .faixa-teste-acoes .botao {
    min-height: 40px;
  }

  .popup-obra a.leaflet-popup-close-button {
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 44px;
  }

  /* Minimizar acompanha o × de 44 px (8 px da borda + 44 px + 4 px) */
  .popup-minimizar {
    right: 56px;
    width: 44px;
    height: 44px;
  }

  .popup--ampliado .popup-etiquetas {
    padding-right: 92px;
  }
}

/* Toque em tela baixa (celular deitado): KPIs e "Mapa | Lista" voltam a 44 px (a largura
   mínima é a mesma da seção 18, para o teclado virtual não mudar a altura deles) */
@media (pointer: coarse) and (max-height: 500px) and (min-width: 560px) {
  .kpi,
  .alternador button {
    min-height: 44px;
  }
}

/* Títulos com quebra de linha equilibrada (evita uma palavra sozinha na última linha) */
.detalhes-titulo,
.popup-titulo,
.card-titulo,
.modal-titulo {
  text-wrap: pretty;
}

/* Alto Contraste do Windows: estados selecionados continuam visíveis sem as cores do site */
@media (forced-colors: active) {
  .kpi[aria-pressed='true'],
  .pilula[aria-pressed='true'],
  .card[aria-current='true'],
  .unidade[aria-current='true'],
  .alternador button[aria-pressed='true'] {
    outline: 3px solid Highlight;
    outline-offset: 1px;
  }
}

/* Textos alternativos do botão de voltar/fechar do painel de detalhes */
.texto-celular {
  display: none;
}

@media (max-width: 767.98px) {
  .texto-computador {
    display: none;
  }

  .texto-celular {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   19. Movimento reduzido: sem pulso nem animações
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .pino-pulso {
    display: none;
  }
}