/* DOMUS · Radar & Viabilidade · Web — estilos principais do radar */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..700&family=Geist:wght@300..600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
  --ebano:#14110D; --carvao:#1C1915; --carvao2:#211D17;
  --marfim:#EFE7D8; --pedra:#98907F; --ouro:#B9975B; --ouro-300:#D0BE9F;
  --fg:var(--marfim); --fg-2:var(--pedra); --fg-3:#5C574C; --fg-4:#3E3B34;
  --bg:var(--ebano); --bg-2:var(--carvao); --line:rgba(239,231,216,.26); --line-soft:rgba(239,231,216,.13);
  --signal:var(--ouro);
  --serif:'Cinzel',serif;
  --font-sans:'Geist',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-9:9px; --fs-11:11px; --fs-13:13px; --fs-15:15px; --fs-20:20px; --fs-28:28px;
  --ls-wide:0.08em; --ls-xwide:0.16em;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-weight:300;font-size:var(--fs-13);line-height:1.45;-webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0;font-weight:500;line-height:1.15;}
b,strong{font-weight:500;}
button{font-family:var(--font-sans);cursor:pointer;}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ouro);}
.eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-xwide);color:var(--ouro);}
.meta{font-family:var(--font-mono);font-size:var(--fs-11);color:var(--fg-2);letter-spacing:.04em;}
/* Observacao secundaria dentro de um .meta: menor e mais apagada que o
   texto que acompanha, para informar sem competir com ele. */
.nota-mini{font-size:var(--fs-9);opacity:.72;letter-spacing:.02em;}
.tag{display:inline-block;padding:1px 7px;border:1px solid var(--line);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:var(--ls-wide);white-space:nowrap;background:var(--carvao);color:var(--fg);}
.tag--signal{border-color:var(--ouro);background:var(--ouro);color:var(--ebano);font-weight:500;}
.tag--dim{border-color:var(--fg-4);color:var(--fg-2);background:transparent;}
/* Vermelho do sistema (o mesmo da tarja de css/auth.css): chama o olho do
   admin para a conta que rodou viabilidade hoje. Não é erro, é aviso. */
.tag--alerta{border-color:#E01E37;background:#E01E37;color:var(--marfim);font-weight:500;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-family:var(--font-mono);font-size:var(--fs-11);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);background:transparent;color:var(--fg);border:1px solid var(--line);transition:background .1s,color .1s,border-color .1s;text-decoration:none;}
.btn:hover{background:var(--marfim);color:var(--ebano);border-color:var(--marfim);}
.btn--primary{background:var(--ouro);color:var(--ebano);border-color:var(--ouro);}
.btn--primary:hover{background:var(--ouro-300);border-color:var(--ouro-300);color:var(--ebano);}
.btn--sm{padding:4px 8px;font-size:10px;}

/* ===== layout ===== */
#app{display:grid;grid-template-rows:auto auto 1fr;height:100vh;}
header.top{border-bottom:1px solid var(--line);padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--ebano);}
.lockup{display:flex;align-items:center;gap:16px;}
.lockup svg{height:30px;width:auto;display:block;}
.divx{width:1px;align-self:stretch;background:var(--line-soft);}

/* ===== identidade no header =====
   O e-mail e o botão "sair" moravam soltos dentro do bloco de metadados, na
   mesma linha de "FONTE: CAIXA · esteira producao_1" — um <button> sem classe
   ao lado de texto de rodapé. Agora são a segunda linha da coluna da direita,
   separados por uma régua: em cima de onde vêm os dados, embaixo quem está
   lendo. */
