/* ==================== RESET Y BASE ==================== */
/* Reset de márgenes y padding para todos los elementos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

/* Estilos base del body */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente del sistema */
  overflow: hidden; /* Evita scroll en la página completa */
  background-color: #f5f5f5; /*#f5f5f5 Fondo gris claro */
}

/* ==================== HEADER / ENCABEZADO ==================== */
/* Barra superior con branding institucional - diseño integrado */
header {
  position: absolute; /* Posición absoluta para superponerse al mapa */
  top: 0;
  left: 0;
  right: 0;
  height: 120px; /* Altura aumentada para diseño integrado */
  /* Gradiente beige institucional similar a la imagen background: linear-gradient(180deg, #D4B896 0%, #C9A876 100%); */
  background: linear-gradient(180deg, #D4B896 0%, #C9A876 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra pronunciada */
  z-index: 1000; /* Se muestra sobre el mapa */
  display: flex;
  flex-direction: column; /* Distribución vertical */
  padding: 0;
  overflow: visible; /* Permite que los logos salgan del header */
  pointer-events: none; /* CRÍTICO: El header no bloquea el mapa */
}

/* Contenedor principal del header */
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espacio entre elementos */
  width: 100%;
  padding: 15px 30px;
  flex: 1;
}

/* Sección que contiene logo y títulos */
.logo-section {
  display: flex;
  align-items: center;
  gap: 250px; /* Espacio entre logo y título - puedes ajustar este valor */
}

/* Contenedor del logo del ayuntamiento - SIN fondo blanco */
.logo-box {
  width: 300px; /* Ajusta este valor para cambiar el tamaño del logo */
  height: 300px; /* Mantén la misma proporción (cuadrado) */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Evita que el logo se comprima */
  transform: translate(50px,-100px); /* Sube el logo verticalmente - ajusta este valor */
  /* Valores negativos suben, valores positivos bajan */
  /* Ejemplo: -10px (sube poco), -20px (sube más), -30px (sube mucho) */
  pointer-events: none; /* CRÍTICO: No bloquea el mapa */
}

/* Imágenes de logos en el header */
.header-logo-img {
  width: 150%;
  height: 150%;
  object-fit: contain; /* Mantiene proporción de la imagen */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)); /* Sombra directa a la imagen */
  pointer-events: none; /* CRÍTICO: No bloquea el mapa */
}

/* Título principal del sistema */
.title-section h1 {
  color: #8B3A5D; /* Color vinotinto institucional */
  font-size: 32px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  letter-spacing: 0.5px; /* Espaciado entre letras */
  margin: 0;
  transform: translateY(-100px);
  pointer-events: none; /* CRÍTICO: No bloquea el mapa */
}

/* Subtítulo del sistema */
.title-section p {
  color: #6B2A4D; /* Color oscuro institucional */
  font-size: 14px;
  margin-top: 5px;
  font-weight: 400; /* Texto normal */
  transform: translateY(-100px);
  pointer-events: none; /* CRÍTICO: No bloquea el mapa */
}

/* Logo adicional en la derecha (Protección Civil) */
.header-logo-right {
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%; /* Círculo perfecto */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
  border: 3px solid #8B3A5D;
  padding: 5px;
  overflow: hidden;
  transform: translateY(-100px);
  pointer-events: none; /* CRÍTICO: No bloquea el mapa */
}

.header-logo-right i {
  font-size: 40px;
  color: #8B3A5D;
}

