/* Los valores visuales vienen de tokens.css (design tokens del ERP). */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-primary); background: var(--surface-page); }

#mapa { z-index: 1; }
.marker-cluster-small { background-color: var(--color-info-light) !important; }
.marker-cluster-small div { background-color: var(--color-primary-400) !important; }
.marker-cluster-medium { background-color: rgba(89, 37, 130, 0.35) !important; }
.marker-cluster-medium div { background-color: var(--color-primary-500) !important; }
.marker-cluster-large { background-color: rgba(58, 21, 84, 0.4) !important; }
.marker-cluster-large div { background-color: var(--color-primary-700) !important; }
.marker-cluster { background-clip: padding-box; border-radius: 20px; }
.marker-cluster div { width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; text-align: center; border-radius: 15px; font: 600 12px var(--font-sans); color: #fff; display: flex; align-items: center; justify-content: center; }
.leaflet-popup-content-wrapper { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
.leaflet-popup-content { margin: 12px 16px !important; font-family: var(--font-sans); font-size: var(--text-sm); }

.leaflet-control-layers { border-radius: var(--radius-lg) !important; border: none !important; box-shadow: var(--shadow-md) !important; font-family: var(--font-sans); }
.leaflet-control-layers-base label, .leaflet-control-layers-overlays label { font-size: 12px !important; }

.dark .leaflet-control-layers { background: var(--surface-overlay) !important; color: var(--text-primary) !important; }
.dark .leaflet-popup-content-wrapper { background: var(--surface-overlay) !important; color: var(--text-primary) !important; }
.dark .leaflet-popup-tip { background: var(--surface-overlay) !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }

@media (max-width: 1023px) {
    main { padding: 1rem !important; }
}

#measureOverlay {
    background: transparent;
}