.hd-direita{display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.usuario{display:flex;align-items:center;gap:8px;padding-top:7px;
         border-top:1px solid var(--line-soft);}
#hdUsuario{display:inline-flex;align-items:center;gap:7px;}
.usuario__email{font-family:var(--font-mono);font-size:var(--fs-11);
                color:var(--fg-2);letter-spacing:var(--ls-wide);}

/* O papel fica sempre à vista, e não atrás de um menu: é ele que responde,
   antes de a pergunta aparecer, por que o analista não acha a ferramenta de
   desenho. Esconder a barra do Geoman é conveniência — o RLS recusa a
   gravação de qualquer forma; o objetivo é não oferecer um botão que só
   terminaria em erro. */
/* Só o perfil `pleno` desenha, e só quem tem a marca de administrador vê o
   que é de administração. São dois eixos, e o CSS trata cada um pelo seu
   atributo — juntá-los num seletor só faria a tela mentir sobre um deles. */
body:not([data-papel="pleno"]) .leaflet-pm-toolbar,
body:not([data-papel="pleno"]) .js-so-pleno{display:none !important;}
body:not([data-admin]) .js-so-admin{display:none !important;}

/* Quem não roda viabilidade continua LENDO os pareceres: a aba fica visível
   e só os botões que geram somem. Esconder a aba inteira faria a pessoa
   perder acesso a uma análise que ela tem direito de ler. */
body:not([data-papel="viabilidade"]):not([data-papel="pleno"]) .js-so-viabilidade{
  display:none !important;}

/* Linha de quem está suspenso, na tela de Usuários. */
tr.suspenso .quem{opacity:.55;text-decoration:line-through;}

nav.tabs{display:flex;border-bottom:1px solid var(--line-soft);background:var(--ebano);padding:0 20px;gap:0;overflow-x:auto;}
nav.tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:11px 18px;font-family:var(--font-mono);font-size:var(--fs-11);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--fg-2);}
nav.tabs button.on{color:var(--marfim);border-bottom-color:var(--ouro);}
nav.tabs button:hover{color:var(--marfim);}
#main{display:grid;grid-template-columns:290px 1fr;min-height:0;}
aside#filters{border-right:1px solid var(--line-soft);overflow-y:auto;padding:16px;background:var(--carvao);}
#content{overflow-y:auto;min-width:0;position:relative;background:var(--ebano);}
.view{display:none;padding:20px;}
.view.on{display:block;}
#view-mapa.on{display:flex;flex-direction:column;padding:0;height:100%;}

/* ===== filters ===== */
.fgroup{margin-bottom:20px;border-bottom:1px solid var(--line-soft);padding-bottom:16px;}
.fgroup:last-child{border-bottom:0;}
.fgroup .eyebrow{display:block;margin-bottom:8px;}
.fchk{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:var(--fs-11);cursor:pointer;user-select:none;color:var(--fg);}
.fchk input{appearance:none;width:12px;height:12px;border:1px solid var(--pedra);margin:0;flex:none;background:transparent;cursor:pointer;}
.fchk input:checked{background:var(--ouro);border-color:var(--ouro);box-shadow:inset 0 0 0 2px var(--carvao);}
.fchk .cnt{margin-left:auto;color:var(--fg-2);font-family:var(--font-mono);font-size:10px;}
.input{display:block;width:100%;padding:7px 9px;font-family:var(--font-mono);font-size:var(--fs-11);background:var(--ebano);color:var(--marfim);border:1px solid var(--line-soft);border-radius:0;}
.input::placeholder{color:var(--fg-3);}
.input:focus{outline:1.5px solid var(--ouro);outline-offset:-1px;}
select.input option{background:var(--carvao);color:var(--marfim);}
.inline2{display:flex;gap:6px;}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.chip{border:1px solid var(--fg-4);background:transparent;font-family:var(--font-mono);font-size:10px;padding:2px 7px;letter-spacing:var(--ls-wide);color:var(--fg-2);}
.chip:hover{border-color:var(--pedra);color:var(--marfim);}
.chip.on{border-color:var(--ouro);color:var(--ouro);}
.scrolllist{max-height:150px;overflow-y:auto;border:1px solid var(--line-soft);padding:4px 8px;margin-top:6px;background:var(--ebano);}

/* ===== painéis de administração (Usuários, Logs) =====
   Rola, mas com altura de painel — não os 150px do .scrolllist, que existe
   para as listas de caixinhas do filtro lateral. Usar aquele aqui espremia a
   tabela inteira numa fresta.

   O cabeçalho da table.grid já é sticky, então ele fica visível durante a
   rolagem: numa lista de log com 200 linhas, saber qual coluna é qual sem
   voltar ao topo é a diferença entre a tela servir e não servir. */