/* ==================== SEARCH BAR / BARRA DE BÚSQUEDA RETRÁCTIL ==================== */
/* Contenedor de la barra de búsqueda - posicionable desde JS */
.search-bar {
  position: absolute;
  /* top, left y width se configuran desde JavaScript */
  z-index: 1001; /* Por encima del header y el mapa */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botón para expandir/contraer la búsqueda */
.search-toggle-btn {
  width: 50px;
  height: 50px;
  background: white;
  border: 2px solid #8B3A5D;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #8B3A5D;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Hover en botón de toggle */
.search-toggle-btn:hover {
  background: #8B3A5D;
  color: white;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(139, 58, 93, 0.4);
}

/* Estado activo del botón */
.search-toggle-btn.active {
  background: #8B3A5D;
  color: white;
}

/* Contenedor con input y botón */
.search-container {
  display: flex;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid #8B3A5D;
  flex: 1;
  min-width: 0; /* Permite que el contenedor se contraiga */
}

/* Efecto hover en el contenedor de búsqueda */
.search-container:hover {
  box-shadow: 0 6px 25px rgba(139, 58, 93, 0.3);
  transform: translateY(-2px);
}

/* Campo de texto de búsqueda */
.search-container input {
  flex: 1;
  border: none;
  padding: 12px 20px;
  font-size: 14px;
  outline: none;
  color: #333;
  background: white;
  min-width: 0;
}

/* Placeholder del input */
.search-container input::placeholder {
  color: #999;
}

/* Botón de búsqueda */
.search-container button {
  background: #8B3A5D;
  color: white;
  border: none;
  padding: 12px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  flex-shrink: 0;
}

/* Hover en botón de búsqueda */
.search-container button:hover {
  background: #6B2A4D;
}

/* Efecto al presionar el botón */
.search-container button:active {
  transform: scale(0.95);
}

/* ==================== BOTÓN PARA QUITAR MARCADOR DE BÚSQUEDA ==================== */
.clear-marker-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.3);
}

.clear-marker-btn:hover {
  background: #c0392b;
}

.clear-marker-btn:active {
  transform: scale(0.95);
}

.clear-marker-btn.hidden {
  display: none;
}

/* ==================== MAP / MAPA ==================== */
/* Contenedor principal del mapa Leaflet */
#map {
  position: absolute;
  top: 120px; /* Debajo del header */
  left: 0;
  right: 0;
  bottom: 0; /* Ocupa toda la altura restante */
  z-index: 1; /* Detrás de todos los controles */
}

/* ==================== SIDE PANEL / PANEL LATERAL ==================== */
/* Panel izquierdo con lista de capas - diseño más moderno */
.side-panel {
  position: absolute;
  top: 200px; /* Ajustado para la nueva posición */
  left: 20px;
  width: 300px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
  z-index: 1001; /* Por encima del mapa */
  max-height: calc(100vh - 240px); /* Altura máxima dinámica */
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Distribución vertical */
  border: 2px solid #8B3A5D; /* Borde institucional */
}

/* Encabezado común para paneles */
.panel-header {
  background: #8B3A5D; /* Color institucional sólido */
  color: white;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espacio entre elementos */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.5px;
}

/* Icono en el encabezado del panel */
.panel-header i {
  margin-right: 10px;
}

/* Botón de cerrar en encabezados */
.close-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 20px;
  padding: 5px 8px;
  transition: all 0.2s ease;
  border-radius: 4px;
}

/* Hover en botón de cerrar */
.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1); /* Aumenta tamaño */
}

/* Contenido scrolleable de los paneles */
.panel-content {
  padding: 12px;
  overflow-y: auto; /* Scroll vertical si es necesario */
  flex: 1; /* Ocupa espacio disponible */
  background: #f0f4f8; /* Fondo gris azulado claro */
}

