/* LoteVivo — modo Realista e calibrador */
.rz-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rz-aerial { position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.rz-plan { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.rz-lots { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* ---- visualização ---- */
#stage3d.stage, #stage2d.stage, #stagereal.stage { position: absolute; inset: 0; }
.rz-view { position: absolute; inset: 0; overflow: hidden; background: #0b0f0d; cursor: grab; touch-action: none; }
.rz-view:active { cursor: grabbing; }
.rz-view .rz-lot { --lotop: 0.35; fill-opacity: var(--lotop); stroke: rgba(255,255,255,.7); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill-opacity .25s; }
.rz-view .rz-lot:hover { fill-opacity: calc(var(--lotop) + 0.28); }
.rz-view .rz-lot.sel { fill-opacity: .9; stroke: var(--gold-2); stroke-width: 2.5; }
.rz-view .rz-lot.dim { opacity: .12; pointer-events: none; }

/* numeração sobre a foto aérea */
.rz-view .rz-lbl text { fill: #fff; text-anchor: middle; dominant-baseline: central; font-weight: 700; font-family: var(--font); pointer-events: none; opacity: 0; transition: opacity .2s; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: .8px; }
.rz-view.z-lbl .rz-lbl text { opacity: 1; }
.rz-view .rz-quads { pointer-events: none; transition: opacity .25s; }
.rz-view .rz-quads g.q { pointer-events: auto; cursor: zoom-in; transition: opacity .25s; }
.rz-view .rz-quads rect { fill: rgba(9,15,13,.8); stroke: rgba(255,255,255,.26); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .15s, stroke .15s; }
.rz-view .rz-quads rect.hit { fill: transparent; stroke: none; }
.rz-view .rz-quads text { fill: #fff; stroke: none; font: 700 13px var(--font); letter-spacing: .03em; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rz-view .rz-quads g.q:hover rect:not(.hit) { fill: var(--gold); stroke: var(--gold-2); }
.rz-view .rz-quads g.q:hover text { fill: #1a1407; }
.rz-view .rz-quads g.q.dim { opacity: .16; pointer-events: none; }
.rz-view .rz-quads g.q.off { opacity: 0; pointer-events: none; }
.rz-view.z-lbl .rz-quads { opacity: .72; pointer-events: none; }
.real-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }

/* animação de revelação: a planta entra por cima da foto */
.rz-view.revealing .rz-plan { animation: planWipe 1.3s ease; }
@keyframes planWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- calibrador ---- */
.cal .rz-plan, .rz-plan.cal { pointer-events: none; }
.rz-lot.cal { fill: none; stroke: #ffd27a; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .9; }
.rz-handles { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.rz-h { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #0ff; background: rgba(0,255,255,.25); color: #cffcff; font: 700 12px var(--font); display: grid; place-items: center; cursor: grab; pointer-events: auto; box-shadow: 0 2px 10px rgba(0,0,0,.5); touch-action: none; }
.rz-h:active { cursor: grabbing; background: rgba(0,255,255,.5); }
.show-grid::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 40px 40px; }

/* ---- barra de mistura (terreno real ↔ projeto) ---- */
.realbar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 18; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 16px; max-width: calc(100vw - 28px); }
.realbar svg { color: var(--gold); }
.realbar input[type=range] { width: 220px; accent-color: var(--gold); }
.realbar .rb-a, .realbar .rb-b { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
body.isreal .legend { opacity: .9; }
@media (max-width: 760px) {
  .realbar { left: 8px; right: 8px; bottom: max(10px, env(safe-area-inset-bottom)); transform: none; justify-content: center; }
  .realbar input[type=range] { flex: 1; width: auto; min-width: 80px; }
  body:has(.drawer.open) .realbar { opacity: 0; pointer-events: none; }
  .realbar { transition: opacity .3s; }
}