.tabela-rolagem{max-height:calc(100vh - 330px);min-height:220px;overflow-y:auto;
                border:1px solid var(--line-soft);background:var(--ebano);
                margin-top:10px;}
.tabela-rolagem table.grid{margin:0;}
.tabela-rolagem table.grid th{padding-left:10px;}
.tabela-rolagem table.grid td{padding-left:10px;}
.tabela-rolagem table.grid tr:last-child td{border-bottom:none;}

/* coluna de ações: os botões não devem esticar a linha nem quebrar */
td.acoes{white-space:nowrap;text-align:right;padding-right:10px;}
td.acoes .btn{margin-left:6px;}

/* o e-mail é a âncora visual da linha — precisa pesar mais que o resto */
td.quem{font-family:var(--font-mono);color:var(--marfim);}
.eu{color:var(--ouro);font-family:var(--font-mono);font-size:10px;
    letter-spacing:var(--ls-wide);}
#fCount{position:sticky;top:0;background:var(--ebano);border:1px solid var(--line);padding:8px 10px;margin-bottom:16px;z-index:5;display:flex;justify-content:space-between;align-items:center;}
#fCount b{font-family:var(--font-mono);font-size:var(--fs-15);color:var(--ouro-300);}

/* ===== KPI / painel ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:24px;}
.kpi{border:1px solid var(--line-soft);border-top:2px solid var(--ouro);padding:12px;background:var(--carvao);}
.kpi .n{font-family:var(--font-mono);font-size:17px;font-weight:500;line-height:1.1;color:var(--marfim);}
.kpi .l{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--fg-2);margin-top:6px;}
.panelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.card{border:1px solid var(--line-soft);padding:16px;background:var(--carvao);}
.brow{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:8px;padding:3px 0;font-size:var(--fs-11);}
.brow .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brow .bar{height:10px;background:var(--fg-4);position:relative;}
.brow .bar i{position:absolute;inset:0 auto 0 0;background:var(--pedra);}
.brow .ct{text-align:right;color:var(--fg-2);font-family:var(--font-mono);font-size:10px;}
.brow.hot .bar i{background:var(--ouro);}

/* ===== table ===== */
table.grid{width:100%;border-collapse:collapse;font-size:var(--fs-11);}
table.grid th{position:sticky;top:0;background:var(--ebano);text-align:left;text-transform:uppercase;letter-spacing:var(--ls-wide);font-family:var(--font-mono);font-size:9px;color:var(--ouro);border-bottom:1px solid var(--line);padding:8px 8px 8px 0;cursor:pointer;user-select:none;white-space:nowrap;z-index:2;}
table.grid th:hover{color:var(--ouro-300);}
table.grid td{border-bottom:1px solid var(--line-soft);padding:7px 8px 7px 0;vertical-align:top;}
table.grid tr.r{cursor:pointer;}
table.grid tr.r:hover td{background:var(--carvao);}
.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
th.num{text-align:right;}
.pager{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap;}

