/* Scoped to the workshop map; all map coordinates and native controls stay intact. */
#ubicacion .location-map {
  --map-surface: #0f2533;
  --map-border: #355366;
  --map-heading-start: #193c4d;
  --map-heading-end: #102a3a;
  --map-ink: #f3f7fa;
  --map-muted: #b2c9d8;
  --map-accent: #ff783f;
  --map-icon: #ff9463;
  --map-icon-border: #ff783f5c;
  --map-icon-fill: #ff783f14;
  --map-control-fill: #193544;
  --map-control-border: #6b8b9e;
  --map-control-hover: #254758;
  --map-route-ink: #ffd2bb;
  --map-route-fill: #ff783f12;
  --map-route-border: #ff783f80;
  --map-route-hover: #ff783f26;
  --map-divider: #ffffff1a;
  --map-focus: #ff9463;
  border: 1px solid var(--map-border);
  border-radius: 22px;
  background: var(--map-surface);
  color: var(--map-ink);
  color-scheme: dark;
  box-shadow: 0 24px 60px #00000038, 0 0 0 5px #ffffff02;
}

#ubicacion .location-map-heading {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 88px;
  padding: 18px 22px;
  border-top: 3px solid var(--map-accent);
  border-bottom: 1px solid var(--map-divider);
  background: linear-gradient(115deg, var(--map-heading-start), var(--map-heading-end) 75%);
  letter-spacing: normal;
}

#ubicacion .location-map-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#ubicacion .location-map-brand > svg {
  box-sizing: content-box;
  width: 21px;
  height: 24px;
  padding: 11px 12px;
  flex-shrink: 0;
  border: 1px solid var(--map-icon-border);
  border-radius: 14px;
  background: var(--map-icon-fill);
  stroke: var(--map-icon);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

#ubicacion .location-map-eyebrow {
  display: block;
  color: var(--map-muted);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 1.1px;
}

#ubicacion .location-map-name {
  margin: 5px 0 0;
  color: var(--map-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

#ubicacion .location-map-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--map-control-border);
  border-radius: 10px;
  color: var(--map-ink);
  background: var(--map-control-fill);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

#ubicacion .location-map-theme input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--map-accent);
  cursor: pointer;
}

#ubicacion .location-map-theme:focus-within {
  outline: 2px solid var(--map-focus);
  outline-offset: 4px;
}

#ubicacion .location-map-frame {
  height: 410px;
  border-block: 1px solid var(--map-divider);
  background: #e6e6df;
}

/* The embed remains interactive. Filtering changes its palette, never its geography.
   Older browsers without :has retain the original, readable light map. */
@supports selector(:has(*)) {
  #ubicacion .location-map:has(#location-map-light:checked) {
    --map-surface: #f4f7f9;
    --map-border: #b8cbd8;
    --map-heading-start: #ffffff;
    --map-heading-end: #edf4f8;
    --map-ink: #142e3f;
    --map-muted: #496477;
    --map-accent: #c64718;
    --map-icon: #b63e15;
    --map-icon-border: #c6471845;
    --map-icon-fill: #fff0e8;
    --map-control-fill: #ffffff;
    --map-control-border: #9eafb9;
    --map-control-hover: #e5eef4;
    --map-route-ink: #a43813;
    --map-route-fill: #fff1e9;
    --map-route-border: #c95e3670;
    --map-route-hover: #ffe0ce;
    --map-divider: #cad7df;
    --map-focus: #b63e15;
    color-scheme: light;
  }

  #ubicacion .location-map:not(:has(#location-map-light:checked)) .location-map-frame .leaflet-tile-pane {
    filter: invert(.92) grayscale(.85) contrast(.92);
  }
}

/* The marker is a geographic layer, outside the tile palette filter. */
#ubicacion #workshop-map{position:relative;z-index:0;isolation:isolate;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
#ubicacion #workshop-map[data-map-theme=dark]{background:#172832}
#ubicacion #workshop-map[data-map-theme=light]{background:#e6e6df}
#ubicacion .workshop-marker{background:none;border:0;filter:drop-shadow(0 3px 3px #0008)}
#ubicacion .workshop-marker svg{display:block;overflow:visible}
#ubicacion .leaflet-control-zoom a{color:#202b32;background:#fff;font-size:24px;min-width:40px;min-height:40px;line-height:40px}
#ubicacion .leaflet-control-attribution{color:#253844;background:#fffffff0;font-size:10px}
#ubicacion .leaflet-control-attribution a{color:#164e73}
#ubicacion .leaflet-popup-content{font-size:13px;line-height:1.7;color:#202b32}
#ubicacion .leaflet-container a:focus-visible{outline:3px solid #b63e15;outline-offset:2px}
#workshop-map-status{margin:0;background:var(--map-surface);color:var(--map-muted);font-size:12px;line-height:1.6;padding:12px 20px}
#workshop-map-status:empty{display:none}

#ubicacion .location-map-footer {
  gap: 12px 18px;
  padding: 14px 20px;
  border-top: 1px solid var(--map-divider);
  background: var(--map-surface);
  color: var(--map-muted);
  font-size: 11px;
}

#ubicacion .location-map-footer > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

#ubicacion .location-map-footer > a:last-child {
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--map-route-border);
  border-radius: 10px;
  color: var(--map-route-ink);
  background: var(--map-route-fill);
  font-size: 12px;
}

#ubicacion .location-map-footer > a:last-child span {
  color: var(--map-icon);
}

#ubicacion .location-map-footer > a:focus-visible {
  outline: 2px solid var(--map-focus);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  #ubicacion .location-map-theme:hover {
    border-color: var(--map-icon);
    background: var(--map-control-hover);
  }

  #ubicacion .location-map-footer > a:hover {
    color: var(--map-icon);
  }

  #ubicacion .location-map-footer > a:last-child:hover {
    border-color: var(--map-icon);
    background: var(--map-route-hover);
    color: var(--map-route-ink);
  }
}

@media (max-width: 760px) {
  #ubicacion .location-map-frame { height: 360px; }
}

@media (max-width: 480px) {
  #ubicacion .location-map-heading { gap: 14px; padding: 16px; }
  #ubicacion .location-map-brand { flex: 1 1 100%; }
  #ubicacion .location-map-theme { justify-content: flex-start; }
  #ubicacion .location-map-frame { height: 310px; }
  #ubicacion .location-map-footer { padding: 12px 16px; }
  #ubicacion .location-map-footer > a:first-child { flex: 1 1 100%; }
}