html, body {
	height: 100%;
  margin:0;
}

body {
	display: flex;
  flex-direction: column;
  padding: 0;
	margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, "Helvetica Neue",
              Arial, "Noto Sans", "Liberation Sans",
              sans-serif;
}

/* 🔒 somente páginas com mapa */
body.layout-map {
  overflow: hidden;
}

body.layout-map main {
  overflow: hidden;
}

/* 2) garanta que o <main> não empurre a página */
main {  
  flex:1;
  display:flex;
  flex-direction: column;  
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.main-header {
  flex-shrink: 0;
}


.container{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
}


.container #map {
  width: 100%;
}


/* layout padrão em desktop */
#divisor {
  display: flex;
  flex: 1;
  min-height: 0; /* Permite que o flex child encolha */
/*  height: calc(100vh - 56px); /* 100vh menos a altura exata do seu header */
  overflow: hidden; /* Garante que o divisor em si não tenha scroll */
}

#map {
  flex: 2;
  min-height: 0;
  height: 100%;
  width: 100%;
}

#direita-container {
  flex: 1;
  display: flex;
  min-height: 0;
  flex-direction: column;
  background: #f8f8f8;
  border-left: 1px solid #ccc;  
}

#direita-container.hidden {
  display: none;
}

.hidden {
  display: none !important;
}

/* cabeçalho fixo */
#direita-head {
  flex-shrink: 0; /* 🔥 ESSENCIAL */
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background: #f8f8f8;
  
}

/* lista rolável */
#direita {
  flex: 1;
  overflow-y: auto; /* O scroll só aparece se houver conteúdo excedente */  
  min-height: 0;
  padding: 10px;
  display: block;
  -webkit-overflow-scrolling: touch; /* Melhor scroll em dispositivos iOS */
}

/* em telas medias (tablets) */
@media (max-width: 1024px) {
  #divisor {
    display: flex;
    flex-direction: column;
    flex:1;
    min-height: 0;
    overflow: hidden;
  }

  #map {    
    flex:1;
    min-height: 0;
    
  }

  #direita-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  
  /* área rolável (ESSENCIAL para o scroll funcionar) */
  #direita {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* classe única de visibilidade */
  .hidden {
    display: none !important;
  }

  /* botão flutuante de toggle (fora do fluxo do layout) */
  #toggle-view {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1000;

    padding: 10px 14px;
    border-radius: 20px;
    border: none;

    font-size: 14px;
    font-weight: 600;

    background: #00335e;
    color: #fff;

    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  }
}
/* ==================================
 estilos de header 
 ===================================*/
/* Header */
.main-header {
  background-color: #005580; /* slate-900 */
  display: flex;  
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 1rem;
  padding: .5rem 1rem;
}

/* Nav container */
.main-header__nav {
 /* border-bottom: 1px solid #1e293b; /* slate-800 */
    
}

/* Menu */
.main-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;

  list-style: none;
  margin: 0;
  padding: 0 16px;

}

/* Item */
.main-header__menu-item {
  margin: 0;
}

/* Link = botão */
.main-header__link {
  display: inline-flex;
  align-items: center;

  height: 56px;               /* altura de navbar */
  padding: 0 4px;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #ffffff;             
  text-decoration: none;

  border-bottom: 2px solid transparent;

  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

/* Hover */
.main-header__link:hover {
  color: #00ffff;             /* azul claro */
}

/* Ativo */
.main-header__link.active {
  color: #e5ff00;
  border-bottom-color: #eeff00;
}

/* botão sair do admin */
.main-header__link--logout {
  background: none;
  border: none;

  display: inline-flex;
  align-items: center;

  height: 56px;
  padding: 0 4px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #ffe082; /* amarelo suave (alerta) */
  cursor: pointer;

  border-bottom: 2px solid transparent;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

/* Hover */
.main-header__link--logout:hover {
  color: #ff5252;               /* vermelho claro */
  border-bottom-color: #ff5252;
}

/* Active / clique */
.main-header__link--logout:active {
  transform: translateY(1px);
}

/* Foco acessível */
.main-header__link--logout:focus-visible {
  outline: none;
  border-bottom-color: #ffffff;
}


/* estilos da brand (logo + titulo)*/
.brand {
  display: flex;
  align-items: center; /* centraliza texto e logo */
  gap: 0px;            /* alternativa ao margin-right */
  text-decoration: none;
}

.brand-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centraliza verticalmente entre as duas linhas */
  line-height: 1.15;
}

.brand-title {
  margin: 0;
  color:#ffffff;
  font-size: 2rem;
  font-weight: 700;
}

.brand-title span {
  color: #00ccff;
}

.brand-subtitle {
  margin: 0;
  font-size: .95rem;
  opacity: .85;
  color: #00ffd5;
}

@media (min-width: 768px) {
  .main-header__nav {
    flex:1;
  }

  /* centraliza a UL dentro do espaço do nav */
  .main-header__menu {
    justify-content: center;
  }


}




/*
  ==================================
  estilos de paginacao 
  ===================================*/ 
.paginacao {
  margin-top: 20px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid #e0e0e0;
  font-size: 14px;
}

.paginacao a,
.paginacao span {
  min-width: 32px;
  padding: 6px 10px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  background: #fff;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Hover nos links */
.paginacao a:hover {
  background: #f0f0f0;
  border-color: #999;
}

/* Página atual */
.paginacao .pagina-atual {
  background: #333;
  color: #fff;
  border-color: #333;
  font-weight: 600;
  cursor: default;
}

/* Links desabilitados (opcional se quiser usar depois) */
.paginacao .disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Anterior / Próxima */
.paginacao a:first-child,
.paginacao a:last-child {
  font-weight: 500;
}

/* =========================
   MENU HAMBURGUER
   ========================= */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  padding: 12px 16px;
  cursor: pointer;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 600px) {
  
  .paginacao {
    gap: 4px;
    font-size: 13px;
  }

  .paginacao a,
  .paginacao span {
    padding: 5px 8px;
    min-width: 28px;
  }

  .menu-toggle {
    display: block;
  }

  .main-header {
    flex-wrap: wrap;
    gap: .5rem 1rem;
  }

  .main-header__nav {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    background: #0094df;
    /*border-top: 1px solid rgba(255,255,255,.3);*/
  }

  .main-header__nav.open {
    display: flex;
  }

  .main-header__menu {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .main-header__link,
  .main-header__link--logout {
    width: 100%;
    padding: 14px 12px;
    height: auto;
    border-bottom: 1px solid rgba(255,255,255,.25);
  }

  .brand-subtitle {
    display: none;
  }

  /* compacta o logo no mobile */
  .brand-text {
    line-height: 1.2;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
  }

  /* por padrão só o mapa aparece */
  #direita-container {
    display: none;
  }

  /* quando o botão ativar */
  #direita-container.show {
    display: flex;
  }

  #map {
    flex: 1;
  }


}




