/* ============================================================
   MAPA TV — Loteamento Thyago
   Identidade "Sertão Moderno": verde profundo + cobre + papel
   ============================================================ */
:root {
  --verde: #16309A;
  --verde-escuro: #0C1D55;
  --cobre: #EA7623;
  --papel: #FAFAF7;
  --tinta: #1E1E1B;
  --cinza: #8B8B83;
  --st-disp: #2E9E5B;
  --st-res: #E5A33D;
  --st-vend: #D64533;
  --fonte: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--fonte);
  background: var(--verde-escuro);
  color: var(--papel);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- VIEWER ---------- */
.mv {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  background:
    radial-gradient(1200px 800px at 70% 20%, rgba(217,119,87,.06), transparent 60%),
    var(--verde-escuro);
  cursor: grab;
}
.mv:active { cursor: grabbing; }

.mv__stage {
  position: absolute;
  transform-origin: 0 0;
  /* sem will-change/translateZ: camada gigante cacheada era o que borrava
     o zoom alto; a nitidez agora vem do settle (escala assentada no layout) */
}
.mv__stage--suave { transition: transform .35s cubic-bezier(.22,.8,.3,1); }

.mv__img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  /* qualidade alta na ampliação (Chrome 116+, Safari moderno) */
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}

.mv__prog {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--papel);
  background: rgba(13,42,28,.85);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  padding: 5px 14px;
  z-index: 15;
  pointer-events: none;
  transition: opacity .5s;
}
.mv__prog--some { opacity: 0; }

.mv__dots {
  position: absolute;
  inset: 0;
}

/* A BOLINHA = CILINDRO 3D: filha do palco transformado.
   Wrapper só posiciona; o cilindro fica dentro com luz/sombra próprias. */
.mv__dot {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  container-type: inline-size;
}
.mv__dot::after {
  /* sombra projetada embaixo — dá sensação de "pousado" no mapa */
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  bottom: -10%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.mv__cyl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%,
              var(--claro) 0%,
              var(--cor) 55%,
              var(--escuro) 100%);
  /* uma sombra interna só — mais leve no rendering com muitas bolinhas */
  box-shadow:
    inset 0 -0.18em 0.3em rgba(0,0,0,.45),
    inset 0 0.10em 0.18em rgba(255,255,255,.32);
}
.mv__num {
  position: relative;
  font-family: var(--mono);
  font-weight: 800;
  color: #fff;
  font-size: 40cqw;
  line-height: 1;
  text-shadow: 0 0.05em 0.1em rgba(0,0,0,.65);
  pointer-events: none;
}

/* Cores por status: três tons da MESMA cor (claro/base/escuro) */
.mv__dot--disponivel { --cor: #2E9E5B; --claro: #5BBF7E; --escuro: #1F6E3F; }
.mv__dot--reservado  { --cor: #E5A33D; --claro: #F0BC68; --escuro: #B07B22; }
.mv__dot--vendido    { --cor: #D64533; --claro: #E5705C; --escuro: #9E2F22; }

.mv__dot--sel { z-index: 5; }
.mv__dot--sel::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 0.14em solid var(--cobre);
  animation: pulso 1.6s ease-in-out infinite;
  pointer-events: none;
}
.mv__dot--drag .mv__cyl { opacity: .65; }
.mv__dot--drag { outline: 0.18em dashed var(--cobre); outline-offset: 0.1em; z-index: 6; }
@keyframes pulso {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.18); opacity: 0;   }
}

/* ---------- BARRAS E PAINÉIS ---------- */
.topo {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(rgba(13,42,28,.92), rgba(13,42,28,.65) 70%, transparent);
  z-index: 20;
  pointer-events: none;
}
.topo > * { pointer-events: auto; }
.topo__marca {
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 15px;
}
.topo__marca em {
  font-style: normal;
  color: var(--cobre);
}
.topo__tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cinza);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  padding: 3px 10px;
}

