/* Platz Ecoville — Mapa Interativo de Lotes
   Rausy Consultoria Imobiliária · CRECI 6397-J */

:root{
  --verde:#3DFF5A;
  --verde2:#2ECC71;
  --ambar:#F2B33D;
  --vermelho:#E5484D;
  --fundo:#0B161E;
  --painel:rgba(9,18,25,.92);
  --texto:#E8F1F5;
  --apagado:#8AA5B1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#0E1B24;
  color:var(--texto);
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
a{color:var(--verde)}
a:hover{color:var(--verde2)}
button{font-family:inherit}

.app{display:flex;flex-direction:column;height:100dvh;min-height:100dvh;overflow:hidden;background:radial-gradient(120% 90% at 78% 0%,#20343F 0%,#152531 45%,#0B161E 100%)}

/* ---------- topo ---------- */
.topo{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:16px 22px;border-bottom:1px solid rgba(61,255,90,.16);background:rgba(11,22,30,.72);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}
.marca{display:flex;flex-direction:column;gap:3px;min-width:0}
.marca img{height:34px;width:auto;display:block}
.marca-txt{font-family:'Sora',sans-serif;font-weight:800;font-size:19px;letter-spacing:.20em;color:var(--verde);line-height:1}
.marca-sub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E97A4}
.tituloWrap{display:flex;flex-direction:column;gap:3px;padding-left:18px;border-left:1px solid rgba(232,241,245,.14);min-width:0}
.titulo{font-family:'Sora',sans-serif;font-weight:700;font-size:20px;line-height:1.15;color:#fff;margin:0}
.kicker{font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;color:#8FB0A4}
.indicadores{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.ind{background:rgba(46,204,113,.09);border:1px solid rgba(46,204,113,.28);border-radius:11px;padding:8px 14px;min-width:96px}
.ind b{display:block;font-family:'Sora',sans-serif;font-size:16px;color:var(--verde);line-height:1.2}
.ind span{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#87A3AF}

/* ---------- corpo ---------- */
.corpo{display:flex;flex:1 1 auto;min-height:0;align-items:stretch;overflow:hidden}
.mapa{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--fundo)}
svg.planta{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
svg.planta.arrastando{cursor:grabbing}
.planta-img{opacity:.72;filter:saturate(.82) contrast(1.04) brightness(.96)}

.lote{fill:rgba(46,204,113,.20);stroke:rgba(61,255,90,.62);stroke-width:1.1;cursor:pointer;transition:fill .15s ease}
.lote:hover{fill:rgba(61,255,90,.40)}
.lote.res{fill:rgba(242,179,61,.30);stroke:rgba(242,179,61,.75)}
.lote.res:hover{fill:rgba(242,179,61,.50)}
.lote.ven{fill:rgba(229,72,77,.32);stroke:rgba(229,72,77,.78)}
.lote.ven:hover{fill:rgba(229,72,77,.52)}
.lote.sel{fill:rgba(61,255,90,.58);stroke:#EAFFF0;stroke-width:2.4}
.lote.res.sel{fill:rgba(242,179,61,.6)}
.lote.ven.sel{fill:rgba(229,72,77,.6)}
.lote.apagado{fill:rgba(140,165,178,.10);stroke:rgba(140,165,178,.30)}

.halo{fill:#fff;opacity:.45;transform-box:fill-box;transform-origin:center;animation:pulsar 2.1s cubic-bezier(.22,.61,.36,1) infinite;pointer-events:none}
.halo.off{animation:none;opacity:0}
.halo.apagado{opacity:.12;animation:none}
.ponto{fill:#fff;stroke:rgba(14,27,36,.55);stroke-width:1.1;cursor:pointer}
.ponto.res{fill:var(--ambar)}
.ponto.ven{fill:var(--vermelho)}
.ponto.sel{fill:var(--verde);stroke:#0E1B24;stroke-width:1.6}
.ponto.apagado{opacity:.16}
@keyframes pulsar{0%{transform:scale(.7);opacity:.55}70%{transform:scale(2.5);opacity:0}100%{transform:scale(2.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.halo{animation:none;opacity:.30}}

/* ---------- controles sobre o mapa ---------- */
.hud{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:8px;z-index:12;max-width:min(320px,66%)}
.busca{display:flex;align-items:center;gap:8px;background:rgba(11,22,30,.86);border:1px solid rgba(61,255,90,.26);border-radius:11px;padding:8px 12px;backdrop-filter:blur(6px)}
.busca input{background:transparent;border:0;outline:0;color:var(--texto);font:500 13.5px 'Manrope',sans-serif;width:100%;min-width:0}
.busca input::placeholder{color:#7E97A4}
.filtros{display:flex;flex-wrap:wrap;gap:6px}
.filtros button{display:flex;align-items:center;gap:6px;background:rgba(11,22,30,.86);border:1px solid rgba(232,241,245,.14);color:#9FB6C0;border-radius:999px;padding:7px 12px;font:600 11.5px 'Manrope',sans-serif;cursor:pointer;min-height:34px;backdrop-filter:blur(6px)}
.filtros button:hover{border-color:rgba(61,255,90,.5);color:var(--texto)}
.filtros button[aria-pressed="true"]{border-color:var(--verde);color:#08131A;background:linear-gradient(135deg,var(--verde2),var(--verde))}
.filtros button i{font-style:normal;opacity:.75}
.legenda{background:rgba(11,22,30,.86);border:1px solid rgba(232,241,245,.12);border-radius:11px;padding:10px 12px;font-size:11.5px;color:#9FB6C0;backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:6px}
.linha{display:flex;align-items:center;gap:8px}
.bolha{width:11px;height:11px;border-radius:50%;background:#fff;flex:0 0 auto}
.quad{width:11px;height:11px;border-radius:3px;flex:0 0 auto;background:rgba(46,204,113,.35);border:1px solid rgba(61,255,90,.7)}
.quad.a{background:rgba(242,179,61,.4);border-color:rgba(242,179,61,.8)}
.quad.v{background:rgba(229,72,77,.4);border-color:rgba(229,72,77,.8)}

.zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:12}
.zoom button{width:40px;height:40px;border-radius:11px;border:1px solid rgba(61,255,90,.28);background:rgba(11,22,30,.88);color:var(--texto);font:600 17px 'Sora',sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.zoom button:hover{border-color:var(--verde);color:var(--verde)}
.zoom button.mini{font-size:10px;letter-spacing:.08em}
.dica{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(11,22,30,.82);border:1px solid rgba(232,241,245,.12);border-radius:999px;padding:7px 15px;font-size:11.5px;color:#93AEBA;z-index:11;white-space:nowrap}

/* ---------- painel do lote ---------- */
.painel{flex:0 0 372px;max-width:372px;border-left:1px solid rgba(61,255,90,.16);background:var(--painel);padding:22px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.vazio{display:flex;flex-direction:column;gap:12px;align-items:flex-start;color:var(--apagado);font-size:13.5px;line-height:1.6}
.vazio-icone{width:46px;height:46px;border-radius:50%;background:rgba(61,255,90,.12);border:1px solid rgba(61,255,90,.35);display:flex;align-items:center;justify-content:center}
.vazio h2{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:#fff;margin:0}
.rua{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--verde)}
.loteId{font-family:'Sora',sans-serif;font-weight:800;font-size:28px;color:#fff;line-height:1.1;margin:0}
.selo{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;font:700 11.5px 'Manrope',sans-serif;letter-spacing:.05em;text-transform:uppercase}
.selo:before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.selo.d{background:rgba(61,255,90,.14);border:1px solid rgba(61,255,90,.45);color:var(--verde)}
.selo.r{background:rgba(242,179,61,.14);border:1px solid rgba(242,179,61,.45);color:var(--ambar)}
.selo.v{background:rgba(229,72,77,.14);border:1px solid rgba(229,72,77,.45);color:#FF7A7E}
.areaBox{background:linear-gradient(135deg,rgba(46,204,113,.16),rgba(46,204,113,.04));border:1px solid rgba(61,255,90,.3);border-radius:14px;padding:14px 16px}
.rot{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#87A3AF;margin-bottom:5px}
.areaVal{font-family:'Sora',sans-serif;font-weight:700;font-size:26px;color:var(--verde);line-height:1}
.medidas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cel{background:rgba(232,241,245,.045);border:1px solid rgba(232,241,245,.10);border-radius:11px;padding:11px 13px}
.celVal{font-family:'Sora',sans-serif;font-weight:600;font-size:16px;color:#fff}
.preco{border:1px solid rgba(61,255,90,.34);border-radius:14px;padding:16px;background:rgba(46,204,113,.07)}
.precoVal{font-family:'Sora',sans-serif;font-weight:800;font-size:27px;color:#fff;line-height:1.1;letter-spacing:-.01em}
.conta{font-size:12.5px;color:#9FB6C0;margin-top:6px}
.aviso{font-size:11.5px;line-height:1.55;color:#C8A96B;background:rgba(200,169,107,.09);border:1px solid rgba(200,169,107,.28);border-radius:10px;padding:10px 12px}
.cta{display:block;text-align:center;text-decoration:none;background:linear-gradient(135deg,var(--verde2),var(--verde));color:#08131A;font:700 14.5px 'Sora',sans-serif;padding:14px;border-radius:12px;min-height:48px;line-height:20px}
.cta:hover{filter:brightness(1.07);color:#08131A}
.limpar{align-self:flex-start;background:transparent;border:1px solid rgba(232,241,245,.18);color:#9FB6C0;border-radius:9px;padding:7px 13px;font:600 12px 'Manrope',sans-serif;cursor:pointer;min-height:36px}
.limpar:hover{border-color:var(--verde);color:var(--verde)}

/* ---------- área administrativa (?admin=1) ---------- */
.admin{border-top:1px dashed rgba(232,241,245,.18);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.seg{display:flex;gap:6px}
.seg button{flex:1 1 0;min-height:42px;border-radius:10px;border:1px solid rgba(232,241,245,.14);background:rgba(232,241,245,.045);color:#9FB6C0;font:600 12px 'Manrope',sans-serif;cursor:pointer;padding:6px 4px}
.seg button:hover{color:var(--texto);border-color:rgba(232,241,245,.3)}
.seg button[aria-pressed="true"].d{border-color:var(--verde);background:rgba(61,255,90,.16);color:var(--verde)}
.seg button[aria-pressed="true"].r{border-color:var(--ambar);background:rgba(242,179,61,.16);color:var(--ambar)}
.seg button[aria-pressed="true"].v{border-color:var(--vermelho);background:rgba(229,72,77,.16);color:#FF7A7E}
.gerar{background:rgba(232,241,245,.06);border:1px solid rgba(232,241,245,.2);color:var(--texto);border-radius:10px;padding:11px;font:600 12.5px 'Manrope',sans-serif;cursor:pointer;min-height:44px}
.gerar:hover{border-color:var(--verde);color:var(--verde)}
.saida{width:100%;min-height:120px;background:#061016;border:1px solid rgba(232,241,245,.18);border-radius:10px;color:#BFE9CC;font:400 12px ui-monospace,'SFMono-Regular',Menlo,monospace;padding:10px;resize:vertical}
.tagAdmin{display:inline-block;background:rgba(242,179,61,.15);border:1px solid rgba(242,179,61,.5);color:var(--ambar);border-radius:6px;padding:3px 8px;font:700 10px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase}

/* ---------- rodapé ---------- */
.rodape{padding:13px 22px;border-top:1px solid rgba(232,241,245,.10);font-size:11px;color:#718996;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;background:rgba(8,16,22,.7)}

@media (max-width:900px){
  .app{height:auto;overflow:visible}
  .corpo{flex-direction:column;overflow:visible}
  .mapa{flex:0 0 auto;display:flex;flex-direction:column;min-height:0;padding:12px 14px 0;background:transparent}
  svg.planta{width:100%;height:auto;aspect-ratio:1420/1150;background:var(--fundo);border-radius:12px;border:1px solid rgba(232,241,245,.10)}
  .hud{position:static;max-width:none;margin:0 0 10px;order:-1}
  .legenda{flex-direction:row;flex-wrap:wrap;gap:5px 14px;font-size:11px}
  .legenda .linha:first-child{flex-basis:100%}
  .zoom{right:24px;bottom:12px}
  .painel{flex:1 1 auto;max-width:none;border-left:0;border-top:1px solid rgba(61,255,90,.2)}
  .titulo{font-size:17px}
  .tituloWrap{padding-left:0;border-left:0}
  .indicadores{margin-left:0;width:100%}
  .ind{flex:1 1 0;min-width:0;padding:7px 10px}
  .dica{display:none}
  .hud{max-width:calc(100% - 28px)}
}
@media (max-width:520px){
  .topo{padding:12px 14px;gap:12px}
  .painel{padding:16px}
  .rodape{padding:12px 14px}
}
.oculto{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}