:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --panel-background: rgba(255, 255, 255, 0.98);
  --text-primary: #1b2633;
  --text-secondary: #566474;
  --accent: #126782;
  --shadow: 0 18px 42px rgba(18, 35, 48, 0.22);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; }
html, body { overflow: hidden; overscroll-behavior: none; }
body { background: #dce7ea; }
button, select { font: inherit; }
button { touch-action: manipulation; }

#map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.maplibregl-map,
.maplibregl-canvas-container,
.maplibregl-canvas { width: 100%; height: 100%; }
.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-attrib { max-width: min(70vw, 520px); font-size: 10px; }
.maplibregl-ctrl-group { overflow: hidden; border-radius: 9px; }
.maplibregl-ctrl-top-right {
  top: calc(10px + var(--safe-top));
  right: calc(10px + var(--safe-right));
}
.maplibregl-ctrl-bottom-left {
  left: calc(8px + var(--safe-left));
  bottom: calc(7px + var(--safe-bottom));
}
.maplibregl-ctrl-bottom-right {
  right: calc(8px + var(--safe-right));
  bottom: calc(7px + var(--safe-bottom));
}

.top-toolbar {
  position: fixed;
  z-index: 20;
  top: calc(10px + var(--safe-top));
  left: calc(10px + var(--safe-left));
  display: flex;
  align-items: stretch;
  gap: 7px;
  max-width: calc(100vw - 190px - var(--safe-left) - var(--safe-right));
  pointer-events: auto;
}

.tool-button,
.basemap-control {
  min-height: 40px;
  border: 1px solid rgba(20, 42, 52, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.17);
  backdrop-filter: blur(8px);
}

.tool-button {
  flex: 0 0 42px;
  width: 42px;
  padding: 0;
  color: #18313d;
  font-size: 22px;
  font-weight: 750;
  cursor: pointer;
}

.tool-button:hover,
.tool-button:focus-visible { color: var(--accent); background: #f1f8fa; }
.tool-button:focus-visible,
.basemap-control:focus-within { outline: 3px solid rgba(18, 103, 130, 0.22); outline-offset: 1px; }
.tool-button:disabled { opacity: 0.45; cursor: not-allowed; }

.basemap-control {
  display: flex;
  min-width: 158px;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 11px;
  color: #273b47;
  font-size: 12px;
  font-weight: 750;
}

.basemap-control label { white-space: nowrap; }
.basemap-control select {
  width: 112px;
  min-width: 0;
  border: 0;
  color: #18313d;
  background: transparent;
  cursor: pointer;
  outline: none;
  font-weight: 700;
}

.coordinates {
  position: fixed;
  z-index: 20;
  left: calc(10px + var(--safe-left));
  bottom: calc(39px + var(--safe-bottom));
  min-width: 210px;
  padding: 7px 10px;
  border: 1px solid rgba(20, 42, 52, 0.16);
  border-radius: 7px;
  color: #18313d;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  pointer-events: none;
  backdrop-filter: blur(7px);
}

html[data-basemap="satellite"] .coordinates,
html[data-basemap="hybrid"] .coordinates {
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(12, 25, 32, 0.76);
}

.poi-marker {
  width: 44px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 5px 5px rgba(22, 31, 36, 0.32));
  transition: transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.poi-marker img { display: block; width: 44px; height: 44px; object-fit: contain; }
.poi-marker:hover,
.poi-marker:focus-visible { transform: translateY(-3px) scale(1.06); outline: none; }

.maplibregl-popup { z-index: 12; }
.maplibregl-popup-content {
  width: min(390px, calc(100vw - 64px));
  max-height: min(680px, calc(100dvh - 100px));
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  background: var(--panel-background);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}

.maplibregl-popup-close-button {
  z-index: 2;
  top: 9px;
  right: 9px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #17232e;
  background: rgba(255, 255, 255, 0.92);
  font-size: 26px;
  line-height: 31px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16);
}

.poi-card { color: var(--text-primary); }
.poi-card__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: #dbe3e6;
}
.poi-card__gallery--single { grid-template-columns: 1fr; }
.poi-card__image-button {
  min-height: 130px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #dbe3e6;
  cursor: zoom-in;
}
.poi-card__gallery--single .poi-card__image-button { min-height: 210px; }
.poi-card__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform 180ms ease;
}
.poi-card__image-button:hover .poi-card__image,
.poi-card__image-button:focus-visible .poi-card__image { transform: scale(1.035); }
.poi-card__body { padding: 20px 21px 22px; }
.poi-card__category {
  display: inline-flex;
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.poi-card__title { margin: 0; padding-right: 30px; font-size: 23px; line-height: 1.15; }
.poi-card__subtitle { margin: 8px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.45; }
.poi-card__description { margin: 16px 0 0; color: #2f3d4a; font-size: 15px; line-height: 1.62; white-space: pre-line; }
.poi-card__link { display: inline-flex; margin-top: 16px; color: #075b75; font-weight: 700; text-decoration: none; }
.poi-card__link:hover,
.poi-card__link:focus-visible { text-decoration: underline; }

.status {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: calc(28px + var(--safe-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(680px, calc(100vw - 32px - var(--safe-left) - var(--safe-right)));
  padding: 12px 14px 12px 17px;
  border: 1px solid rgba(25, 56, 69, 0.16);
  border-radius: 14px;
  color: #18313d;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 35px rgba(31, 48, 57, 0.2);
  transform: translateX(-50%);
  font-size: 14px;
}
.status--hidden { display: none; }
.status__button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.lightbox {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(48px, 1fr) minmax(0, 1200px) minmax(48px, 1fr);
  place-items: center;
  padding: calc(26px + var(--safe-top)) calc(26px + var(--safe-right)) calc(26px + var(--safe-bottom)) calc(26px + var(--safe-left));
  background: rgba(4, 11, 17, 0.93);
  backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: calc(100dvh - 52px);
  margin: 0;
}
.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 110px);
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}
.lightbox__caption { min-height: 28px; padding-top: 13px; color: #f0f5f6; font-size: 14px; text-align: center; }
.lightbox__close,
.lightbox__nav {
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { background: rgba(255, 255, 255, 0.23); }
.lightbox__close {
  position: absolute;
  top: calc(18px + var(--safe-top));
  right: calc(18px + var(--safe-right));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 34px;
  line-height: 42px;
}
.lightbox__nav { width: 52px; height: 72px; border-radius: 12px; font-size: 54px; line-height: 58px; }
.lightbox__nav--previous { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }

@media (max-width: 900px) {
  .top-toolbar { max-width: calc(100vw - 156px - var(--safe-left) - var(--safe-right)); }
  .maplibregl-ctrl-top-right { top: calc(60px + var(--safe-top)); }
  .coordinates { bottom: calc(50px + var(--safe-bottom)); }
}

@media (max-width: 680px) {
  .top-toolbar {
    right: calc(10px + var(--safe-right));
    width: auto;
    max-width: none;
    gap: 5px;
  }
  .tool-button { flex-basis: 40px; width: 40px; min-height: 40px; }
  .basemap-control { flex: 1 1 auto; min-width: 0; padding-left: 9px; }
  .basemap-control label { display: none; }
  .basemap-control select { width: 100%; min-width: 108px; }
  .maplibregl-ctrl-top-right { top: calc(61px + var(--safe-top)); }
  .maplibregl-popup-content {
    width: min(430px, calc(100vw - 24px));
    max-height: calc(100dvh - 92px - var(--safe-top) - var(--safe-bottom));
    border-radius: 14px;
  }
  .poi-card__gallery { grid-template-columns: 1fr; }
  .poi-card__image-button,
  .poi-card__gallery--single .poi-card__image-button { min-height: clamp(150px, 33dvh, 230px); }
  .poi-card__body { padding: 17px 18px 20px; }
  .poi-card__title { font-size: 21px; }
  .poi-card__description { font-size: 14px; line-height: 1.56; }
  .status {
    width: calc(100vw - 20px - var(--safe-left) - var(--safe-right));
    max-width: none;
    bottom: calc(12px + var(--safe-bottom));
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 12px;
    text-align: center;
  }
  .lightbox {
    grid-template-columns: 1fr;
    padding: calc(68px + var(--safe-top)) calc(10px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(10px + var(--safe-left));
  }
  .lightbox__figure { grid-column: 1; max-height: 100%; }
  .lightbox__image { max-height: calc(100dvh - 135px - var(--safe-top) - var(--safe-bottom)); }
  .lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 62px;
    transform: translateY(-50%);
    border-radius: 10px;
    font-size: 44px;
  }
  .lightbox__nav--previous { left: calc(8px + var(--safe-left)); }
  .lightbox__nav--next { right: calc(8px + var(--safe-right)); }
}

@media (max-width: 430px) {
  .poi-marker { width: 40px; height: 44px; }
  .poi-marker img { width: 40px; height: 40px; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl { margin-right: 6px; }
  .coordinates { display: none; }
  .maplibregl-ctrl-scale { max-width: 100px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .top-toolbar { top: calc(6px + var(--safe-top)); left: calc(6px + var(--safe-left)); right: auto; }
  .maplibregl-ctrl-top-right { top: calc(6px + var(--safe-top)); }
  .maplibregl-popup-content { max-height: calc(100dvh - 20px); }
  .poi-card__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poi-card__image-button,
  .poi-card__gallery--single .poi-card__image-button { min-height: 115px; }
  .poi-card__body { padding: 14px 17px 17px; }
  .poi-card__description { margin-top: 10px; }
}

@media (hover: none) and (pointer: coarse) {
  .coordinates { display: none; }
  .tool-button,
  .basemap-control { min-height: 44px; }
  .maplibregl-ctrl button { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Mensaje visible cuando una fotografía no existe o no se ha publicado. */
.poi-card__image-button--error {
  min-height: 112px;
  cursor: default;
  background: rgba(18, 103, 130, 0.08);
  border: 1px dashed rgba(18, 103, 130, 0.4);
}

.poi-card__image-error {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 112px;
  padding: 1rem;
  color: #35515c;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

/*
 * Ficha de información contenida dentro del iframe.
 * No se ancla al marcador: así nunca puede quedar recortada por los bordes
 * del Web Frame de 3DVista.
 */
.poi-panel-layer {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    max(12px, calc(12px + var(--safe-top)))
    max(12px, calc(12px + var(--safe-right)))
    max(12px, calc(12px + var(--safe-bottom)))
    max(12px, calc(12px + var(--safe-left)));
  overflow: hidden;
  isolation: isolate;
}

.poi-panel-layer[hidden] { display: none; }

.poi-panel-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(5, 17, 24, 0.42);
  backdrop-filter: blur(2px);
  cursor: default;
}

.poi-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: min(520px, 100%);
  max-width: 100%;
  max-height: calc(100vh - 24px);
  max-height: min(760px, calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)));
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 42, 52, 0.16);
  border-radius: 18px;
  background: var(--panel-background);
  box-shadow: 0 24px 70px rgba(4, 17, 24, 0.38);
}

.poi-panel__content {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.poi-panel__close {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  border: 1px solid rgba(20, 42, 52, 0.12);
  border-radius: 50%;
  color: #17232e;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
}

.poi-panel__close:hover,
.poi-panel__close:focus-visible {
  color: var(--accent);
  background: #fff;
  outline: 3px solid rgba(18, 103, 130, 0.22);
  outline-offset: 1px;
}

.poi-panel .poi-card__gallery--single .poi-card__image-button {
  min-height: clamp(180px, 36dvh, 300px);
}

.poi-panel .poi-card__title { padding-right: 44px; }

/* En Web Frames estrechos se convierte en una ficha inferior de ancho completo. */
@media (max-width: 680px) {
  .poi-panel-layer {
    place-items: end center;
    padding:
      max(6px, var(--safe-top))
      max(6px, var(--safe-right))
      max(6px, var(--safe-bottom))
      max(6px, var(--safe-left));
  }

  .poi-panel {
    width: 100%;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom));
    border-radius: 18px 18px 8px 8px;
  }

  .poi-panel .poi-card__gallery { grid-template-columns: 1fr; }
  .poi-panel .poi-card__image-button,
  .poi-panel .poi-card__gallery--single .poi-card__image-button {
    min-height: clamp(150px, 31dvh, 235px);
  }

  .poi-panel .poi-card__body { padding: 17px 18px 21px; }
}

/* Los Web Frames panorámicos de poca altura necesitan una ficha más horizontal. */
@media (max-height: 560px) and (orientation: landscape) {
  .poi-panel-layer {
    place-items: center;
    padding: 5px max(6px, var(--safe-right)) 5px max(6px, var(--safe-left));
  }

  .poi-panel {
    width: min(720px, 100%);
    max-height: calc(100vh - 10px);
    max-height: calc(100dvh - 10px);
    border-radius: 12px;
  }

  .poi-panel .poi-card__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .poi-panel .poi-card__image-button,
  .poi-panel .poi-card__gallery--single .poi-card__image-button {
    min-height: 118px;
    max-height: 38dvh;
  }

  .poi-panel .poi-card__body { padding: 14px 17px 18px; }
  .poi-panel .poi-card__title { font-size: 20px; }
  .poi-panel .poi-card__description { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  .poi-panel__close { top: 7px; right: 7px; width: 36px; height: 36px; }
}

@media (max-width: 360px) {
  .poi-panel .poi-card__body { padding: 15px 14px 18px; }
  .poi-panel .poi-card__title { font-size: 19px; }
  .poi-panel .poi-card__description { font-size: 13.5px; }
  .poi-panel__close { top: 7px; right: 7px; width: 36px; height: 36px; }
}