/* ==================================================================
   Agente de Saúde — folha de estilo

   Direção: ferramenta de campo, não painel corporativo. Verde petróleo
   fechado como tinta institucional, neutros com viés verde (nunca cinza
   puro), e cores de estado separadas da cor da marca — vermelho e âmbar
   significam prioridade, não decoram. Alvos de toque grandes, porque o
   uso é em pé, na porta da casa, muitas vezes com uma mão só.
================================================================== */

:root{
  /* marca */
  --tinta:#10201e;
  --verde:#0d5c52;
  --verde-forte:#0a463f;
  --verde-claro:#e2efeb;
  --verde-linha:#c3ded6;

  /* neutros com viés verde */
  --papel:#f4f6f4;
  --superficie:#ffffff;
  --suave:#54655f;      /* 6.4:1 no branco */
  --tenue:#65766f;      /* rótulo de aba inativa: precisa passar de 4.5:1 */
  --linha:#dfe5e2;
  --linha-forte:#c1cdc8;

  /* estados — semânticos, não decorativos */
  --critico:#b42318;  --critico-fundo:#fef3f2;  --critico-linha:#fecdca;
  --atencao:#b54708;  --atencao-fundo:#fffaeb;  --atencao-linha:#fedf89;
  --ok:#067647;       --ok-fundo:#ecfdf3;       --ok-linha:#abefc6;
  --info:#175cd3;     --info-fundo:#eff8ff;     --info-linha:#b2ddff;
  --roxo:#6941c6;     --roxo-fundo:#f4f3ff;     --roxo-linha:#d9d6fe;

  --r-p:8px; --r-m:12px; --r-g:16px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* As superfícies que o navegador desenha também são parte do app:
   seleção, cursor de texto, barra de rolagem e anel de foco saem de fábrica
   sem relação nenhuma com a paleta. */
::selection{background:var(--verde-claro);color:var(--verde-forte)}
:root{accent-color:var(--verde);caret-color:var(--verde);color-scheme:light}
*{scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}
/* O atributo hidden precisa vencer as regras de display abaixo
   (.trava e .modal-fundo usam flex e sobrepujariam o padrão do navegador). */
[hidden]{display:none !important}

html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--papel); color:var(--tinta);
  font-size:16px; line-height:1.45;
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
.ic{display:block;flex:none}
.num{font-variant-numeric:tabular-nums}

/* ---------------- topo ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--verde); color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) var(--e3) 12px;
  display:flex; align-items:center; gap:var(--e2);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.topo-txt{flex:1;min-width:0}
.topbar h1{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{margin:1px 0 0;font-size:12.5px;opacity:.82;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-topo{
  background:rgba(255,255,255,.14); border:0; color:#fff; cursor:pointer;
  width:40px; height:40px; border-radius:var(--r-p); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.btn-topo:active{background:rgba(255,255,255,.26)}

main{padding:var(--e4) var(--e3) var(--e5);max-width:760px;margin:0 auto}

/* ---------------- abas ---------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(6,1fr);
  background:var(--superficie); border-top:1px solid var(--linha);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  background:none;border:0;padding:9px 1px 11px;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:var(--tenue);
  border-top:2px solid transparent;margin-top:-1px;
  overflow:hidden;
}
.tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar button.ativo{color:var(--verde);border-top-color:var(--verde)}

/* ---------------- blocos ---------------- */
.card{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-m); padding:var(--e4); margin-bottom:var(--e3);
}
.card.click{cursor:pointer}
.card.click:active{background:var(--papel)}

/* Cartão do Radar: a pontuação é o dado, então é ela que recebe a cor. */
.ficha-risco.critico{border-color:var(--critico-linha);background:var(--critico-fundo)}
.ficha-risco.atencao{border-color:var(--atencao-linha);background:var(--atencao-fundo)}
.placar{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.placar b{font-size:24px;font-weight:700;line-height:1;letter-spacing:-.02em}
.ficha-risco.critico .placar b{color:var(--critico)}
.ficha-risco.atencao .placar b{color:var(--atencao)}

h2{
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--suave);font-weight:700;margin:var(--e5) 0 var(--e3);
}
h2:first-child{margin-top:0}