/* ==================================
  sobrescreve estilos do leaflet 
 ===================================*/


.circle-icon {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
}

.leaflet-tooltip.marker-tooltip {
    background-color: rgba(0, 92, 200, 0.9); /* azul translúcido */
    border: #0080c0;
    color: #fff; /* texto branco */

    padding: 2px 6px;
    border-radius: 10px; /* borda arredondada */
    border: 1px solid rgba(255,255,255,0.4);

    font-size: 10px;
    font-weight: 600;   
}

/* para nao gerar um card dentro de outro no popup de condominio */
.leaflet-popup-content a.popup-condominio-info {
  display: block;
  padding: 15px;      /* 👈 ajuste aqui */
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  color: inherit;
  text-decoration: none;
}


/* cards popup condominio */
.leaflet-popup-content:has(.popup-condominio-info),
.leaflet-popup-content:has(.popup-link) {
  margin: 0 !important;
  padding: 0 !important;
}


/* popups sem seta*/
/* popup sem seta — estilo “card plano” */
.popup-sem-seta .leaflet-popup-tip-container {
  display: none !important;
}

.popup-sem-seta .leaflet-popup-content-wrapper {
  border: none;              /* remove borda */
  background: white;         /* ou transparente */
  box-shadow: none;          /* remove sombra padrão */
  border-radius: 10px;       /* arredondamento opcional */
  padding: 0px;
}

/* remove o espaçamento interno extra */
.popup-sem-seta .leaflet-popup-content {
  margin: 0;
}



.lista-condominios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popup-condominio-info {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

}

/* card-link no popup */
.leaflet-popup-content a.popup-link {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
  border: none;
}

/* mantém o visual do card */
.leaflet-popup-content a.popup-link .popup-linha,
.leaflet-popup-content a.popup-link h3 {
  color: inherit;
}


.popup-linha {
  display: flex;
  align-items: center;
  gap: 8px;          /* espaço entre os itens */
  flex-wrap: nowrap; /* impede quebrar linha */
}

.popup-icone {
  font-size: 1.1rem;
}

.popup-linha span {
  display: inline-flex;
  align-items: center;
}


.popup-titulo h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.popup-footer {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.popup-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px;
  border-radius: 16px;

  font-size: 12px;
  font-weight: 500;
  text-decoration: none;

  background-color: #e3f2fd;      /* azul claro */
  color: #1565c0;

  border: 1px solid rgba(21, 101, 192, 0.2);

  transition: 
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.popup-chip:hover {
  background-color: #bbdefb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}

.popup-chip:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ==========================
   CARD BASE (reutilizável)
   ========================== */
.card-condominio {
  display: block;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ffffff;
  box-shadow: 5px 5px 3px rgba(0,0,0,.08);

  color: inherit;
  text-decoration: none;
}

.card-condominio:hover {
  background: rgba(0,0,0,.06);
  cursor: pointer;
}

.card-condominio:visited {
  color: inherit;
}

.card-condominio * {
  color: inherit;
  text-decoration: none;
}


/* 
RADAR ANIMADO
*/

.brand-icon {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}


.brand-icon svg {
  height: 56px;     /* defina o tamanho desejado */
  width: auto;
  display: block;
  transform: translateY(1px); /* ajuste fino opcional */
  margin-right: 10px;
  
  
}

@media (max-width: 600px) {
  .brand-icon svg {
    height: 40gipx;
  }
}

.radar-svg {
  --radar-bg-center: #00569c3b;
  --radar-bg-edge: #000000;
  --radar-ring: rgb(54, 59, 53);
  --radar-circle: rgba(0,200,255,.25);
  --radar-line: rgba(241, 241, 241, 0.979);
  --radar-star: #00ffff;
}


/*
====================================
MARCADOR DE ANUNCIO
====================================
*/

.marker-pulse {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%   { r: 6; stroke-width: 2; }
  50%  { r: 10; stroke-width: 3; }
  100% { r: 6; stroke-width: 2; }
}


.caption-badge {
  display: inline-block;
  padding: 6px 10px;

  background: #0055ff;
  color: #fff;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.4);

  font-size: 8px;
  font-weight: 300;
  line-height: 1;

  box-shadow: 0 4px 8px rgba(0,0,0,.15);

  pointer-events: auto; /* garante clique */

    position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 👈 centraliza no ponto */
}