/* =========================================================================
   Mapa del predio: estilos compartidos.

   Los usan los DOS lugares donde se dibuja el mapa:
     - /mapa-predio.html  → la página suelta, a pantalla completa
     - plano_predio.php   → la sección "Plano del Predio" del sitio

   Acá va sólo lo que es del MAPA (las zonas, las banderas, los cartelitos y
   la referencia). El acomodo de cada página —cuánto mide el mapa, dónde va el
   título— es cosa de cada una.

   OJO con el alcance: en el inicio del sitio conviven TRES mapas de Leaflet
   (éste, el plano de stands y el de ubicación). Todo lo que pisa clases
   propias de Leaflet (`.leaflet-popup-*`, `.leaflet-marker-icon`, el fondo del
   contenedor) va colgado de `.mapa-predio`, que es la clase del div de ESTE
   mapa; si no, se le desarma el estilo a los otros dos.

   OJO AL TOCAR ESTE ARCHIVO: Cloudflare lo cachea CUATRO HORAS. index.php y
   plano_predio.php le cuelgan un `?v=` con la fecha del archivo y se arreglan
   solos, pero /mapa-predio.html es estática y lleva la versión A MANO: hay que
   subirle el número ahí, o el cambio no le llega a nadie hasta que expire.
   ========================================================================= */

.mapa-predio.leaflet-container { background: #0f172a; font-family: inherit; }

/* ---------- Nombre de la zona, escrito sobre el polígono ---------- */
.mapa-predio .zona-tooltip {
  background: rgba(15,23,42,.82) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: .78rem;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.45) !important;
  white-space: nowrap;
}
.mapa-predio .zona-tooltip::before { display: none; }

/* ---------- La bandera de cada casa o colectividad ---------- */
.mapa-predio .bandera-marcador {
  background: none !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}
/* El nombre va DEBAJO de la bandera, centrado.
   El ancho del pin es CERO a propósito: el divIcon se ancla por el borde
   izquierdo del div, no por su centro, así que si el ancho creciera con el
   largo del nombre la bandera dejaría de caer sobre la coordenada (y cada
   colectividad se correría distinto, según lo largo que sea su nombre). Con
   ancho 0 y `align-items: center`, la bandera y el cartel quedan los dos
   centrados sobre el punto y se desbordan para los costados. */
.mapa-predio .bandera-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 0;
  cursor: pointer;
}
.mapa-predio .bandera-pin > * { flex-shrink: 0; }
.mapa-predio .bandera-pin .fi {
  width: 34px; height: 34px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid #fff;
  box-shadow: 0 3px 9px rgba(0,0,0,.6);
  transition: transform .12s ease;
}
.mapa-predio .bandera-pin:hover .fi { transform: scale(1.12); }

/* El nombre se ESCONDE en la vista general: las casas y colectividades caen
   muy cerca una de otra y los carteles se tapan entre ellos y con los nombres
   de las zonas. Se muestra al acercar (clase .con-nombres, la pone el zoom) y
   siempre al pasar el mouse por encima. Para el que no puede acercar queda la
   referencia: tocar una ahí lleva el mapa hasta su bandera. */
.mapa-predio .bandera-pin .nombre {
  display: none;
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.mapa-predio.con-nombres .bandera-pin .nombre { display: block; }
.mapa-predio .bandera-pin:hover .nombre { display: block; }
/* Al pasar el mouse, esa bandera va por encima de las vecinas. */
.mapa-predio .leaflet-marker-icon:hover { z-index: 10000 !important; }

/* ---------- Cartelito de la bandera ---------- */
.mapa-predio .leaflet-popup-content-wrapper {
  background: #111827; color: #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.mapa-predio .leaflet-popup-tip { background: #111827; }
.mapa-predio .leaflet-popup-content { margin: 14px 16px; font-size: .85rem; }
.mapa-predio .leaflet-popup-close-button { color: #9ca3af !important; }
.pop-titulo { font-weight: 800; font-size: .95rem; color: #fff; margin: 0 0 4px; }
.pop-sub    { font-size: .78rem; color: #fbbf24; font-weight: 700; margin: 0 0 6px; }
.pop-txt    { margin: 0; line-height: 1.45; }
.pop-cab    { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pop-cab .fi {
  width: 38px; height: 38px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,.85);
  flex-shrink: 0;
}
.pop-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: .78rem; font-weight: 700;
  color: #fbbf24; text-decoration: none;
}
.pop-link:hover { color: #fff; }

/* ---------- La referencia ----------
   Va posicionada respecto del ancestro con `position: relative` más cercano:
   en la página suelta es el propio body (pantalla completa) y en la sección
   del sitio es el recuadro que envuelve al mapa. */
/* El badge "Referencias" está SIEMPRE a la vista mientras haya mapa (lo pidió
   Jose el 7/9/2026), también con el panel abierto: es el interruptor, y uno
   tiene que poder verlo para saber que la lista se puede cerrar y volver a
   abrir. Por eso el panel se apila ARRIBA del badge en vez de reemplazarlo:
   antes los dos vivían en el mismo rincón y se hubieran pisado.
   Los 42px que el panel se corre para arriba son el alto del badge (~31px con
   esta letra y este padding) más el aire entre los dos: si al badge le cambia
   el tamaño de letra o el padding, hay que revisar los dos `42px` de abajo. */
.btn-panel {
  position: absolute; z-index: 1001;   /* por encima del panel */
  bottom: 18px; left: 18px;
  background: rgba(24,24,27,.94);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 10px;
  font-size: .8rem; font-weight: 700;
  padding: .45rem .8rem;
}
.panel-ref {
  position: absolute; z-index: 1000;
  /* Justo arriba del badge, que queda a la vista abajo. */
  bottom: calc(18px + 42px); left: 18px;
  width: min(290px, calc(100% - 36px));
  /* Lo que se le sube al `bottom` hay que descontarlo del alto, o en un mapa
     bajito (el celular) el panel se sale por arriba. */
  max-height: min(calc(74% - 42px), 538px);
  overflow-y: auto;
  background: rgba(24,24,27,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  color: #e5e7eb;
  padding: 12px 14px;
}
.panel-ref h6 {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fbbf24;
  margin: 0 0 8px;
}
/* Los dos bloques de la referencia son divs hermanos: la separación va acá y
   no en un "h6 + h6", que nunca llegaría a aplicarse. */
.panel-ref > div + div h6 {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.ref-item {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 6px; margin: 0 -6px;
  border-radius: 7px;
  font-size: .79rem;
  cursor: pointer;
  background: none; border: 0; color: inherit;
  text-align: left; width: calc(100% + 12px);
}
.ref-item:hover { background: rgba(255,255,255,.09); }
.ref-item .caja { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; }
.ref-item .fi   { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; }
.ref-item .txt  { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-cerrar { background: none; border: 0; color: #9ca3af; float: right; line-height: 1; padding: 0; }
.panel-cerrar:hover { color: #fff; }