.meta-num{font-size:38px;font-weight:700;line-height:1;color:var(--verde);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.meta-lbl{font-size:12.5px;color:var(--suave);margin-top:var(--e1)}
.barra{height:8px;background:var(--linha);border-radius:99px;overflow:hidden;margin-top:var(--e3)}
/* Cresce por transform, não por width: largura anima no layout e engasga. */
.barra i{
  display:block;height:100%;width:100%;background:var(--verde);border-radius:99px;
  transform-origin:left center;transition:transform .5s cubic-bezier(.16,1,.3,1);
}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2)}
.mini{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-p);padding:var(--e3) var(--e2);text-align:center;
}
.mini b{display:block;font-size:22px;font-weight:700;color:var(--verde);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mini span{font-size:11px;color:var(--suave);line-height:1.25;display:block;margin-top:2px}

/* ---------------- listas ---------------- */
/* A severidade é carregada pelo bloco do número/inicial, não por uma barra
   colorida na borda: a cor fica junto do dado que ela qualifica. */
.item{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-p);padding:11px 12px;margin-bottom:var(--e2);
  cursor:pointer;display:flex;gap:var(--e3);align-items:center;
  width:100%;text-align:left;font:inherit;color:inherit;
}
.item:active{background:var(--papel)}
.item:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.item.critico{border-color:var(--critico-linha)}
.item .txt{flex:1;min-width:0}
.item .nome{font-weight:650;font-size:15.5px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .end{font-size:12.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .seta{color:var(--linha-forte);flex:none;display:flex}

.avatar{
  width:40px;height:40px;border-radius:var(--r-p);flex:none;
  background:var(--verde-claro);color:var(--verde-forte);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14.5px;letter-spacing:-.01em;
}
.avatar.atrasado{background:var(--critico-fundo);color:var(--critico)}
.avatar.tom-gestante{background:var(--roxo-fundo);color:var(--roxo)}
.avatar.tom-atencao{background:var(--atencao-fundo);color:var(--atencao)}

/* ---------------- etiquetas ---------------- */
.tags{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:5px}
.tag{
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:var(--r-p);
  background:var(--verde-claro);color:var(--verde-forte);white-space:nowrap;
  border:1px solid var(--verde-linha);
}
.tag.vermelha{background:var(--critico-fundo);color:var(--critico);border-color:var(--critico-linha)}
.tag.amarela {background:var(--atencao-fundo);color:var(--atencao);border-color:var(--atencao-linha)}
.tag.azul    {background:var(--info-fundo);   color:var(--info);   border-color:var(--info-linha)}
.tag.roxa    {background:var(--roxo-fundo);   color:var(--roxo);   border-color:var(--roxo-linha)}
.tag.cinza   {background:var(--papel);        color:var(--suave);  border-color:var(--linha)}

/* ---------------- formulários ---------------- */
label{display:block;font-size:12.5px;font-weight:650;color:var(--tinta);
  margin:var(--e4) 0 5px;letter-spacing:.005em}
input,select,textarea{
  width:100%;padding:11px 12px;font-size:16px;font-family:inherit;
  border:1px solid var(--linha-forte);border-radius:var(--r-p);
  background:var(--superficie);color:var(--tinta);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-claro);
}
textarea{min-height:76px;resize:vertical}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}

.checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.check{
  display:flex;align-items:center;gap:6px;padding:8px 12px;min-height:44px;
  border:1px solid var(--linha-forte);border-radius:var(--r-p);
  background:var(--superficie);font-size:13.5px;font-weight:600;
  cursor:pointer;user-select:none;
}
.check:focus-within{outline:2px solid var(--verde);outline-offset:2px}
.check input{width:16px;height:16px;margin:0;accent-color:var(--verde);flex:none}
.check.on{background:var(--verde-claro);border-color:var(--verde);color:var(--verde-forte)}

details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸ ";font-size:.85em}
details[open]>summary::before{content:"▾ "}

/* ---------------- botões ---------------- */
/* 44px é o piso: o app é usado em pé, na porta da casa, com uma mão só. */
.btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:12px;min-height:48px;font-size:15px;font-weight:650;font-family:inherit;
  border:1px solid var(--verde);border-radius:var(--r-p);
  background:var(--verde);color:#fff;cursor:pointer;margin-top:var(--e2);
}
.btn:active{background:var(--verde-forte);border-color:var(--verde-forte)}
.btn.sec{background:var(--superficie);color:var(--verde)}
.btn.sec:active{background:var(--verde-claro)}
.btn.perigo{background:var(--superficie);color:var(--critico);border-color:var(--critico-linha)}
.btn.perigo:active{background:var(--critico-fundo)}
.btn.peq{padding:9px;min-height:44px;font-size:13.5px}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--linha);color:var(--tenue);border-color:var(--linha);cursor:not-allowed;
}
.btn:disabled:active{background:var(--linha)}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
button:focus-visible,a:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