/* ==================== LAYER ITEMS / ELEMENTOS DE CAPA - ESTILO ATLAS CIBERNÉTICO ==================== */
/* Contenedor de una categoría de capas */
.layer-category {
  margin-bottom: 8px; /* Espaciado entre categorías */
  background: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Título de cada categoría de capas - ESTILO ATLAS CIBERNÉTICO */
.category-title {
  font-weight: 600;
  font-size: 12px;
  color: white;
  padding: 10px 12px;
  background: linear-gradient(135deg, #8B3A5D 0%, #8B3A5D 100%); /* Gradiente oscuro */
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 6px solid #C9A876; /* Acento lateral */
}

.category-title:hover {
  background: linear-gradient(135deg, #8B3A5D 0%, #8B3A5D 100%);
}

/* Icono de la categoría */
.category-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  color: #ecf0f1;
}

/* Icono de toggle en categoría */
.category-toggle-icon {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #bdc3c7;
}

.category-toggle-icon i {
  font-size: 10px;
}

/* Contenedor de capas dentro de categoría */
.category-layers-container {
  display: block;
  padding: 8px;
  background: #fafafa;
}

/* ==================== SUBCATEGORÍAS ==================== */
.layer-subcategory {
  margin: 6px 0;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}

.subcategory-title {
  font-size: 11px;
  font-weight: 600;
  color: #7f8c8d;
  padding: 6px 10px;
  background: #ecf0f1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-left: 3px solid #95a5a6;
}

/* Contenedor de item de capa con simbología */
.layer-item-container {
  margin: 4px 0;
}

/* Cada item individual de capa */
.layer-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  background: white;
  border: 1px solid #e0e0e0;
}

/* Hover en item de capa */
.layer-item:hover {
  background: #e8f4f8; /* Fondo azul claro */
  transform: translateX(2px); /* Se desplaza a la derecha */
  border-color: #3498db; /* Borde azul */
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
}

/* Checkbox de cada capa */
.layer-item input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #8B3A5D; /* Color del checkbox marcado */
}

/* Label de cada capa */
.layer-item label {
  font-size: 12px;
  cursor: pointer;
  flex: 1; /* Ocupa espacio disponible */
  display: flex;
  align-items: center;
  color: #2c3e50;
  font-weight: 500;
}

/* ==================== SIMBOLOGÍA EN EL PANEL ==================== */
/* Contenedor de simbología de cada capa */
.layer-symbology {
  padding: 6px 10px 6px 28px;
  background: #f8f9fa;
  border-left: 3px solid #8B3A5D;
  margin-left: 10px;
  margin-top: 4px;
  border-radius: 0 4px 4px 0;
}

/* Cada item de simbología */
.symbology-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 10px;
  color: #555;
}