/* ===== mapa ===== */
#mapbar{display:flex;gap:0;border-bottom:1px solid var(--line-soft);background:var(--ebano);padding:0 16px;align-items:center;flex-wrap:wrap;}
#mapbar button.uf{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-wide);color:var(--fg-2);text-transform:uppercase;}
#mapbar button.uf.on{color:var(--marfim);border-bottom-color:var(--ouro);}
#map{flex:1;min-height:0;background:var(--carvao);}
#map .leaflet-tile-pane{filter:grayscale(1) invert(1) brightness(.86) contrast(.86) sepia(.18);}
.leaflet-container{font-family:var(--font-mono);font-size:var(--fs-11);background:var(--carvao);}
.leaflet-popup-content-wrapper{border-radius:0;border:1px solid var(--line);box-shadow:0 18px 34px -12px rgba(0,0,0,.7);background:var(--carvao);color:var(--marfim);}
.leaflet-popup-tip{border-radius:0;box-shadow:none;background:var(--carvao);border:1px solid var(--line);}
.leaflet-popup-content{margin:12px 14px;line-height:1.45;}
.leaflet-popup-content a{text-decoration-color:var(--ouro);}
.leaflet-bar a{background:var(--carvao);color:var(--marfim);border-color:var(--line-soft);}
.leaflet-bar a:hover{background:var(--ebano);color:var(--ouro-300);}
.leaflet-control-attribution{background:rgba(20,17,13,.8)!important;color:var(--fg-3)!important;font-size:9px;}
.leaflet-control-attribution a{color:var(--fg-2)!important;}
.mc{background:var(--ouro);color:var(--ebano);border-radius:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;font-weight:500;border:1px solid var(--ebano);}
.maplegend{padding:8px 16px;border-top:1px solid var(--line-soft);display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--ebano);}
.dotb{display:inline-block;width:9px;height:9px;background:var(--marfim);border-radius:50%;}
.doth{display:inline-block;width:9px;height:9px;background:var(--marfim);border-radius:50%;opacity:.35;}
/* anel de destaque do imovel focado (mapa.js: destacarImovel) */
.anel-imovel{width:46px;height:46px;border:2px solid #17B890;border-radius:50%;
  box-sizing:border-box;animation:anel-pulso 1.3s ease-out 3 forwards;}
@keyframes anel-pulso{
  0%{transform:scale(.55);opacity:1}
  100%{transform:scale(1.15);opacity:.15}}
@media (prefers-reduced-motion:reduce){.anel-imovel{animation:none;opacity:.85}}

/* ===== clientes ===== */
.clientgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;}
.client .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px;}
.client .hd h3{font-family:var(--serif);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:15px;color:var(--marfim);}
.client dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:var(--fs-11);margin:10px 0;}
.client dt{color:var(--fg-2);text-transform:uppercase;font-family:var(--font-mono);font-size:9px;letter-spacing:var(--ls-wide);padding-top:2px;}
.client dd{margin:0;}
.mcount{font-family:var(--font-mono);font-size:var(--fs-20);font-weight:500;color:var(--ouro-300);}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.formgrid label{display:block;}
.formgrid .eyebrow{margin-bottom:4px;display:block;}

/* ===== drawer ===== */
#drawer{position:fixed;top:0;right:-520px;width:min(520px,94vw);height:100vh;background:var(--carvao);border-left:1px solid var(--ouro);z-index:1100;transition:right .3s cubic-bezier(.2,0,0,1);overflow-y:auto;box-shadow:-30px 0 60px -30px rgba(0,0,0,.8);}
#drawer.open{right:0;}
#drawer .inner{padding:20px;}
#drawer h2{font-family:var(--serif);font-weight:500;letter-spacing:.08em;text-transform:uppercase;}
#drawer dl{display:grid;grid-template-columns:130px 1fr;gap:4px 14px;font-size:var(--fs-11);}
#drawer dt{color:var(--fg-2);text-transform:uppercase;font-family:var(--font-mono);font-size:9px;letter-spacing:var(--ls-wide);padding-top:3px;}
#drawer dd{margin:0;}
#overlay{position:fixed;inset:0;background:rgba(10,8,6,.55);z-index:1050;display:none;}
#overlay.on{display:block;}
.stitch{border:0;border-top:1px solid var(--line-soft);margin:14px 0;}
.warn{border:1px solid var(--line-soft);border-left:3px solid var(--ouro);padding:10px 12px;font-size:var(--fs-11);margin-bottom:16px;background:var(--carvao);}
.empty{color:var(--fg-2);font-size:var(--fs-11);padding:24px 0;}
#nodusCredit{position:fixed;bottom:8px;right:12px;z-index:1000;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);pointer-events:none;background:rgba(20,17,13,.88);border:1px solid var(--line-soft);padding:3px 9px;}
@media(max-width:900px){#main{grid-template-columns:1fr;}aside#filters{border-right:0;border-bottom:1px solid var(--line-soft);max-height:40vh;}}