/* GEOCASSOL — identidade Cassol Real Estate (índigo #4550a2 · navy #0c0137) */
:root{
  --ink:#0c0137; --ink-2:#241a5c; --paper:#F6F7FB; --card:#FFFFFF; --line:#DEE0EC;
  --brass:#4550a2; --brass-soft:#E6E7F5; --teal:#2A7D6C; --amber:#363f8a;
  --alerta:#B23A2E; --muted:#6A6E8C; --radius:14px;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:14px}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px}
.mono{font-family:var(--mono)}
a{color:inherit}

/* "Pular para o conteudo": fora da tela ate receber foco. Sem ele sao 14 Tabs
   de menu antes de chegar ao conteudo, em toda tela. */
#pular{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brass);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;font-size:13.5px;text-decoration:none}
#pular:focus{left:0}
#conteudo:focus{outline:none}

/* Barra de carregando: entre digitar na busca e a lista trocar nao havia sinal
   nenhum de que algo estava acontecendo. `body.carregando` e ligada em api(). */
body.carregando::after{content:"";position:fixed;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  background-size:40% 100%;background-repeat:no-repeat;z-index:995;
  animation:carregando 1s linear infinite}
@keyframes carregando{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){
  body.carregando::after{animation:none;background:var(--brass);opacity:.5}
}

#shell{display:flex;min-height:100vh}
/* overflow-y:auto: com o submenu Cadastros aberto o conteudo passa de 100vh e,
   sem rolagem interna, vazava da caixa azul pintando por cima do fundo branco */
#menu{width:200px;flex:0 0 auto;background:var(--ink);color:#EDF1EE;display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
body.nav-oculta #menu{display:none}
/* alca de recolher a nav AZUL: mora numa CALHA propria de 24px no layout (nao
   flutua sobre conteudo clicavel) e, por estar dentro de #shell, some junto na
   tela de login e fica ABAIXO do veu do modal (z-index 900) */
#navGutter{flex:0 0 24px;position:sticky;top:0;height:100vh;display:flex;align-items:center;z-index:5}
#navToggle{width:24px;height:52px;border:1px solid var(--line);border-left:none;border-radius:0 10px 10px 0;background:var(--paper);color:var(--muted);cursor:pointer;font-size:15px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.12)}
#navToggle:hover{color:var(--brass);border-color:var(--brass)}
/* alca do painel de resumo do mapa (dentro do #mapmain, na emenda com o mapa);
   z-index 650 < 900 do modal, entao o veu a cobre */
#sideToggle{position:absolute;left:0;top:calc(50% + 8px);z-index:650;width:24px;height:52px;border:1px solid var(--line);border-left:none;border-radius:0 10px 10px 0;background:var(--paper);color:var(--muted);cursor:pointer;font-size:15px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.12)}
#sideToggle:hover{color:var(--brass);border-color:var(--brass)}
#mapwrap.side-oculta #mapaside{display:none}
#menu .brand{display:flex;flex-direction:column;gap:9px;align-items:flex-start;padding:6px 6px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}
#menu .brand .logo{width:156px;max-width:100%;height:auto;display:block}
#menu .brand .brand-sub{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.5);letter-spacing:1.6px;text-transform:uppercase;padding-left:2px}
#menu a{display:block;padding:10px 12px;border-radius:9px;color:rgba(237,241,238,.78);font-weight:600;font-size:13.5px;text-decoration:none;margin-bottom:2px}
#menu a:hover{background:rgba(255,255,255,.07)}
#menu a.on{background:rgba(122,132,204,.20);color:#B7BEEA}
#menu .menu-foot{margin-top:auto;padding:10px 12px;font-family:var(--mono);font-size:11px}
#menu .menu-foot a{color:rgba(237,241,238,.45);padding:0}

#conteudo{flex:1;min-width:0;padding:26px 30px 60px}
h1{font-variation-settings:'wdth' 115,'wght' 720;font-size:22px;letter-spacing:.2px;margin-bottom:4px}
.sub{color:var(--muted);font-size:13px;margin-bottom:18px}
h2{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}

/* cards de estatística */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.stat{flex:1;min-width:130px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center}
.stat b{display:block;font-variation-settings:'wdth' 110,'wght' 750;font-size:22px}
.stat span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}

/* barra de filtros */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filtros input[type=text],.filtros input[type=search],.filtros select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);min-width:0}
.filtros input[type=text],.filtros input[type=search]{flex:1;max-width:420px}
.filtros input:focus,.filtros select:focus{outline:none;border-color:var(--brass)}

