/* ========================================
   MAPA INTERATIVO - DESIGN MODERNO E LIMPO
   Cores escuras com alto contraste
   Reservada = VERMELHO (não laranja)
   Sem tooltip - atualização em tempo real
   ======================================== */

.mapa-interativo {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('/mapa/mapa implantação 4k.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.mapa-interativo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.92) 0%, rgba(10, 10, 30, 0.95) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ======== GRID PRINCIPAL - TODAS AS 498 UNIDADES ======== */
.lotes-grid-completo {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(13, 1fr);
  gap: 3px;
  padding: 6px;
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Força tamanho mínimo para evitar colapso */
  min-width: 100%;
  min-height: 100%;
}

/* ======== LOTE - ESTILIZAÇÃO REFINADA PARA PRODUÇÃO ======== */
.lote-square {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.75),
    inset 0 1px 3px rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Efeito de brilho sutil */
.lote-square::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
  pointer-events: none;
}

.lote-square:hover {
  box-shadow:
    0 6px 16px rgba(255, 255, 255, 0.25),
    inset 0 2px 6px rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
  z-index: 50;
  border-color: rgba(255, 255, 255, 0.5);
  filter: brightness(1.25);
}

/* Texto dos lotes - FONTE AJUSTADA PARA PRODUÇÃO */
.lote-numero {
  color: #ffffff;
  font-size: clamp(0.55rem, 1.1vw, 1.1rem);
  font-weight: 800;
  /* Borda preta fina para nitidez máxima */
  -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.9);
  text-stroke: 0.8px rgba(0, 0, 0, 0.9);
  /* Text-shadow para profundidade */
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 1),
    0 0 12px rgba(0, 0, 0, 0.95),
    0 1px 4px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.85),
    /* Sombra dupla para contraste */
    0 3px 10px rgba(0, 0, 0, 0.8);
  user-select: none;
  pointer-events: none;
  text-align: center;
  line-height: 1;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 2;
  /* CRÍTICO: Impede quebra de linha */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  /* Garante que o texto ocupe todo o espaço disponível */
  width: 100%;
  display: block;
}

/* ======== ANIMAÇÕES DE MUDANÇA EM TEMPO REAL ======== */

/* PROCESSAMENTO - Piscando azul */
.lote-processamento {
  animation: pulseProcessamento 2s ease-in-out infinite;
}

@keyframes pulseProcessamento {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.9);
  }
}

/* ENTROU EM PROCESSAMENTO - Animação forte de alerta */
.lote-entrou-processamento {
  animation: alertaProcessamento 2.5s ease-out forwards,
             pulseProcessamentoUrgente 1.8s ease-in-out 2.5s infinite;
  z-index: 999;
}

@keyframes alertaProcessamento {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 123, 255, 0);
  }
  15% {
    transform: scale(1.5);
    box-shadow: 0 0 50px rgba(0, 123, 255, 1),
                0 0 80px rgba(100, 200, 255, 0.8);
  }
  30% {
    transform: scale(1.2);
  }
  45% {
    transform: scale(1.4);
    box-shadow: 0 0 60px rgba(0, 123, 255, 1);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.7);
  }
}

@keyframes pulseProcessamentoUrgente {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.8);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 35px rgba(0, 123, 255, 1);
  }
}

/* CONVERTEU PARA RESERVA (VENDIDO) - Animação VERMELHO de celebração */
.lote-converteu-reserva {
  animation: vendido 3.5s ease-out forwards;
  z-index: 1000;
}

@keyframes vendido {
  0% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 rgba(185, 28, 28, 0);
  }
  10% {
    transform: scale(2) rotate(8deg);
    box-shadow: 0 0 70px rgba(185, 28, 28, 1),
                0 0 100px rgba(255, 50, 50, 1),
                0 0 130px rgba(255, 100, 0, 0.8);
  }
  20% {
    transform: scale(1.6) rotate(-8deg);
    box-shadow: 0 0 90px rgba(185, 28, 28, 1);
  }
  35% {
    transform: scale(2.2) rotate(4deg);
    box-shadow: 0 0 110px rgba(185, 28, 28, 1),
                0 0 150px rgba(255, 0, 0, 1);
  }
  50% {
    transform: scale(1.8) rotate(-4deg);
  }
  65% {
    transform: scale(2) rotate(0deg);
    box-shadow: 0 0 90px rgba(185, 28, 28, 1);
  }
  80% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(185, 28, 28, 0.6);
  }
}

/* VOLTOU DISPONÍVEL - Animação verde de nova oportunidade */
.lote-voltou-disponivel {
  animation: novaOportunidade 2.8s ease-out forwards;
  z-index: 999;
}

@keyframes novaOportunidade {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(13, 90, 36, 0);
  }
  20% {
    transform: scale(1.6);
    box-shadow: 0 0 60px rgba(13, 90, 36, 1),
                0 0 90px rgba(0, 255, 100, 0.8);
  }
  40% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(1.5);
    box-shadow: 0 0 70px rgba(13, 90, 36, 1),
                0 0 100px rgba(0, 255, 100, 1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(13, 90, 36, 0.5);
  }
}

/* ======== RESPONSIVIDADE - DESABILITADA PARA MANTER LAYOUT FIXO ======== */
/* Grid sempre 20x13 para garantir consistência */
/* Fonte usa clamp() para ajuste responsivo automático */

/* ======== NOME DO EMPREENDIMENTO - AJUSTADO PARA PRODUÇÃO ======== */
.nome-empreendimento {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 10px 30px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 25px;
  backdrop-filter: blur(15px);
  color: white;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ======== INDICADOR DE TELA ======== */
.indicador-tela {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 1000;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.indicador-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.indicador-dot.active {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}