.legenda {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 14px;
  background: rgba(13,42,28,.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 16px;
  z-index: 20;
  font-size: 13px;
}
.legenda b { font-family: var(--mono); font-weight: 700; }
.legenda__item { display: flex; align-items: center; gap: 7px; }
.legenda__dot { width: 12px; height: 12px; border-radius: 50%; }
.legenda__dot--d { background: var(--st-disp); }
.legenda__dot--r { background: var(--st-res); }
.legenda__dot--v { background: var(--st-vend); }

/* Ficha do lote (TV: lateral / controle: inferior) */
.ficha {
  position: fixed;
  z-index: 30;
  background: var(--papel);
  color: var(--tinta);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  padding: 20px 22px;
  min-width: 280px;
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(.22,.8,.3,1);
}
.ficha--tv { top: 80px; right: 24px; width: 340px; }
.ficha--mobile {
  left: 12px; right: 12px; bottom: 12px;
  min-width: 0;
  transform: translateY(130%);
}
.ficha--aberta { transform: translate(0,0); }
.ficha__quadra {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cobre);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ficha__titulo {
  font-size: 30px;
  font-weight: 800;
  margin: 2px 0 10px;
  color: var(--verde);
}
.ficha__status {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 99px;
  padding: 4px 12px;
  color: #fff;
  margin-bottom: 14px;
}
.ficha__status--disponivel { background: var(--st-disp); }
.ficha__status--reservado  { background: var(--st-res); }
.ficha__status--vendido    { background: var(--st-vend); }
.ficha__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.ficha__rotulo { font-size: 11px; color: var(--cinza); text-transform: uppercase; letter-spacing: .06em; }
.ficha__valor { font-family: var(--mono); font-size: 17px; font-weight: 700; }
.ficha__obs { margin-top: 12px; font-size: 13px; color: #555; }
.ficha__fechar {
  position: absolute;
  top: 10px; right: 12px;
  border: 0; background: none;
  font-size: 22px; cursor: pointer; color: var(--cinza);
}

/* ---------- BOTÕES / FORM (controle e editor) ---------- */
.btn {
  font-family: var(--fonte);
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  background: rgba(255,255,255,.1);
  color: var(--papel);
  border: 1px solid rgba(255,255,255,.18);
}
.btn--cobre { background: var(--cobre); border-color: var(--cobre); color: #fff; }
.btn--ativo { background: var(--cobre); border-color: var(--cobre); }
.btn:disabled { opacity: .45; cursor: default; }

.barra-acoes {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 25;
}

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; color: var(--cinza); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  font-family: var(--fonte);
  font-size: 15px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #d6d6cf;
  background: #fff;
  color: var(--tinta);
}

/* Modal do editor */
.modal-fundo {
  position: fixed; inset: 0;
  background: rgba(13,42,28,.6);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-fundo--aberto { display: flex; }
.modal {
  background: var(--papel);
  color: var(--tinta);
  border-radius: 16px;
  padding: 22px;
  width: min(440px, calc(100vw - 32px));
  max-height: 90vh;
  overflow: auto;
}
.modal h2 { margin: 0 0 4px; color: var(--verde); font-size: 20px; }
.modal .sub { font-family: var(--mono); font-size: 12px; color: var(--cinza); margin-bottom: 14px; }
.modal__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal__grade .campo--full { grid-column: 1 / -1; }
.modal__acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal__acoes .btn { color: var(--verde); border-color: #d6d6cf; background: #fff; }
.modal__acoes .btn--cobre { color: #fff; background: var(--cobre); border-color: var(--cobre); }
.modal__acoes .btn--perigo { color: #fff; background: var(--st-vend); border-color: var(--st-vend); margin-right: auto; }

.aviso {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cobre);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 99px;
  padding: 9px 20px;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mv__stage--suave { transition: none; }
  .mv__dot--sel { animation: none; }
}

.ficha__botoes {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.ficha__botoes .btn { flex: 1; }
.ficha__reserva {
  border-top: 1px dashed #d6d6cf;
  margin-top: 12px;
  padding-top: 4px;
}

/* transição rápida pros botões de zoom (controle/editor) */
.mv__stage--anim { transition: transform .28s cubic-bezier(.2,.7,.3,1); }

/* coluna de zoom no controle */
.zoom-col {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 25;
  background: rgba(13,42,28,.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 6px;
}
.zoom-col .btn-z {
  width: 48px; height: 48px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,.08);
  color: var(--papel);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-col .btn-z:active { background: var(--cobre); }
.zoom-col .btn-z:disabled { opacity: .35; }
.zoom-col .nivel {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cinza);
  padding: 4px 0 2px;
  border-top: 1px dashed rgba(255,255,255,.15);
  margin: 2px 0 0;
}

/* tiles: pedaços de alta resolução por cima da base */
.mv__tiles { position: absolute; inset: 0; pointer-events: none; }
.mv__tile {
  position: absolute;
  opacity: 0;
  transition: opacity .22s;
  user-select: none;
  pointer-events: none;
}
.mv__tile--ok { opacity: 1; }

/* alvo de toque levemente ampliado: ajuda o dedo a acertar SEM cobrir vizinhos */
.mv__hit {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
}
/* feedback visual ao tocar — fica claro pro vendedor que registrou */
.mv__dot:active .mv__cyl { transform: scale(0.92); transition: transform .1s; }

/* ====== PINOS DE FOTO ====== */
.mv__pinos { position: absolute; inset: 0; pointer-events: none; }
.mv__pino {
  position: absolute;
  width: 2.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--cobre);
  border: 0.12em solid #fff;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0.15em 0.4em rgba(0,0,0,.5);
  container-type: inline-size;
}
.mv__pino__icone {
  rotate: 45deg;
  font-size: 50cqw;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.mv__pino__badge {
  position: absolute;
  top: -20%; right: -20%;
  rotate: 45deg;
  background: var(--verde-escuro);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 36cqw;
  border-radius: 50%;
  width: 50%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0.08em solid #fff;
}
.mv__pino--edit { background: #6E2BD9; }
.mv__pino:hover { transform: translate(-50%, -55%); }

/* ====== TV: LAYOUTS DE EXIBIÇÃO ====== */
.tv-layout { position: fixed; inset: 0; display: flex; transition: all .35s; }
.tv-layout__mapa { flex: 1; position: relative; min-width: 0; }
.tv-layout__fotos {
  width: 0;
  position: relative;
  background: #000;
  overflow: hidden;
  transition: width .35s ease;
}
.tv-layout--misto .tv-layout__mapa { flex: 0 0 60%; }
.tv-layout--misto .tv-layout__fotos { width: 40%; }
.tv-layout--fotos .tv-layout__mapa { flex: 0 0 0; opacity: 0; }
.tv-layout--fotos .tv-layout__fotos { width: 100%; }

/* slide na lateral subindo — loop infinito SEM SALTO
   técnica: pista duplicada + animação que vai até -50%
   no fim, o que está visível é o início da segunda cópia (idêntico ao começo) */
.lateral {
  position: absolute; inset: 0;
  overflow: hidden;
}
.lateral__pista {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  animation: mv-subir var(--dur, 60s) linear infinite;
  will-change: transform;
}
.lateral__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #111 center/cover no-repeat;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  flex-shrink: 0;
}
@keyframes mv-subir {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* slide tela cheia — cross-fade entre 2 layers (sem corte seco) */
.cheia {
  position: absolute; inset: 0;
  background: #000;
}
.cheia__layer {
  position: absolute; inset: 0;
  background: #000 center/contain no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cheia__layer--ativa { opacity: 1; }
.cheia__legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 28px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff;
  font-family: var(--fonte);
  z-index: 2;
}
.cheia__legenda h3 { margin: 0; font-size: 22px; }
.cheia__legenda p { margin: 4px 0 0; font-size: 14px; opacity: .85; }

/* ====== CONTROLE: painel de fotos ====== */
.painel-fotos {
  position: fixed;
  top: 56px;
  left: 12px; right: 12px;
  background: rgba(13,42,28,.94);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px;
  z-index: 35;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: none;
}
.painel-fotos--aberto { display: block; }
.painel-fotos h3 { margin: 0 0 12px; color: var(--cobre); font-size: 15px; }
.painel-fotos__grupo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 14px;
}
.painel-fotos__opt {
  background: rgba(255,255,255,.06);
  color: var(--papel);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 9px 4px;
  font-family: var(--fonte);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.painel-fotos__opt--ativo { background: var(--cobre); border-color: var(--cobre); }
.painel-fotos__rotulo {
  font-size: 11px; color: var(--cinza); text-transform: uppercase;
  letter-spacing: .08em; margin: 12px 0 6px;
}
.painel-fotos__pontos {
  display: flex; flex-direction: column; gap: 6px;
}
.painel-fotos__ponto {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex; gap: 10px; align-items: center;
  cursor: pointer;
}
.painel-fotos__ponto:active { background: var(--cobre); }
.painel-fotos__thumb {
  width: 44px; height: 44px;
  background: #222 center/cover no-repeat;
  border-radius: 6px;
  flex-shrink: 0;
}
.painel-fotos__ponto b { font-size: 14px; }
.painel-fotos__ponto small { color: var(--cinza); font-size: 12px; }

/* ====== EDITOR: modal de fotos ====== */
.modal--fotos { width: min(640px, calc(100vw - 32px)); }
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.galeria-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #ddd center/cover no-repeat;
  border-radius: 8px;
  overflow: hidden;
}
.galeria-thumb__x {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: rgba(214,69,51,.95); color: #fff;
  font-weight: 700; cursor: pointer;
}
.galeria-add {
  aspect-ratio: 4 / 3;
  border: 2px dashed #d6d6cf;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--cinza);
  cursor: pointer;
}
.galeria-add:hover { border-color: var(--cobre); color: var(--cobre); }
.galeria-add input { display: none; }