/* MIRAVO GO - folha de estilo. Servida de /static/go/app.css com ?v=<hash>:
   /static/ e' cache-primeiro no service worker, entao sem a versao o
   aparelho serviria a folha velha depois do deploy. */
/* ============================================================================
   MIRAVO GO - sistema visual
   A FONTE vem de verdade do token do core (var(--miravo-fonte), declarado
   em design-tokens.css e linkado em app.html ANTES desta folha) - ate'
   05/09/2026 este arquivo tinha uma COPIA da fonte em vez do link, e essa
   copia ja' tinha divergido em duas variacoes DENTRO do proprio GO (achado
   gerando as capturas de loja). Cor, raio e demais valores abaixo ainda sao
   copia deliberada (azul #0A86E0, barra grafite #3a3a3a, texto #4d4d4d /
   #2a2e33, borda #e2e6ea, fundo #eef1f4, raio 10 a 14, enfase 600) - o app
   nao inventa nada, so' ainda nao foram ligados por `var()` cruzado como a
   fonte, por serem usados centenas de vezes num CSS que ja' e' grande.
   Mockup aprovado por Rodolfo em 05/09/2026.
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}
body{
  --azul:#0A86E0;--azul-esc:#0668b0;--azul-suave:#e7f2fb;
  --grafite:#3a3a3a;--grafite-linha:#2b2b2b;
  --ink:#2a2e33;--texto:#4d4d4d;--fraco:#666c75;
  --borda:#e2e6ea;--fundo:#eef1f4;--card:#fff;--card2:#f5f7f9;
  --go:#14b8a6;--go-esc:#0d8b7e;--go-suave:#e4f6f4;
  --ok:#16a34a;--alerta:#e8a013;--perigo:#d94a3d;--roxo:#7a52c7;--roxo-esc:#5a3a9e;
  --raio:10px;--raio-g:14px;--raio-folha:18px;
  --alvo:42px;--gap:7px;
  --flut:0 4px 16px rgba(20,24,28,.18);--veu-cor:rgba(20,24,28,.45);
  /* margem do relogio (topo) e do gesto/botoes (base). No Android, o
     Capacitor 8 entrega por --safe-area-inset-* quando o WebView do aparelho
     e' antigo demais para o env() (SystemBars.java, insetsHandling "css");
     no iPhone e no Android novo vem pelo env(). Ler os dois, nesta ordem. */
  --sa-t:var(--safe-area-inset-top,env(safe-area-inset-top,0px));
  --sa-b:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  font-family:var(--miravo-fonte,'Segoe UI',system-ui,Arial,sans-serif);
  font-size:14px;line-height:1.4;color:var(--texto);background:var(--fundo);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* :where() zera a especificidade do reset: sem isso ele venceria as classes
   dos componentes e apagaria o fundo de todo botao. */
:where(button){cursor:pointer;background:none;border:none;padding:0;color:inherit;font:inherit}
:where(input,textarea,select){font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--azul);outline-offset:2px}
svg{display:block}
text{font-family:inherit}

/* ---- icone: um sistema so. Caixa 24, traco 1.75, ponta redonda. ---- */
.i{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px}
.i>svg{width:100%;height:100%}
.i.p{width:16px;height:16px}
.i.g{width:22px;height:22px}
.icx{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:var(--raio);
  background:var(--card2);color:var(--azul-esc)}
.icx>svg{width:18px;height:18px}
.icx.go{background:var(--go-suave);color:var(--go-esc)}
.icx.perigo{background:#fdf1f0;color:#a8321f}

/* ============================ abertura ==================================== */
/* Fundo grafite. O X da MIRAVO se aproxima ate o observador entrar pelo seu
   centro: dali o branco nasce e toma a tela. */
#splash{position:fixed;inset:0;height:var(--vhr,100%);z-index:999;display:grid;place-items:center;background:#3a3a3a;overflow:hidden;
  transition:opacity .5s}
#splash.saindo{opacity:0;pointer-events:none}
#splash>*{grid-area:1/1}
#splash svg{width:128px;height:128px;animation:spVoa 1.8s cubic-bezier(.44,0,.76,.14) .14s both}
@keyframes spVoa{0%{opacity:0;transform:scale(.32)}14%{opacity:1;transform:scale(.58)}
  100%{opacity:1;transform:scale(9.5)}}
#splash .branco{width:30px;height:30px;border-radius:50%;background:#fff;transform:scale(0);
  animation:spBranco .52s cubic-bezier(.52,0,.3,1) 1.42s forwards}
@keyframes spBranco{to{transform:scale(52)}}
#splash img{height:36px;width:auto;justify-self:center;opacity:0;animation:spSurge .5s ease-out 1.9s forwards}
@keyframes spSurge{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  #splash{background:#fff}
  #splash *{animation:none!important}
  #splash svg,#splash .branco{display:none}#splash img{opacity:1}
}

/* ---- entrada: a marca sobe e o login aparece ---- */
#scrLogin{position:fixed;inset:0;height:var(--vhr,100%);z-index:1000;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:#fff;padding:0 0 calc(20px + var(--sa-b))}
#scrLogin.on{display:flex}
#scrLogin .llogo{height:38px;width:auto;margin-bottom:52px;animation:lgSobe .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes lgSobe{from{transform:translateY(96px)}to{transform:none}}
#scrLogin .caixa{width:min(318px,84%);display:flex;flex-direction:column;gap:9px;
  opacity:0;animation:lgEntra .45s ease-out .22s forwards}
@keyframes lgEntra{to{opacity:1}}
#scrLogin .lrot{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fraco)}
#scrLogin .lcampo{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--borda);
  border-radius:var(--raio);padding:0 10px;min-height:44px}
#scrLogin .lcampo:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px rgba(10,134,224,.16)}
#scrLogin .lcampo .i{color:var(--fraco)}
#scrLogin .lcampo input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:15px;
  min-height:42px;color:var(--ink)}
