:root {
  --fondo-a: #efece5;
  --fondo-b: #d8d4cb;
  --resalte: #ffd400;
  --resalte-suave: rgba(255, 214, 0, 0.16);
  --boton: rgba(255, 255, 255, 0.88);
  --boton-tinta: #1f2a2e;
  --sombra: 0 2px 10px rgba(0, 0, 0, 0.22);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo-b);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#plano {
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, var(--fondo-a) 0%, var(--fondo-b) 100%);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#mapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

#mapa.arrastrando { cursor: grabbing; }

#mapa image { image-rendering: auto; }

.zona {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.zona:hover {
  fill: var(--resalte-suave);
  stroke: var(--resalte);
  filter: drop-shadow(0 0 4px rgba(255, 212, 0, 0.95)) drop-shadow(0 0 10px rgba(255, 212, 0, 0.6));
}

.zona.oculta { display: none; }

#perspectiva {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

#perspectiva img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#plano.modo-3d #mapa { display: none; }
#plano.modo-3d #perspectiva { display: flex; }
#plano.modo-3d #atras { display: none; }
#plano.modo-3d .ico-3d { display: none; }
#plano.modo-plano .ico-plano { display: none; }

.boton {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--boton);
  color: var(--boton-tinta);
  box-shadow: var(--sombra);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.boton svg { width: 24px; height: 24px; fill: currentColor; }
.boton:hover { transform: scale(1.06); }
.boton:active { transform: scale(0.96); }
.boton:focus-visible { outline: 3px solid var(--resalte); outline-offset: 2px; }

#atras { top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
#modo3d { bottom: calc(12px + env(safe-area-inset-bottom)); right: calc(12px + env(safe-area-inset-right)); }

.oculto { opacity: 0; pointer-events: none; }

#etiqueta {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(31, 42, 46, 0.82);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--sombra);
  pointer-events: none;
  transition: opacity 0.18s ease;
}