/* Caja de color en simbología */
.symbology-color-box {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Label de simbología */
.symbology-label {
  font-weight: 400;
  color: #666;
}

/* ==================== MAP CONTROLS / CONTROLES DEL MAPA ==================== */
/* Contenedor de botones flotantes (lado derecho) */
.map-controls {
  position: absolute;
  top: 150px;
  right: 20px;
  display: flex;
  flex-direction: column; /* Apilados verticalmente */
  gap: 10px; /* Espacio entre botones */
  z-index: 1001; /* Por encima del mapa */
}

/* Estilo común para botones de control */
.control-btn {
  width: 55px;
  height: 55px;
  background: white;
  border: 2px solid #8B3A5D; /* Borde institucional */
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #8B3A5D; /* Color institucional */
  transition: all 0.3s ease;
}

/* Hover en botones de control */
.control-btn:hover {
  background: #8B3A5D; /* Fondo institucional */
  color: white; /* Texto blanco */
  transform: scale(1.08); /* Aumenta tamaño */
  box-shadow: 0 6px 20px rgba(139, 58, 93, 0.4); /* Sombra colorida */
}

/* Efecto al presionar botón */
.control-btn:active {
  transform: scale(1.02);
}

/* Estado activo de un botón (toggle) */
.control-btn.active {
  background: #8B3A5D;
  color: white;
  box-shadow: 0 0 0 4px rgba(139, 58, 93, 0.25); /* Anillo de enfoque */
}

/* ==================== BASEMAP SELECTOR / SELECTOR DE MAPA BASE ==================== */
/* Panel desplegable con opciones de mapa base */
.basemap-selector {
  position: absolute;
  top: 150px;
  right: 90px; /* A la izquierda del botón */
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 8px;
  display: none; /* Oculto por defecto */
  z-index: 1002; /* Por encima de los controles */
  min-width: 200px;
  border: 2px solid #8B3A5D;
}

/* Clase para mostrar el selector */
.basemap-selector.show {
  display: block;
  animation: slideIn 0.3s ease; /* Animación de entrada */
}

/* Animación de deslizamiento desde la derecha */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Encabezado del selector */
.selector-header {
  font-weight: 700;
  font-size: 12px;
  color: #8B3A5D;
  padding: 10px 12px;
  border-bottom: 2px solid #8B3A5D;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Cada opción de mapa base */
.basemap-option {
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  font-weight: 500;
}

/* Icono en cada opción */
.basemap-option i {
  width: 18px;
  text-align: center;
}

/* Hover en opción de mapa base */
.basemap-option:hover {
  background: #f5f5f5;
  transform: translateX(3px); /* Desplazamiento a la derecha */
}

/* Opción actualmente seleccionada */
.basemap-option.active {
  background: #8B3A5D; /* Color institucional */
  color: white;
}

/* Hover en opción activa */
.basemap-option.active:hover {
  background: #6B2A4D; /* Tono más oscuro */
}

/* ==================== LEGEND PANEL / PANEL DE LEYENDA ==================== */
/* Panel inferior izquierdo con simbología */
.legend-panel {
  position: absolute;
  bottom: 30px; /* Ajustado ya que quitamos la barra de estado */
  left: 20px;
  width: 300px;
  max-height: 350px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1001; /* Por encima del mapa */
  display: none; /* Oculto por defecto */
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #8B3A5D;
}

/* Clase para mostrar la leyenda */
.legend-panel.show {
  display: flex;
  animation: slideUp 0.3s ease; /* Animación de entrada */
}

/* Animación de deslizamiento desde abajo */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mensaje cuando no hay capas activas */
.legend-empty {
  color: #999;
  font-size: 13px;
  text-align: center;
  padding: 30px 20px;
  font-style: italic;
}

/* Cada item de leyenda (una capa) */
.legend-item {
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8; /* Separador */
}

/* Último item sin borde inferior */
.legend-item:last-child {
  border-bottom: none;
}

/* Título de cada item de leyenda */
.legend-title {
  font-weight: 700;
  font-size: 13px;
  color: #8B3A5D;
  margin-bottom: 8px;
}

/* Contenedor de color y descripción */
.legend-color {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #555;
  margin: 6px 0;
}

/* Caja de color en la leyenda */
.legend-color-box {
  width: 24px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.25); /* Borde visible */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ==================== STATUS BAR / BARRA DE ESTADO ==================== */
/* OCULTA: Barra inferior central con mensajes del sistema */
#status {
  display: none; /* OCULTA la barra de estado según solicitud */
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); /* Centrado horizontal */
  background: rgba(255, 255, 255, 0.96); /* Fondo casi opaco */
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 1001; /* Por encima del mapa */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  color: #333;
  font-weight: 600;
  backdrop-filter: blur(10px); /* Efecto de desenfoque de fondo */
  max-width: 450px;
  text-align: center;
  border: 2px solid #8B3A5D;
}

/* ==================== LOADING OVERLAY / PANTALLA DE CARGA ==================== */
/* Overlay de pantalla completa durante carga de datos */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75); /* Fondo oscuro semi-transparente */
  display: none; /* Oculto por defecto */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999; /* Sobre todo lo demás */
  backdrop-filter: blur(8px); /* Desenfoque del fondo */
}

/* Clase para mostrar el overlay */
.loading-overlay.show {
  display: flex;
}

/* Spinner de carga animado */
.loading-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.2); /* Borde gris */
  border-top-color: #8B3A5D; /* Borde superior colorido */
  border-radius: 50%; /* Círculo perfecto */
  animation: spin 0.8s linear infinite; /* Rotación continua */
}

