.view-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #dce2d4;
  border-radius: 7px;
  background: #f0f2e9;
}
.view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 4px;
  background: transparent;
  color: #7b8971;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}
.view-button svg { width: 14px; height: 14px; }
.view-button[aria-pressed="true"] {
  color: var(--green);
  background: #fffef7;
  box-shadow: 0 1px 4px #23442d10;
}
.view-button:hover { color: var(--green); }
.map-explorer { min-width: 0; }
.map-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(290px, 1fr);
  border: 1px solid #dce2d3;
  border-radius: 10px;
  overflow: hidden;
  background: #fffef7;
}
.map-canvas-wrap {
  position: relative;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border-right: 1px solid #dce2d3;
}
.destinations-map {
  height: 620px;
  width: 100%;
  background: #e7ecdd;
  font-family: var(--sans);
  z-index: 0;
}
.destinations-map:focus-visible { outline: 3px solid #d28b39; outline-offset: -3px; }
.map-reset {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 850;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d7dfcf;
  border-radius: 5px;
  padding: 9px 12px;
  box-shadow: 0 2px 9px #203f2910;
  background: #fffef7f5;
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
}
.map-reset svg { width: 14px; height: 14px; }
.map-reset:hover { background: #fff; }
.map-status {
  position: absolute;
  left: 13px;
  bottom: 35px;
  z-index: 850;
  max-width: calc(100% - 26px);
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #d6dfcb;
  border-radius: 5px;
  box-shadow: 0 2px 8px #2344280d;
  background: #fffef7f5;
  color: #52694a;
  font-size: 10px;
  line-height: 1.7;
}
.map-detail-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 620px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c1ceb2 transparent;
  background: #fffef7;
}
#map-selection {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.map-select-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  padding: 10px 20px;
  color: #78896c;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  border-bottom: 1px solid #e5e8dc;
}
#map-destination-select {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid #dbe2d1;
  border-radius: 4px;
  background: var(--cream);
  color: var(--green);
  font-size: 11px;
  line-height: 1.5;
}
.map-detail-image {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  flex-shrink: 0;
  background: #dce5cf;
}
.map-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 12px 21px 13px;
}
.map-region {
  margin: 0 0 5px;
  color: #839075;
  font-size: 8px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.5;
}
#map-destination-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.6px;
  line-height: 1.2;
}
.map-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex-shrink: 0;
  margin: 7px 0 10px;
  color: #7a896f;
  font-size: 10px;
  line-height: 1.7;
}
.map-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  border-bottom: 1px solid #e0e6d5;
}
.map-tab {
  flex: 1;
  min-width: 0;
  padding: 10px 3px 9px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: #849077;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.map-tab[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); font-weight: 650; }
.map-tab:hover { color: var(--green); background: #f4f6ee; }
.map-topic-panel {
  flex: 1;
  min-height: 145px;
  padding: 12px 2px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c1ceb2 transparent;
}
.map-highlights, .map-advice { margin: 0; padding: 0 0 0 15px; }
.map-highlights li, .map-advice li {
  padding-left: 3px;
  margin-bottom: 7px;
  color: #647958;
  font-size: 10px;
  line-height: 1.8;
}
.map-highlights li::marker, .map-advice li::marker { color: #a7b995; }
.map-highlights { padding: 0; list-style: none; }
.map-highlights li { display: flex; align-items: flex-start; gap: 9px; padding-left: 0; }
.map-highlights li svg { width: 16px; height: 16px; margin-top: 2px; color: #829870; }
.map-activities { margin: 0; padding: 0; list-style: none; }
.map-activities li { margin-bottom: 12px; }
.map-activities strong { color: #4e6c43; font-size: 10px; font-weight: 600; }
.map-activities p { margin: 3px 0 0; color: #839075; font-size: 10px; line-height: 1.8; }
.map-editorial-note { margin: 11px 0 6px; color: #929c86; font-size: 8px; line-height: 1.7; }
.map-source { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0 5px; color: #647d52; font-size: 9px; line-height: 1.7; }
.map-source svg { width: 11px; height: 11px; }
.map-panel-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e4e8da;
}
.map-panel-actions .button { flex: 1; gap: 6px; min-width: 0; padding: 10px 8px; font-size: 10px; }
.map-panel-actions .button svg { width: 13px; height: 13px; }
.button-outline { border: 1px solid #cbd7bf; background: transparent; color: var(--green); }
.button-outline:hover { background: #eff4e7; }
.map-footer { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px 20px; padding: 13px 2px 0; color: #919a85; font-size: 9px; line-height: 1.8; }
.map-footer p { margin: 0; flex: 1; min-width: 180px; }
.map-footer a { text-decoration: underline; text-underline-offset: 3px; color: #7c8c6d; }
.map-footer > div, .map-footer > span { display: flex; gap: 8px; flex-wrap: wrap; }
.map-no-results { display: grid; flex: 1; place-content: center; min-height: 230px; margin: 0; padding: 35px 25px; text-align: center; background: #f1f4e9; color: #788b68; font-size: 12px; line-height: 1.8; }
.map-no-results h3 { font: 500 25px/1.3 var(--serif); margin: 0 0 12px; }
.map-no-results p { margin: 0; font-size: 12px; line-height: 1.8; }
.destinations-map .leaflet-control-zoom { border: 1px solid #d7dfcf; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 9px #203f2910; margin: 13px 0 0 13px; }
.destinations-map .leaflet-control-zoom a { width: 31px; height: 31px; line-height: 30px; background: #fffef7f5; color: var(--green); font-weight: 400; }
.destinations-map .leaflet-control-zoom a:hover { background: #fff; }
.destinations-map .leaflet-control-attribution { background: #fffef7ed; color: #6d7d61; font-size: 9px; padding: 2px 6px; }
.destinations-map .leaflet-control-attribution a { color: #526d45; text-decoration: underline; text-underline-offset: 2px; }
.destination-pin { border: 0; background: transparent; }
.pin-core { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 3px solid #fffdf5; border-radius: 50%; background: var(--green); color: #fffdf5; box-shadow: 0 2px 8px #173f3c50; font: 600 10px/1 var(--sans); transition: background .2s, transform .2s; }
.destination-pin.is-selected .pin-core { background: #bd7346; transform: scale(1.15); box-shadow: 0 0 0 5px #d39d5c2b, 0 2px 9px #173f3c40; }
.destination-pin:hover .pin-core { transform: scale(1.15); }
.destination-pin:focus-visible { outline: 3px solid #d28b39; outline-offset: 5px; border-radius: 50%; }
.leaflet-tooltip.destination-tooltip { padding: 5px 9px; border: 1px solid #dce3d1; border-radius: 4px; background: #fffef7f5; color: var(--green); box-shadow: 0 2px 10px #294b2c13; font: 600 10px/1.5 var(--sans); }
.leaflet-tooltip-top.destination-tooltip:before { border-top-color: #fffef7; }
@media (max-width: 1150px) {
  .map-workspace { grid-template-columns: minmax(0, 1.5fr) minmax(285px, 1fr); }
  .map-panel-body { padding-inline: 17px; }
  .map-select-label { padding-inline: 17px; }
  #map-destination-title { font-size: 25px; }
}
@media (max-width: 850px) {
  .map-workspace { grid-template-columns: minmax(0, 1fr); border-radius: 8px; }
  .map-canvas-wrap { border-right: 0; border-bottom: 1px solid #dce2d3; }
  .destinations-map { height: 350px; }
  .map-detail-panel { height: auto; overflow: visible; }
  #map-selection { flex: none; min-height: auto; }
  .map-select-label { padding: 15px 20px; gap: 6px; font-size: 10px; }
  #map-destination-select { font-size: 12px; padding: 9px 10px; }
  .map-detail-image { height: 155px; }
  .map-panel-body { padding: 21px 21px 22px; flex: none; }
  #map-destination-title { font-size: 27px; }
  .map-region { font-size: 8px; }
  .map-description { display: block; overflow: visible; font-size: 12px; margin: 10px 0 16px; }
  .map-tab { font-size: 11px; padding: 11px 5px; }
  .map-topic-panel { flex: none; max-height: none; min-height: 130px; overflow: visible; padding-top: 17px; padding-bottom: 12px; }
  .map-highlights li, .map-advice li, .map-activities strong, .map-activities p { font-size: 11px; }
  .map-highlights li, .map-advice li { margin-bottom: 9px; line-height: 1.9; }
  .map-activities li { margin-bottom: 15px; }
  .map-activities p { line-height: 1.9; }
  .map-editorial-note { font-size: 9px; }
  .map-source { font-size: 10px; }
  .map-panel-actions { padding-top: 17px; gap: 10px; }
  .map-panel-actions .button { font-size: 11px; padding: 12px 10px; }
  .map-footer { font-size: 9px; padding-top: 12px; gap: 6px; }
  .map-footer p { min-width: 100%; }
  .map-reset { font-size: 9px; }
  .destinations-map .leaflet-control-attribution { font-size: 8px; }
  .view-button { padding: 7px 10px; font-size: 9px; }
}
@media (max-width: 380px) {
  .map-panel-body { padding-inline: 17px; }
  .map-select-label { padding-inline: 17px; }
  #map-destination-title { font-size: 26px; }
  .map-tab { font-size: 10px; padding-inline: 2px; }
  .map-panel-actions .button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pin-core { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.map-back { position: absolute; top: 13px; left: 13px; z-index: 850; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; background: #fffef7f5; border: 1px solid #d7dfcf; border-radius: 5px; font-size: 10px; font-weight: 600; color: var(--green); box-shadow: 0 2px 9px #203f2910; }
.map-back svg { width: 13px; height: 13px; transform: rotate(225deg); }
.map-poi-select-label { background: #edf2e5; padding-block: 9px; }
.map-poi-select-label select { padding: 6px 8px; width: 100%; border: 1px solid #d7dfcd; background: #fffef7; border-radius: 4px; font-size: 11px; color: var(--green); }
.map-poi-back { align-self: flex-start; background: transparent; padding: 0; margin: 0 0 13px; color: #6e835d; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.poi-list { list-style: none; margin: 0; padding: 0; }
.poi-list li + li { border-top: 1px solid #e8ebdf; }
.poi-list-button { display: grid; grid-template-columns: 28px 1fr 14px; gap: 8px; align-items: center; text-align: left; background: transparent; width: 100%; padding: 9px 1px; border-radius: 4px; }
.poi-list-button:hover { background: #f0f4e7; }
.poi-list-button strong { display: block; font-size: 11px; font-weight: 600; color: #3d5e37; line-height: 1.5; }
.poi-list-button small { display: block; font-size: 9px; color: #849278; line-height: 1.6; margin-top: 3px; }
.poi-list-button > svg { width: 13px; height: 13px; color: #7e946c; }
.poi-list-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--poi-color,var(--green)); background: #e9eedf; }
.poi-list-icon svg { width: 16px; height: 16px; }
.poi-category-patrimonio { --poi-color: #a7643e; }
.poi-category-museo { --poi-color: #496f88; }
.poi-category-naturaleza { --poi-color: #597e44; }
.poi-category-playa { --poi-color: #947323; }
.poi-category-cultura { --poi-color: #3c7d71; }
.poi-category-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: #edf1e4; color: var(--poi-color,var(--green)); border-radius: 4px; font-size: 9px; }
.poi-category-tag svg { width: 13px; height: 13px; }
.poi-description { font-size: 11px; line-height: 1.9; color: #6e8062; margin: 12px 0; }
.poi-pin .pin-core, .poi-pin.is-selected .pin-core { background: var(--poi-color,var(--green)); }
.poi-pin .pin-core svg { width: 14px; height: 14px; }
.poi-pin.is-selected .pin-core { box-shadow: 0 0 0 5px #d39d5c66, 0 3px 10px #173f3c55; transform: scale(1.2); }
@media (max-width: 850px) {
  .map-poi-select-label { padding-block: 12px; }
  .map-poi-select-label select { font-size: 12px; padding: 9px 8px; }
  .poi-list-button { padding: 11px 1px; }
  .poi-list-button strong, .poi-description { font-size: 12px; }
  .poi-list-button small { font-size: 10px; }
  .map-poi-back { font-size: 11px; }
}
@media (max-width: 450px) {
  .map-reset { max-width: calc(100% - 122px); right: 10px; gap: 4px; padding: 9px 8px; font-size: 9px; }
  .map-back { top: 13px; left: 10px; padding: 9px 10px; font-size: 9px; }
}
