/* Versión sobre mapa real. Hereda tokens y panel de ../css/app.css. */
.map { position: fixed; inset: 0; }
.maplibregl-ctrl-attrib { font: 11px var(--font-ui); }

/* Pines como marcadores del mapa (anclados abajo, sobre el punto exacto). */
.mpin { display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.mpin::after { content: ''; width: 2px; height: 12px; background: var(--pin); border-radius: 1px; }
.mpin-badge {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px;
  border-radius: 16px; background: var(--pin); color: #fff; border: 2.5px solid #fff;
  font: 600 13px/1 var(--font-ui); box-shadow: 0 6px 14px -4px rgba(0, 27, 46, 0.6);
  animation: pin-pop 380ms cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms) backwards;
}
@keyframes pin-pop { from { transform: scale(0); } }
.mpin-label {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 9px; background: rgba(251, 249, 244, 0.96); color: #1C232E;
  font: 500 13px/1.2 var(--font-ui); white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0, 27, 46, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 150ms;
}
.mpin:hover .mpin-label, .mpin:focus-visible .mpin-label, .mpin.is-selected .mpin-label, .show-labels .mpin:not(.is-dim) .mpin-label { opacity: 1; }
.mpin.is-selected { z-index: 5; }
.mpin.is-selected .mpin-badge { transform: scale(1.22); box-shadow: 0 0 0 4px rgba(212, 169, 92, 0.6), 0 8px 18px -4px rgba(0, 27, 46, 0.6); }
.mpin.is-dim { opacity: 0.2; pointer-events: none; }

/* Acciones de la ficha */
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: var(--radius-ctrl); font: 600 15px var(--font-ui); cursor: pointer;
}
.btn-primary { border: 0; background: #1A73E8; color: #fff; }
.btn-primary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost { border: 1px solid var(--line); background: transparent; color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); }
.tool-accent { color: #1A73E8; }

/* Ruta */
.route-chip {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 300002;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  padding: 8px 8px 8px 14px; border-radius: 16px; background: #1A73E8; color: #fff;
  font: 500 15px/1.3 var(--font-ui); box-shadow: var(--shadow);
}
.route-chip > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route-chip button { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; }
.route-chip button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 761px) { .route-chip { left: calc(50% + 196px); } }

/* Paseante: punto azul con cono de dirección, como en los mapas de teléfono. */
.walker { width: 96px; height: 96px; position: relative; pointer-events: none; }
.walker-cone {
  position: absolute; left: 50%; bottom: 50%; width: 96px; height: 84px; transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%, rgba(26, 115, 232, 0.45), rgba(26, 115, 232, 0));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.walker-dot {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: #1A73E8; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: walker-pulse 2s infinite;
}
@keyframes walker-pulse { to { box-shadow: 0 0 0 16px rgba(26, 115, 232, 0), 0 2px 6px rgba(0, 0, 0, 0.35); } }

.walkbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300002; display: none; gap: 8px; }
.walk-btn { height: 46px; padding: 0 18px; border-radius: 23px; border: 0; background: var(--surface); color: var(--text); font: 600 15px var(--font-ui); box-shadow: var(--shadow); cursor: pointer; }
.walk-recenter { display: none; background: #1A73E8; color: #fff; }
.is-walking .walkbar { display: flex; }
.is-walking.is-unfollowed .walk-recenter { display: block; }
.is-walking .panel, .is-walking .detail { display: none; }

.joystick {
  position: fixed; right: 28px; bottom: 96px; z-index: 300002; width: 132px; height: 132px; border-radius: 50%;
  background: rgba(251, 249, 244, 0.72); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow);
  display: none; place-items: center; touch-action: none; backdrop-filter: blur(6px);
}
.joy-knob { width: 56px; height: 56px; border-radius: 50%; background: #1A73E8; box-shadow: 0 6px 16px -4px rgba(26, 115, 232, 0.8); pointer-events: none; }
.is-walking-virtual .joystick { display: grid; }

@media (min-width: 761px) {
  .is-walking .walkbar { left: 50%; }
  .tools { top: auto; }
}
@media (max-width: 760px) {
  .joystick { right: 50%; transform: translateX(50%); bottom: 90px; width: 124px; height: 124px; }
  .walkbar { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .route-chip { top: 72px; font-size: 14px; }
  .mpin-badge { min-width: 28px; height: 28px; font-size: 12px; }
}
.route-chip[hidden] { display: none; }
.show-labels .mpin.label-hidden:not(.is-selected):not(:hover) .mpin-label { opacity: 0; }

/* Vista plano: el render del plano oficial cubre la pantalla, encima del mapa. */
.plano { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--navy, #001B2E); touch-action: none; cursor: grab; }
.plano:active { cursor: grabbing; }
.plano-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.plano-pins { position: absolute; inset: 0; pointer-events: none; }
.plano-pins .mpin { position: absolute; left: 0; top: 0; pointer-events: auto; }
.plano.is-easing .plano-img, .plano.is-easing .mpin { transition: transform 650ms cubic-bezier(.22, 1, .36, 1); }
.is-plano .walkbar, .is-plano .joystick, .is-plano .route-chip, .is-plano [data-tool="night"], .is-plano [data-tool="style"] { display: none; }
@media (prefers-reduced-motion: reduce) { .plano.is-easing .plano-img, .plano.is-easing .mpin { transition: none; } }
/* En la vista plano los nombres se ven solo al elegir o pasar por encima: juntos se pisan. */
.is-plano.show-labels .plano-pins .mpin:not(.is-selected):not(:hover) .mpin-label { opacity: 0; }

/* Lejos, los 30 pines se amontonan: se muestra un solo marcador del resort que acerca al tocarlo. */
.is-far .mpin { visibility: hidden !important; pointer-events: none; }

.resort-pin { display: none; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 0; border-radius: 999px;
  background: #062B73; color: #fff; font: 600 15px/1.1 var(--font-ui); cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(0, 27, 46, 0.7); }
.resort-pin img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 3px; object-fit: cover; object-position: 2px 50%; }
.resort-pin small { display: block; font-weight: 400; font-size: 12px; opacity: 0.85; }
.is-far .resort-pin { display: flex; }
/* Chips: el borde se desvanece para indicar que la fila se desliza. */
.chips { mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); }
/* Créditos del mapa: discretos y fuera de la barra de herramientas. */
.maplibregl-ctrl-bottom-right { right: 80px; }
.maplibregl-ctrl-attrib { background: rgba(251, 249, 244, 0.75) !important; color: #3C4450; }
@media (max-width: 760px) { .maplibregl-ctrl-bottom-right { right: 0; } }