/* Animación de rotación */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Texto del overlay de carga */
.loading-overlay p {
  color: white;
  margin-top: 25px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ==================== SCROLLBAR / BARRA DE DESPLAZAMIENTO ==================== */
/* Personalización del scrollbar en paneles */
.panel-content::-webkit-scrollbar {
  width: 6px; /* Ancho del scrollbar más delgado */
}

/* Track (fondo) del scrollbar */
.panel-content::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

/* Thumb (parte móvil) del scrollbar */
.panel-content::-webkit-scrollbar-thumb {
  background: #8B3A5D; /* Color institucional */
  border-radius: 10px;
}

/* Hover en el thumb del scrollbar */
.panel-content::-webkit-scrollbar-thumb:hover {
  background: #6B2A4D; /* Tono más oscuro */
}

/* ==================== LEAFLET POPUP CUSTOM / PERSONALIZACIÓN DE POPUPS ==================== */
/* Contenedor del popup de Leaflet */
.leaflet-popup-content-wrapper {
  border-radius: 8px; /* Esquinas redondeadas */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 2px solid #8B3A5D;
}

/* Contenido interno del popup */
.leaflet-popup-content {
  font-size: 13px;
  line-height: 1.6;
  margin: 15px;
}

/* Títulos h3 dentro de popups */
.leaflet-popup-content h3 {
  margin: 0 0 10px 0;
}

/* Párrafos dentro de popups */
.leaflet-popup-content p {
  margin: 5px 0;
}

/* Texto en negrita dentro de popups */
.leaflet-popup-content b {
  color: #8B3A5D; /* Color institucional */
}

/* Punta triangular del popup */
.leaflet-popup-tip {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid #8B3A5D;
}

/* ==================== LEAFLET CONTROLS CUSTOM / PERSONALIZACIÓN DE CONTROLES LEAFLET ==================== */
/* Botones de zoom de Leaflet */
.leaflet-control-zoom a {
  color: #8B3A5D !important; /* Color institucional */
  border-radius: 6px !important;
  border: 2px solid #8B3A5D !important;
  font-weight: 700 !important;
}

/* Hover en botones de zoom */
.leaflet-control-zoom a:hover {
  background: #8B3A5D !important;
  color: white !important;
}

/* Contenedor de controles de Leaflet */
.leaflet-bar {
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

/* Línea de escala de Leaflet */
.leaflet-control-scale-line {
  border-radius: 4px;
  border: 2px solid #8B3A5D; /* Color institucional */
  color: #8B3A5D;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.95);
}

/* ==================== RESPONSIVE / DISEÑO RESPONSIVO ==================== */

/* ==================== MODALES DE AVISO DE PRIVACIDAD E INSTRUCCIONES ==================== */
/* Overlay oscuro detrás del modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
}

/* Clase para mostrar el modal */
.modal-overlay.show {
  display: flex;
}

/* Contenedor del contenido del modal */
.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 550px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: modalSlideIn 0.3s ease;
}

/* Animación de entrada del modal */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botón de cerrar (X) */
.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 1;
}

.modal-close-btn:hover {
  background: rgba(139, 58, 93, 0.1);
  color: #8B3A5D;
}