#scrLogin .lcampo button{width:34px;height:34px;display:grid;place-items:center;color:var(--fraco);flex:0 0 auto}
#scrLogin .lerro{display:none;font-size:12.5px;font-weight:600;color:#a8321f;text-align:center}
#scrLogin .lerro.on{display:block}
#scrLogin .lnota{margin:2px 0 0;font-size:11.5px;line-height:1.45;color:var(--fraco);text-align:center}
#scrLogin .llinks{display:flex;flex-direction:column;gap:2px;margin-top:4px}
#scrLogin .llinks a,#scrLogin .llinks button{min-height:38px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--azul-esc);text-decoration:none}
@media (prefers-reduced-motion: reduce){#scrLogin *{animation:none!important;opacity:1!important;transform:none!important}}

/* ------------------------------------------------------- portao biometria */
/* so' aparece se BIO.estaAtivado() - fica por cima de TUDO (inclusive o
   proprio #app ja carregado), de proposito: a sessao ja existe (cookie
   valido), a biometria e' so' o cadeado de entrada no aparelho. */
#bioGate{position:fixed;inset:0;height:var(--vhr,100%);z-index:1001;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;background:#fff;padding:0 24px calc(24px + var(--sa-b))}
#bioGate.on{display:flex}
#bioGate .llogo{height:38px;width:auto}
#bioGate .lnota{margin:0;font-size:12.5px;font-weight:600;color:#a8321f;text-align:center;max-width:280px}
@media (prefers-reduced-motion: reduce){#bioGate *{animation:none!important}}

/* ============================ casca ======================================= */
.app{position:fixed;inset:0;height:var(--vhr,100%);display:flex;flex-direction:column;overflow:hidden}
.scr{position:absolute;inset:0;display:none;flex-direction:column;background:var(--fundo)}
.scr.on{display:flex}
.scr-corpo{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:6px}

/* ---- barra fixa grafite (a assinatura do MIRAVO) ---- */
.top{flex:0 0 auto;height:calc(50px + var(--sa-t));padding:var(--sa-t) 10px 0;display:flex;align-items:center;gap:10px;
  background:var(--grafite);border-bottom:1px solid var(--grafite-linha);color:#fff}
.top .ttl{font-size:16px;font-weight:600;color:#fff;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.top .resto{flex:1}
.sino{width:34px;height:34px;border-radius:var(--raio);display:grid;place-items:center;color:#fff;position:relative;flex:0 0 auto}
.sino:active{background:rgba(255,255,255,.14)}
.sino svg{width:18px;height:18px}
.sino .bad{position:absolute;top:2px;right:2px;min-width:15px;height:15px;border-radius:99px;background:#c33d31;
  color:#fff;font-size:9px;font-weight:600;display:none;align-items:center;justify-content:center;padding:0 4px;
  border:2px solid var(--grafite)}
.sino .bad:not(:empty){display:inline-flex}
/* sem overflow:hidden: ele recortava a area de toque ampliada (::after).
   A foto fica redonda pelo proprio img. */
.avatarzinho img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatarzinho{width:30px;height:30px;border-radius:50%;background:var(--azul-esc);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:600;flex:0 0 auto;border:2px solid rgba(255,255,255,.28);
  background-size:cover;background-position:center}
/* chip do projeto, dentro da barra grafite */
.chip-ctx{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:36px;padding:0 8px;
  border-radius:var(--raio);background:rgba(255,255,255,.1);text-align:left;color:#fff}
.chip-ctx:active{background:rgba(255,255,255,.18)}
.chip-ctx .txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.chip-ctx b{font-size:9.5px;font-weight:600;color:#9fd2f7;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.chip-ctx .tit{font-size:12.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-ctx .i{color:rgba(255,255,255,.65)}
.chip-ctx .pres{display:flex;flex:0 0 auto}
.chip-ctx .pres span{width:20px;height:20px;border-radius:50%;border:2px solid var(--grafite);margin-left:-7px;
  display:grid;place-items:center;font-size:8.5px;font-weight:600;color:#fff;overflow:hidden;
  background-size:cover;background-position:center}
.chip-ctx .pres span:first-child{margin-left:0}
.chipbar{display:none}

/* ---- abas ---- */
.tabbar{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--card);
  border-top:1px solid var(--borda);padding:5px 8px calc(2px + var(--sa-b))}
  /* o "2px" e' nosso, so' para o rotulo nao colar na faixa - reduzido de 8px
     em 16/09/2026 (pedido do Rodolfo, "area util"). O var(--sa-b) que sobra
     NAO e' nosso: e' env(safe-area-inset-bottom), a faixa que a Apple
     reserva sozinha em iPhone sem botao Home (gesto de fechar o app) - 0px
     em modelo com botao Home, e nao existe forma de remover ou encolher
     ela sem violar a diretriz da Apple (e o gesto continua ativo mesmo que
     a gente desenhe por cima). Ver PADRAO_UI_TIPOGRAFIA.md se um dia
     alguem tiver a mesma duvida de novo. */
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;
  border-radius:10px;color:var(--fraco);font-size:10.5px;font-weight:600}
.tab svg{width:20px;height:20px}
.tab.on{color:var(--azul-esc);background:var(--azul-suave)}
/* na aba ativa, o par de cores do simbolo da marca */
.tab .az,.tab .ag{stroke:currentColor}
.tab.on .az{stroke:#0A86E0}
.tab.on .ag{stroke:#0FB5A8}

/* ---- botoes ---- */
.btnp{min-height:var(--alvo);border-radius:var(--raio);padding:0 15px;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--azul);color:#fff;
  white-space:nowrap;width:100%}
.btnp:active{background:var(--azul-esc)}
.btnp:disabled{opacity:.55}
.btnf{min-height:var(--alvo);border-radius:var(--raio);padding:0 13px;font-size:13.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--card);color:var(--texto);
  border:1px solid var(--borda);white-space:nowrap}
.duplo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:12px}

/* ---- selos ---- */
.selo{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:2px 7px;
  border-radius:6px;white-space:nowrap;line-height:1.2}
.selo.dono{background:#f0eafb;color:var(--roxo-esc)}
.selo.part{background:var(--azul-suave);color:var(--azul-esc)}
.selo.viewer{background:var(--card2);color:var(--fraco)}
.selo.aberta{background:#fdf3de;color:#7a5600}
.selo.resolvida{background:#e6f6ec;color:#15803d}
.selo.email{background:var(--azul-suave);color:var(--azul-esc)}
.selo.fora{background:#fdf3de;color:#7a5600}
.selo.ia{background:#ede9fb;color:#5b4bc4}
.selo.go{background:var(--go-suave);color:var(--go-esc)}

/* sem projeto aberto: Pin, Criar e Medir apagados (tocar abre a lista de
   projetos em vez de soltar um aviso) - revisao do Rodolfo, 29/09/2026 */
.gv-b.sem-proj{opacity:.38}
.gv-dica{margin:2px 12px 8px;font-size:12.5px;line-height:1.4;color:var(--fraco);text-align:center}

/* ---- avisos ---- */
/* no ALTO, logo abaixo do cabecalho (50px + a margem do relogio): embaixo ele
   cobria a gaveta de ferramentas, justamente o que a pessoa tentava usar */
#toasts{position:fixed;left:12px;right:12px;top:calc(58px + var(--sa-t));display:flex;flex-direction:column;
  gap:8px;z-index:1200;pointer-events:none}
.toast{background:var(--grafite);color:#fff;font-size:13px;line-height:1.45;padding:11px 13px;border-radius:12px;
  box-shadow:0 8px 24px rgba(20,24,28,.3);opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s;
  pointer-events:auto;cursor:pointer}
.toast.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}

/* ---- listas, rotulos, pares ---- */
.titulosec{margin:12px 13px 6px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fraco)}
.vazio{margin:34px 22px;text-align:center;color:var(--fraco);font-size:13px;line-height:1.6}
.ssub{margin:4px 0 11px;font-size:11.5px;color:var(--fraco);line-height:1.5}
.ficha-par{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--card2);font-size:13px}
.ficha-par .k{color:var(--fraco);flex:0 0 auto}
.ficha-par .v{font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
/* cartao de item (acervo, conversa) */
.item-lista{display:flex;gap:10px;align-items:center;width:calc(100% - 24px);margin:6px 12px 0;padding:8px 11px;
  background:var(--card);border:1px solid var(--borda);border-radius:var(--raio-g);text-align:left;color:var(--texto)}
.item-lista:active{border-color:var(--azul)}
.item-lista.naolida{background:var(--azul-suave);border-color:#c9e3f7}
.item-lista .il-b{flex:1;min-width:0;display:flex;flex-direction:column}
.item-lista .il-t{display:flex;align-items:center;gap:7px;min-width:0}
.item-lista .il-t b,.item-lista .nm{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.item-lista .il-m{display:block;font-size:11.5px;color:var(--fraco);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.item-lista .il-p{display:block;font-size:10.5px;color:var(--azul-esc);font-weight:600;margin-top:2px;
  font-variant-numeric:tabular-nums}
.il-p{font-size:10.5px;color:var(--azul-esc);font-weight:600;font-variant-numeric:tabular-nums}
.cav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;
  font-weight:600;flex:0 0 auto;position:relative;overflow:hidden;background:#5b6570;
  background-size:cover;background-position:center}
.cav img{width:100%;height:100%;object-fit:cover}
.dado-ico{width:30px;height:30px;border-radius:var(--raio);display:grid;place-items:center;flex:0 0 auto;background:#5b6570}
.dado-ico svg{width:17px;height:17px;color:#fff}
/* cartao de projeto */
.cardproj{display:flex;flex-direction:column;gap:3px;width:100%;margin-bottom:8px;padding:10px 12px;
  background:var(--card);border:1px solid var(--borda);border-radius:var(--raio-g);text-align:left;color:var(--texto)}
.cardproj:active{border-color:var(--azul)}
.cardproj .l1{display:flex;align-items:center;gap:8px;min-width:0}
.cardproj .nome{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cardproj .meta{display:block;font-size:11.5px;color:var(--fraco);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardproj .meta b{color:var(--azul-esc);font-weight:600;font-variant-numeric:tabular-nums}
/* linha de acao: uma estrutura para tudo */
.linha{display:flex;align-items:center;gap:11px;width:100%;min-height:var(--alvo);padding:8px 2px;text-align:left;
  border-bottom:1px solid var(--card2);color:var(--texto)}
.linha:last-child{border-bottom:none}
.linha:active{background:var(--azul-suave)}
.linha .t{flex:1;min-width:0}
.linha .t b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.linha .t small{display:block;font-size:11.5px;color:var(--fraco);line-height:1.35;margin-top:2px}
.linha .fim{flex:0 0 auto;display:flex;align-items:center;gap:8px;color:var(--fraco)}
.linha.perigo .t b{color:#a8321f}
/* campos de busca */
.busca,.buscamini,.campo-busca{display:flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--borda);border-radius:var(--raio);padding:0 9px;min-height:36px;margin:10px 12px 0}
/* dentro de uma barra (filtros, busca do mapa) a caixa nao leva margem propria */
.campo-busca{margin:0}
.campo-busca svg{width:16px;height:16px;color:var(--fraco);flex:0 0 auto}
.campo-busca input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:14.5px;
  min-height:34px;color:var(--ink)}
.busca svg,.buscamini svg{width:16px;height:16px;color:var(--fraco);flex:0 0 auto}
.busca input,.buscamini input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:14.5px;
  min-height:34px;color:var(--ink)}
.buscamini{margin:8px 0 0}
.filtros{display:flex;gap:7px;flex-wrap:wrap;margin:10px 12px 0}
.filtros button{min-height:34px;padding:0 12px;border:1px solid var(--borda);border-radius:999px;background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--fraco)}
.filtros button.on{background:var(--azul-esc);border-color:var(--azul-esc);color:#fff}
/* faixa de aviso (instalar, push) */
.instalar{display:flex;align-items:center;gap:9px;margin:10px 12px 0;padding:10px 11px;background:#fdf3de;
  border:1px solid #f0e0bb;border-radius:var(--raio-g);font-size:12px;line-height:1.45;color:#7a5600}
.instalar .i{color:#7a5600}
.instalar b{font-weight:600}
.instalar .x{width:28px;height:28px;display:grid;place-items:center;color:inherit;flex:0 0 auto}

/* ============================ mapa ======================================== */
.mapa-wrap{flex:1;position:relative;overflow:hidden;background:#dfe4e8}
#mapa{position:absolute;inset:0}
/* "voce esta aqui": bolinha com halo pulsando, sempre acima dos pins e sem
   roubar o toque deles (a bolinha sozinha se confundia com os pins) */
.gogps{z-index:3;width:44px;height:44px;display:grid;place-items:center;pointer-events:none}
.gogps::before{content:'';grid-area:1/1;width:44px;height:44px;border-radius:50%;
  background:rgba(26,115,232,.22);border:1px solid rgba(26,115,232,.4);animation:gpsPulso 2.4s ease-out infinite}
.gogps i{grid-area:1/1;width:18px;height:18px;border-radius:50%;background:#1a73e8;border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(20,24,28,.18),0 1px 5px rgba(20,24,28,.45)}
@keyframes gpsPulso{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.3);opacity:0}}
@media (prefers-reduced-motion: reduce){.gogps::before{animation:none;opacity:.7}}
.gopin{width:30px;height:30px;display:grid;place-items:center;border:2.5px solid #fff;border-radius:50% 50% 50% 5px;
  transform:rotate(-45deg);box-shadow:0 2px 6px rgba(20,24,28,.4);cursor:pointer}
.gopin>span{transform:rotate(45deg);width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-size:8.5px;font-weight:600;color:#fff;overflow:hidden;background-size:cover;background-position:center}
/* controles do mapa: dois botoes redondos */
.mbotoes{position:absolute;right:12px;top:12px;z-index:9;display:flex;flex-direction:column;gap:10px}
.app.destro .mbotoes{right:auto;left:12px}
/* com os botoes a esquerda, a etiqueta de precisao do GPS (que mora no alto a
   esquerda) troca de lado - ficava por baixo deles (iPhone do Rodolfo,
   03/10/2026) */
.app.destro .gpsnota{left:auto;right:12px}
.mbtn{width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid rgba(20,24,28,.07);
  box-shadow:var(--flut);display:grid;place-items:center;color:var(--ink);position:relative}
.mbtn svg{width:21px;height:21px}
.mbtn.on{background:var(--azul);color:#fff}
.mbtn:active{background:var(--azul-suave);color:var(--azul-esc)}
.mbtn .marca{position:absolute;right:-1px;bottom:-1px;width:15px;height:15px;border-radius:50%;
  background:var(--go-esc);border:2px solid var(--card);display:none}
.mbtn.tem .marca{display:block}
/* pilula do modo (medir, desenhar) */
/* bottom 30 = 18 da gaveta, que sobe por cima do mapa, + 12 de folga: com
   12 a pilula ficava cortada pela gaveta (Rodolfo, 03/10/2026) */
.medchip{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:9;display:none;align-items:center;
  gap:9px;background:var(--grafite);color:#fff;border-radius:999px;padding:3px 4px 3px 15px;font-size:13.5px;
  font-weight:600;font-variant-numeric:tabular-nums;max-width:calc(100% - 24px);box-shadow:0 6px 20px rgba(20,24,28,.35)}
.medchip.on{display:flex}
.medchip .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.medchip button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.medchip .ok{background:var(--go);color:#0b2a26}
.medchip .no{background:rgba(255,255,255,.16);color:#fff}
.medchip.so-x .ok{display:none}
/* aviso discreto do GPS */
.gpsnota{position:absolute;left:12px;top:12px;z-index:8;display:flex;align-items:center;gap:6px;background:var(--card);
  border-radius:var(--raio);padding:7px 10px;font-size:12px;font-weight:600;color:var(--azul-esc);box-shadow:var(--flut);
  opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none;
  font-variant-numeric:tabular-nums}
.gpsnota.on{opacity:1;transform:none}
.gpsnota.fraco{color:#7a5600;background:#fdf3de}
.gpsnota .pt{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
@media (prefers-reduced-motion: reduce){.gpsnota{transition:none}}
#sairApres{position:absolute;right:12px;top:calc(12px + var(--sa-t));z-index:20;width:44px;height:44px;
  border-radius:50%;background:rgba(20,24,28,.6);color:#fff;display:none;place-items:center}
#sairApres svg{width:20px;height:20px}
body.apresentando #sairApres{display:grid}
body.apresentando .top,body.apresentando .chipbar,body.apresentando .mbotoes,body.apresentando .gaveta,
body.apresentando .tabbar,body.apresentando .medchip,body.apresentando .gpsnota,
body.apresentando .banloja{display:none!important}
/* convite para o app das lojas, no alto do mapa (modelo aprovado 03/10/2026);
   com ele aberto, os botoes do mapa e a etiqueta do GPS descem */
.banloja{position:absolute;left:12px;right:12px;top:12px;z-index:11;display:flex;align-items:center;gap:11px;
  background:var(--card);border-radius:14px;padding:10px 4px 10px 12px;box-shadow:var(--flut)}
.banloja img{width:40px;height:40px;border-radius:10px;flex:0 0 auto;display:block}
.banloja .t{flex:1 1 auto;min-width:0}
.banloja b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.banloja .t span{display:block;font-size:12px;line-height:1.35;color:var(--fraco)}
.banloja .btnloja{flex:0 0 auto;height:40px;padding:0 15px;border-radius:20px;background:var(--azul);color:#fff;
  font-weight:600;font-size:13.5px;display:flex;align-items:center}
.banloja .x{width:40px;height:44px;display:grid;place-items:center;color:var(--fraco);flex:0 0 auto}
.mapa-wrap.com-loja .mbotoes,.mapa-wrap.com-loja .gpsnota{top:84px}

/* ---- gaveta de ferramentas (padrao Apple Maps) ---- */
.gaveta{flex:0 0 auto;position:relative;z-index:10;margin-top:-18px;background:var(--card);
  border-top:1px solid var(--borda);border-radius:var(--raio-folha) var(--raio-folha) 0 0;
  box-shadow:0 -4px 18px rgba(20,24,28,.09);max-height:82px;overflow:hidden;transition:max-height .28s}
.gaveta.aberta{max-height:min(420px,52vh)}
.gaveta.min{max-height:34px}
.gaveta.min .gv-linha{display:none}
/* recolhida esconde TAMBEM a lista da ferramenta aberta (o JS a liga com
   style inline, dai o !important) - sobrava um pedaco dela (03/10/2026) */
.gaveta.min .gv-cab,.gaveta.min .gv-lista,.gaveta.min .gv-dica{display:none!important}
@media (prefers-reduced-motion: reduce){.gaveta{transition:none}}
.alca-cx{min-height:20px;display:flex;align-items:center;justify-content:center;gap:7px;touch-action:none}
.alca-cx .alca{width:40px;height:5px;border-radius:99px;background:var(--borda);margin:0}
.gv-min{display:none;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--fraco)}
.gaveta.min .gv-min{display:flex}
.gaveta.min .alca{display:none}
.gv-min .i{width:15px;height:15px}
.gv-linha{display:grid;gap:var(--gap);padding:0 12px 10px}
.gv-linha.n3{grid-template-columns:repeat(3,1fr)}
.gv-linha.n4{grid-template-columns:repeat(4,1fr)}
.gv-b{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid var(--borda);border-radius:11px;background:var(--card);font-size:11.5px;font-weight:600;color:var(--ink)}
.gv-b .i{width:18px;height:18px;color:var(--azul)}
.gv-b.on{background:var(--azul-suave);border-color:var(--azul);color:var(--azul-esc)}
.gv-b.go .i{color:var(--go-esc)}
.gv-cab{display:flex;align-items:center;padding:0 14px 7px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--fraco)}
.gv-cab button{margin-left:auto;font-size:13px;font-weight:600;color:var(--azul-esc);text-transform:none;
  letter-spacing:0;min-height:34px;padding:0 4px}
.gv-lista{display:flex;flex-direction:column;gap:var(--gap);padding:0 12px 14px}
.gv-it{display:flex;align-items:center;gap:11px;min-height:52px;padding:8px 12px;border:1px solid var(--borda);
  border-radius:11px;background:var(--card);text-align:left;color:var(--texto)}
.gv-it:active{background:var(--azul-suave)}
.gv-it .t{flex:1;min-width:0}
.gv-it .t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.gv-it .t small{display:block;font-size:11.5px;color:var(--fraco);margin-top:1px}

/* ============================ folhas ====================================== */
.veu{position:fixed;inset:0;background:var(--veu-cor);opacity:0;pointer-events:none;transition:opacity .22s;z-index:40}
.veu.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;height:auto;
  max-height:86%;background:var(--card);border-radius:var(--raio-folha) var(--raio-folha) 0 0;
  box-shadow:none;transform:translateY(105%);transition:transform .28s,box-shadow .28s}
/* a sombra so' existe com a folha ABERTA: fechada, ela fica estacionada logo
   abaixo da tela e a sombra (projetada para cima) vazava na borda de baixo -
   com ~10 folhas, a soma virava a faixa escura sob a barra de abas (achado no
   iPhone do Rodolfo, 29/09/2026; estava tambem em todas as capturas da loja) */
.sheet.on{transform:none;box-shadow:0 -10px 36px rgba(20,24,28,.28)}
@media (prefers-reduced-motion: reduce){.sheet,.veu{transition:none}}
.sheet .alca{width:40px;height:5px;border-radius:99px;background:var(--borda);margin:9px auto 2px;flex:0 0 auto}
.sheet .scorpo{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 15px calc(20px + var(--sa-b))}
.sheet h3{margin:2px 0 0;font-size:16.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;line-height:1.25}

/* ---- filtros do acervo ---- */
.dh-barra{display:flex;gap:var(--gap);margin:8px 12px 0}
.dh-barra .campo-busca{flex:1;min-width:0}
.btn-filtro{flex:0 0 auto;min-height:36px;padding:0 10px;display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);font-size:12.5px;
  font-weight:600;color:var(--azul-esc)}
.btn-filtro .n{min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:var(--azul-esc);
  color:#fff;font-size:11px;display:grid;place-items:center}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 12px 0}
.chips .c{display:inline-flex;align-items:center;gap:5px;padding:5px 7px 5px 10px;border-radius:999px;
  background:var(--azul-suave);color:var(--azul-esc);font-size:12px;font-weight:600}
.chips .c button{width:22px;height:22px;display:grid;place-items:center;color:inherit}
.fchips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.fchips button{min-height:38px;padding:0 13px;border:1px solid var(--borda);border-radius:999px;
  background:var(--card2);font-size:13px;font-weight:600;color:var(--texto)}
.fchips button.on{background:var(--azul-esc);border-color:var(--azul-esc);color:#fff}
.fchips:empty{display:none}

/* ---- faixa de estado do campo ----
   Duas cores porque sao dois recados diferentes: ambar = voce esta vendo dado
   guardado (cuidado ao decidir); azul = ha trabalho seu esperando para subir. */
.faixa{display:none;align-items:center;gap:10px;padding:9px 12px;font-size:12px;line-height:1.4;
  border-bottom:1px solid #f0e0bb;background:#fdf3de;color:#7a5600}
.faixa.on{display:flex}
.faixa.fila{background:var(--azul-suave);color:var(--azul-esc);border-bottom-color:#c9e3f7}
.faixa .tx{flex:1;min-width:0}
.faixa .tx b{font-weight:600}
.faixa .fx{width:32px;height:32px;display:grid;place-items:center;color:inherit;flex:0 0 auto}
.faixa:not(.fila) .fx{display:none}

/* ---- apontador da apresentacao ----
   Na TV a pessoa ve a tela espelhada do celular: entao o apontador e' um
   circulo desenhado AQUI, grande e de alto contraste, que se apaga sozinho.
   Sem isto, quem apresenta aponta com o dedo no proprio aparelho e a plateia
   nao ve nada. */
.apontador{position:absolute;z-index:25;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:rgba(10,134,224,.35);border:3px solid #fff;box-shadow:0 0 0 2px rgba(10,134,224,.9),0 2px 10px rgba(0,0,0,.5);
  pointer-events:none;animation:apontaSai 1.6s ease-out forwards}
@keyframes apontaSai{0%{transform:scale(.4);opacity:0}18%{transform:scale(1);opacity:1}
  100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.apontador{animation:none;opacity:.9}}

/* ---- busca unica sobre o mapa ---- */
.busca-mapa{position:absolute;top:10px;left:10px;right:10px;z-index:12;display:none;flex-direction:column;gap:8px}
.busca-mapa.on{display:flex}
/* Com a busca aberta a barra passa POR CIMA dos botoes flutuantes do
   mapa: o dedo ficava sobre dois alvos empilhados e via um botao
   redondo espiando por baixo da barra. Achado pela conferencia visual
   em 05/09/2026 (regra da invasao de area de toque). */
#buscaMapa.on ~ .mbotoes{display:none}
/* procurando: a barra de abas e as ferramentas SAEM junto com os botoes do
   mapa - antes subiam com o teclado e ocupavam a tela (Rodolfo, 03/10/2026) */
body.buscando .gaveta,body.buscando .tabbar{display:none}
.lista-busca{background:var(--card);border-radius:var(--raio-g);box-shadow:0 10px 28px rgba(20,24,28,.22);
  max-height:300px;overflow-y:auto;display:none}
.lista-busca.on{display:block}
.lista-busca .gr{padding:9px 13px 3px;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--fraco)}
.lista-busca .li{display:flex;align-items:center;gap:9px;width:100%;padding:0 13px;min-height:var(--alvo);
  font-size:13.5px;color:var(--ink);text-align:left;border-top:1px solid var(--card2)}
.lista-busca .li:active{background:var(--azul-suave)}
.lista-busca .li .pt{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.lista-busca .li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-busca .li small{color:var(--fraco);font-size:11.5px;flex:0 0 auto}

/* ---- terreno ---- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin:4px 0 12px}
.kpi{background:var(--card2);border-radius:var(--raio);padding:9px 10px;min-width:0}
.kpi small{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fraco);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi b{display:block;margin-top:2px;font-size:16px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2}
.kpi b.corte{color:#a8321f}
.grafico{background:var(--card2);border:1px solid var(--borda);border-radius:var(--raio);padding:10px;margin-bottom:12px}
.grafico svg{width:100%;height:150px}
.pf-legenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.pf-leg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--texto)}
.pf-leg i{width:12px;height:3px;border-radius:2px;display:inline-block}

/* ---- conversa: reacoes, mesmo vocabulario do computador ---- */
.reacoes{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.reac{min-height:32px;padding:0 11px;border:1px solid var(--borda);border-radius:999px;background:var(--card2);
  font-size:12.5px;font-weight:600;color:var(--texto);display:inline-flex;align-items:center;gap:5px}
.reac.on{border-color:var(--azul);background:var(--azul-suave);color:var(--azul-esc)}
.reac:disabled{opacity:.5}
/* editar e excluir a propria mensagem: discretos, para nao competir com
   o texto - so quem escreveu ve, e so quando procura */
.msg-acoes{display:flex;gap:14px;margin-top:7px}
.msg-acoes button{min-height:30px;font-size:12px;font-weight:600;color:var(--fraco)}
.msg-acoes button:active{color:var(--azul-esc)}
.msg-edit{margin-top:8px}
.msg-edit textarea{height:70px}
.cv-editado{font-size:10.5px;color:var(--fraco);font-style:italic}
.conv-acoes{display:flex;gap:var(--gap);margin:10px 0 14px;flex-wrap:wrap}
.formas-g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin:4px 0 14px}
.forma-b{height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--borda);border-radius:11px;background:var(--card);font-size:10.5px;font-weight:600;
  color:var(--texto)}
.forma-b .fig{width:20px;height:20px;background:currentColor;color:var(--azul)}
.forma-b.on{border-color:var(--azul);background:var(--azul-suave);color:var(--azul-esc)}
.cores-g{display:flex;gap:12px;margin:4px 0 14px;flex-wrap:wrap}
.cor-b{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--borda);
  display:grid;place-items:center;color:#fff}
.cor-b.on{box-shadow:0 0 0 3px var(--ink)}
.cor-b .i{opacity:0}
.cor-b.on .i{opacity:1}

/* ---- conversa ---- */
.cmsg{display:flex;gap:10px;margin-bottom:16px}
.cmsg .cav{width:30px;height:30px}
.cmsg .cbody{flex:1;min-width:0}
.cmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--fraco)}
.cmeta b{font-size:12.5px;font-weight:600;color:var(--ink)}
.ctxt{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--texto);word-break:break-word;white-space:pre-wrap}
.cassunto{margin-top:5px;padding-left:9px;border-left:3px solid var(--azul);font-size:13px;font-weight:600;color:var(--ink)}
.iabox,.ia{margin-top:6px;background:#f4f7fa;border:1px solid #e2e8ef;border-radius:var(--raio);padding:8px 10px;
  font-size:12.5px;line-height:1.5}
.cfoto{margin-top:8px;max-width:100%;border-radius:var(--raio);display:block}
.cdoc{margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:8px 11px;background:var(--card2);
  border:1px solid var(--borda);border-radius:var(--raio);font-size:12.5px;font-weight:600;color:var(--azul-esc);
  text-decoration:none}
/* resumo do elemento (toque no pin): a 1a mensagem em ate' 4 linhas e o
   botao de abrir a conversa ocupando a largura */
/* a area das mensagens OCUPA a folha: sem isto ela tinha so' a altura do
   texto, a caixa de resposta subia junto e sobrava um vazio branco embaixo
   dela (o "grande area branca abaixo do enviar", iPhone do Rodolfo 03/10) */
#shConv .scorpo{flex:1 1 auto;min-height:0}
.cresumo{margin:12px 0 4px}
.cresumo-txt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cabrir{width:100%;margin:12px 0 4px}
.cevento{margin:12px 0;text-align:center;font-size:12px;color:var(--fraco);font-style:italic}
/* UMA linha so': clipe, caixa de texto e enviar (revisao do Rodolfo no
   iPhone, 03/10/2026: a caixa numa linha e os botoes em outra deixavam uma
   area branca grande sob o "Enviar"). A margem de baixo e' so' a da barra de
   gesto da Apple mais 8px. */
.cresp{flex:0 0 auto;border-top:1px solid var(--borda);padding:8px 10px calc(8px + var(--sa-b));background:var(--card);
  display:flex;flex-direction:column;gap:8px}
.cresp .linha2{display:flex;align-items:flex-end;gap:8px}
.cresp textarea{flex:1;min-width:0;height:44px;resize:none;outline:none;border:1px solid var(--borda);border-radius:22px;
  background:var(--card2);padding:11px 15px;font-size:16px;line-height:1.3;color:var(--ink)}
.cresp .mini-ico{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--borda);border-radius:50%;background:var(--card2);
  display:grid;place-items:center;color:var(--azul-esc)}
.cresp .enviar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center}
.anexo-pend{display:none;align-items:center;gap:8px;padding:8px 10px;background:var(--azul-suave);
  border-radius:var(--raio);font-size:12.5px;font-weight:600;color:var(--azul-esc)}
.anexo-pend.on{display:flex}
.anexo-pend .x{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;color:inherit}
.anexo-opcao{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:8px 2px;text-align:left;
  border-bottom:1px solid var(--card2);color:var(--texto)}
.anexo-opcao:active{background:var(--azul-suave)}
.anexo-opcao .aico{width:34px;height:34px;border-radius:var(--raio);background:var(--card2);color:var(--azul-esc);
  display:grid;place-items:center;flex:0 0 auto}
.anexo-opcao .aico svg{width:18px;height:18px}
.anexo-opcao>span:not(.aico){flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink)}
.anexo-opcao small{display:block;font-size:11.5px;font-weight:400;color:var(--fraco);margin-top:1px}

/* ---- novo pin ---- */
.opcpos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:4px 0 12px}
.opcpos button{min-height:56px;border:1px solid var(--borda);border-radius:11px;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12.5px;
  font-weight:600;color:var(--ink);padding:6px 8px}
.opcpos button small{font-size:10.5px;font-weight:400;color:var(--fraco)}
.opcpos button.on{background:var(--azul-suave);border-color:var(--azul);color:var(--azul-esc)}
.opcpos button.on small{color:var(--azul-esc)}
.fotoquadro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:88px;
  width:100%;border:1.5px dashed var(--borda);border-radius:11px;background:var(--card2);color:var(--fraco);
  font-size:12.5px;text-align:center;padding:10px}
.fotoquadro .fila{display:flex;gap:14px;color:var(--azul-esc)}
.fotoquadro.tem{border-style:solid;border-color:var(--azul);background:var(--azul-suave);color:var(--azul-esc);font-weight:600}
.fotoquadro.tem .fila{color:var(--azul-esc)}
.fotoquadro>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.fotoquadro img{max-width:100%;max-height:150px;border-radius:var(--raio);display:block}

/* ---- painel do projeto ---- */
.ptabs{display:flex;gap:3px;margin:10px 0 8px;padding:3px;background:var(--card2);border:1px solid var(--borda);
  border-radius:10px}
.ptabs button{flex:1;min-height:30px;border-radius:8px;font-size:12px;font-weight:600;color:var(--fraco)}
.ptabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(20,24,28,.14)}
.el-grupo{margin:12px 0 4px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fraco)}
.el-row,.cam-row{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--alvo);padding:7px 2px;
  text-align:left;border-bottom:1px solid var(--card2);color:var(--texto)}
.el-row:active{background:var(--azul-suave)}
.el-row .nm,.cam-row .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.el-row .pt,.cam-row .pt{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.el-row .nd{font-size:11.5px;color:var(--fraco);flex:0 0 auto}
.el-row small{font-size:11.5px;color:var(--fraco);flex:0 0 auto}
/* contagem ao lado do titulo do grupo (Elementos 12) */
.el-grupo .tot{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--card2);
  color:var(--fraco);font-size:10.5px;font-weight:600;letter-spacing:0}
/* botao "ir ate" na linha do elemento (e na do dado/ortofoto, ME 10/09) */
.el-row .ir,.cam-row .ir{flex:0 0 auto;min-height:32px;padding:0 10px;border:1px solid var(--borda);border-radius:999px;
  background:var(--card);font-size:12px;font-weight:600;color:var(--azul-esc)}
/* mencao no texto da mensagem: o MESMO tratamento do computador */
.men{color:var(--azul-esc);font-weight:600;background:var(--azul-suave);border-radius:4px;padding:0 3px}
.cam-row .sw{width:44px;height:26px;border-radius:99px;background:#ccd5dd;position:relative;flex:0 0 auto;
  transition:background .18s;border:none}
.cam-row .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(20,24,28,.3);transition:left .18s}
.cam-row .sw.on{background:var(--azul)}
.cam-row .sw.on::after{left:21px}
@media (prefers-reduced-motion: reduce){.cam-row .sw,.cam-row .sw::after{transition:none}}

/* ---- salvar desenho ---- */
.tiporow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin:4px 0 10px}
.tiporow button{min-height:48px;border:1px solid var(--borda);border-radius:11px;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;
  font-weight:600;color:var(--ink)}
.tiporow button .i{color:var(--azul)}
.tiporow button.on{background:var(--azul-suave);border-color:var(--azul);color:var(--azul-esc)}
.selcamada{width:100%;min-height:var(--alvo);margin-top:var(--gap);border:1px solid var(--borda);
  border-radius:var(--raio);background:var(--card2);padding:0 10px;font-size:14px;color:var(--ink);outline:none}
input.campo,textarea.campo{width:100%;border:1px solid var(--borda);border-radius:11px;background:var(--card2);
  padding:11px;font-size:15px;color:var(--ink);outline:none;resize:none}
input.campo:focus,textarea.campo:focus{border-color:var(--azul)}

/* ---- notificacoes ---- */
.notif-topo{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 4px}
.notif-topo button{min-height:32px;padding:0 11px;border:1px solid var(--borda);border-radius:999px;
  background:var(--card);font-size:12px;font-weight:600;color:var(--fraco)}
.notif-topo button.on{background:var(--azul-esc);border-color:var(--azul-esc);color:#fff}
.notif-topo .todaslidas{margin-left:auto;border:none;background:none;color:var(--azul-esc)}
.notif-item{display:flex;gap:10px;align-items:flex-start;width:100%;padding:10px 2px;text-align:left;
  border-bottom:1px solid var(--card2);color:var(--texto)}
.notif-item.nt{background:var(--azul-suave);border-left:3px solid var(--azul-esc);padding-left:9px;
  border-radius:0 var(--raio) var(--raio) 0}
.notif-item .nb{flex:1;min-width:0}
.notif-item .nm{font-size:13.5px;font-weight:600;color:var(--ink)}
.notif-item .nd{display:block;font-size:11.5px;color:var(--fraco);margin-top:2px;line-height:1.4}
.notif-item .nlbtn{flex:0 0 auto;color:var(--azul-esc);font-size:12px;font-weight:600}
.nacoes{display:flex;gap:7px;margin-top:6px}
.pico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;
  font-weight:600;flex:0 0 auto;background:#5b6570;overflow:hidden}
.pico img{width:100%;height:100%;object-fit:cover}

/* ---- perfil ---- */
.perfil-topo{display:flex;align-items:center;gap:12px;margin-top:4px}
.perfil-topo .pav{width:52px;height:52px;border-radius:50%;background:var(--azul);color:#fff;display:grid;
  place-items:center;font-size:18px;font-weight:600;flex:0 0 auto;overflow:hidden;background-size:cover;
  background-position:center}
.perfil-topo .pn{font-size:17px;font-weight:700;color:var(--ink)}
.perfil-topo .pe{font-size:12.5px;color:var(--fraco);margin-top:1px}

/* ---- instalar: passo a passo ---- */
.passo{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--card2);font-size:13px;
  line-height:1.5}
.passo .pnum{width:24px;height:24px;border-radius:50%;background:var(--azul-suave);color:var(--azul-esc);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:0 0 auto}

/* ---- modo mira ---- */
#mira{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;background:#12171c;color:#fff}
#mira.on{display:flex}
#mira video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mTopo{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:8px;
  padding:calc(12px + var(--sa-t)) 14px 12px}
.mTag{padding:6px 10px;border-radius:8px;background:rgba(18,23,28,.62);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
.mX{margin-left:auto;width:44px;height:44px;border-radius:50%;background:rgba(18,23,28,.62);display:grid;
  place-items:center;color:#fff}
.mMeio{position:absolute;inset:0;z-index:2}
.mtape{position:absolute;top:calc(62px + var(--sa-t));left:0;right:0;height:28px;overflow:hidden}
.mtape span{position:absolute;top:2px;transform:translateX(-50%);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-shadow:0 1px 4px rgba(0,0,0,.8)}
.mtape .risco{position:absolute;left:50%;top:19px;width:2px;height:9px;margin-left:-1px;background:#fff}
.mchip-ar{position:absolute;z-index:2;transform:translateX(-50%);display:flex;align-items:center;gap:9px;
  white-space:nowrap;padding:9px 13px;border-radius:12px;background:rgba(18,23,28,.84);
  border:1px solid rgba(255,255,255,.22);font-size:14px;font-weight:600;pointer-events:none}
.mchip-ar .pt{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px #fff}
.mchip-ar small{font-size:13px;font-weight:400;opacity:.85;font-variant-numeric:tabular-nums}
.mNota{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 14px calc(16px + var(--sa-b));
  background:linear-gradient(180deg,transparent,rgba(18,23,28,.8) 38%);font-size:12.5px;line-height:1.5;text-align:center}

/* ---- ajustes de campo ---- */

/* ---- ALVO DE TOQUE ----------------------------------------------------
   O desenho continua pequeno de proposito: a tela compacta foi pedida duas
   vezes ("como se fosse um zoom -"). O DEDO, porem, precisa de 40px - com
   luva, no sol, em pe. Entao o que cresce nao e' o botao, e' a AREA que
   responde ao toque: um ::after invisivel, que nao ocupa espaco no layout e
   nao muda um pixel do que se ve.

   As folgas sao calculadas para NAO se sobreporem entre botoes vizinhos
   (barra de cima: 10px de espaco, 5 para cada lado). Area de toque que
   invade a do vizinho e' pior que area pequena: o dedo acerta o botao
   errado. A conferencia visual mede as duas coisas - tamanho e invasao. */
.sino,.avatarzinho,.chip-ctx,.btn-filtro,.filtros button,.fchips button,#buscaX{position:relative}
.sino::after,.avatarzinho::after{content:'';position:absolute;top:-8px;right:-5px;bottom:-8px;left:-5px}
.chip-ctx::after{content:'';position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px}
.btn-filtro::after,.filtros button::after{content:'';position:absolute;top:-5px;right:-3px;bottom:-5px;left:-3px}
.fchips button::after,#buscaX::after{content:'';position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px}

/* ---- dados do DataHub no painel do projeto (revisao ME 09/09/2026) ---- */
.el-row .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.el-row.dado{align-items:flex-start;padding-top:9px}
.el-row .el-sub{display:block;font-size:11px;font-weight:400;color:var(--fraco);white-space:normal;margin-top:1px}
.orto-liga{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--azul-esc)}
.orto-liga input{width:18px;height:18px;accent-color:var(--azul)}

/* ---- edicao de vertice no mapa: bolinha real, fantasma (cria) e de tirar ---- */
.vedit{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--azul);
  box-shadow:0 1px 4px rgba(20,24,28,.4);padding:0}
.vedit.ghost{width:16px;height:16px;border:2px dashed var(--azul);background:rgba(255,255,255,.72)}
.vedit.rm{border-color:#a8321f;background:#ffe9e5}

/* ---- perfil longitudinal navegavel ---- */
.pf-leitura{min-height:40px;background:var(--card2);border:1px solid var(--borda);border-radius:var(--raio);
  padding:8px 10px;font-size:12.5px;line-height:1.45;color:var(--texto);margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.pf-navega{touch-action:none}
.pf-navega svg{display:block;width:100%}
.pf-zoom{display:flex;gap:var(--gap);margin:2px 0 8px;flex-wrap:wrap}
.pf-zoom .btnf{min-height:38px;padding:0 14px;flex:0 0 auto}
.pf-zoom .btnf.on{border-color:var(--azul);background:var(--azul-suave);color:var(--azul-esc)}
.trecho-row{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid var(--card2);
  font-size:12.5px;color:var(--texto);font-variant-numeric:tabular-nums}
.trecho-row span{flex:1;min-width:0}
.trecho-row button{width:30px;height:30px;display:grid;place-items:center;color:var(--fraco)}
.pfc-estaca{display:flex;align-items:center;gap:10px}
.pfc-estaca .campo{width:110px}
.pfc-estaca span{font-size:12.5px;color:var(--fraco)}

/* ---- lote ME 10/09 (2a leva) ---- */
/* nome do modulo na barra do mapa: fixo, sem roubar o espaco do chip do projeto */
.top .ttl.mod{flex:0 0 auto}
/* girar o celular NAO pode inflar a letra: e' o ajuste automatico de texto do
   WebKit/Blink em paisagem (achado real ME 10/09) - trava em 100% */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* caixa de selecao a esquerda da linha (ortofoto/dado), antes do titulo */
.chk-esq{width:18px;height:18px;accent-color:var(--azul);flex:0 0 auto;margin:0}
/* botao 3D do mapa: rotulo de texto, igual ao do computador */
.mbtn .rot3d{font-size:12.5px;font-weight:700;letter-spacing:.02em}
/* folha fixa (quadro do perfil): sem alca, porque nao ha gesto de arrastar */
.sheet.fixa .alca{visibility:hidden}
/* bolinha de cor dentro do liga/desliga do dado: diz QUAL pele a caixa liga */
.orto-liga .pt{width:9px;height:9px;border-radius:3px;flex:0 0 auto;margin-left:3px}