/* Cancha GPS — Vista Previa inmersiva: mapa full-screen + panel de distancias.
   Ocultamos el header global (nav.js) para ocupar toda la pantalla; la propia barra
   de la pantalla tiene su botón "volver". */

#siteHeader,
#navScrim,
#tabBar {
  display: none !important;
}

.gps-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0b0f0d;
}
/* Arranque: la pantalla nace con el markup del mapa, pero hasta que gps.js resuelve la sesión y
   decide la vista (selector o mapa) no se muestra ninguna — antes se veía el mapa en negro por un
   instante al entrar al selector. Fondo claro porque el selector es la vista más probable. */
.gps-screen.is-boot {
  background: var(--bg-page, #f6f7f5);
}
.gps-screen.is-boot > * {
  display: none;
}
/* En la pantalla de setup (selección de cancha + tee) usamos fondo claro, como en
   "cargar vuelta" (el pane light se monta dentro de .gps-screen). */
.gps-screen.gps-setup {
  background: var(--bg-page, #f6f7f5);
  color: var(--text, #1a1a1a);
}

/* Controles flotantes sobre el mapa (sin barra superior: máximo foco en el hoyo). */
.gps-fab {
  position: absolute;
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(11, 15, 13, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
/* Chip compacto del hoyo actual (reemplaza el título): arriba-centro, mínimo. */
.gps-holechip {
  position: absolute;
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(11, 15, 13, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* Navegación de hoyo: dos botones laterales (anterior / siguiente). */
.gps-navbtn {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 62px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(11, 15, 13, 0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.gps-navbtn--prev { left: 8px; }
.gps-navbtn--next { right: 8px; }
.gps-navbtn:active { transform: translateY(-50%) scale(0.94); }
.gps-navbtn:disabled { opacity: 0.28; pointer-events: none; }

.gps-map {
  flex: 1;
  width: 100%;
  min-height: 0;
}
.gps-map .maplibregl-ctrl-attrib {
  font-size: 9px;
}

/* Rail de distancias: columna angosta pegada a la derecha, debajo de la topbar. No tapa el
   hoyo (el mapa queda libre) y crece hacia abajo con scroll si hay muchos hazards. */
.gps-rail {
  position: absolute;
  right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  width: 106px;
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 74px);
  overflow-y: auto;
  background: rgba(11, 15, 13, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  padding: 10px 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
/* Selector de salida (tee) — solo visible si el hoyo tiene 2+ tees */
.gps-tees {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gps-tees[hidden] {
  display: none;
}
.gps-tees__lbl {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-right: 2px;
}
.gps-tee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.gps-tee.is-on {
  background: #1e7b34;
  border-color: #2f9e63;
}
.gps-tee__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  display: inline-block;
}

.gps-dist__green {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1px;
}
.gps-dist__green > div span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}
.gps-dist__green > div b {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.05;
}
.gps-dist__green > .big {
  margin: 1px 0;
}
.gps-dist__green > .big b {
  font-size: 34px;
  color: #74e3a3;
}
/* "juega como" (plays-like por elevación) bajo el Centro */
.gps-dist__plays {
  font-size: 10px;
  line-height: 1;
  color: #fbbf24;
  font-weight: 700;
  margin-top: 1px;
}
.gps-dist__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.gps-dist__pin span {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  color: #f9a8a8;
}
.gps-dist__pin b {
  font-size: 20px;
  font-weight: 600;
}
.gps-dist__haz {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gps-dist__haz li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 3px 8px;
}
.gps-dist__haz li b {
  font-weight: 600;
}
.gps-dist__unit {
  text-align: center;
  font-size: 10px;
  opacity: 0.5;
  margin: 6px 0 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gps-dist__none {
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  margin: 4px 0;
}
/* Aviso de tee sin mapear en el hoyo (C111): las distancias que siguen debajo son de OTRO tee de
   geometría (fallback), nunca sin decirlo. */
.gps-dist__warn {
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  padding: 4px 6px;
  margin: 0 0 8px;
}
/* Instrucción de medición: píldora sutil abajo-centro. Se oculta sola al medir (queda vacía).
   Va POR ENCIMA de la atribución del mapa (.maplibregl-ctrl-attrib, abajo a la derecha): a 12 px
   del borde quedaba tapada y en el iPhone solo se leía "Tocá". La atribución es obligatoria del
   proveedor, así que se corre la píldora, no la atribución. */
.gps-hint {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  text-align: center;
  font-size: 11px;
  color: #fff;
  opacity: 0.9;
  background: rgba(11, 15, 13, 0.7);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.gps-hint:empty {
  display: none;
}

/* Etiquetas de medición on-map (markers HTML) */
.gps-meas-lbl {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #111827;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.gps-meas-lbl--tee {
  background: #fbbf24;
}
.gps-meas-lbl--pin {
  background: #f87171;
  color: #fff;
}
/* Píldora de resultado sobre el punto tocado: verde marca (juega + palo sugerido) */
.gps-meas-lbl--punto {
  background: #1e7b34;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.gps-meas-lbl--punto b {
  font-weight: 700;
}

/* Cotas de "carry" a hazards (bunker/agua) — marker HTML minimalista: una línea FINA y única que
   sale del borde del hazard hacia el jugador + el número (Jost, upright). Sin punto ancla, sin doble
   trazo, sin caja. Contraste por sombra suave. */
.gps-haz {
  /* absolute (no relative): fuera del flujo, inmune a otros markers en flujo (bug 2026-07-10) */
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gps-haz__leader {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.gps-haz__num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Selector de cancha (sin ?cancha) */
.gps-pick {
  max-width: 460px;
  margin: 40px auto;
  padding: 0 16px;
  color: #fff;
}
.gps-pick h2 {
  text-align: center;
  margin-bottom: 16px;
}
.gps-pick__item {
  display: block;
  margin: 8px 0;
  text-align: left;
}

/* ============================================================================
   Setup por pasos (país → cancha → tee). Los panes viven apilados dentro de
   .cgp-setup (el .cargar-pane de 100dvh); el activo lleva .is-on y los ya
   recorridos .is-back (salen hacia la izquierda). El carrusel, los tees y el
   banner reusan las clases de golfreal.css; acá solo el contenedor de pasos
   y las cards de país (la bandera como imagen).
   ============================================================================ */
.cgp-setup {
  position: relative;
  overflow: hidden;
}
.cgp-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(22px);
  transition: opacity 0.28s var(--ease-out, ease-out), transform 0.28s var(--ease-out, ease-out),
    visibility 0s linear 0.28s;
}
.cgp-step.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.28s var(--ease-out, ease-out), transform 0.28s var(--ease-out, ease-out);
}
.cgp-step.is-back {
  transform: translateX(-22px);
}
@media (prefers-reduced-motion: reduce) {
  .cgp-step {
    transition: none;
    transform: none;
  }
}

/* La hoja "Buscar cancha" (.selc*) vive en golfreal.css: la comparte este setup con el de
   "cargar vuelta" (ambas páginas cargan golfreal.css). Reemplazó al paso de país. */

/* Paso de tee: el cuerpo y el CTA suben con fade al aterrizar la portada (como cg-conf). */
.cgp-step--tee .cgp-tee__body,
.cgp-step--tee .cargar-foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out, ease-out) 0.16s, transform 0.5s var(--ease-out, ease-out) 0.16s;
}
.cgp-step--tee .cargar-foot { transition-delay: 0.24s; }
.cgp-step--tee.is-on .cgp-tee__body,
.cgp-step--tee.is-on .cargar-foot {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cgp-step--tee .cgp-tee__body,
  .cgp-step--tee .cargar-foot {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ==========================================================================
   FICHA de cancha sin mapeo (ficha.js) — destino alternativo al tee+mapa.
   ========================================================================== */
/* El hero es el cg-banner compartido con el paso de tee (mismo vuelo FLIP): acá solo el cuerpo. */
.cgf-body { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); }

.cgf-stats { display: flex; background: var(--surface, #fff); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); }
.cgf-st { flex: 1; text-align: center; padding: var(--space-3) 4px; }
.cgf-st + .cgf-st { border-left: var(--border-width) solid var(--border); }
.cgf-st .v { display: block; font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--brand-700); }
.cgf-st .l { font-size: 10.5px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-light); }

.cgf-card { background: var(--surface, #fff); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.cgf-card h4 { margin: 0 0 var(--space-2); font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted); }
.cgf-tees { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cgf-tees th { text-align: left; color: var(--text-light); font-weight: var(--fw-medium);
  padding: 2px 6px; border-bottom: var(--border-width) solid var(--border); }
.cgf-tees td { padding: 4px 6px; border-bottom: 1px solid var(--surface-inset, #f4f6f2); }
.cgf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px;
  border: 1px solid rgba(0, 0, 0, 0.28); } /* V69: tee blanco invisible sobre la card blanca sin este borde */

/* Tarjeta en bloques de 9 (patrón del scorecard del detalle): SIN scroll lateral. */
.cgf-nine { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cgf-nine th, .cgf-nine td { text-align: center; padding: 3px 0; font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.cgf-nine .lab { text-align: left; width: 34px; color: var(--text-light); font-weight: var(--fw-medium); }
.cgf-nine .tot { font-weight: var(--fw-bold); color: var(--brand-700); }
.cgf-nine tr + tr th, .cgf-nine tr + tr td { border-top: 1px solid var(--surface-inset, #f4f6f2); }
.cgf-nine + .cgf-nine { margin-top: var(--space-2); }
.cgf-nine__yd td { font-size: 11px; color: var(--text-muted); }
.cgf-nine__yd .tot { font-size: 10.5px; }

.cgf-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.cgf-actions .btn { width: 100%; }

/* Selección de tee en la ficha: la fila elegida manda las yardas de la tarjeta. */
.cgf-tees__row { cursor: pointer; }
.cgf-tees__row.is-sel td { background: var(--brand-100, #d4e9dc); }
.cgf-tees__row.is-sel td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-weight: var(--fw-semibold); }
.cgf-tees__row.is-sel td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cgf-hint { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--text-light); }