/* Encabezado del modal */
.modal-header {
  background: linear-gradient(135deg, #8B3A5D 0%, #6B2A4D 100%);
  color: white;
  padding: 25px 30px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.modal-header i {
  font-size: 28px;
}

.modal-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

/* Cuerpo del modal */
.modal-body {
  padding: 25px 30px;
  color: #444;
  line-height: 1.7;
}

.modal-body p {
  margin-bottom: 15px;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

/* Item de instrucción */
.instruction-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 18px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #8B3A5D;
}

.instruction-item:last-child {
  margin-bottom: 0;
}

.instruction-item i {
  color: #8B3A5D;
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.instruction-item div {
  font-size: 14px;
}

.instruction-item strong {
  color: #8B3A5D;
}

/* Pie del modal */
.modal-footer {
  padding: 20px 30px;
  background: #f8f9fa;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Botón principal del modal */
.modal-btn {
  background: linear-gradient(135deg, #8B3A5D 0%, #6B2A4D 100%);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 58, 93, 0.4);
}

/* Botón secundario (Omitir) */
.modal-btn-secondary {
  background: transparent;
  color: #666;
  border: 2px solid #ddd;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-btn-secondary:hover {
  border-color: #8B3A5D;
  color: #8B3A5D;
}

/* Tablets y pantallas medianas (hasta 768px) */
@media (max-width: 768px) {
  /* Header más compacto */
  header {
    height: 100px;
    padding: 0;
  }

  .header-content {
    padding: 10px 15px;
  }

  /* Logo más pequeño en tablets */
  .logo-box {
    width: 90px; /* Tamaño reducido para tablets */
    height: 90px;
  }

  /* Espacio entre logo y título reducido */
  .logo-section {
    gap: 15px;
  }

  /* Títulos más pequeños */
  .title-section h1 {
    font-size: 20px;
  }

  .title-section p {
    font-size: 12px;
  }

  .header-logo-right {
    width: 60px;
    height: 60px;
    padding: 3px;
  }

  .header-logo-right i {
    font-size: 30px;
  }

  /* Barra de búsqueda en posición absoluta */
  .search-bar {
    top: 130px;
    left: 20px;
    width: calc(100% - 40px);
  }

  /* Panel lateral ocupa más ancho */
  .side-panel {
    width: calc(100% - 40px);
    max-height: 280px;
    top: 190px;
  }

  /* Panel de leyenda ajustado */
  .legend-panel {
    width: calc(100% - 40px);
    max-height: 220px;
  }

  /* Controles más cercanos al borde */
  .map-controls {
    right: 15px;
    gap: 8px;
    top: 130px;
  }

  /* Botones más pequeños */
  .control-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  /* Selector de mapa base más compacto */
  .basemap-selector {
    right: 75px;
    min-width: 170px;
  }

  /* Mapa ajustado al header */
  #map {
    top: 100px;
  }
}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
  /* Logo aún más pequeño en móviles */
  .logo-box {
    width: 70px;
    height: 70px;
  }

  /* Espacio mínimo entre logo y título */
  .logo-section {
    gap: 12px;
  }

  /* Títulos aún más pequeños */
  .title-section h1 {
    font-size: 16px;
  }

  /* Oculta subtítulo en móviles */
  .title-section p {
    display: none;
  }

  /* Logo oculto en móviles muy pequeños */
  .header-logo-right {
    display: none;
  }

  /* Barra de búsqueda en móviles */
  .search-bar {
    top: 110px;
    left: 10px;
    width: calc(100% - 20px);
  }

  /* Paneles casi borde a borde */
  .side-panel,
  .legend-panel {
    width: calc(100% - 20px);
    left: 10px;
  }

  /* Controles pegados al borde */
  .map-controls {
    right: 10px;
  }
}

/* ==================== ETIQUETAS DE POLÍGONOS ==================== */
/* Estilos para las etiquetas de texto sobre los polígonos */
.polygon-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.polygon-label div {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ==================== CONTADOR DE VISITAS ==================== */
/* Widget de contador de visitas - estilo institucional */
.visit-counter {
  position: absolute;
  bottom: 25px;
  right: 50px; /* Esquina inferior derecha */
  background: linear-gradient(135deg, #8B3A5D 0%, #6B2A4D 100%);
  border-radius: 10px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(139, 58, 93, 0.4);
  z-index: 1000;
  border: 2px solid #C9A876;
  transition: all 0.3s ease;
}

.visit-counter:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 58, 93, 0.5);
}

.counter-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9A876;
  font-size: 16px;
}

.counter-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.counter-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.counter-number {
  font-size: 18px;
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Responsive - mover contador en móviles */
@media (max-width: 768px) {
  .visit-counter {
    right: 10px;
    bottom: 80px;
    padding: 8px 12px;
  }
  
  .counter-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  
  .counter-number {
    font-size: 16px;
  }
}