/**
 * IUSLEAD — Motion premium: hover, transiciones, mapa
 */

.card,
.kpi {
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .card:hover,
  .kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
  }
}

.view {
  transition: opacity var(--duration-normal) var(--ease-out);
}

.dock-more-panel {
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

/* Leaflet — popups alineados al panel */
.leaflet-container {
  background: var(--bg-base) !important;
  font-family: var(--font-ui) !important;
}

.leaflet-tile-pane {
  filter: brightness(0.9) contrast(1.08) saturate(0.88);
}

.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--elevation-3) !important;
}

.leaflet-popup-tip {
  background: var(--bg-card) !important;
}

.leaflet-popup-content {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  margin: 10px 12px !important;
}

.leaflet-container a.leaflet-popup-close-button {
  color: var(--text-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .kpi,
  .view,
  .dock-more-panel,
  .dock-item,
  .mob-nav-item {
    transition: none !important;
  }

  .card:hover,
  .kpi:hover {
    transform: none !important;
  }
}