.btn{background:var(--brass);color:#fff;font-weight:700;padding:10px 16px;border-radius:10px;font-size:13.5px}
.btn:hover{background:var(--amber)}
.btn.suave{background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:600}
.btn.suave:hover{border-color:var(--brass);color:var(--brass)}
.btn.perigo{background:#F3DCD4;color:var(--alerta)}
.btn.mini{padding:6px 10px;font-size:12px;border-radius:8px}

/* tabelas */
.tabela{width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;border-collapse:separate;border-spacing:0}
.tabela th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);background:#FBFCFA}
.tabela td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tabela tr:last-child td{border-bottom:none}
.tabela tbody tr{cursor:pointer}
.tabela tbody tr:hover{background:#FBFCFA}
.tabela .num{text-align:right;font-family:var(--mono);font-size:12.5px}

.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;background:var(--brass-soft);color:#2f377a}
.badge.ok{background:#D8EAE6;color:var(--teal)}
.badge.erro{background:#F3DCD4;color:var(--alerta)}
.badge.neutro{background:#E7ECEA;color:var(--muted)}
.badge.roxo{background:#E8DCF3;color:#5B2A86}

.paginacao{display:flex;gap:8px;align-items:center;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* fichas / detalhe */
.ficha{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:7px 14px;font-size:13.5px}
.kv .k{color:var(--muted)}
.linha-tempo{border-left:2px solid var(--line);margin:8px 0 0 8px;padding-left:18px}
.evento{position:relative;padding-bottom:14px}
.evento::before{content:"";position:absolute;left:-24px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.evento.atual::before{background:var(--teal)}
.evento.troca::before{background:var(--alerta)}
.evento b{font-size:13.5px}
.evento .quando{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* modal */
#modal-fundo{position:fixed;inset:0;background:rgba(15,38,46,.55);display:flex;align-items:center;justify-content:center;z-index:900;padding:20px}
#modal-fundo.oculto{display:none}
#modal{background:var(--card);border-radius:16px;max-width:640px;width:100%;max-height:88vh;overflow-y:auto;padding:22px;box-shadow:0 18px 50px rgba(15,38,46,.4)}
#modal h3{font-variation-settings:'wdth' 112,'wght' 700;font-size:17px;margin-bottom:14px}
#modal label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:12px 0 5px}
#modal input[type=text],#modal input[type=number],#modal select,#modal textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px}
#modal input:focus,#modal select:focus,#modal textarea:focus{outline:none;border-color:var(--brass)}
#modal .acoes{display:flex;gap:8px;margin-top:20px;justify-content:flex-end}

/* aviso (toast) */
#aviso{position:fixed;bottom:22px;right:22px;z-index:990;display:flex;flex-direction:column;gap:8px}
#aviso .toast{background:var(--ink);color:#EDF1EE;padding:12px 16px;border-radius:11px;font-size:13px;box-shadow:0 8px 22px rgba(15,38,46,.4);max-width:380px}
#aviso .toast.erro{background:#7A2E1D}

/* barra de progresso */
.progresso{height:8px;background:#E7ECEA;border-radius:5px;overflow:hidden}
.progresso i{display:block;height:100%;background:var(--teal);border-radius:5px;transition:width .4s}
.progresso.executando i{background:var(--brass)}

/* ---------------------------------------------------------------------------
 * ESQUELETO DE CARREGAMENTO (spec interacao-por-toque "O toque responde na
 * hora e a tela nao salta", design D10.3). Enquanto a API responde, blocos
 * com a ALTURA FINAL ocupam o lugar da lista/ficha: quando o dado chega,
 * nada que ja estava na tela muda de lugar (CLS = 0). Valem no desktop e no
 * celular — o que muda e so o tempo de espera percebido.
 * ------------------------------------------------------------------------- */
.esqueleto{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.esqueleto .esq{height:44px;border-radius:8px;
  background:linear-gradient(90deg,var(--paper) 25%,#eceef3 37%,var(--paper) 63%);
  background-size:400% 100%;animation:esq-brilho 1.4s ease infinite}
.esqueleto .esq.curto{width:60%}
.esqueleto .esq.alto{height:96px}
@keyframes esq-brilho{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.esqueleto .esq{animation:none;background:var(--paper)}}
/* espera longa (8 s): o esqueleto da lugar a uma mensagem com acao */
.espera{color:var(--muted);text-align:center;padding:36px 10px;font-size:13.5px}
.espera .btn{margin-top:12px}
.vazio{color:var(--muted);text-align:center;padding:36px 10px;font-size:13.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* campo de formulário — bloco label-acima-do-controle (modais e painéis inline) */
.campo{margin-bottom:11px}
.campo>label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);font-size:14px;font-family:inherit}
.campo textarea{resize:vertical;min-height:60px;line-height:1.45}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--brass)}
.grid2>.campo{margin-bottom:0}
.form-sec{font-variation-settings:'wdth' 110,'wght' 700;font-size:13px;margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}

/* GED — documentos */
.ged-drop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px dashed var(--line);border-radius:10px;padding:12px;background:var(--paper);margin-bottom:10px}
.ged-drop.sobre{border-color:var(--brass);background:var(--brass-soft)}
.ged-drop-txt{flex:1;min-width:140px;font-size:13px;color:var(--muted)}
.ged-cat{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.ged-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;background:var(--card)}
.ged-ico{font-size:20px;flex:0 0 auto;line-height:1}
.ged-info{flex:1;min-width:0}
.ged-nome{font-weight:600;font-size:13px;color:var(--ink);text-decoration:none;word-break:break-all}
.ged-nome:hover{color:var(--brass)}
.ged-meta{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.ged-acoes{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.ged-acoes a{text-decoration:none}
.ged-vazio{color:var(--muted);font-size:12.5px;padding:8px 2px}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}

/* ====================== MAPA (tela principal) ====================== */
#conteudo.full{padding:0;height:100vh;overflow:hidden}
#mapwrap{display:flex;height:100vh;min-height:0;position:relative}
#mapaside{width:310px;flex:0 0 auto;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.ms-head{padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.ms-stats{display:flex;gap:8px;margin-bottom:10px}
.ms-stat{flex:1;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:8px 4px}
.ms-stat b{display:block;font-variation-settings:'wdth' 110,'wght' 750;font-size:16px}
.ms-stat span{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.ms-search{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.ms-search input{border:none;background:none;flex:1;min-width:0;outline:none}
/* LOTES x COMPLETO — o recorte da analise na lista de proprietarios */
.ms-modo{display:flex;gap:3px;margin-top:9px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px}
.ms-modo button{flex:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;background:none;border:none;color:var(--muted);padding:7px 4px;border-radius:6px;cursor:pointer}
.ms-modo button.on{background:var(--ink);color:#fff}
.ms-sorts{display:flex;gap:5px;margin-top:9px}
.ms-sorts button{flex:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:7px 4px}
.ms-sorts button.on{background:#122a37;color:#fff;border-color:#122a37}
.own-filtro-nota{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:6px 10px;background:var(--brass-soft);border:1px solid var(--brass);border-radius:7px;font-size:11.5px;color:var(--ink)}
.own-filtro-nota button{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--brass);background:none;border:none;text-decoration:underline;cursor:pointer;padding:0}
#ownList{flex:1;overflow-y:auto;min-height:0}
.owrow{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.owrow:hover,.owrow:active,.owrow:focus-visible{background:var(--paper)}
.owrow .owpin{width:22px;height:22px;flex:0 0 auto;border:1.5px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.owrow .owpin svg{width:13px;height:13px;fill:currentColor}
.owrow.on .owpin{border-color:transparent;color:#fff}
.owrow .own{flex:1;min-width:0}
.owrow .own-nome{font-weight:650;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owrow .own-meta{font-size:11px;color:var(--muted);font-family:var(--mono)}
.owrow .owa{font-family:var(--mono);font-size:11px;color:var(--teal);flex:0 0 auto;text-align:right}

#mapmain{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0}
.leaflet-container{font-family:'Archivo',sans-serif;background:#e8ece9}
.map-top{position:absolute;top:12px;left:12px;right:12px;z-index:600;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:440px}
.map-top>*{pointer-events:auto}
/* (a busca sobre o mapa foi removida — a busca unica vive na lateral) */
.resitem{display:block;width:100%;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;background:none}
.resitem:hover{background:var(--paper)}
.resitem .rn{font-weight:650;font-size:13px}
.resitem .ri{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.mapchip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#122a37;color:#fff;border-radius:999px;padding:7px 8px 7px 13px;font-size:12.5px;box-shadow:0 3px 14px rgba(15,38,46,.2)}
.mapchip b{font-family:var(--mono);opacity:.85;font-weight:500}
.mapchip button{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.mapchip-area{background:var(--brass)}
.mapchip.fit{background:var(--ink);color:#fff;cursor:pointer;padding:7px 14px;font-weight:600;gap:6px}
.mapchip.opp{background:#1E6E62;color:#fff;cursor:pointer;padding:7px 14px;font-weight:600}
.mapchip.opp:hover{background:#175249}
.mapchip.fit:hover{filter:brightness(1.15)}

.map-fabs{position:absolute;top:12px;right:12px;z-index:600;display:flex;flex-direction:column;gap:8px}
.mfab{width:42px;height:42px;border-radius:11px;background:var(--card);border:1px solid var(--line);box-shadow:0 3px 12px rgba(15,38,46,.16);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.mfab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mfab.on{background:var(--brass);color:#fff;border-color:var(--brass)}
.mzoom{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:590;background:rgba(15,38,46,.86);color:#fff;padding:8px 15px;border-radius:999px;font-size:12.5px;display:none}
.mzoom.on{display:block}

.legenda{position:absolute;right:12px;bottom:14px;z-index:590;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:11px;box-shadow:0 2px 10px rgba(15,38,46,.16)}
.legenda div{display:flex;align-items:center;gap:7px;margin:3px 0}
.legenda i{width:13px;height:13px;border-radius:3px;flex:0 0 auto}

/* painel de filtros/camadas */
.mpanel{position:absolute;left:12px;bottom:14px;z-index:600;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(15,38,46,.18);width:340px;max-height:74vh;overflow-y:auto;display:none}
/* painel de filtros das OPORTUNIDADES: ancora na pilha de botoes, a direita */
#oppPanel{left:auto;right:64px;top:12px;bottom:auto;width:280px}
#oppPanel .ofsel{width:100%;margin-bottom:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:13px}
#oppPanel .of-rodape{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
/* bolinha quando ha filtro alem do padrao (so ativas) */
.mfab{position:relative}
.mfab.filtrado::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--brass);border:2px solid var(--card)}
.mpanel.on{display:block}
.mpanel h3{font-variation-settings:'wdth' 112,'wght' 700;font-size:14px;padding:13px 14px 0}
.mpsec{padding:12px 14px;border-bottom:1px solid var(--line)}
.mpsec .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.presets{display:flex;flex-wrap:wrap;gap:5px}
.presets button{font-family:var(--mono);font-size:11px;background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:6px 9px}
.presets button.on{background:var(--brass);color:#fff;border-color:var(--brass)}
.ltog{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px}
.regtabs{display:flex;gap:5px;margin-bottom:8px}
.regtabs button{flex:1;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:6px 3px}
.regtabs button.on{background:#122a37;color:#fff}
.reglist{max-height:48vh;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.reglist>button,.zchip{display:flex;justify-content:space-between;gap:8px;text-align:left;font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:7px 9px;width:100%}
.reglist>button:hover,.zchip:hover{border-color:var(--brass)}
.zchip.on{background:var(--brass-soft);border-color:var(--brass)}
.reglist button b,.zchip b{font-weight:500;color:var(--muted);font-family:var(--mono);font-size:10.5px}

/* ficha do lote (sheet) */
#sheet{position:absolute;right:0;top:0;bottom:0;width:370px;max-width:88vw;background:var(--card);border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(15,38,46,.16);z-index:700;transform:translateX(100%);transition:transform .25s;overflow-y:auto;padding:18px 18px 40px}
#sheet.open{transform:translateX(0)}
#sheet .sh-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center}
#sheet .sh-close svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
/* recolher: a ficha sai da frente e vira UM quadradinho no topo direito
   (mesma linguagem dos .mfab, encostado a esquerda da coluna deles) */
#sheet .sh-min{position:absolute;top:12px;right:48px;width:30px;height:30px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;color:var(--ink)}
#sheet.open.recolhida{transform:translateX(100%);overflow:visible}
#sheet .sh-grip{display:none;position:absolute;left:-104px;top:12px;width:42px;height:42px;border-radius:11px;background:var(--card);border:1px solid var(--line);box-shadow:0 3px 12px rgba(15,38,46,.16);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;z-index:2}
#sheet.recolhida .sh-grip{display:flex}
#sheet .sh-grip span{font-size:17px;font-weight:600;color:var(--ink);line-height:1;user-select:none}
#sheet .sh-grip small{font-size:8.5px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;user-select:none}
#sheet .sh-grip:hover span,#sheet .sh-grip:active span,#sheet .sh-grip:focus-visible span{color:var(--brass)}
.sh-owner{font-variation-settings:'wdth' 112,'wght' 720;font-size:18px;margin-right:34px;line-height:1.2}
.sh-doc{font-family:var(--mono);font-size:12px;color:var(--muted);margin:3px 0 12px}
.sh-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sh-badges .badge{font-size:10.5px}
.sh-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.sh-actions a,.sh-actions button{font-size:12.5px;font-weight:650;padding:9px 13px;border-radius:9px;text-decoration:none;text-align:center}
.sh-actions .primary{background:var(--brass);color:#fff}
.sh-actions .soft{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.qsa{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.qsa h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;display:flex;gap:8px;align-items:center}
.qsa .sit{font-size:9.5px;padding:2px 7px;border-radius:10px;background:#D8EAE6;color:var(--teal)}
.qsa .sit.off{background:#F3DCD4;color:var(--alerta)}
.socio,.emp,.obra-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 9px;border:1px solid var(--line);border-radius:8px;margin-bottom:5px;background:var(--paper);cursor:pointer}
.socio:hover,.emp:hover,.obra-item:hover,.socio:active,.emp:active,.obra-item:active,.socio:focus-visible,.emp:focus-visible,.obra-item:focus-visible{border-color:var(--brass)}
.socio.rastreado{border-color:var(--brass);background:var(--brass-soft)}
.socio .sn{flex:1;font-size:12.5px}
.socio .sq{font-size:10.5px;color:var(--muted)}
.socio .adm{font-size:9px;font-weight:700;color:var(--teal);background:#D8EAE6;padding:2px 6px;border-radius:8px}
.socio .strace{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);border-radius:7px;padding:3px 6px;flex:0 0 auto}
.socio.rastreado .strace{background:var(--brass);color:#fff}
.qsa .qsa-hint{font-size:10.5px;color:var(--muted);margin:-2px 0 8px}
.emp .en{font-weight:650;font-size:12.5px}
.emp .em{font-size:11px;color:var(--muted)}
/* rastreamento de pessoa na barra lateral */
.pessoa-head{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--brass-soft)}
.pessoa-head .ph-nome{font-variation-settings:'wdth' 112,'wght' 720;font-size:14px}
.pessoa-head .ph-meta{font-family:var(--mono);font-size:11px;color:var(--ink2);margin:3px 0 8px}
.pessoa-head .ph-clear{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;background:var(--card);border:1px solid var(--brass);color:var(--brass);border-radius:7px;padding:6px 10px}
.owrow .owpin.roxo{border-color:#5B2A86;color:#5B2A86}
.owrow .owpin.roxo svg{fill:none;stroke:currentColor;stroke-width:2}
.own-secao{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 12px 4px;background:var(--paper);border-bottom:1px solid var(--line)}
.owrow.pessoa .owa{color:var(--brass);font-weight:700}
/* filtro de zoneamento — cards agrupados por tipologia + gabarito */
.zgrupo{margin-bottom:12px}
.zgrupo-head{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 7px}
.zgrupo-head .zgt{font-variation-settings:'wght' 700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.zmg{font-size:11px;color:var(--brass);font-weight:600}
.zmg:hover{color:var(--amber)}
.zcards{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.zcard{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px}
.zcard:hover{border-color:var(--brass)}
.zcard.on{background:var(--brass-soft);border-color:var(--brass)}
.zcard .zs{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--ink);letter-spacing:.02em}
.zcard .zd{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.25}
.zcard.on .zd{color:#2f377a}
.zf-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 0 5px}
.zf-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}
.zf-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.zf-chip b{font-family:var(--mono);font-size:9.5px;color:var(--muted);font-weight:500}
.zf-chip.on{background:var(--brass-soft);border-color:var(--brass);color:#2f377a}
.zf-chip.on b{color:#2f377a}
.zf-gab{min-width:52px;justify-content:center}
/* .zf-apply fica dentro de #regList; a especificidade extra vence a regra
   genérica ".reglist button" (senão o botão fica com fundo claro + texto branco) */
.reglist .zf-apply{width:100%;margin-top:10px;background:var(--brass);color:#fff;font-weight:700;font-size:13px;border-radius:9px;padding:10px;justify-content:center}
.reglist .zf-apply:hover{background:var(--amber);color:#fff}
.reglist .zf-apply.vazio{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
/* mobile: o painel de resumo (que hoje abriga a BUSCA UNICA) vira uma GAVETA
   sobre o mapa, aberta/fechada pela mesma alca #sideToggle — antes ele era
   simplesmente display:none e o mapa ficava SEM busca nenhuma em <=820px */

/* vínculo clicável no rastreamento de pessoa (enquadra os lotes daquele vínculo) */
.owrow.vinculo{cursor:pointer}
.owrow.vinculo:hover,.owrow.vinculo:active,.owrow.vinculo:focus-visible{background:var(--brass-soft)}

/* proprietário achado pela busca mas fora do recorte do modo atual */
.owrow.fora-modo{background:#fffdf7}
.owrow.fora-modo .own-meta{color:#8a6d1b}

/* ficha do lote: o que a seleção ativa tem AQUI (vem antes de tudo) */
.meu-lote{border-left:3px solid var(--brass);background:var(--brass-soft);border-radius:0 10px 10px 0;padding:12px 14px;margin:12px 0 14px}
.meu-lote .ml-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:700}
.meu-lote .ml-nome{font-weight:700;font-size:14px;margin-top:5px;line-height:1.3}
.meu-lote .ml-meta{font-size:12px;color:var(--muted);margin-bottom:9px}
.meu-lote .mu-un{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:6px}
.meu-lote .mu-t{font-weight:650;font-size:12.5px}
.meu-lote .mu-m{font-size:11.5px;color:var(--muted);margin-top:2px}

/* #1 condomínio em DESTAQUE na ficha do lote */
.cond-destaque{display:flex;align-items:center;gap:10px;background:var(--brass-soft);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:0 10px 10px 0;padding:10px 12px;margin:10px 0}
.cond-destaque .cond-ic{font-size:20px;line-height:1}
.cond-destaque .cond-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:700}
.cond-destaque .cond-nome{font-weight:700;font-size:15px;line-height:1.25}

/* #2 inscrição imobiliária completa por unidade (auditoria) */
.mu-insc,.un-insc{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;word-break:break-all}

/* "Ver todos os proprietários" / "Ver todas as unidades" */
.ver-mais{display:block;width:100%;margin-top:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:8px;background:var(--paper);color:var(--brass);font-weight:600;font-size:12.5px;cursor:pointer;text-align:center}
.ver-mais:hover{border-color:var(--brass)}

/* #4 expandir ficha completa da unidade */
.un-row{align-items:flex-start}
.un-exp{flex:0 0 auto;width:26px;height:26px;margin-top:1px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--muted);cursor:pointer;font-size:13px;line-height:1;align-self:flex-start}
.un-exp:hover{border-color:var(--brass);color:var(--brass)}
.un-detalhe{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.un-detalhe .ud-insc{font-size:12px;text-align:left;margin-bottom:6px;word-break:break-all}
.un-detalhe .ud-card .kv{margin:2px 0}
.un-detalhe .ud-donos{margin-top:6px;padding-top:6px;border-top:1px dotted var(--line)}

/* barra de progresso da execução (Executor) */
.execbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}
.execbar.ativa{border-color:var(--brass)}
.eb-topo{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.eb-pct{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.eb-cont{color:var(--muted);font-size:13px}
.eb-dir{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--brass);letter-spacing:.03em}
.eb-trilho{display:flex;height:10px;background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.eb-ok{background:var(--teal);transition:width .5s ease}
.eb-erro{background:var(--alerta);transition:width .5s ease}
.execbar.ativa .eb-ok{background:linear-gradient(90deg,var(--teal),#3da88f);
  background-size:200% 100%;animation:ebpulse 2s linear infinite}
@keyframes ebpulse{0%{background-position:0% 0}100%{background-position:200% 0}}
.eb-pe{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;font-size:12px;color:var(--muted)}
.eb-pe .pt{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.eb-pe .pt.ok{background:var(--teal)}
.eb-pe .pt.erro{background:var(--alerta)}

/* faixa de área do lote (mínima – máxima) */
.faixa{display:flex;align-items:center;gap:6px}
.faixa input{flex:1;min-width:0;width:100%;font-family:var(--mono);font-size:12.5px;
  padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}
.faixa input:focus{outline:none;border-color:var(--brass);background:#fff}
.faixa input::placeholder{color:var(--muted);font-size:11.5px}
.faixa .ate{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.faixa button{flex:0 0 auto;font-family:var(--mono);font-size:11px;font-weight:600;
  padding:8px 11px;border-radius:7px;background:var(--ink);color:#fff;border:none;cursor:pointer}
.faixa button:hover{filter:brightness(1.2)}
.faixa-dica{margin-top:6px;font-size:11px;color:var(--muted)}
.faixa-dica .lnk{background:none;border:none;padding:0;color:var(--brass);
  text-decoration:underline;cursor:pointer;font-size:11px}
/* remove as setinhas do input number */
.faixa input::-webkit-outer-spin-button,.faixa input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.faixa input[type=number]{-moz-appearance:textfield}

/* vaga de garagem: o cadastro tipifica como "Apartamento", então marcamos */
.tag-gar{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;
  background:var(--brass-soft);color:var(--brass);font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}

/* ---- tela de acesso (login) ---- */
#acesso{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);padding:20px}
#acesso form{background:var(--card);border-radius:16px;padding:34px 30px;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
#acesso .logo{width:180px;display:block;margin:0 auto 6px;filter:invert(1)}
#acesso .sub{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px}
#acesso label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
#acesso input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);font-size:14px;color:var(--ink)}
#acesso input:focus{outline:none;border-color:var(--brass);background:#fff}
#acesso button[type=submit]{width:100%;margin-top:22px;background:var(--brass);color:#fff;
  font-weight:700;padding:12px;border-radius:9px;font-size:14px}
#acesso button[type=submit]:hover{background:var(--amber)}
#acesso button[type=submit]:disabled{opacity:.6;cursor:default}
#acesso #ac-msg{margin-top:14px;font-size:12.5px;text-align:center;min-height:18px}
#acesso #ac-msg.erro{color:var(--alerta)}
#acesso #ac-msg.ok{color:var(--teal)}
#acesso .lnk{display:block;margin:12px auto 0;background:none;border:none;color:var(--brass);
  font-size:12px;text-decoration:underline;cursor:pointer}

/* ---- quem está logado, no rodapé do menu ---- */
#menu-usuario{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;color:rgba(237,241,238,.75)}
#menu-usuario .mu-email{font-weight:600;word-break:break-all;font-size:11.5px}
#menu-usuario .mu-papel{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:2px}
#menu-usuario #mu-sair{margin-top:8px;color:var(--brass-soft);font-size:11px;
  text-decoration:underline;background:none;border:none;cursor:pointer;padding:0}
.tabela td.acoes{white-space:nowrap;text-align:right}
.tabela td.acoes .btn{margin-left:4px}

/* ---- barra de desenho de polígono (restaurada do mapa original) ---- */
#drawHint{position:absolute;top:0;left:0;right:0;z-index:940;background:rgba(12,1,55,.94);
  color:#EDF1EE;font-size:12.5px;text-align:center;padding:9px;display:none}
#drawHint.on{display:block}
#drawBar{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:22px;
  z-index:950;background:var(--ink);border-radius:14px;padding:8px;gap:7px;
  box-shadow:0 8px 24px rgba(12,1,55,.45)}
#drawBar.on{display:flex}
#drawBar button{padding:10px 16px;border-radius:9px;font-weight:700;font-size:13px;
  color:#EDF1EE;background:rgba(255,255,255,.12);border:none;cursor:pointer}
#drawBar button:hover:not(:disabled){background:rgba(255,255,255,.22)}
#drawBar button:disabled{opacity:.4;cursor:default}
#drawBar #drawDone:not(:disabled){background:var(--brass)}

/* ---- lotes cadastrais vinculados à oportunidade ---- */
.bloco-lotes{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.bloco-lotes h4{font-size:13px;font-weight:700;margin-bottom:10px}
.lote-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;min-height:30px;align-items:center}
.lote-chip{display:inline-flex;align-items:center;gap:7px;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:6px 8px 6px 10px;font-size:12px}
.lote-chip .mono{font-family:var(--mono);font-size:11.5px}
.lote-chip .x{background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:12px;padding:0 2px;line-height:1}
.lote-chip .x:hover{color:var(--alerta)}

/* barra de seleção de lotes no mapa */
#pickBar{display:none;position:absolute;left:50%;transform:translateX(-50%);top:14px;
  z-index:1600;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;
  gap:12px;align-items:center;box-shadow:0 8px 24px rgba(12,1,55,.45);font-size:13px}
#pickBar.on{display:flex}
#pickBar #pickDone{background:var(--brass);color:#fff;font-weight:700;
  padding:8px 14px;border-radius:8px;border:none;cursor:pointer}
#pickBar #pickCancel{background:rgba(255,255,255,.12);color:#fff;padding:8px 12px;
  border-radius:8px;border:none;cursor:pointer}

/* ---- grupo "Cadastros" no menu lateral ---- */
.menu-grupo{margin-bottom:2px}
.menu-grupo-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:10px 12px;border-radius:9px;color:rgba(237,241,238,.78);font-weight:600;
  font-size:13.5px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left}
.menu-grupo-btn:hover{background:rgba(255,255,255,.07)}
.menu-grupo-btn.on{color:#B7BEEA}
.menu-grupo-btn .seta{transition:transform .18s ease;font-size:15px;opacity:.6}
.menu-grupo-btn.aberto .seta{transform:rotate(90deg)}
.menu-sub{display:none;margin:2px 0 4px 10px;padding-left:8px;
  border-left:1px solid rgba(255,255,255,.14)}
.menu-sub.aberto{display:block}
.menu-sub a{font-size:12.5px;padding:8px 10px;font-weight:500}

/* ---- painel "Perguntar sobre os dados" (IA) ------------------------------
   Pergunta em português vira SELECT validado no servidor. Vive sobre o mapa,
   à esquerda dos FABs; no celular ocupa a largura toda. */
#iaPainel{position:absolute;right:66px;top:12px;bottom:12px;width:420px;max-width:calc(100vw - 90px);
  z-index:640;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 30px rgba(15,38,46,.22);display:none;flex-direction:column;overflow:hidden}
#iaPainel.on{display:flex}
#iaPainel .ia-topo{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper);font-size:13px}
#iaPainel .ia-topo button{background:none;border:none;font-size:15px;cursor:pointer;color:var(--muted)}
#iaPainel .ia-corpo{flex:1;overflow-y:auto;padding:12px;font-size:12.5px;line-height:1.5}
#iaPainel .ia-pe{border-top:1px solid var(--line);padding:10px;display:flex;gap:8px;align-items:flex-end}
#iaPainel textarea{flex:1;resize:vertical;min-height:44px;padding:8px;border:1px solid var(--line);
  border-radius:8px;font:12.5px/1.4 inherit}
#iaPainel .ia-pergunta{font-weight:600;margin:14px 0 6px;color:var(--ink)}
#iaPainel .ia-pergunta:first-child{margin-top:0}
#iaPainel .ia-expl{color:var(--muted);margin-bottom:8px}
#iaPainel .ia-aviso{background:#FFF6E5;border-left:3px solid var(--brass);padding:6px 8px;
  border-radius:4px;margin-bottom:8px;font-size:11.5px}
#iaPainel .ia-erro{background:#FDEDEA;border-left:3px solid var(--alerta);padding:8px;
  border-radius:4px;margin-bottom:8px}
#iaPainel table{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:6px}
#iaPainel th{text-align:left;background:var(--paper);padding:5px 6px;border-bottom:1px solid var(--line);
  position:sticky;top:0;font-weight:600}
#iaPainel td{padding:4px 6px;border-bottom:1px solid #EEF1F2;vertical-align:top}
#iaPainel td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#iaPainel .ia-rolo{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:8px}
#iaPainel details{margin-top:6px}
#iaPainel summary{cursor:pointer;color:var(--muted);font-size:11.5px}
#iaPainel pre{background:var(--paper);padding:8px;border-radius:6px;overflow-x:auto;
  font-size:11px;line-height:1.45;white-space:pre-wrap;word-break:break-word;margin:6px 0 0}
#iaPainel .ia-meta{color:var(--muted);font-size:11px;margin-top:4px}
#iaPainel .ia-exemplo{display:block;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-bottom:6px;
  font-size:12px;cursor:pointer;color:var(--ink);overflow-wrap:anywhere}
#iaPainel .ia-exemplo:hover{border-color:var(--teal);color:var(--teal)}
@media (max-width:720px){#iaPainel{right:8px;left:8px;width:auto;max-width:none}}

/* tabela de oportunidades: cabecalho ordenavel + escolha de colunas */
.tabela th.ordenavel{cursor:pointer;user-select:none;white-space:nowrap}
.tabela th.ordenavel:hover,.tabela th.ordenavel:active,.tabela th.ordenavel:focus-visible{color:var(--teal)}
.col-item{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;
  padding:6px 8px;border:1px solid var(--line);border-radius:8px;margin-bottom:5px;
  text-transform:none;letter-spacing:0;font-size:13px;background:var(--card)}
.col-item input{width:auto;margin:0}
.col-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* legenda da camada de zoneamento (plano diretor) — z ABAIXO do .mpanel (600):
   o painel de filtros abre no mesmo canto e deve cobrir a legenda, nao o
   contrario */
.zonas-legenda{position:absolute;left:12px;bottom:24px;z-index:450;background:#FFFFFFF2;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:11px;
  color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.12);max-width:230px;
  max-height:46vh;overflow-y:auto}
.zonas-legenda .zl-cab{font-weight:600;font-size:11.5px;margin-bottom:6px}
.zonas-legenda .zl-grupo{margin-bottom:6px}
.zonas-legenda .zl-tit{color:var(--muted);font-size:10px;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:3px}
.zonas-legenda .zl-item{display:inline-flex;align-items:center;gap:4px;margin:0 8px 3px 0}
.zonas-legenda .zl-cor{width:11px;height:11px;border-radius:3px;display:inline-block;
  border:1px solid rgba(0,0,0,.25)}

/* caixa que segue o cursor com a zona sob o mouse (hover via hit-test no mapa) */
.zonas-hover{position:absolute;z-index:940;pointer-events:none;background:#FFFFFFF5;
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:11.5px;
  color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.18);max-width:260px;
  line-height:1.45;display:none}

/* ---------------------------------------------------------------------------
 * ACESSIBILIDADE — foco visivel e campo que nao da zoom no iPhone
 * Ambos apurados no teste de usabilidade de 12/09/2026.
 * ------------------------------------------------------------------------- */

/* Foco do teclado. Antes so os campos de formulario tinham regra de :focus;
   links e botoes ficavam com o contorno padrao do Chrome — rgb(16,16,16)
   desenhado sobre o menu navy #0c0137, ou seja, preto sobre quase-preto. Quem
   navega por teclado atravessa os 14 links do menu sem saber onde esta.
   :focus-visible (e nao :focus) para o anel nao aparecer no clique de mouse. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brass);outline-offset:2px;border-radius:6px}

/* No menu o fundo e navy: o indigo da identidade nao separa o suficiente, e o
   anel precisa ser claro para existir contra ele (10,8:1 contra #0c0137).
   O #navToggle NAO entra aqui: ele mora na calha clara, onde o anel claro
   daria 1,7:1 — ele fica com o indigo da regra geral acima, que da 6,7:1. */
#menu a:focus-visible,#menu button:focus-visible{
  outline:2px solid #B7BEEA;outline-offset:2px}

/* O :focus dos campos zera o outline e troca a cor da borda (linhas 55, 100,
   177, 424, 453). Continua valendo para o clique; o anel acima cobre o teclado,
   que era o caso sem indicacao nenhuma. */

/* Campo com fonte menor que 16px faz o Safari do iOS ampliar a pagina ao focar
   — e nao desfazer o zoom depois. Nenhum campo do sistema chegava a 16px.
   (pointer:coarse) alcanca exatamente os aparelhos que fazem isso e deixa a
   densidade do desktop intacta. */
@media (pointer:coarse){
  input,select,textarea,
  .campo input,.campo select,.campo textarea,
  .filtros input,.filtros select,.filtros input[type=text],.filtros input[type=search],
  .faixa input,
  #modal input,#modal select,#modal textarea,
  #modal input[type=text],#modal input[type=number]{font-size:16px}
  .faixa input::placeholder{font-size:14px}

  /* -------------------------------------------------------------------------
   * ALVO DE DEDO (change adaptar-front-para-celular-e-pwa, D3, spec
   * interacao-por-toque "Todo alvo cabe no dedo"): 44x44px em todo controle,
   * so sob ponteiro grosso — a densidade do desktop nao muda.
   *
   * Dois jeitos, conforme o desenho aguenta crescer ou nao:
   *  - controles de texto (botoes, linhas clicaveis, abas): min-height/min-width;
   *  - icones que o desenho fixa em 30-42px (.sh-close, .sh-min, .mfab, alca):
   *    o ELEMENTO fica do tamanho, e a AREA de toque cresce por um ::after
   *    transparente com inset negativo. O olho ve 30px, o dedo acerta 44.
   * ----------------------------------------------------------------------- */
  button,.btn,a.btn,#drawBar button,.tabela th.ordenavel,.menu-grupo-btn,
  #menu a,.owrow,.socio,.vin-lote,.of-fonte,.regtabs button,.zl-item{
    min-height:44px}
  .btn,a.btn,button:not(.mfab):not(.sh-close):not(.sh-min):not(.sh-grip):not(#navToggle){
    min-width:44px}
  .btn.mini{padding:10px 12px}
  /* barras de acao: dois alvos vizinhos nunca a menos de 8px */
  .filtros,.barra,.acoes,#drawBar,.sh-actions{gap:8px}
  .tabela td.acoes .btn{margin-left:8px}

  /* icones fixos: area de toque por ::after (inset:-7px leva 30px a 44px) */
  #sheet .sh-close,#sheet .sh-min,.mfab,#sheet .sh-grip,#navToggle{position:relative}
  #sheet .sh-close::after,#sheet .sh-min::after,.mfab::after,#sheet .sh-grip::after{
    content:"";position:absolute;inset:-7px;border-radius:inherit}
  #navToggle{min-width:44px}
  /* .mfab e 42px: dois pixels a mais nao mudam o desenho e dispensam o ::after */
  .mfab{width:44px;height:44px}

  /* retorno imediato ao toque (D10.3): sem esperar a rede, sem transicao */
  button:active,.btn:active,.owrow:active,.socio:active,.mfab:active{
    filter:brightness(.92);transition:none}
}

/* ---------------------------------------------------------------------------
 * AREAS SEGURAS (spec interacao-por-toque "A interface respeita as areas
 * seguras"): entalhe, camera e barra de gestos. As variaveis valem 0 onde o
 * aparelho nao tem recorte, entao a regra e inofensiva no desktop. Exige
 * viewport-fit=cover na meta viewport de cada pagina.
 * ------------------------------------------------------------------------- */
:root{
  --safe-topo:env(safe-area-inset-top,0px);
  --safe-rodape:env(safe-area-inset-bottom,0px);
  --safe-esq:env(safe-area-inset-left,0px);
  --safe-dir:env(safe-area-inset-right,0px);
}
/* todo painel fixo no rodape reserva a barra de gestos; classe reutilizada
   pelos modais (grupo 4), folhas do mapa (grupo 3) e barra de modulos da
   viabilidade (grupo 5) */
.rodape-fixo{padding-bottom:calc(12px + var(--safe-rodape))}
#navGutter{padding-top:var(--safe-topo)}

/* ---------------------------------------------------------------------------
 * CELULAR — a nav vira gaveta e a tabela rola dentro de si (achado 12)
 *
 * Em tela de 400px o menu fixo de 200px comia METADE do espaco, e o que
 * sobrava nao cabia: o corpo da pagina rolava de lado em Imoveis (692px de
 * conteudo), Oportunidades (567px) e na 2.0 (478px).
 *
 * Reaproveita o mecanismo que ja existia — `body.nav-oculta` e a alca de
 * recolher — em vez de criar um hamburguer novo: mesma tecla, mesmo estado,
 * mesmo botao, e nenhum destino deixa de existir no caminho.
 * ------------------------------------------------------------------------- */
@media (max-width:860px){
  /* A gaveta SOBREPOE o conteudo em vez de empurra-lo. `position:fixed` tira o
     menu do fluxo, entao #conteudo passa a ocupar a largura inteira. */
  #menu{position:fixed;left:0;top:0;height:100vh;width:230px;z-index:800;
    box-shadow:0 0 34px rgba(12,1,55,.4);transition:transform .18s ease}
  /* Substitui o display:none da linha 19: recolhida, ela precisa continuar
     existindo para poder deslizar de volta. */
  body.nav-oculta #menu{display:flex;transform:translateX(-100%)}

  /* A calha CONTINUA no layout, como diz o comentario da linha 20: ela existe
     para a alca nao flutuar sobre conteudo clicavel. So engorda para virar alvo
     de dedo. */
  #navGutter{flex:0 0 36px;width:36px}
  #navToggle{width:36px;height:64px;font-size:19px}
  /* A excecao e com a gaveta ABERTA: ela cobriria a propria calha, e sem a alca
     nao haveria como fechar. So entao a alca flutua, colada na borda da gaveta
     — e o pointer-events deixa passar o clique no resto da faixa. */
  body:not(.nav-oculta) #navGutter{position:fixed;left:230px;top:0;z-index:801;
    pointer-events:none}
  body:not(.nav-oculta) #navToggle{pointer-events:auto}

  #conteudo{padding:18px 14px calc(52px + var(--safe-rodape))}
  #menu{padding-top:var(--safe-topo)}

  /* VEU: com a gaveta aberta, um elemento cobre o conteudo. Ele existe para
     o toque fora FECHAR a gaveta e ser CONSUMIDO — sem ele, o toque que fecha
     tambem acionaria o botao que estava por baixo (spec interacao-por-toque
     "Gestos fecham o que gestos abriram"). Inserido por JS so no estreito. */
  #navVeu{position:fixed;inset:0;z-index:799;background:rgba(12,1,55,.35);
    touch-action:none}
  body.nav-oculta #navVeu{display:none}

  /* A busca ocupa a linha inteira; dividi-la com um seletor deixa as duas
     caixas pequenas demais para ler o que esta escrito dentro. */
  .filtros input[type=text],.filtros input[type=search]{flex:1 1 100%;max-width:none}

  /* A tabela rola DENTRO de si, nao a pagina. Nenhuma coluna e escondida — o
     dado continua todo la, alcancavel de lado, e o corpo da pagina para de
     rolar horizontalmente. nowrap para a coluna nao se espremer numa torre de
     letras, que e o que acontece quando se deixa quebrar em 400px. */
  .tabela{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabela th,.tabela td{white-space:nowrap}

  /* Ficha de detalhe: rotulo em cima do valor em vez de duas colunas fixas de
     170px, que sozinhas ja passavam da largura util. */
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv .k{margin-top:8px}
  /* .grid2 ja cai para uma coluna em 1100px (linha 195). */
  /* cartoes de numero (.stats) e barras de filtro: nada passa da largura */
  .stats{display:grid;grid-template-columns:1fr 1fr}
  .stat{min-width:0}
  .filtros>*{min-width:0}
  .filtros select,.filtros button{flex:1 1 40%}
  /* legibilidade (D10.5): corpo em 14px no telefone */
  .vazio,.espera,.kv .v,.tabela td{font-size:14px}

  /* -------------------------------------------------------------------------
   * MODAL EM TELA CHEIA (spec dialogo-modal, design D4): ocupa a tela, o
   * conteudo rola, a linha de acoes (.acoes) fica fixa no rodape acima da
   * barra de gestos, e o fechar ganha 44px. O DOM nao muda: e o mesmo #modal.
   * ----------------------------------------------------------------------- */
  #modal-fundo{padding:0;align-items:stretch}
  #modal{max-width:none;max-height:none;height:100vh;height:100dvh;border-radius:0;
    padding:16px 16px calc(84px + var(--safe-rodape));overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-top:calc(16px + var(--safe-topo))}
  #modal form>.acoes,#modal>.acoes{position:fixed;left:0;right:0;bottom:0;z-index:2;
    display:flex;gap:10px;justify-content:flex-end;background:var(--card);
    border-top:1px solid var(--line);padding:12px 16px calc(12px + var(--safe-rodape))}
  #modal .acoes .btn{flex:1 1 auto;min-height:48px}
  #modal h3{margin-right:52px}
  /* fechar: um X de 44px no canto de cima, ao alcance do polegar direito */
  #modal .modal-fechar{position:fixed;top:calc(8px + var(--safe-topo));right:8px;width:44px;height:44px;
    border-radius:11px;background:var(--paper);border:1px solid var(--line);font-size:20px;line-height:1;z-index:3}

  /* -------------------------------------------------------------------------
   * MODO CARTAO (spec listas-em-modo-cartao, design D2). Toda a classe vive
   * DENTRO desta media query: no desktop ela nunca e aplicada, e tabela()
   * nem a gera. Tres campos a vista, o resto em <details>; o corpo do cartao
   * e alvo de toque (min-height 44 vem da regra de pointer:coarse).
   * ----------------------------------------------------------------------- */
  .lista-mobile{display:flex;flex-direction:column;gap:8px}
  .lista-modo{display:flex;justify-content:flex-end}
  .cartoes{display:flex;flex-direction:column;gap:10px}
  .cartoes-ordem{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
  .cartoes-ordem select{flex:1 1 auto;min-width:0}
  .cartao{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    display:grid;grid-template-columns:1fr;gap:6px;cursor:pointer;
    box-shadow:0 1px 3px rgba(15,38,46,.06)}
  .cartao:active{background:var(--paper)}
  .cartao:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  .cartao-campo{display:flex;flex-direction:column;gap:1px;min-width:0}
  .cartao-campo.num .cartao-valor{font-variant-numeric:tabular-nums}
  .cartao-rotulo{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .cartao-valor{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
  /* o primeiro campo e o titulo do cartao */
  .cartao>.cartao-campo:first-child .cartao-valor{font-weight:700;font-size:15px}
  .cartao-mais{border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
  .cartao-mais summary{cursor:pointer;color:var(--brass);font-size:12.5px;font-weight:600;
    min-height:44px;display:flex;align-items:center;list-style:none}
  .cartao-mais summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .15s}
  .cartao-mais[open] summary::before{transform:rotate(90deg)}
  .cartao-mais .cartao-campo{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  #menu{transition:none}
}

/* a alca das folhas so existe em tela estreita (o JS a cria sempre; o CSS
   decide onde ela aparece) */
.folha-alca{display:none}

/* ===========================================================================
 * MAPA EM TELA ESTREITA (change adaptar-front-para-celular-e-pwa, design D1;
 * spec mapa-em-tela-estreita). O mapa ocupa a tela; TUDO que era coluna ou
 * painel lateral vira FOLHA INFERIOR: a ficha do lote (#sheet), o resumo
 * (#mapaside), os filtros (.mpanel, #oppPanel), a pergunta a IA (#iaPainel)
 * e a legenda de zoneamento. Mesmo DOM do desktop — so o CSS muda, sob a
 * media query; acima de 860px nada aqui se aplica.
 *
 * Tres alturas, por classe, na folha da ficha e na do resumo:
 *   .folha-recolhida  so a alca e o titulo (56px)
 *   (padrao / .folha-meia) metade da tela — o mapa por tras continua vivo
 *   .folha-cheia      a tela toda, menos a area segura do topo
 * `dvh` acompanha a barra do Safari que some ao rolar; `vh` e o fallback.
 * ------------------------------------------------------------------------- */
@media (max-width:860px){
  #mapwrap{display:block}
  #mapmain{position:absolute;inset:0}

  /* ---- folha: base comum (ficha e resumo) ---- */
  #sheet,#mapaside{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
    height:50vh;height:50dvh;
    border:1px solid var(--line);border-bottom:none;border-radius:16px 16px 0 0;
    box-shadow:0 -8px 30px rgba(15,38,46,.18);
    display:flex;flex-direction:column;min-height:0;
    transform:translateY(100%);transition:transform .2s ease,height .2s ease;
    padding-bottom:var(--safe-rodape)}
  #sheet.open,#mapwrap:not(.side-oculta) #mapaside{transform:translateY(0)}
  #sheet.folha-cheia,#mapaside.folha-cheia{
    height:calc(100vh - var(--safe-topo));height:calc(100dvh - var(--safe-topo));border-radius:0}
  /* recolhida: so a alca + o titulo. `.recolhida` e a classe que o desktop ja
     usa para "virar aba" — aqui ela significa a posicao baixa da folha. */
  #sheet.open.recolhida,#sheet.folha-recolhida,#mapaside.folha-recolhida{
    height:56px;transform:translateY(0);overflow:hidden}
  #sheet.open.recolhida .sc{display:none}

  /* ---- alca: 44px de altura, arrastavel (JS), unico lugar com touch-action:none
     para o conteudo da folha continuar rolando com o dedo ---- */
  .folha-alca{flex:0 0 auto;height:28px;display:flex;position:relative;align-items:center;justify-content:center;
    cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
  .folha-alca::before{content:"";width:44px;height:5px;border-radius:3px;background:var(--line)}
  .folha-alca::after{content:"";position:absolute;left:0;right:0;top:0;height:44px}
  #sheet,#mapaside{padding-top:0}
  /* a ficha: conteudo rola dentro; botoes de fechar/recolher ficam a direita da alca */
  #sheet .sc{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 16px}
  #sheet .sh-close,#sheet .sh-min{top:6px}
  #sheet .sh-grip{display:none !important}       /* a alca substitui a "aba" do desktop */
  #sheet .sh-owner{margin-right:78px}
  /* o resumo: cabecalho fixo, lista rola */
  #mapaside .ms-head{flex:0 0 auto}
  #mapaside #ownList{flex:1 1 auto;min-height:0;overflow-y:auto}

  /* ---- controles que a folha nao pode cobrir: tudo no TOPO ---- */
  #sideToggle{top:12px;left:12px;width:44px;height:44px;border:1px solid var(--line);
    border-radius:11px;font-size:17px;z-index:650}
  .map-top{left:64px;right:64px;max-width:none}
  .map-fabs{top:12px;right:12px}
  .legenda{bottom:auto;top:64px;left:12px;right:auto;font-size:11px}
  #mercadoLegenda{bottom:auto !important;top:64px !important}
  #drawBar{bottom:auto;top:60px;width:calc(100% - 24px);justify-content:center}
  #drawHint{top:auto;bottom:auto}
  .mzoom{top:64px}

  /* ---- paineis que eram flutuantes viram folha ---- */
  .mpanel,#oppPanel,#iaPainel,.zonas-legenda{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
    max-height:70vh;max-height:70dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:16px 16px 0 0;border-bottom:none;z-index:830;
    padding-bottom:calc(12px + var(--safe-rodape))}
  #iaPainel{height:70vh;height:70dvh}
  .zonas-legenda{max-height:50vh;max-height:50dvh}
}
@supports not (height:100dvh){
  @media (max-width:860px){ #sheet,#mapaside{height:50vh} }
}

/* ---------------------------------------------------------------------------
 * APLICATIVO INSTALAVEL (spec aplicativo-instalavel): aviso de versao nova e
 * item "Instalar o aplicativo" no bloco do usuario. Ambos so existem na
 * instancia publicada (auth.js decide); o CSS e inerte no coletor.
 * ------------------------------------------------------------------------- */
#pwaAviso{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1200;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);
  background:var(--gm-navy, #0c0137);color:#fff;padding:10px 10px 10px 16px;border-radius:12px;
  box-shadow:0 10px 30px rgba(12,1,55,.35);font-size:13.5px}
#pwaAviso button{min-height:36px;border:0;border-radius:8px;cursor:pointer;font:inherit;font-weight:600}
#pwaRecarregar{background:#fff;color:var(--gm-navy, #0c0137);padding:0 14px}
#pwaDepois{background:transparent;color:rgba(255,255,255,.7);width:36px}
#pwaInstalar{display:block;width:100%;margin-top:8px;min-height:36px;border:1px solid rgba(255,255,255,.35);
  border-radius:8px;background:transparent;color:#fff;font:inherit;font-size:12px;cursor:pointer}
#pwaInstalar:active{background:rgba(255,255,255,.12)}