#mapa-leaflet,
#mapa-leaflet-drone {
  width: 100%;
  height: 560px;
  z-index: 0;
  background: var(--color-inverse-surface);
}

.map-marker {
  color: var(--color-brand-bright);
  filter: drop-shadow(
    0 4px 8px color-mix(in srgb, var(--color-inverse-bg) 30%, transparent)
  );
}

.map-marker__primary {
  fill: currentColor;
}

.map-marker__structure {
  fill: var(--color-inverse-bg);
  stroke: var(--color-inverse-bg);
}

.map-marker__highlight {
  fill: var(--color-inverse-ink);
}

.map-marker__shadow {
  fill: color-mix(in srgb, var(--color-inverse-bg) 28%, transparent);
}

.map-marker__line {
  stroke: var(--color-inverse-bg);
}

.solar-map-pin {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  transform: rotate(-45deg);
  border: 2px solid var(--color-inverse-ink);
  border-radius: var(--radius-control) var(--radius-control)
    var(--radius-control) var(--space-1);
  background: var(--color-brand-bright);
  box-shadow: 0 5px 14px
    color-mix(in srgb, var(--color-inverse-bg) 38%, transparent);
  color: var(--color-inverse-bg);
}

.solar-map-pin__glyph {
  width: 24px;
  height: 22px;
  transform: rotate(45deg);
  background: currentColor;
  mask: url("../icons/solar-panel.svg") center / contain no-repeat;
  -webkit-mask: url("../icons/solar-panel.svg") center / contain no-repeat;
}

.map-legend__mark--solar {
  width: 24px;
  height: 20px;
  border: 0;
  background: var(--color-brand-bright);
  mask: url("../icons/solar-panel.svg") center / contain no-repeat;
  -webkit-mask: url("../icons/solar-panel.svg") center / contain no-repeat;
}

.leaflet-control-attribution,
.leaflet-control-zoom a {
  font-family: var(--font-sans);
}

.leaflet-bar {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  box-shadow: var(--shadow-floating) !important;
}

.leaflet-control-zoom a {
  width: 44px !important;
  height: 44px !important;
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  font-size: 22px !important;
  line-height: 44px !important;
}

.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus-visible {
  background: var(--color-surface-tonal) !important;
  color: var(--color-action) !important;
}

.leaflet-control-zoom a:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--color-focus) !important;
  outline-offset: -3px;
}

.leaflet-control-attribution {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 var(--space-1) !important;
  background: color-mix(
    in srgb,
    var(--color-surface) 90%,
    transparent
  ) !important;
  color: var(--color-muted) !important;
  font-size: 11px;
}

.leaflet-control-attribution a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-action) !important;
  font-weight: 700;
}

@media (max-width: 640px) {
  #mapa-leaflet,
  #mapa-leaflet-drone {
    height: 460px;
  }
}