.fab{
  position:fixed;right:var(--e4);bottom:calc(88px + env(safe-area-inset-bottom));z-index:25;
  width:54px;height:54px;border-radius:var(--r-g);border:0;
  background:var(--verde);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(13,92,82,.32);
}
.fab:active{background:var(--verde-forte)}

/* ---------------- janela ---------------- */
.modal-fundo{
  position:fixed;inset:0;z-index:50;background:rgba(16,32,30,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.modal{
  background:var(--superficie);width:100%;max-width:760px;
  border-radius:var(--r-g) var(--r-g) 0 0;
  padding:var(--e5) var(--e4) calc(28px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto;
}
.modal h3{margin:0 0 3px;font-size:19px;font-weight:650;letter-spacing:-.015em}
.modal .dica{margin:0 0 var(--e3);font-size:12.5px;color:var(--suave)}

/* ---------------- diversos ---------------- */
.vazio{text-align:center;padding:var(--e6) var(--e4);color:var(--suave)}
.vazio .emoji{display:flex;justify-content:center;color:var(--linha-forte);margin-bottom:var(--e3)}
.vazio h3{margin:0 0 5px;font-size:17px;color:var(--tinta);font-weight:650}
.busca{width:100%;margin-bottom:var(--e3)}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(94px + env(safe-area-inset-bottom));z-index:60;
  background:var(--tinta);color:#fff;padding:10px 18px;border-radius:99px;
  font-size:13.5px;font-weight:600;box-shadow:0 4px 16px rgba(16,32,30,.32);
}
.aviso{
  background:var(--atencao-fundo);border:1px solid var(--atencao-linha);
  color:#7a2e0e;padding:11px 13px;border-radius:var(--r-p);font-size:13px;
}
.divisor{height:1px;background:var(--linha);margin:var(--e4) 0}
.linha-info{display:flex;justify-content:space-between;gap:var(--e3);
  padding:6px 0;font-size:14px;border-bottom:1px solid var(--linha)}
.linha-info:last-child{border-bottom:0}
.linha-info span{color:var(--suave)}
.linha-info b{text-align:right;font-weight:650}
/* Ícone e texto na mesma linha: .ic é display:block e sozinho quebraria. */
.encaminhamento{
  display:flex;align-items:center;gap:6px;margin-top:6px;
  font-size:13.5px;color:var(--info);
}
.encaminhamento .ic{flex:none}

/* ---- estados do GPS ---- */
.buscando{font-size:13.5px;color:var(--suave)}
.gps-ok{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:650}
.precisao{display:block;font-size:12px;color:var(--suave);margin-top:2px}
.precisao.ruim{color:var(--atencao);font-weight:650}
.gps-falhou{
  background:var(--atencao-fundo);border:1px solid var(--atencao-linha);
  border-radius:var(--r-p);padding:11px 13px;margin-top:4px;
}
.gps-falhou b{font-size:13.5px;color:#7a2e0e;display:block;margin-bottom:5px}
.gps-falhou p{margin:0 0 7px;font-size:12.5px;color:#7a2e0e;line-height:1.5}
.gps-falhou .btn{width:auto;padding:8px 16px;margin-top:2px}

.ligar{display:inline-flex;align-items:center;gap:5px;color:var(--verde);text-decoration:none}
.ligar:hover{text-decoration:underline;text-underline-offset:3px}

.chip-filtro{
  display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:99px;
  border:1px solid var(--linha-forte);background:var(--superficie);
  font-size:13px;font-weight:600;margin:0 5px 6px 0;cursor:pointer;color:var(--suave);
}
.chip-filtro:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.chip-filtro.on{background:var(--verde);color:#fff;border-color:var(--verde)}
.rolagem{overflow-x:auto;white-space:nowrap;margin:0 calc(-1 * var(--e3));padding:0 var(--e3) 2px}

.rotulo-rua{
  display:flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;color:var(--suave);
  text-transform:uppercase;letter-spacing:.08em;margin:var(--e4) 0 var(--e2);
}

/* ---------------- tela de bloqueio ---------------- */
.trava{
  position:fixed;inset:0;z-index:100;background:var(--verde);
  display:flex;align-items:center;justify-content:center;padding:var(--e5);
}
.trava-caixa{width:100%;max-width:300px;text-align:center;color:#fff}
.trava-icone{display:flex;justify-content:center;margin-bottom:var(--e3);opacity:.9}
.trava-tit{margin:0;font-size:21px;font-weight:650;letter-spacing:-.015em}
.trava-sub{margin:4px 0 var(--e5);font-size:13.5px;opacity:.82}
.trava input{
  text-align:center;font-size:26px;letter-spacing:10px;padding:12px;
  border:0;border-radius:var(--r-p);font-weight:700;
}
.trava-erro{color:#fecdca;font-weight:650;font-size:13.5px;margin:var(--e3) 0 0}
.trava .btn{background:#fff;color:var(--verde);border-color:#fff;margin-top:var(--e4)}
.trava .btn:active{background:var(--verde-claro)}

/* Quando a busca casa por causa de um morador, a lista diz qual — senão
   a agente procura "Lara" e aparece "Maria", sem entender por quê. */
.achou-por{
  display:flex;align-items:center;gap:4px;
  margin:2px 0 1px;font-size:12.5px;font-weight:600;color:var(--verde);
}
.achou-por .ic{flex:none}

/* Aviso de documento com número improvável. Avisa, não impede: a
   agente está em campo e pode ter o documento na mão. */
.doc-aviso{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:8px;padding:8px 10px;
  border:1px solid var(--atencao-linha);border-radius:var(--r-p);
  background:var(--atencao-fundo);
  font-size:13px;line-height:1.4;
}
.doc-aviso .ic{flex:none;color:var(--atencao);margin-top:1px}

/* Selo do responsável familiar, espelhando a tela do e-SUS que a
   agente já usa: ele aparece primeiro na lista, marcado. */
.selo-resp{
  display:inline-flex;align-items:center;gap:4px;
  margin:2px 0 1px;padding:1px 7px 1px 5px;
  border:1px solid var(--verde-linha);border-radius:999px;
  font-size:11px;font-weight:600;color:var(--verde);
  background:var(--verde-claro);
}
.selo-resp .ic{flex:none}

/* Alergia: informação de segurança, então vem antes de tudo na ficha
   e com o peso visual do crítico. */
.aviso-alergia{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--critico-fundo);border-color:var(--critico-linha);
}
.aviso-alergia .ic{flex:none;color:var(--critico);margin-top:1px}
.aviso-alergia b{
  display:block;font-size:12px;font-weight:800;color:var(--critico);
  text-transform:uppercase;letter-spacing:.4px;
}
.aviso-alergia div div{font-size:15px;margin-top:3px}
.campo-alergia{min-height:64px}

/* Pendências do cadastro: um bloco só, em lista. Cada aviso já teve
   caixa própria, e três empilhadas viravam parede — que ninguém lê. */
.pendencias{background:var(--atencao-fundo);border-color:var(--atencao-linha)}
.pend-topo{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--atencao);
}
.pend-topo .ic{flex:none}
.pend-item{
  display:flex;align-items:flex-start;gap:10px;
  padding-top:10px;margin-top:10px;
  border-top:1px solid var(--atencao-linha);
}
.pend-item > div{flex:1;min-width:0}
/* .btn nasce com largura total; aqui ele divide a linha com o texto,
   então precisa encolher — sem isso a frase fica espremida numa
   coluna de duas palavras e a linha vira um bloco de 400px. */
.pend-item .btn{flex:none;width:auto;margin-top:0;align-self:center;white-space:nowrap}
.pend-texto{font-size:14px;line-height:1.35}
.pend-porque{font-size:12.5px;color:var(--suave);margin-top:2px;line-height:1.35}

/* Data de nascimento digitada: a idade aparece embaixo enquanto digita.
   É a forma mais rápida de a agente perceber que errou o ano. */
.dica-data{min-height:17px;margin-top:4px;font-size:12.5px;font-weight:600}
.dica-data.boa{color:var(--verde)}
.dica-data.ruim{color:var(--critico)}

/* Prévia da escala dentro do formulário do morador: mostra o efeito
   das condições marcadas antes de salvar. */
.previa-caixa{
  margin-top:var(--e4);padding:var(--e3);
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-p);
}
.previa-titulo{font-size:13px;font-weight:700;color:var(--suave)}
.previa-risco{display:flex;align-items:center;gap:var(--e3);margin-top:var(--e2)}
.previa-risco .num{font-size:26px;line-height:1;min-width:38px;text-align:center}
.previa-itens{font-size:12px;color:var(--suave);margin-top:3px}
.previa-critica{
  display:flex;align-items:center;gap:7px;margin-top:var(--e3);
  padding:9px 11px;border-radius:var(--r-p);
  background:var(--critico-fundo);border:1px solid var(--critico-linha);
  color:var(--critico);font-size:13px;font-weight:700;
}
.previa-critica .ic{flex:none}

/* Morador que mudou-se ou faleceu: presente, mas visivelmente inativo. */
.item.saiu{opacity:.62}
.item.saiu .avatar{background:var(--superficie);color:var(--suave)}
.aviso-saida{border-color:var(--linha-forte);background:var(--superficie)}

/* ---------------- escala de risco familiar ---------------- */
.erfcs.critico{border-color:var(--critico-linha);background:var(--critico-fundo)}
.erfcs.atencao{border-color:var(--atencao-linha);background:var(--atencao-fundo)}
.erfcs-topo{display:flex;justify-content:space-between;gap:var(--e3);align-items:flex-start}
.erfcs-titulo{font-size:15px;font-weight:650;letter-spacing:-.01em}
.erfcs-fonte{font-size:11.5px;color:var(--suave);margin-top:1px}
.erfcs-placar{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.erfcs-placar b{font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em}
.erfcs.critico .erfcs-placar b{color:var(--critico)}
.erfcs.atencao .erfcs-placar b{color:var(--atencao)}
.erfcs.ok .erfcs-placar b{color:var(--verde)}
.erfcs-itens{margin-top:var(--e3);display:flex;flex-direction:column;gap:5px}
.erfcs-item{display:flex;align-items:center;gap:8px;font-size:13.5px}
.erfcs-pts{
  flex:none;min-width:22px;height:22px;border-radius:6px;
  background:var(--superficie);border:1px solid var(--linha-forte);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
}
.erfcs-vazio{margin:var(--e3) 0 0;font-size:13.5px;color:var(--suave)}

/* ---------------- mapa ---------------- */
.seletor{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:var(--e3);
  border:1px solid var(--linha-forte);border-radius:var(--r-p);overflow:hidden;
}
.seletor button{
  background:var(--superficie);border:0;padding:0;min-height:44px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:650;color:var(--suave);
}
.seletor button:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
.seletor button+button{border-left:1px solid var(--linha-forte)}
.seletor button.on{background:var(--verde);color:#fff}

.mapa-svg{display:block;width:100%;height:auto;border-radius:var(--r-p);background:var(--papel)}
.mapa-svg .pino{cursor:pointer}
.mapa-svg .pino:active circle{opacity:.65}
.mapa-svg .pino:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

.mapa-ruas{
  position:relative;overflow:hidden;border-radius:var(--r-p);
  background:var(--papel);width:100%;
}
.pino-real{
  position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;padding:0;
  border-radius:50%;border:2px solid #fff;cursor:pointer;
  box-shadow:0 1px 4px rgba(16,32,30,.45);background:var(--ok);
}
.pino-real.critico{background:var(--critico);width:20px;height:20px;margin:-10px 0 0 -10px}
.pino-real.atencao{background:var(--atencao)}
.credito{
  position:absolute;right:0;bottom:0;background:rgba(255,255,255,.82);
  font-size:9.5px;color:var(--suave);padding:1px 5px;border-radius:var(--r-p) 0 0 0;
}

.mapa-falhou{
  position:absolute;inset:0;background:var(--papel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--e5);gap:var(--e1);
}
.mapa-falhou b{font-size:15px}
.mapa-falhou p{margin:0;font-size:13px;color:var(--suave);max-width:26ch}
.mapa-falhou .btn{width:auto;padding:9px 18px;margin-top:var(--e2)}

.legenda{display:flex;flex-wrap:wrap;gap:var(--e3);font-size:12.5px;color:var(--suave)}
.legenda span{display:flex;align-items:center;gap:5px}
.legenda i{width:10px;height:10px;border-radius:50%;display:block;flex:none}
.legenda i.tracejado{
  width:16px;height:0;border-radius:0;border-top:2px dashed var(--verde);background:none;
}
.limite-area{position:absolute;left:0;top:0;pointer-events:none;z-index:1}
.pino-real{z-index:2}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}