/* ===== MAP.CSS - Leaflet map, popups, tooltips, legend ===== */

#map { height: 500px; border-radius: 8px; margin-bottom: 15px; z-index: 1; background: #e9e9e9; }

/* Force Leaflet divIcon SVG visibility and prevent global CSS height/width collapse */
.leaflet-marker-icon svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* District labels */
.district-label {
  font-weight: 700; font-size: 13px; color: var(--primary);
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  background: 0 0 !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important;
}
.district-label-hover {
  font-weight: 700; font-size: 13px; color: #fff; background: #1a5276 !important;
  border: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  padding: 4px 10px !important; border-radius: 4px !important;
}
.district-label-hover .leaflet-tooltip-content { color: #fff !important; }
.district-label-hover::before { display: none !important; }

/* Circuito labels */
.circuito-label {
  font-weight: 700; font-size: 12px; color: #6a1b9a;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  background: 0 0 !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important;
}
.circuito-label-hover {
  font-weight: 700; font-size: 13px; color: #fff; background: #6a1b9a !important;
  border: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  padding: 4px 10px !important; border-radius: 4px !important;
}
.circuito-label-hover .leaflet-tooltip-content { color: #fff !important; }
.circuito-label-hover::before { display: none !important; }

/* Barrio hover tooltip */
.barrio-label-hover {
  font-weight: 700; font-size: 13px; color: #fff; background: #c0392b !important;
  border: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  padding: 4px 10px !important; border-radius: 4px !important;
}
.barrio-label-hover .leaflet-tooltip-content { color: #fff !important; }
.barrio-label-hover::before { display: none !important; }

/* Point/shape labels */
.point-id-label {
  background: #2c3e50 !important; border: none !important; border-radius: 4px !important;
  color: #fff !important; font-weight: 600 !important; font-size: 11px !important;
  padding: 2px 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
.shape-label {
  background: #2c3e50 !important; color: #fff !important; font-weight: 700 !important;
  font-size: 11px !important; padding: 2px 6px !important; border-radius: 3px !important; border: 0 !important;
}
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before { display: none !important; }

/* Legend */
.legend-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #555; }
.legend-item svg { flex-shrink: 0; }

/* Popups */
.popup-data { font-family: var(--font); font-size: 12px; width: 100%; max-width: 320px; min-width: 200px; box-sizing: border-box; }
.popup-header { font-weight: 700; color: var(--primary); font-size: 14px; padding: 0 0 6px; border-bottom: 2px solid var(--primary); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.popup-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid #eee; gap: 8px; }
.popup-row:last-child { border-bottom: none; }
.popup-label { font-weight: 600; color: #555; min-width: 85px; flex-shrink: 0; font-size: 11px; }
.popup-value { color: var(--text); word-break: break-word; overflow-wrap: break-word; font-size: 12px; flex: 1; text-align: right; }
.popup-select { font-size: 11px !important; padding: 3px 6px !important; border-radius: 4px !important; border: 1px solid var(--accent) !important; background: #f4f8ff !important; color: var(--primary) !important; font-weight: 600 !important; max-width: 100% !important; box-sizing: border-box !important; cursor: pointer; }
.leaflet-popup-content-wrapper { border-radius: 12px !important; padding: 0 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important; }
.leaflet-popup-content { margin: 10px 14px !important; max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; min-width: 180px; }

/* Overlay badges */
.overlay-badge {
  display: inline-flex; align-items: center; gap: 4px; background: var(--success); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 12px;
}
.overlay-badge .remove { cursor: pointer; font-weight: 700; margin-left: 2px; }

/* ===== Animated Map Icon Markers ===== */

/* Drop-in animation for all markers */
@keyframes marker-drop {
  0% { transform: translateY(-30px) scale(0.6); opacity: 0; }
  60% { transform: translateY(4px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.map-icon-animated { animation: marker-drop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Semaphore lights blinking */
@keyframes semaphore-blink {
  0%, 33% { fill: #ef5350; }
  34%, 66% { fill: #fdd835; }
  67%, 100% { fill: #66bb6a; }
}
.icon-semaphore .light-active { animation: semaphore-blink 3s infinite; }

/* Bounce for bus/transport */
@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.icon-bus { animation: icon-bounce 2s ease-in-out infinite; }

/* Tree sway */
@keyframes icon-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}
.icon-tree { animation: icon-sway 4s ease-in-out infinite; transform-origin: bottom center; }

/* Recycle spin */
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.icon-recycle { animation: icon-spin 8s linear infinite; transform-origin: center; }

/* Pulse for attention (basurales, alert) */
@keyframes icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}
.icon-pulse { animation: icon-pulse 2s ease-in-out infinite; }

/* Glow for lights */
@keyframes icon-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}
.icon-glow { animation: icon-glow 2.5s ease-in-out infinite; }

/* Stroke draw for roads */
@keyframes stroke-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.icon-road-line { stroke-dasharray: 40; animation: stroke-draw 2s linear infinite; }

/* Scale pulse for parks */
@keyframes icon-scale-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.icon-scale-pulse { animation: icon-scale-pulse 3s ease-in-out infinite; }

/* Hue shift for art */
@keyframes hue-shift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.icon-art { animation: hue-shift 10s linear infinite; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .map-icon-animated,
  .icon-semaphore .light-active,
  .icon-bus, .icon-tree, .icon-recycle, .icon-pulse,
  .icon-glow, .icon-road-line, .icon-scale-pulse, .icon-art {
    animation: none !important;
  }
}

/* Responsive map */
@media (max-width: 768px) {
  #map { height: 420px; }
  .popup-data { max-width: 280px; }
}
@media (max-width: 480px) {
  #map { height: 380px; }
  .popup-data { max-width: calc(100vw - 60px); min-width: 190px; font-size: 11px; }
  .popup-row { padding: 3px 0; gap: 4px; }
  .popup-label { min-width: 75px; font-size: 11px; }
  .popup-value { font-size: 11px; }
  .leaflet-popup-content { margin: 8px 10px !important; min-width: 160px; max-height: 50vh; }
}

/* ===== Suggestions Autocomplete & Draw Mode Buttons ===== */
.suggestions-container {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 6px 6px;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.suggestion-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  text-align: left;
  transition: background 0.15s ease;
}
.suggestion-item:hover {
  background: #f1f3f5;
}
.suggestion-item strong {
  display: block;
  color: var(--primary);
  font-weight: 600;
}
.suggestion-item small {
  color: var(--text-light);
  font-size: 11px;
}
.draw-mode-btn.active {
  background-color: var(--success) !important;
  color: white !important;
  border-color: var(--success) !important;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(40,167,69,0.3);
}
.draw-mode-btn:not(.active) {
  background-color: #e9ecef !important;
  color: #495057 !important;
}
.draw-mode-btn:not(.active):hover {
  background-color: #dee2e6 !important;
}
#btn-cancel-draw:hover {
  background-color: #c82333 !important;
}
#btn-finish-draw:hover {
  background-color: #218838 !important;
}

/* Beautiful custom Leaflet popup close button styling */
.leaflet-popup-close-button {
  background-color: #f8f9fa !important;
  color: #555 !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  text-align: center !important;
  top: 8px !important;
  right: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  transition: all var(--transition) !important;
  border: 1px solid var(--border-dark) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.leaflet-popup-close-button:hover {
  background-color: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
  transform: scale(1.05);
}
.leaflet-popup-close-button span {
  position: relative;
  top: -1px;
}