/* ============================================================================
   golfreal.css — estilos propios de la sección "Golf real".
   El resto sale del design system global (../styles/main.css): .scorecard,
   .perf-card, .modal, .field, .tee-card, .badge, .empty-state, .info-grid…
   ============================================================================ */

/* Canchas: carrusel deslizable (foto de portada) -------------------------- */
.course-carousel {
  position: relative;
}
.course-carousel__track {
  display: flex;
  align-items: flex-start; /* una card expandida no estira de alto a las vecinas */
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: var(--space-1);
  scrollbar-width: none; /* Firefox */
}
.course-carousel__track::-webkit-scrollbar {
  display: none; /* WebKit: ocultamos la barra, se navega con swipe/dots/flechas */
}
.course-slide {
  scroll-snap-align: center;
  flex: 0 0 86%; /* deja "asomar" la cancha siguiente para invitar al swipe */
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.course-carousel.is-single .course-slide {
  flex-basis: 100%; /* una sola cancha: ocupa todo el ancho (sin peek) */
}
.course-slide__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Foto como <img> (no background) para poder lazy-load + fallback (onerror) al original
   cuando la versión optimizada del CDN no carga. Llena la portada por detrás del degradado. */
.course-slide__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
.course-slide__cover::after {
  /* Degradado para que el texto sobre la foto siempre sea legible. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.72) 100%);
}
.course-slide__badges {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.course-slide__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-4);
  /* deja libre la esquina inferior derecha para el botón "Ver más" superpuesto */
  padding-right: 6.5rem;
  color: #fff;
}
/* Logo de la cancha (campo `portada`): chico, arriba del nombre. Chip blanco para que sea
   legible sobre cualquier foto. */
.course-logo {
  display: block;
  height: 38px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  margin-bottom: var(--space-2);
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.course-slide__name {
  margin: 0;
  color: #fff;
  font-size: var(--fs-h4);
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  /* Hasta DOS líneas y recién ahí recorta con "…". En una sola línea, en el iPhone se comía medio
     nombre: "Club del Lago — Circuito Original" entraba en 229 px de los 271 que necesitaba. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-slide__meta {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-slide__foot {
  display: none; /* el botón "Ver más" ahora va sobre la imagen */
}
/* "Ver más" sobre la foto (abajo a la derecha, sobre el degradado). */
.course-slide__more {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
}

/* Indicadores (dots).
   El punto se ve de 8 px, pero el botón mide 44 (el mínimo de --tap-min): antes el área de toque
   era el punto mismo y en el iPhone había que acertarle a 8×8 px para cambiar de cancha. El punto
   se dibuja con ::before, así el botón puede crecer sin que crezca el punto. */
.course-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 0;
}
.course-dot {
  width: var(--tap-min, 44px);
  height: var(--tap-min, 44px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden; /* el scale(1.3) del punto activo desbordaba la caja */
}
.course-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong, #cbd5e1);
  transition: background var(--transition-normal), transform var(--transition-normal);
}
.course-dot.is-active::before {
  background: var(--brand);
  transform: scale(1.3);
}

/* Flechas (desktop). En móvil se navega con el dedo, así que se ocultan. */
.course-carousel__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--border-width) solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text, #0f172a);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
  transition: opacity var(--transition-normal);
}
.course-carousel__nav.prev { left: var(--space-2); }
.course-carousel__nav.next { right: var(--space-2); }
.course-carousel__nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .course-carousel__nav { display: none; }
}

/* Panel desplegable ("Ver más"): expande la card hacia abajo con animación gradual.
   Truco grid-template-rows 0fr→1fr: anima la altura hasta el contenido sin JS de medición. */
.course-slide__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}
.course-slide.is-open .course-slide__detail {
  grid-template-rows: 1fr;
}
.course-slide__detail-clip {
  min-height: 0;
  overflow: hidden;
}
.course-slide__detail-body {
  padding: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
.course-slide__detail-body > :first-child {
  margin-top: 0;
}
.course-detail__desc {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.course-detail__h {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-h4);
}
@media (prefers-reduced-motion: reduce) {
  .course-slide__detail {
    transition: none;
  }
}

.tee-rating {
  font-size: var(--fs-2xs, 0.7rem);
  color: var(--text-muted, #666);
  margin-top: 2px;
}

/* ===== "Mis vueltas": lista agrupada por mes, con filtros =====
   Filas de bajo alto para que un historial largo (300+ vueltas) se recorra de un scroll: cada una
   lleva cancha + punto del tee + fecha arriba, stats en tinta tenue abajo, y el score grande con
   el vs par de superíndice. Sin cards individuales: las separa una hairline. */
:root {
  /* Anillo del punto de tee. Al pasar a tema oscuro, redefinir acá con un tinte claro. */
  --rv-ring: rgba(32, 40, 31, 0.28);
}
#roundsList {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rv-filters {
  display: flex;
  gap: var(--space-2);
}
.rv-sel {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-2, 8px);
  background: var(--card, #fff);
  color: var(--text-1, #333);
  font: inherit;
  font-size: 0.8rem;
}
.rv-list {
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-1, #fff);
}
/* C54: el recorte de esquinas NO puede salir de `overflow: hidden` en `.rv-list` — cualquier
   ancestro con overflow distinto de `visible` entre un elemento `position: sticky` y su contenedor
   de scroll real (acá, la página) desconecta el sticky. `.rv-list` no tiene scroll propio, así que
   ese overflow solo estaba ahí para las esquinas: se redondean directo los bordes expuestos. */
.rv-list > .rv-gh:first-child {
  border-top-left-radius: var(--radius-md, 12px);
  border-top-right-radius: var(--radius-md, 12px);
}
/* Encabezado de mes: queda fijo mientras se scrollea su tramo. */
.rv-gh {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  background: var(--surface-2, #f4f3ee);
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.07));
}
.rv-gh__t {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rv-gh__m {
  font-size: 0.7rem;
  color: var(--text-muted, #888);
}
.rv-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 8px var(--space-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  cursor: pointer;
}
.rv-list .rv-row:last-child {
  border-bottom: 0;
  border-bottom-left-radius: var(--radius-md, 12px);
  border-bottom-right-radius: var(--radius-md, 12px);
}
.rv-row:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
}
.rv-row:focus-visible {
  outline: 2px solid var(--brand, #1e7b34);
  outline-offset: -2px;
}
/* C49: feedback inmediato al tocar una fila mientras se trae el detalle (openRoundDetail,
   GolfReal/script.js); pointer-events:none dobla como segunda barrera contra toques repetidos. */
.rv-row.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.rv-main {
  flex: 1;
  min-width: 0;
}
.rv-l1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rv-course {
  font-size: 0.85rem;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Punto del color del tee. El anillo propio es lo que hace visible un tee BLANCO (o celeste
   claro) sobre fondo claro; no es decoración. */
.rv-tee {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px var(--rv-ring, rgba(0, 0, 0, 0.28)) inset,
              0 0 0 1px var(--rv-ring, rgba(0, 0, 0, 0.28));
}
.rv-tee--none {
  background: transparent;
  box-shadow: 0 0 0 1px var(--border, #ddd) inset;
}
.rv-hito {
  flex: none;
  font-size: 0.66rem;
  color: #b8860b;
}
.rv-chip {
  flex: none;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted, #8a8f98);
  background: rgba(138, 143, 152, 0.14);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}
.rv-date {
  margin-left: auto;
  padding-left: 6px;
  font-size: 0.7rem;
  color: var(--text-muted, #9aa79c);
  white-space: nowrap;
}
.rv-l2 {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-l2 > span + span::before {
  content: "·";
  margin: 0 5px;
  color: var(--border, #ddd);
}
.rv-with i {
  font-size: 0.8rem;
  vertical-align: -1px;
}
/* Score protagonista + vs par de superíndice (arriba a la derecha, sin sumar alto a la fila). */
.rv-score {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  flex: none;
  /* Ancho fijo: si no, la fecha de al lado se corre según las cifras del score (4, 37, 154). */
  min-width: 64px;
}
.rv-bruto {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.01em;
}
.rv-vspar {
  min-width: 17px;
  margin-top: 1px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #666);
}
.rv-vspar.under {
  color: var(--brand, #1e7b34);
}
.rv-vspar.over {
  color: #c0392b;
}
.rv-empty,
.rv-tope {
  margin: 0;
  padding: var(--space-3);
  font-size: 0.78rem;
}
.rv-tope {
  padding: 0 var(--space-1);
  text-align: center;
}

.pagination {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-4);
}

/* Grilla editable de la tarjeta (cargar vuelta) */
.hole-grid__hint {
  color: var(--text-muted, #666);
  font-size: var(--fs-sm, 0.875rem);
  margin: var(--space-4) 0 var(--space-2);
}
.hole-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 52vh;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 12px);
  padding: var(--space-2);
}
.hole-row {
  display: grid;
  grid-template-columns: 2.2rem 2.2rem 1fr 3.4rem 3.4rem 3.2rem;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 6px;
  border-radius: 8px;
}
.hole-row:nth-child(odd of .hole-row):not(.hole-row--head) {
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
}
.hole-row--head {
  position: sticky;
  top: -8px;
  background: var(--surface-1, #fff);
  font-size: var(--fs-2xs, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #666);
  font-weight: 600;
  z-index: 1;
}
.hole-row--head span {
  text-align: center;
}
.hole-num {
  font-weight: 700;
  text-align: center;
}
.hole-par {
  text-align: center;
  color: var(--text-muted, #666);
}
.hole-row .hole-golpes {
  font-weight: 700;
}
.hole-row select:disabled {
  opacity: 0.4;
}

/* Footer del form: total en vivo + acciones */
.round-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
.round-form__totals {
  font-size: var(--fs-base, 1rem);
}

@media (max-width: 540px) {
  .hole-row {
    grid-template-columns: 1.8rem 1.8rem 1fr 3rem 3rem 2.8rem;
    gap: 4px;
  }
  .round-form__footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================================
   Carga inmersiva de tarjeta (cargar.js) — overlay full-screen, hoyo por hoyo
   ============================================================================ */
.cargar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1070; /* sobre el nav (--z-modal 1050), debajo de los toasts (--z-toast 1080) */
  display: none;
  background: var(--bg-page, #fafbf8);
  overflow: hidden; /* nada dentro del overlay genera scroll de página */
  overscroll-behavior: contain;
}
/* Mientras la carga está abierta (html.cargar-open, lo setea cargar.js): la página de ATRÁS no
   scrollea ni rebota. En iOS el overflow:hidden del body no frena el gesto — el rubber-band
   arrastra toda la sección ("scroll de fondo" aunque los elementos entren justos); el
   overscroll-behavior:none en la raíz sí lo corta. */
html.cargar-open,
html.cargar-open body {
  overflow: hidden;
  overscroll-behavior: none;
}
/* Los scrollers internos legítimos (acompañantes, revisión) no encadenan el gesto a la página */
.cargar-body {
  overscroll-behavior: contain;
}
.cargar-overlay.is-open {
  display: block;
}
.cargar-screen,
.cargar-pane {
  height: 100dvh;
  container-type: size; /* las medidas fluidas del final del archivo van en cqh (alto del overlay) */
  display: flex;
  flex-direction: column;
}
.cargar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--surface-1, #fff);
}
.cargar-x,
.cargar-card-btn {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text, #1a1a1a);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* En la base, no parcheado pantalla por pantalla (revisión de Task 7+8): esta clase ya se había
     encontrado sin esto dos veces en este mismo rediseño (el botón del editor, la pastilla de
     compromiso) — moverlo acá lo arregla en TODAS las pantallas que usan .cargar-x/.cargar-card-btn
     de una vez, incluida la flecha "Volver" del selector de hoyos. */
  touch-action: manipulation;
}
.cargar-x:hover,
.cargar-card-btn:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
}
.cargar-title {
  font-weight: 700;
  font-size: 1.05rem;
}
.cargar-top__spacer {
  width: 40px;
}
/* La tira de hoyos vive DENTRO del header, debajo de la fila de iconos (headerHoyoHtml,
   renderProgress, renderMatchStep) — el resto de los headers de cargar.js no llevan esta clase y
   siguen siendo una fila única, sin tocar la regla base de `.cargar-top`.
   Con la tira, `.cargar-hole--pbp .cargar-top` mide ~89px, no los "≤56" del presupuesto de la
   Tarea N.7 (comentario "Tiro por tiro SIN SCROLL", más abajo en este archivo — ese número quedó
   desactualizado, no se reescribe para no tocar un bloque de otra tarea). Verificado con un arnés
   real (cargar.js + fb-compat stubeado) en el peor caso conocido —salida de par 4/5, destino
   Bunker (rueda + fila de lado sin responder), "Levanté el hoyo" visible— a 375×667 y 360×640: la
   pantalla entra entera, sin scroll interno (`.cargar-pbp` overflow 0), el pie queda dentro, y
   nada tocable (fuera de la tira, su excepción documentada) mide menos de 44px. El presupuesto
   viejo era conservador por componente; el total tiene margen de sobra. */
.cargar-top--tira { flex-direction: column; align-items: stretch; }
.cargar-top__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* El margen de `.hole-track` (10px + var(--space-5) a los costados) es para su otro hogar, el
   `.hole-hero` del modo Rápido: acá el espaciado vertical ya lo da el `gap` de `.cargar-top`, y los
   costados los da el padding del propio header — para que la tira quede a ras de la fila de
   iconos, no más angosta. */
.cargar-top--tira .hole-track { margin: 0; }
.cargar-thru {
  font-size: var(--fs-sm, 0.9rem);
  color: var(--text-muted, #555);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cargar-thru strong {
  color: var(--brand, #1e7b34);
}
/* SG compacto en el header del hoyo (movido desde la tira de resumen para no scrollear) */
.cargar-sg { font-weight: 700; }
.cargar-sg.sg-pos { color: var(--brand, #1f7a47); }
.cargar-sg.sg-neg { color: var(--error, #c0432f); }
.cargar-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cargar-setup {
  gap: var(--space-2);
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
}
/* Compactado del setup para que el form entre sin scroll (foto de cancha como banner) */
.cargar-setup label { margin-bottom: 2px; font-size: .8rem; line-height: 1.15; }
.cargar-course-car .course-slide__cover { aspect-ratio: 16 / 9; height: auto; min-height: 150px; }
.cargar-course-car .course-carousel__dots { margin-top: var(--space-1); }
/* Carrusel de canchas dentro del cargador: igual al de "Canchas" pero sin "Ver más",
   así que el bloque de info usa el padding normal (no reserva la esquina). */
.cargar-course-car .course-slide__info { padding-right: var(--space-4); }
.cargar-course-car .course-slide { cursor: pointer; }
/* Spacers: que CUALQUIER cancha (incl. la recomendada al abrir) pueda quedar centrada. */
.cargar-course-car .course-carousel__track::before,
.cargar-course-car .course-carousel__track::after { content: ""; flex: 0 0 calc((100% - 86%) / 2); }

/* Carrusel de tees: desliz lateral, el centrado es el elegido; muestra su color. */
.tee-track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 0;
}
.tee-track::-webkit-scrollbar { display: none; }
/* Spacers en los extremos para que CUALQUIER tee (incluido el 1º y el último) pueda
   quedar centrado, igual que el carrusel de canchas. */
/* V12: 73% (antes 62%) — el hueco lateral cuando el tee elegido es el primero/último de la
   lista deja de llamar tanto la atención, sin tocar el scroll-snap ni el centrado por JS. */
.tee-track::before, .tee-track::after { content: ""; flex: 0 0 calc((100% - 73%) / 2); }
.tee-slide {
  scroll-snap-align: center;
  flex: 0 0 73%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  border: 1.5px solid var(--border, rgba(0, 0, 0, 0.14));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-1, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tee-slide.is-sel {
  border-color: var(--brand, #1e7b34);
  box-shadow: 0 0 0 2px rgba(30, 123, 52, 0.16);
}
.tee-slide__chip { width: 100%; height: 16px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.12); }
.tee-slide__name { font-weight: 600; font-size: 0.82rem; }
/* Nombre + marca de género en la MISMA línea (Plan de género, Fase 4): una línea más por slide
   agrandaba el carrusel en casi todas las canchas y el setup tiene que entrar sin scroll. Solo un
   nombre muy largo baja la marca abajo (wrap). */
.tee-slide__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 6px;
}
/* De quién es el rating del tee, cuando el nombre no lo dice o engaña (marcaDeTee, 2026-10-08):
   "Rojo Damas" ya no lleva "Damas". El tee de otro género se puede elegir (no se esconde). Pastilla
   neutra, no ámbar: el ámbar queda para el aviso, que sale recién si se lo elige. */
.tee-slide__marca {
  font-size: 0.68rem; /* el mínimo legible del proyecto (ver .tgl-crit) */
  font-weight: 700;
  line-height: 1.35;
  padding: 0 6px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.14));
  border-radius: var(--radius-pill, 999px);
  color: var(--text-muted, #777);
  white-space: nowrap;
}
.tee-data { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.tee-data__item {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  border-radius: var(--radius-md, 12px);
  padding: 3px 4px;
}
.tee-data__lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #888); }
.tee-data__val { font-weight: 700; font-size: 0.85rem; }
/* Aviso al elegir un tee de otro género: visible y NO bloqueante (la vuelta se guarda igual y
   cuenta para el Índice Azalea, no para el WHS). Ámbar como .pbp-aviso; `[hidden]` explícito
   porque el display:flex del bloque le gana al atributo. */
.tee-aviso {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--space-1) 0 0;
  padding: 6px 8px;
  border-radius: var(--radius-md, 12px);
  background: var(--warning-soft, #f7edd6);
  color: var(--warning-text, #875c12);
  font-size: 12.5px;
  line-height: 1.35;
}
.tee-aviso[hidden] { display: none; }
.tee-aviso .ph { flex: none; margin-top: 1px; font-size: 1rem; }
.cargar-foot {
  padding: var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--surface-1, #fff);
}
.cargar-cta {
  width: 100%;
}
.cargar-nav {
  display: flex;
  gap: var(--space-3);
}
.cargar-nav .btn--outline {
  flex: 0 0 auto;
}
.cargar-nav .cargar-cta {
  flex: 1;
}
/* Footer de "Revisar tarjeta": acciones secundarias en una fila (cada una mitad) y el
   botón Guardar a lo ancho debajo, para que nunca se corte en pantallas angostas. */
.cargar-review-actions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cargar-review-actions .btn {
  flex: 1;
  min-width: 0;
}

/* Selector de método (Rápido / Tiro por tiro) en el setup */
.seg--method { display: flex; width: 100%; }
.seg--method .seg-btn { flex: 1; }
.cargar-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted, #777); }
/* V11: el input de fecha no llevaba ninguna clase del design system y quedaba con el alto nativo
   del navegador (~28-30px en iOS), notablemente más chico que el resto de los campos del setup. */
#cgFecha { min-height: 44px; }

/* ============================================================================
   Setup en 2 pasos: (1) elegir cancha (carrusel centrado + "Confirmar cancha")
   → (2) configurar. La portada de la cancha elegida "vuela" al banner (FLIP) y
   aparecen las opciones. .cg-setup2 es el contexto de posicionamiento del vuelo.
   ============================================================================ */
.cg-setup2 { position: relative; }
.cg-pick, .cg-conf { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cg-pick { z-index: 2; transition: opacity .3s var(--ease-out); }
.cg-conf { z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; }
.cg-setup2.is-conf .cg-pick { opacity: 0; visibility: hidden; pointer-events: none; }
.cg-setup2.is-conf .cg-conf { opacity: 1; visibility: visible; pointer-events: auto; }

/* Paso 1 · elegir cancha (carrusel centrado vertical) */
.cg-pick__stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.cg-pick__head { text-align: center; padding: 0 var(--space-4); }
.cg-step-eyebrow {
  font-size: var(--fs-2xs, .6875rem);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--brand-700, #134d2d);
}
.cg-pick__q { margin: 4px 0 0; font-size: var(--fs-h3, 1.375rem); font-weight: 600; letter-spacing: -.01em; }
/* V33: botón siempre visible al catálogo completo, debajo del carrusel de sugeridas. */
.cg-pick__otra { align-self: center; margin: 0 var(--space-4); min-height: 44px; }

/* Paso 2 · banner de la cancha fija (foto a todo el ancho, sin radio) */
.cg-banner {
  position: relative;
  flex: 0 0 auto;
  height: clamp(150px, 26vh, 216px);
  overflow: hidden;
  background: var(--surface-2);
}
.cg-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.72) 100%);
}
.cg-banner__badges {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  right: var(--space-3);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
}
.cg-banner__x {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-2));
  left: var(--space-2);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(10, 20, 14, 0.34);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.cg-banner__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-4);
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}
.cg-banner__name {
  margin: 0;
  color: #fff; /* explícito: una regla global de h2 pisaría el color heredado */
  font-size: var(--fs-h3, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.cg-banner__meta { margin: 2px 0 0; font-size: var(--fs-sm, .875rem); color: rgba(255, 255, 255, 0.9); }
.cg-banner__change {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font: inherit;
  font-size: var(--fs-xs, .75rem);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cg-banner__change:hover { background: rgba(255, 255, 255, 0.24); }

/* Opciones del paso 2: suben con fade al entrar (escalonado con el vuelo de la portada) */
.cg-conf__body, .cg-conf .cargar-foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out) .16s, transform .5s var(--ease-out) .16s;
}
.cg-conf .cargar-foot { transition-delay: .24s; }
.cg-setup2.is-conf .cg-conf__body,
.cg-setup2.is-conf .cg-conf .cargar-foot { opacity: 1; transform: none; }

/* Portada voladora (FLIP): de la tarjeta del paso 1 al banner del paso 2 */
.cg-hero-fly {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}
.cg-hero-fly .cg-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-hero-fly::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.68) 100%);
}
.cg-hero-fly--go {
  transition: top .55s var(--ease-out), left .55s var(--ease-out),
              width .55s var(--ease-out), height .55s var(--ease-out), border-radius .55s var(--ease-out);
}

/* Carga "tiro por tiro" (detalle): lista de golpes con lie + distancia */
.cargar-shots { display: flex; flex-direction: column; gap: var(--space-3); }
.shot-list { display: flex; flex-direction: column; gap: var(--space-2); }
.shot-row { border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: var(--radius-2, 10px); padding: 10px; background: var(--surface-1, #fff); }
.shot-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.shot-row__n { font-size: .8rem; font-weight: 700; color: var(--text-muted, #777); }
.shot-row__del { border: 0; background: transparent; color: var(--text-muted, #999); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 4px; }
.lie-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.lie-chip { padding: 5px 10px; border: 1px solid var(--border, #ddd); border-radius: 999px; background: transparent; font-size: .8rem; color: var(--text-1, #333); cursor: pointer; }
.lie-chip.is-on { background: var(--brand, #1e7b34); color: #fff; border-color: var(--brand, #1e7b34); }
.shot-row__dist { display: flex; align-items: center; gap: 8px; }
.shot-dist { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border, #ddd); border-radius: var(--radius-2, 8px); font-size: .95rem; }
.shot-unit { font-size: .85rem; color: var(--text-muted, #777); min-width: 18px; }
.shot-pen { padding: 7px 10px; border: 1px solid var(--border, #ddd); border-radius: 999px; background: transparent; font-size: .78rem; color: var(--text-1, #333); cursor: pointer; white-space: nowrap; }
.shot-pen.is-on { background: #c0392b; color: #fff; border-color: #c0392b; }
.shot-add { width: 100%; }
.shot-summary { text-align: center; font-size: .88rem; padding: 2px; color: var(--text-muted, #57605a); background: none; }
.shot-summary .under { color: var(--brand, #1f7a47); font-weight: 700; }
.shot-summary .over { color: var(--error, #c0432f); font-weight: 700; }

/* --- Modo detalle "play-by-play" (tiro por tiro sin teclado) ----------------
   Rediseño: mismo eje centrado que el método simple. Lie por TERRENO (color =
   calidad del lie), dial con lugar reservado (sin saltos), dispersión = brújula
   2D (óvalo DECADE). El timeline pasa a ser un hilo tenue (historia del hoyo). */
/* `.cargar-pbp` (el cuerpo) y `.pbp-holebar` viven abajo, en el bloque "El hoyo en UNA pantalla":
   sus declaraciones son parte del contrato del alto y no se reparten en dos lugares del archivo. */

/* El timeline horizontal de chips (`.pbp-path*`) se borró en la revisión final: lo pintaba
   `pbpTimeline`, que la Tarea 6 eliminó al poner el hoyo entero en una pantalla. */
.pbp-pen { color: var(--error, #c0432f); font-weight: 700; }
/* La lista de golpes de la pantalla "hoyo completo" (`.pbp-done-shot*`, `.pbp-done__hint`) se borró
   en la revisión final: esa pantalla dejó de existir con la Tarea 6, que puso la lista del hoyo
   (`.pbp-fila*`, más abajo) como superficie principal. La pastilla de compromiso sí sobrevivió y
   ahora vive en cada fila de esa lista. */
.commit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-pill, 999px); border: var(--border-width, 1px) solid var(--brand-200, #cfe6d8); background: var(--score-under-soft, #d8ecdf); color: var(--brand-700, #134d2d); font-weight: 600; font-size: .8rem; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.commit-pill .ph { color: var(--brand-600, #1a7a45); }
.commit-pill.is-uncommitted { border-color: var(--warning, #c2871f); background: var(--warning-soft, #f6ead2); color: var(--warning, #c2871f); }
.commit-pill.is-uncommitted .ph { color: var(--warning, #c2871f); }
/* Golpe SIN compromiso registrado (vuelta cargada con el compromiso apagado y editada con él prendido,
   2026-09-23): neutro y punteado — no es ni comprometido ni no comprometido. */
.commit-pill.is-unset { border-style: dashed; border-color: var(--border-strong, #ccd3c6); background: var(--surface, #fff); color: var(--text-muted, #57605a); }
.commit-pill.is-unset .ph { color: var(--text-light, #899189); }
/* Opciones del modal de compromiso */
.compromiso-opts { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.compromiso-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border: var(--border-width, 1px) solid var(--border, #d7ddd4); border-radius: var(--radius-lg, 12px); background: var(--surface, #fff); color: var(--text, #1c211d); font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
/* V19 (prueba integral 2026-09-17): antes el <i class="ph ph-check"> quedaba con opacity:0 en el
   estado sin marcar y no había NINGÚN otro trazo de selección — el hueco se veía vacío y no se leía
   como multi-select. Ahora el propio ícono ES la casilla: caja de 18px con borde siempre visible
   (vacía = sin marcar; el glyph queda transparente adentro); al marcar se rellena de verde y el
   check queda blanco. Sin tocar el comportamiento de las opciones (mismo multi-select de siempre). */
.compromiso-opt .ph { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--border-strong, #ccd3c6); border-radius: 4px; color: transparent; font-size: .78rem; transition: background .15s, border-color .15s, color .15s; }
.compromiso-opt.is-on { border-color: var(--brand-600, #1a7a45); background: var(--score-under-soft, #d8ecdf); color: var(--brand-700, #134d2d); }
.compromiso-opt.is-on .ph { background: var(--brand, #1f7a47); border-color: var(--brand, #1f7a47); color: #fff; }

/* La tarjeta del paso activo (`.pbp-step*`) se borró en la revisión final: la Tarea 6 reemplazó las
   tres pantallas que se sucedían por UNA que se va llenando, y el editor (`.pbp-editor`) ocupó su
   lugar. */
.pbp-shot-head { display: flex; flex-flow: row wrap; justify-content: center; align-items: baseline; gap: 2px 8px; }
/* Contraste (Tarea 6/§10): --text-light (#899189, 3.25:1) NO se usa para texto menor a 24px — a
   .68rem va --text-muted (#57605a, 6.5:1), que es el mínimo legible del proyecto. */
.pbp-eye { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #57605a); }
.pbp-from { font-size: .92rem; color: var(--text-muted, #57605a); }
.pbp-from strong { color: var(--text, #18211b); font-weight: 700; }
.btn--sm { padding: 7px 10px; font-size: .82rem; }
/* V8 (prueba integral 2026-09-17): el "Ver más canchas" del header de Canchas cercanas medía 36px
   (min-height de .btn--sm en styles/components.css), por debajo del --tap-min del proyecto (44px).
   NO se toca .btn--sm global (~40 usos en 17 archivos): regla acotada a este botón puntual. */
.gr-cercanas__head .btn--sm { min-height: var(--tap-min, 44px); }

/* Selector de destino = terreno por color (verde→clay = mejor→peor lie) + el chip "Hoyo".
   Tarea N.7: 6 columnas (entró "Hoyo", que antes era el link "La emboqué" al pie de la tarjeta) y
   gap de 4px, para que a 375px cada tile siga arriba de los 44px de lado. */
.terr { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
/* C26 (prueba integral 2026-09-17, unión plan+acta): min-height al --tap-min del proyecto (44px,
   styles/variables.css) — antes la tile medía ~43px de alto por contenido, sin piso garantizado.
   `touch-action: manipulation` (Tarea N.7): saca el retardo de doble-tap de WKWebView, que era la
   hipótesis del "hay que tocar dos veces" que reportó Franco. */
.terr-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 1px; min-height: var(--tap-min, 44px); border: 1.5px solid transparent; border-radius: var(--radius-md, 12px); background: var(--surface-2, #eef1ea); color: var(--text-muted, #57605a); font-family: inherit; cursor: pointer; touch-action: manipulation; transition: transform var(--transition-fast, .14s ease), box-shadow var(--transition-fast, .14s ease); }
.terr-tile i { font-size: 1rem; }
.terr-tile span { font-size: .58rem; font-weight: 600; line-height: 1.1; text-align: center; letter-spacing: -.01em; }
.terr-tile:active { transform: scale(.95); }
.terr-tile:disabled { opacity: .4; cursor: default; }
.terr-tile.is-on { color: #fff; box-shadow: var(--shadow-md); }
.terr-tile[data-lie="green"] { background: var(--score-under-soft, #d8ecdf); color: var(--brand-700, #134d2d); }
.terr-tile[data-lie="green"].is-on { background: var(--brand, #1f7a47); color: #fff; }
.terr-tile[data-lie="fairway"] { background: #e2f2e9; color: var(--brand-600, #186138); }
.terr-tile[data-lie="fairway"].is-on { background: var(--brand-400, #43996b); color: #fff; }
.terr-tile[data-lie="rough"] { background: #eef1de; color: #4f6315; }
.terr-tile[data-lie="rough"].is-on { background: #7f9a3f; color: #fff; }
.terr-tile[data-lie="bunker"] { background: var(--gold-soft, #f4ecd9); color: #7a5a16; }
.terr-tile[data-lie="bunker"].is-on { background: var(--gold, #b4862f); color: #fff; }
.terr-tile[data-lie="recovery"] { background: var(--error-soft, #f7e3de); color: var(--error-text, #8f2c1d); }
.terr-tile[data-lie="recovery"].is-on { background: var(--error, #c0432f); color: #fff; }
/* "Hoyo" (la emboqué) no es un lie: es la acción que cierra el hoyo. Va en la marca, con el borde
   marcado, para que se lea distinto de los cinco terrenos y no se toque por error. */
.terr-tile--hoyo { background: var(--surface, #fff); border-color: var(--brand, #1f7a47); color: var(--brand, #1f7a47); }
.terr-tile--hoyo:active { background: var(--score-under-soft, #d8ecdf); }

/* Distancia: lugar reservado → la pantalla no salta al elegir lie */
.pbp-dist { min-height: 62px; display: flex; flex-direction: column; justify-content: center; }
.pbp-dist__msg { margin: 0; font-size: .84rem; color: var(--text-muted, #57605a); }
.pbp-dist__msg--wait { color: var(--text-muted, #57605a); } /* contraste: ver la nota de .pbp-eye */
.pbp-dist__msg .ph { color: var(--warning, #c2871f); }

/* Modificadores del golpe: par de toggles consistentes (rojo = penalidad).
   Ronda 1 de corrección (hallazgo 4): ya no llevan `margin-top: auto` — con la tarjeta achicada a
   su contenido (.pbp-step) no hay aire que clavarlos al pie de nada; quedan justo debajo del
   bloque de destino/regla/lado, que es donde pide el hallazgo que estén. */
.pbp-mods { display: flex; justify-content: center; gap: 8px; }
/* C26: min-height al --tap-min (44px) — align-items:center ya centra icono+texto verticalmente
   dentro de la fila, así que alcanza con el piso (sin pasar a grid, que rompería el layout icono+texto). */
.pbp-mod { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: .78rem; font-weight: 600; padding: 6px 12px; min-height: var(--tap-min, 44px); border-radius: var(--radius-pill, 999px); border: 1.5px solid var(--border-strong, #ccd3c6); background: var(--surface, #fff); color: var(--text, #18211b); cursor: pointer; }
.pbp-mod:disabled { opacity: .4; cursor: default; }
.pbp-mod.is-on { background: var(--error, #c0432f); border-color: var(--error, #c0432f); color: #fff; }

/* `.pbp-putts` vive abajo, con el resto del editor (Tarea 6): el stepper de putts pasó a ser una
   fila del bloque del editor, no un bloque suelto de la tarjeta del paso. */

/* Resultado del hoyo (C22): antes tiro por tiro era la única pantalla sin score visible al terminar.
   `.score-cell` es el mismo wrapper de posicionamiento que usan las tarjetas (styles/golf.css),
   necesario para que `.mark` dibuje su círculo/cuadrado — acá suelto, no dentro de una <td>. */
.pbp-done__score { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .92rem; color: var(--text-muted, #57605a); }
.pbp-done__score .score-cell { display: inline-flex; }
/* Fuera de una <td> los anillos ::before/::after de `.mark` (styles/golf.css) no tienen centrado
   propio: quedaban pegados a la esquina superior izquierda del número (águila con dos círculos
   corridos, vista por Franco en el iPhone el 2026-09-22). Mismo centrado que usa `.rd .score-cell`. */
.pbp-done__score .score-cell .mark { position: relative; }
.pbp-done__score .score-cell .mark::before,
.pbp-done__score .score-cell .mark::after { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* El pie de tres espacios del tiro por tiro ([← hoyo] [CTA del paso] [hoyo →], `.cargar-nav--pbp`)
   se borró en la Tarea 9: con el hoyo en UNA pantalla el commit del golpe vive dentro del editor,
   así que el pie volvió a ser el mismo de la carga rápida (`.cargar-nav`, [Anterior][Siguiente]) y
   "Saltear" dejó de necesitar botón — tocar Siguiente sin cargar nada ES saltear. */

/* El menú (⋯) del header (`.cg-more*`) se borró en la revisión final: la Tarea 6 repartió sus tres
   ítems (deshacer → la ✕ del editor, "Levanté el hoyo" → el enlace del cuerpo, "Rehacer hoyo" →
   eliminado) y el menú dejó de existir. */

/* ---- El hoyo en UNA pantalla: la lista de golpes + el editor (Tarea 6, spec §9 y §11) -------
   CONTRATO DEL ALTO. El cuerpo es un flex column con UNA sola región elástica (la lista) y todo lo
   demás en `flex-grow: 0`. `min-height: 0` va en el pane, en el cuerpo Y en la lista: un ítem flex
   tiene `min-height: auto` por defecto y se NIEGA a encogerse por debajo de su contenido, así que
   sin esas declaraciones un hoyo de 19 filas empuja el pie fuera de la pantalla. La lista scrollea
   (anclada al golpe más reciente); el editor NUNCA. Las tres declaraciones son el contrato: no se
   sacan sin volver a medir un hoyo de 20 golpes en 568 px de alto. */
.cargar-hole--pbp { min-height: 0; }
.cargar-pbp { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 7px;
              align-items: stretch; padding: 8px 12px; overflow: hidden; }
/* Fila de contexto del hoyo (Tarea N.7): los chips Hoyo/Par/HCP/yardas y el botón GPS comparten UNA
   línea de 44px. Antes eran dos bloques apilados (chips 25px + píldora GPS de 58px) y en un iPhone
   SE esos 39px de más eran justo lo que faltaba para que el paso entrara. */
.pbp-holebar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
               gap: var(--space-2); min-height: var(--tap-min, 44px); }
.pbp-holebar .hole-hero__chips { margin-top: 0; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
/* A 360px (media Android) los 4 chips del hoyo + el chip GPS no entran en una línea con el padding
   de 375: la fila envolvía y crecía a ~57px. El chip de yardas es el que cede — la distancia REAL
   la da el chip GPS, que queda. Spec §10 R1. (Primer breakpoint de ANCHO del cargador: el único
   max-width del archivo era de Análisis y el único ajuste de ancho estaba calibrado a 375px.) */
@media (max-width: 374px) {
  .pbp-holebar .hh-chip { padding: 2px 6px; font-size: 0.64rem; }
  .pbp-holebar .hh-chip--yardas { display: none; }
}
.pbp-lista   { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
               list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
/* Degradado arriba SOLO cuando la lista scrollea de verdad: `.is-scrollable` la pone cargar.js
   (renderHoleDetalle) midiendo overflow real, igual que hacía la lista del hoyo completo antes de
   esta tarea. Sin el gate, con una sola fila el degradado la apagaría sin que haya nada arriba. */
.pbp-lista.is-scrollable {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
}
.pbp-hint    { flex: 0 0 auto; margin: 0; font-size: .72rem; color: var(--text-muted, #57605a); text-align: center; }

/* C5: aviso de que el hoyo anterior quedó sin terminar. NO es un modal ni un toast: vive en el flujo
   del cuerpo, sin fondo oscuro y sin bloquear nada (Franco: "que no sea muy invasivo"), y sus dos
   botones son botones normales de la pantalla — no dependen del `pointer-events: none` ni del
   z-index de `.toast-region`, que es lo que descalifica a MC.confirm para decisiones (V58).
   `flex: 0 0 auto` como todo lo que no es la lista: el alto que se lleva sale del contrato del
   cuerpo y la lista se re-mide sola (ajustarFilasMax, C3). `touch-action: manipulation` en los dos
   botones NUEVOS: sin eso vuelve el retardo de doble-tap de WKWebView ("hay que tocar dos veces").
   Contraste: el texto va en --text (no --text-light, prohibido bajo 24px) sobre el ámbar suave. */
/* `padding-right: 40px` = el ancho que ocupa la ✕ (44px anclada en `right: -4px`, o sea que su borde
   izquierdo cae a 40px del borde del aviso). Con los 34px de antes, el contenido pasaba 6px por
   debajo de la ✕ y ésta le robaba esa franja al botón "Dejarlo levantado" en TODA su altura —
   medido con el barrido del DOM: 6x33,6px, el 3-4% de su ancho, en 360, 375 y 402. */
.pbp-aviso { flex: 0 0 auto; position: relative; display: flex; flex-wrap: wrap; align-items: center;
             gap: 4px 8px; padding: 6px 40px 6px 10px; border: 1px solid var(--warning, #c2871f);
             border-radius: var(--radius-md, 12px); background: var(--warning-soft, #f6ead2); }
.pbp-aviso__ico { flex: 0 0 auto; color: var(--warning-text, #875c12); font-size: 1.05rem; }
.pbp-aviso__t { flex: 1 1 140px; min-width: 0; margin: 0; font-size: .78rem; line-height: 1.25; color: var(--text, #18211b); }
.pbp-aviso__t b { font-weight: 800; }
.pbp-aviso__acc { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.pbp-aviso__btn { flex: 1 1 auto; min-height: var(--tap-min, 44px); padding: 0 12px; border: 1.5px solid var(--warning-text, #875c12);
                  border-radius: var(--radius-pill, 999px); background: var(--surface, #fff); font-family: inherit;
                  font-size: .8rem; font-weight: 700; color: var(--warning-text, #875c12); cursor: pointer; touch-action: manipulation; }
.pbp-aviso__btn:active { background: var(--warning-soft, #f6ead2); }
.pbp-aviso__x { position: absolute; top: 50%; right: -4px; transform: translateY(-50%);
                width: var(--tap-min, 44px); height: var(--tap-min, 44px); display: grid; place-items: center;
                border: 0; border-radius: var(--radius-pill, 999px); background: none; color: var(--warning-text, #875c12);
                font-size: 1rem; cursor: pointer; touch-action: manipulation; }
.pbp-editor  { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
               border: 1.5px solid var(--brand, #1f7a47); border-radius: 14px;
               background: var(--surface, #fff); box-shadow: 0 2px 10px rgba(31, 122, 71, .12); }
.pbp-salida  { flex: 0 0 auto; margin-top: auto; display: flex; justify-content: center; }

/* Una fila del hoyo: el número del golpe + "desde dónde se pegó" y, con el compromiso prendido, su
   pastilla. Toda la fila es un botón de 44 px: tocarla la abre para corregirla en el editor. */
.pbp-fila { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pbp-fila__tap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
                 min-height: var(--tap-min, 44px); padding: 0 10px; border: 1px solid var(--border, #e2e6dd);
                 border-radius: var(--radius-md, 12px); background: var(--surface, #fff); font-family: inherit;
                 text-align: left; cursor: pointer; touch-action: manipulation; }
.pbp-fila__tap:active { background: var(--surface-2, #eef1ea); }
.pbp-fila__n { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
               border-radius: var(--radius-pill, 999px); background: var(--surface-2, #eef1ea);
               color: var(--text-muted, #57605a); font-size: .78rem; font-weight: 700; }
.pbp-fila__desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                  font-size: .9rem; color: var(--text, #1c211d); }
.pbp-fila__sub { color: var(--text-muted, #57605a); font-size: .82rem; }
.pbp-fila.is-editando .pbp-fila__tap { border-color: var(--brand, #1f7a47); background: var(--score-under-soft, #d8ecdf); }
.pbp-fila--putts .pbp-fila__n { background: var(--score-under-soft, #d8ecdf); color: var(--brand-700, #134d2d); }
/* La banda del medio colapsado no es un tiro (no se edita): se abre y muestra el hoyo entero. */
.pbp-fila--banda .pbp-fila__tap { border-style: dashed; background: none; }
.pbp-fila--banda .pbp-fila__n { background: none; color: var(--text-muted, #57605a); }
/* La pastilla del compromiso ya no vive en una pantalla de cierre a todo el ancho: en la fila cede
   ancho (y llega a los 44 px táctiles, como todo lo que se toca). El `title` lleva el texto entero. */
.pbp-fila .commit-pill { flex: 0 1 auto; min-width: 0; max-width: 46%; min-height: var(--tap-min, 44px);
                         padding: 0 11px; touch-action: manipulation; }
.pbp-fila .commit-pill__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El editor = la fila en curso, expandida. Su botón de confirmar es COMPACTO y va a la DERECHA
   dentro del bloque: eso es lo que libera el pie para navegar (spec §9). No scrollea nunca. */
/* Mismo margen a los dos lados: si sólo se reserva el de la ✕, el título queda corrido a la izquierda
   del número grande y de la rueda. 28px (no 40) alcanzan para que el texto no toque el glifo de la ✕
   (centrado 16px adentro del borde) y dejan "HOYO COMPLETO Levantado, sin terminar" en una línea a 375. */
.pbp-editor__head { position: relative; padding-inline: 28px; }
/* La ✕ del editor mide lo que mide el ENCABEZADO (≈22px), y sus 44px táctiles los pone un `::after`
   asimétrico — el mismo patrón que `.hole-track a::after`, y por la misma razón: una caja de 44px
   centrada sobre una línea de texto de 22px se derrama 11px para cada lado, y abajo el `gap: 6px`
   del editor sólo absorbe 6, así que los otros 5 caían ENCIMA de la fila de destinos, sobre el
   74-79% del ancho del chip "Hoyo" (medido con el barrido del DOM: 38x5px a 360, 375 y 402). Esa ✕
   deshace el último golpe —acción destructiva— y el chip que pisaba es el que cierra el hoyo, que
   su propio CSS estiliza aparte "para que no se toque por error".
   Los 6px de abajo son exactamente el gap: el área táctil llega al borde de `.terr` y no lo cruza.
   Los 16px de arriba caen en el padding del editor y en el gap del cuerpo, donde no hay nada
   tocable. 22 + 16 + 6 = 44. */
.pbp-editor__x { position: absolute; top: 0; bottom: 0; right: -6px;
                 width: var(--tap-min, 44px); display: grid; place-items: center;
                 border: 0; border-radius: var(--radius-pill, 999px); background: none;
                 color: var(--text-muted, #57605a); font-size: 1.05rem; cursor: pointer; touch-action: manipulation; }
.pbp-editor__x::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; bottom: -6px; }
.pbp-editor__x:active { background: var(--surface-2, #eef1ea); }
/* `flex-wrap` porque la fila de putts NO se puede encoger: `.stepper--sm .stepper-btn` lleva
   min-width 44px (política táctil), así que "Putts [−][n][+]" + "Registrar putts" desborda el bloque
   en un ancho chico — y el cuerpo es `overflow: hidden`, o sea que lo recortaría sin avisar. Al
   envolver, el botón baja a su propia línea y el `margin-left: auto` lo deja igual a la derecha. */
.pbp-editor__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                   gap: 6px var(--space-2, 8px); }
/* `touch-action: manipulation` NO es cosmética acá: es el botón más tocado del flujo (40-60 veces
   por vuelta) y hereda el rol del CTA del pie, que la llevaba desde la Tarea N.7 por el bug 3 de
   Franco — saca el retardo de doble-tap de WKWebView (la hipótesis del "hay que tocar dos veces") y
   evita que dos toques seguidos disparen el zoom en vez del golpe siguiente. Ver `.terr-tile`. */
.pbp-editor__ok { flex: 0 0 auto; margin-left: auto; min-height: var(--tap-min, 44px); padding: 0 18px;
                  white-space: nowrap; touch-action: manipulation; }
.pbp-editor__nota { flex: 1 1 auto; min-width: 0; font-size: .72rem; color: var(--text-muted, #57605a); }
.pbp-putts { margin: 0; display: flex; align-items: center; gap: 8px; }
.pbp-putts__lbl { font-size: .78rem; font-weight: 600; color: var(--text-muted, #57605a); }
/* Los chips de lie para corregir una fila: cinco (el green no, un tiro desde el green es un putt).
   Llevan el MISMO icono que los del destino (LIE_ICON, pbp-core.js) — C1 de la prueba en celular
   2026-09-28: sin icono se leían como otro control. Al ser cinco y no seis sobra ancho, así que el
   rótulo va más grande que allá (.72 contra .58rem) sin que "Fairway" se corte a 360px. */
.terr--edit { grid-template-columns: repeat(5, 1fr); }
.terr--edit .terr-tile span { font-size: .72rem; }
.terr-tile[data-lie="tee"] { background: var(--surface-2, #eef1ea); color: var(--text-muted, #57605a); }
.terr-tile[data-lie="tee"].is-on { background: var(--brand-700, #134d2d); color: #fff; }
/* "Levanté el hoyo": enlace discreto (era un ítem del menú ⋯), con los 44 px táctiles de siempre. */
.pbp-levanto { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
               min-height: var(--tap-min, 44px); padding: 0 14px; border: 0; border-radius: var(--radius-pill, 999px);
               background: none; font-family: inherit; font-size: .82rem; font-weight: 600;
               color: var(--text-muted, #57605a); text-decoration: underline; text-underline-offset: 3px;
               cursor: pointer; touch-action: manipulation; }
.pbp-levanto:active { background: var(--surface-2, #eef1ea); }

/* "Tu juego": selector de qué datos ver (Tarjeta = método simple · Tiro a tiro = Strokes Gained).
   Control segmentado tipo "pill": el segmento activo es un thumb blanco con sombra. */
.golf-stats { display: flex; flex-direction: column; gap: var(--space-3); }
.stats-switch { display: flex; gap: 4px; padding: 4px; background: var(--surface-2, #eef1ea); border-radius: var(--radius-pill, 999px); }
#golfAnalisis .stats-switch { margin-bottom: var(--space-3); } /* Análisis no tiene flex-gap como .golf-stats */

/* Socio sin vueltas (V6, Tarea 5.6): un solo bloque de bienvenida en vez de "Tu juego" +
   "Tendencias" pintando cada uno su propio estado vacío grande. loadSummary() pone/saca la clase
   en <body> según mc_golf_summary().vueltas; #golfBienvenida se muestra/oculta con `hidden` (JS),
   no con esta regla. */
.sin-vueltas #golfStatsSection, .sin-vueltas #golfAnalisisSection { display: none; }

/* "Mis palos": ladder por palo (carry + banda de dispersión 2σ + frenado + gap) */
.clubs-list { display: flex; flex-direction: column; gap: 2px; }
.clubs-note { margin: var(--space-3) 0 0; font-size: .7rem; color: var(--text-muted, #57605a); }
.club-row { display: grid; grid-template-columns: 3.4rem 3.2rem 1fr auto; align-items: center; gap: var(--space-2); padding: 6px 6px; border-radius: 8px; }
.club-row:nth-child(odd) { background: var(--surface-2, #eef1ea); }
.club-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; }
.club-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.club-carry { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.club-unit { font-size: .62rem; color: var(--text-muted, #57605a); font-weight: 600; margin-left: 1px; }
.club-bar { position: relative; height: 16px; background: var(--surface-3, #e6eae1); border-radius: 8px; overflow: hidden; }
.club-bar__axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong, #ccd3c6); }
.club-bar__band { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; opacity: .55; }
.club-meta { display: flex; align-items: center; gap: 8px; justify-self: end; white-space: nowrap; }
.club-gap { font-size: .66rem; color: var(--text-light, #899189); }
.club-low { font-size: .6rem; color: var(--warning, #c2871f); font-weight: 600; }

/* "Mi dispersión": tabla distancia → dispersión lateral (cono), recalculable. */
.disp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.disp-table th { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #57605a); text-align: left; padding: 0 8px 6px; border-bottom: 1px solid var(--border, #d8ded2); }
.disp-table th span { font-weight: 600; opacity: .65; }
.disp-table th:last-child, .disp-table .disp-l { text-align: right; }
.disp-table td { padding: 7px 8px; }
.disp-table tbody tr:nth-child(odd) { background: var(--surface-2, #eef1ea); }
.disp-table .disp-d { font-weight: 800; font-size: 1rem; }
.disp-table .disp-l { font-weight: 700; color: var(--brand-700, #186138); }
.disp-actions { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.disp-conf { display: block; margin: 0 0 var(--space-4); font-size: .92rem; font-weight: 600; }
.disp-conf input[type="range"] { display: block; width: 100%; margin-top: 8px; accent-color: var(--brand); }
.disp-sess-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 700; font-size: .88rem; margin-bottom: var(--space-2); }

.stats-switch__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap-min, 44px); padding: 9px 10px; border: none; background: transparent; border-radius: var(--radius-pill, 999px); font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text-muted, #57605a); cursor: pointer; transition: background var(--transition-fast, .14s ease), color var(--transition-fast, .14s ease); }
.stats-switch__btn i { font-size: 1.05rem; }
.stats-switch__btn.is-on { background: var(--surface, #fff); color: var(--brand, #1f7a47); box-shadow: var(--shadow-sm); }
.stats-switch__btn:disabled { opacity: .5; cursor: default; }
.stats-view__meta { margin: 0 0 var(--space-3); font-size: .76rem; color: var(--text-muted, #57605a); text-align: right; }
/* Compat: estilos de los grupos apilados (versión anterior), por si quedan referencias */
.stats-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.stats-group__head > span:first-child { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #777); }
.stats-group__meta { font-size: .72rem; font-weight: 400; color: var(--text-muted, #999); }

/* Dispersión del miss (Tarea N.7): UNA fila de chips con la pregunta como rótulo a la izquierda.
   Reemplaza la brújula 2D (grilla 3×3 de ~180px de alto, con dos filas de celdas vacías): misma
   información, 44px. Decisión de Franco, 2026-09-22. La fila de la SALIDA son hoy TRES chips —
   izq · der · erró la distancia—, los mismos del modo Rápido (E4, Franco 2026-09-28). */
.pbp-side { margin-top: 0; padding-top: 5px; border-top: 1px solid var(--border, #e2e6dd); }
.pbp-side--row { display: flex; align-items: center; gap: var(--space-2); text-align: left; }
.pbp-side__q { flex: 0 0 66px; font-size: .68rem; line-height: 1.15; color: var(--text-muted, #57605a); }
/* Falta el lado: el rótulo en ámbar es el único aviso que queda en la tarjeta (el CTA deshabilitado
   ahora está en el pie, lejos del bloque). C18/V22/C19 siguen valiendo: sin lado no se avanza. */
.pbp-side--row.is-needed .pbp-side__q { color: var(--warning, #c2871f); font-weight: 700; }
/* Los chips del miss de la salida son el MISMO control que el del modo Rápido (E4, Franco
   2026-09-28): `.seg.seg--icons`, con su piso táctil de 44px en la regla base de `.seg--icons
   .seg-btn`. Lo único que agrega `.pbp-sides` acá es que la píldora ocupe el ancho que le queda a la
   fila (la pregunta se lleva 66px fijos) y que los tres chips lo repartan — `.seg` es `inline-flex`,
   así que sin esto se encogería a su contenido. Verificado a 360px: tres chips de ~66px. */
.pbp-sides { flex: 1 1 auto; min-width: 0; }
.pbp-sides .seg-btn { flex: 1 1 0; min-width: 0; }
/* Los chips del miss de la salida (`.pbp-cb*`) se borraron en la revisión final: E4 los pasó a
   `.seg--icons`, el mismo control del modo Rápido. Su único consumidor restante era el arnés
   `_observe_tarea36.html`, que se borró en el mismo commit. */

/* Rueda/regla de distancia (scroll-snap, sin teclado). Readout grande + fade en los bordes. */
.ruler { display: flex; flex-direction: column; gap: 3px; }
.ruler__readout { text-align: center; }
.ruler__val { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--text, #18211b); font-variant-numeric: tabular-nums; }
.ruler__unit { font-size: .9rem; color: var(--text-muted, #57605a); font-weight: 500; }
/* Aclara que el número de la rueda es lo que FALTA a la bandera, no lo recorrido (V14, prueba
   integral 2026-09-17). Solo en la rueda del golpe (pbpDist); inline, se acomoda con la unidad. */
/* Contraste (Tarea 10/§10 M1): --text-light (#899189) da 3.25:1 sobre blanco y falla el 4.5:1 de AA
   para texto chico — al sol en cancha es invisible. Este hint son 0.68rem: va en --text-muted
   (#57605a, 6.5:1). --text-light queda solo para 24px+ y para lo decorativo. */
.ruler__hint { font-size: .68rem; font-weight: 400; color: var(--text-muted, #57605a); }
.ruler__win { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.ruler__needle { position: absolute; left: 50%; top: 2px; bottom: 6px; width: 2px; background: var(--brand, #1f7a47); transform: translateX(-1px); z-index: 2; pointer-events: none; border-radius: 1px; }
.ruler__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 50%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ruler__track::-webkit-scrollbar { display: none; }
.rl-tick { position: relative; flex: 0 0 auto; width: 12px; height: 30px; border: 0; background: transparent; scroll-snap-align: center; cursor: pointer; padding: 0; }
.rl-tick::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 9px; background: var(--border, #ccc); }
.rl-tick--major::after { height: 15px; width: 2px; background: var(--text-muted, #999); }
/* El fallback también en --text-muted (#57605a): #777 da 4.48:1, justo por debajo de AA — si la
   variable no resolviera, el número del tick quedaría en el borde (Tarea 10/§10 M1). */
.rl-tick__lbl { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--text-muted, #57605a); }
/* Rueda por lista de valores (los buckets del putt): cada tick lleva su número, así que van más
   separados que los de la grilla del golpe —si no, las etiquetas se pisan— y más altos, para que
   tocar uno sea un blanco de dedo y no solo un gesto de scroll. */
.ruler--vals .rl-tick { width: 38px; height: 44px; }
/* La aguja arranca DEBAJO de los números: acá todos los ticks van etiquetados, así que si cruzara
   arriba taparía siempre el número que está eligiendo. */
.ruler--vals .ruler__needle { top: 21px; }
.ruler--vals .rl-tick::after { height: 11px; }
.ruler--vals .rl-tick--major::after { height: 15px; }
.ruler--vals .rl-tick__lbl { font-size: .8rem; font-weight: 600; }
/* ── Tira de pasos del primer putt · formato B1 "dos escalas, una aguja" ─────────────────────────
   (C7, decisión de Franco 2026-09-28.) Reemplaza a la guía vieja, que rotulaba CADA tick con sus
   pasos (`.ruler--sub` / `.rl-tick__sub`, borradas): con el paso de 0,90 m un paso son 2,95 ft y
   medio paso 1,48, mientras la rueda tiene los pies de a uno, así que 1 y 2 ft decían los dos "½" y
   4 y 5 ft decían los dos "1½" — colisión garantizada por aritmética. Y había pasos SIN tick (3
   pasos son 8,86 ft y la rueda salta de 8 a 10), o sea que la escala de pasos no se puede colgar de
   los ticks de pies: necesita la suya, continua.

   HERMANA de `.ruler__win`, no hija: así el tick conserva sus 44px de área táctil intactos y la tira
   tiene su propio recorte. Comparte el marco de coordenadas porque mide lo mismo de ancho y su aguja
   también está al 50%. Alto 20px y SIN CAJA: sin fondo, sin borde, sin relleno — lo único que lleva
   es la línea de 1px, las marcas de 6px de cada paso entero con su numeral, y sobre la aguja la
   lectura exacta en verde.
   La capa interna la desplaza cargar.js con translateX(-scrollLeft) desde el handler de scroll de
   wireRuler: la rueda es un overflow-x con scroll-snap, así que una tira estática se desalinearía en
   el primer gesto. La línea y la cifra verde quedan FUERA de la capa (no se mueven con el scroll). */
.ruler__pasos { position: relative; flex: 0 0 auto; height: 20px; overflow: hidden;
                -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.ruler__pasos::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border, #e2e6dd); }
.ruler__pasos-capa { position: absolute; inset: 0; will-change: transform; }
/* Una marca de paso entero: el numeral arriba y la marca de 6px justo sobre la línea. `left` lo
   escribe cargar.js como calc(50% + Npx), con N interpolado entre los ticks vecinos. */
.rl-paso { position: absolute; bottom: 1px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.rl-paso::after { content: ""; width: 1px; height: 6px; background: var(--border-strong, #ccd3c6); }
/* 11px: --text-muted (#57605a, 6.5:1) y NUNCA --text-light (#899189, 3.25:1), prohibido bajo 24px —
   el gris claro que usaba la guía vieja en estas etiquetas era una violación que este cambio corrige. */
.rl-paso__n { font-size: .68rem; font-weight: 600; line-height: 1; color: var(--text-muted, #57605a); white-space: nowrap; }
/* Regla de coincidencia: cuando la marca cae bajo la aguja, la cifra verde y este numeral se
   superpondrían. Se muestra sólo la verde — se oculta el numeral, no la marca, así la escala sigue
   completa. Lo decide la POSICIÓN (cargar.js, PASOS_COINCIDE_PX), no una comparación de textos. */
.rl-paso.is-tapada .rl-paso__n { visibility: hidden; }
/* La lectura exacta sobre la aguja: fija al 50%, no viaja con la capa. */
.rl-paso__lec { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
                font-size: .72rem; font-weight: 800; line-height: 1; color: var(--brand-active, #134d2d);
                white-space: nowrap; }
/* El rótulo de la derecha del encabezado ("tus pasos · 0,90 m"): la aclaración va ahí para que la
   tira no se rotule a sí misma. `margin-left: auto` lo manda a la derecha de una fila centrada. */
.pbp-head__pasos { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--text-muted, #57605a); white-space: nowrap; }

/* hero del hoyo */
.hole-hero {
  text-align: center;
  padding: var(--space-2) 0;
}
/* Halo radial suave detrás del número (solo el hero del hoyo, no el paso de acompañantes) */
.hole-hero:not(.hole-hero--mstep) {
  padding-top: var(--space-3);
  background: radial-gradient(120% 90% at 50% 0%, var(--brand-50, #eef6f1) 0%, rgba(238, 246, 241, 0) 72%);
}
.hole-hero__eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-400, #43996b);
}
.hole-hero__num {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-700, #134d2d);
}
.hole-hero__meta {
  color: var(--text-muted, #555);
  margin-top: 4px;
}
/* Datos del hoyo como chips (par / hcp / yardas) */
.hole-hero__chips {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.hh-chip {
  padding: 3px 11px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e6dd);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #57605a);
}
.hh-chip b { color: var(--text, #18211b); }
/* Etiqueta de la 2da vuelta (opción "36 hoyos"): el hoyo se llama por su número real, y este chip
   es lo que dice en qué pasada estás. Ámbar para que no se confunda con los datos del hoyo. */
.hh-chip--v2 {
  background: var(--warning-soft, #f6ead2);
  border: 1px solid var(--warning, #c2871f);
  color: #8a5f14;
  font-weight: 700;
}
/* Progreso de la ronda: un ENLACE por hoyo con su estado REAL (estadoTira, pbp-core.js), no la
   posición respecto del hoyo actual — la tira vieja marcaba "done" con k < ST.i, así que un hoyo
   saltado se veía igual que uno completo (spec §6.2). Tocar cualquier hoyo abre el selector a
   pantalla completa (selector-hoyos.js): 18 hoyos a 360px dan ~16-20px de ancho cada uno, muy por
   debajo del mínimo táctil a lo ancho — por eso la tira es INDICADOR y el selector es el mecanismo
   de verdad (spec §6.4). El ALTO sí llega cerca del mínimo (42-44px según la pantalla — ver abajo),
   con un `::after` invisible que agranda el área de toque de cada <a> SIN agrandar la barra visual
   ni el header. LA DIRECCIÓN Y EL TAMAÑO CAMBIAN SEGÚN LA PANTALLA, porque el vecino tocable más
   cercano no es el mismo de los dos lados, y con la cancha mapeada (chip GPS visible, que es el
   estado por DEFECTO, no una excepción) puede estar a menos de 18px en más de una pantalla —
   hallazgo de la ronda 3 de revisión, con un arnés que deriva los vecinos DEL DOM (no de una lista
   escrita a mano) y barre los anchos 320/360/375/402 × 568-958px de alto en pasos de 10 (40 alturas),
   chip GPS visible y oculto en las dos pantallas que lo tienen: 952 muestras, 0 fallos. Detalle y
   números exactos en `task-7y8-report.md`, adenda de la ronda 3:

   - Header (headerHoyoHtml / renderProgress / renderMatchStep): crece hacia ABAJO, 42px
     (`top:0; bottom:-16px`, regla base acá mismo). Arriba el hueco es de ~2px hasta el botón de
     cerrar en la pantalla más apretada (`.cargar-hole--pbp`) — no se toca. Abajo, con el chip GPS
     visible (`#cgSeeGreen`), el hueco medido es de **17px constantes** en las dos dimensiones del
     barrido (paddings fijos, no cqh): 16px de expansión deja 1px de margen. La ronda 2 había medido
     este mismo hueco con el chip GPS OCULTO y dio "≥68px" — un número real pero del estado que NO
     es el por defecto en una cancha mapeada; con el chip visible la expansión de 18px de esa ronda
     pisaba 1px, en el 100% de las muestras del barrido.
   - Modo Rápido (`.hole-hero`, override más abajo: `.hole-hero .hole-track a::after`): crece hacia
     ARRIBA, 44px completos (`top:-18px; bottom:0`). Ahí el chip GPS (`#cgGpsOn`) visible por defecto
     puede quedar a menos de 18px hacia ABAJO en alturas de pantalla comunes (~700-770px a 375px de
     ancho — el propio hallazgo que abrió la ronda 3), así que la expansión va para el otro lado:
     arriba el vecino más cercano nunca baja de 90,64px en todo el barrido (ése es el MÍNIMO medido,
     con el chip GPS visible), o sea cinco veces los 18px que la expansión necesita.

   touch-action: manipulation saca el retardo de doble-tap de WKWebView (el mismo bug de Franco que
   ya se reintrodujo una vez en este rediseño). */
.hole-track {
  display: flex;
  gap: 3px;
  margin: 10px var(--space-5) 0;
}
.hole-track a {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* El hit-box real (42px), dirección "header": ver el comentario de arriba. 16px hacia abajo, no 18:
   el chip GPS visible (#cgSeeGreen) mide 17px de hueco constante, y 16 le deja 1px de margen. */
.hole-track a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -16px;
}
/* Excepción del modo Rápido: misma área de 44px, hacia el otro lado (ver el comentario de arriba).
   Gana por especificidad (dos clases contra una), sin necesitar !important ni depender del orden. */
.hole-hero .hole-track a::after {
  top: -18px;
  bottom: 0;
}
.hole-track a i {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
}
.hole-track a.is-actual i { height: 10px; }
.hole-track a.is-actual::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.hole-track a.ht-h--completo { color: var(--brand, #1f7a47); }
.hole-track a.ht-h--empezado { color: var(--warning, #c2871f); }
.hole-track a.ht-h--vacio { color: var(--border, #e2e6dd); }
.hole-track a.ht-h--levantado { color: var(--text-light, #899189); }
.hole-track a.ht-v2gap { margin-left: 8px; } /* respiro entre la 1ra y la 2da vuelta (36 hoyos) */


/* distancias al green en vivo (rangefinder GPS) — discreto, bajo el hero */
.hole-gps {
  margin: 6px auto 2px;
  min-height: 18px;
  text-align: center;
}
.hole-gps[hidden] {
  display: none;
}
.hole-gps__bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px 6px 12px;
  background: #f1f8f3;
  border: 1px solid #cfe6d6;
  border-radius: 999px;
}
.hole-gps__lead {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--brand, #1e7b34);
}
.hole-gps__nums {
  font-size: 16px;
  color: var(--text-1, #16231b);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hole-gps__nums b {
  font-weight: 700;
  font-size: 19px;
  color: var(--brand, #1e7b34);
}
.hole-gps__nums em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-muted, #5f6f64);
  margin-left: 1px;
}
/* C26 (prueba integral 2026-09-17): antes 28×28px reales — styles/nativo.css §6 ya le daba un
   ::after invisible a 44px SOLO bajo `(pointer: coarse)` (touch), pero getBoundingClientRect del
   propio botón (como mide el informe de ios:recorrido) seguía dando 28. Ahora el botón ES 44×44
   directo, así que ese ::after quedaba redundante — se sacó de nativo.css (ver commit). */
.hole-gps__see {
  flex: 0 0 auto;
  width: var(--tap-min, 44px);
  height: var(--tap-min, 44px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #cfe6d6;
  color: var(--brand, #1e7b34);
  cursor: pointer;
}
.hole-gps__see i {
  font-size: 15px;
}
/* Variante compacta (tiro por tiro, Tarea N.7): la distancia al centro del green VA ADENTRO del
   botón, que comparte línea con los chips del hoyo. Frente/fondo y "desde el tee · fuera de rango"
   pasan al modal. Atenuado (`is-dim`) = sin GPS, sin fix todavía o fuera de rango: el toque sigue
   haciendo lo que corresponde (encender el GPS / "ver igual"). */
.hole-gps--chip {
  margin: 0;
  min-height: 0;
  flex: 0 0 auto;
}
.hole-gps__see--chip {
  width: auto;
  min-width: var(--tap-min, 44px);
  gap: 6px;
  grid-auto-flow: column;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f8f3;
}
.hole-gps__see--chip .hole-gps__num {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand, #1e7b34);
  white-space: nowrap;
}
/* `is-dim` es el estado ORDINARIO del chip, no una excepción: se prende cada vez que el GPS está
   apagado o todavía no tiene fix, que es como arranca siempre. Su texto son 15px, así que
   --text-light (#899189, 3.25:1) lo dejaba por debajo de AA justo en la pantalla que se lee al sol
   en cancha; va en --text-muted (#57605a, 6.5:1). Ronda 1 de revisión de las Tareas 9/10/12, Minor 3
   — no estaba entre los cinco selectores del Step 1 de la Tarea 10, pero es la misma pantalla y la
   misma regla del proyecto. */
.hole-gps__see--chip.is-dim {
  background: var(--surface-2, #eef1ea);
  border-color: var(--border, #e2e6dd);
  color: var(--text-muted, #57605a);
}
.hole-gps__see--chip.is-dim .hole-gps__num { color: var(--text-muted, #57605a); }
.hole-gps__on {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand, #1e7b34);
  background: rgba(30, 123, 52, 0.08);
  border: 1px solid rgba(30, 123, 52, 0.4);
  border-radius: 999px;
  cursor: pointer;
}
.hole-gps__on:active {
  transform: scale(0.98);
}
.hole-gps__msg {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted, #555);
  opacity: 0.75;
}
.hole-gps__force {
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Leyenda "desde el tee · fuera de rango" (cuando el origen es el tee y no el GPS en vivo) */
.hole-gps__from {
  display: block;
  margin-top: 1px;
  font-size: 0.68rem;
  color: var(--text-muted, #5f6f64);
  opacity: 0.8;
  letter-spacing: 0.02em;
}

/* modal "ver green" — vista vectorial ilustrada del green + bandera arrastrable (tema claro) */
/* Modal "Ver green" = RANGEFINDER GPS inmersivo (mapa MapLibre a pantalla completa, look de la
   Vista Previa GPS). El origen de las distancias es la UBICACIÓN DEL JUGADOR; sin "juega como"
   (efecto de altura), ilegal durante la vuelta. Los markers on-map (medición, cotas de hazard)
   se agregan DENTRO del contenedor del mapa → se estilan por descendencia desde .green-modal. */
.green-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #0b0f0d;
}
.gv-map {
  position: absolute;
  inset: 0;
}
.gv-map .maplibregl-ctrl-attrib {
  font-size: 9px;
}
/* FAB de cierre (arriba-izq) + chip de hoyo (arriba-centro): mismos que la Vista Previa */
.gv-fab {
  position: absolute;
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 50px);
  left: 10px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* Header del hoyo: barra superior de borde a borde (Hoyo·Par | tee | HCP·yardas) */
.gv-topbar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 9px) 14px 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.gv-tb-l {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.gv-tb-c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.92;
  white-space: nowrap;
}
.gv-tb-r {
  font-size: 12px;
  opacity: 0.85;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gv-tee {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: var(--tc, #3b82f6);
  display: inline-block;
  flex: none;
}
/* Rail de distancias: columna angosta a la derecha (no tapa el hoyo) */
.gv-rail {
  position: absolute;
  z-index: 5;
  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(0, 0, 0, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #fff;
  padding: 10px 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
/* Instrucción de medición: píldora sutil abajo-centro (se oculta sola al medir). Va POR ENCIMA de
   la atribución del mapa (.maplibregl-ctrl-attrib, abajo a la derecha): a 12px del borde quedaba
   tapada (V61) — mismo fix ya aplicado a .gps-hint en cancha-gps.css. */
.gv-hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 11px;
  color: #fff;
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.56);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.gv-hint:empty {
  display: none;
}
/* Distancias del rail (reusa el look de la Vista Previa; SIN bloque "juega como") */
.green-modal .gps-dist__none {
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  margin: 4px 0;
}
.green-modal .gps-dist__green {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1px;
}
.green-modal .gps-dist__green > div span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}
.green-modal .gps-dist__green > div b {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.05;
}
.green-modal .gps-dist__green > .big {
  margin: 1px 0;
}
.green-modal .gps-dist__green > .big b {
  font-size: 34px;
  color: #74e3a3;
}
.green-modal .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);
}
.green-modal .gps-dist__pin span {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  color: #f9a8a8;
}
.green-modal .gps-dist__pin b {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
/* Marcador "tú" (posición del jugador, origen de las distancias) — "Halo vivo":
   núcleo blanco con aro grafito (::after) + halo que late detrás (::before).
   OJO: position ABSOLUTE (igual que .maplibregl-marker), NUNCA relative: un marker
   posicionado relative queda EN FLUJO y empuja 18px hacia abajo a los markers de
   cota de hazard que lo siguen en el DOM (bug del 2026-07-10). */
.gv-me {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}
.gv-me::before,
.gv-me::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
}
.gv-me::before {
  background: rgba(255, 255, 255, 0.45);
  animation: gvMePulse 1.8s ease-out infinite;
}
.gv-me::after {
  background: #fff;
  box-shadow: 0 0 0 3px #17212b, 0 1px 4px rgba(0, 0, 0, 0.55);
}
@keyframes gvMePulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(2.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-me::before { animation: none; opacity: 0; }
}
/* Bandera arrastrable (canvas de la bandera digital) con área de toque holgada */
.gv-pin {
  width: 46px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.gv-pin.is-drag {
  cursor: grabbing;
}
.gv-pin canvas {
  width: auto;
  height: 46px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
/* Etiquetas de medición on-map (tap): jugador→punto, punto→bandera, píldora de palo */
.gv-lbl {
  font-family: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 9px 5px;
  border-radius: 11px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.gv-lbl b {
  font-size: 20px;
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.gv-lbl span {
  font-size: 10px;
  opacity: 0.72;
}
/* Píldora del palo sugerido: más chica, redonda, palo en verde */
.gv-lbl--punto {
  padding: 3px 9px;
  border-radius: 999px;
  align-items: center;
}
.gv-lbl--punto b {
  font-size: 13px;
  color: #7ee6a6;
}
/* Cotas de "carry" a hazards — componente compartido elementoFlechaHazard (clases .gps-haz*).
   Espejo del bloque de cancha-gps.css, scopeado al modal para no filtrar al resto de la página. */
.green-modal .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;
}
.green-modal .gps-haz__leader {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.green-modal .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);
}

/* steppers */
.stepper-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.stepper-label {
  font-weight: 600;
  min-width: 64px;
}
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Botones rellenos (brand-50) en vez de aros finos: más área táctil percibida y más presencia
   sobre el fondo fairway-paper. El sombreado inset da el relieve "apretable". */
.stepper-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: none;
  background: var(--brand-50, #eef6f1);
  color: var(--brand-700, #134d2d);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  box-shadow: inset 0 -2px 0 rgba(19, 77, 45, 0.12);
}
.stepper-btn:active {
  background: var(--brand-100, #d4e9dc);
  box-shadow: inset 0 2px 0 rgba(19, 77, 45, 0.12);
  transform: scale(0.96);
}
.stepper-block.small .stepper-btn {
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
}
.stepper-val {
  min-width: 2.2ch;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
}
.stepper-block.small .stepper-val {
  font-size: 1.3rem;
}
.stepper-rel {
  min-width: 36px;
  text-align: right;
  font-weight: 700;
  color: var(--text-muted, #555);
}
.stepper-rel.under {
  color: var(--brand, #1e7b34);
}
.stepper-rel.over {
  color: #c0392b;
}

/* chips GIR / scramble */
.cargar-chips {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  font-size: var(--fs-sm, 0.85rem);
  color: var(--text-muted, #666);
  background: var(--surface-1, #fff);
}
.chip--on {
  background: var(--brand, #1e7b34);
  color: #fff;
  border-color: var(--brand, #1e7b34);
}
.chip--alt {
  border-color: var(--brand, #1e7b34);
  color: var(--brand, #1e7b34);
}

/* fairway segmentado */
.fw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.seg {
  display: inline-flex;
  border: 1.5px solid var(--border-strong, rgba(0, 0, 0, 0.18));
  border-radius: 10px;
  overflow: hidden;
}
.seg-btn {
  border: none;
  background: var(--surface-1, #fff);
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid var(--border, rgba(0, 0, 0, 0.12));
}
.seg-btn:last-child {
  border-right: none;
}
.seg-btn.is-on {
  background: var(--brand, #1e7b34);
  color: #fff;
}

/* extras: penalidades / bunker / drive */
.cargar-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.bunker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm, 0.9rem);
  cursor: pointer;
}
.drive-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drive-field label {
  margin: 0;
  white-space: nowrap;
}
.drive-field input {
  width: 90px;
  padding: 8px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  text-align: center;
}

/* revisión — hero con la foto de la cancha desvanecida sobre degradado de marca. El momento
   "terminé la vuelta" merece jerarquía; coherente con la carátula del link compartido. */
.review-hero {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: linear-gradient(105deg, var(--brand-700, #134d2d) 0%, var(--brand, #1f7a47) 62%, var(--accent, #2f9e63) 100%);
}
/* La revisión scrollea en su body (flex en columna). Sin esto el hero —que lleva overflow:hidden
   para el degradado— pierde su alto mínimo y se aplasta a 36 px, o a 0 con partida (prueba
   2026-09-17, V37/V49). Mismo arreglo que .cargar-mstep__body > * (commit 03c6fc6). */
.cargar-body.cargar-review > * { flex: none; }
.review-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.review-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 30, 18, 0.55) 0%, rgba(10, 30, 18, 0.15) 60%, rgba(10, 30, 18, 0.35) 100%);
}
.review-hero__in {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  color: #fff;
}
.review-hero .review-course { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.review-hero__meta { margin-top: 2px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); }
.review-hero__sc { display: flex; flex-direction: column; align-items: flex-end; font-size: 2rem; font-weight: 800; line-height: 1; }
.review-hero__badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 11px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.38);
  font-size: 0.8rem;
  font-weight: 700;
}
.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.review-course {
  font-weight: 700;
  font-size: 1.1rem;
}
.review-score {
  text-align: right;
  font-size: 1.6rem;
  font-weight: 800;
}
.review-vspar {
  font-size: 1rem;
  color: var(--text-muted, #555);
  margin-left: 8px;
}
/* "N hoyos" junto al vs par cuando la vuelta va a medias: el vs par es contra el par jugado. */
.review-thru {
  font-style: normal;
  font-weight: 600;
  font-size: 0.82rem;
  opacity: 0.7;
}
.review-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff7e6;
  border-left: 3px solid #d99a1e;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 0;
}
.review-warn i { flex: none; margin-top: 1px; color: var(--warning, #d99a1e); }
/* Los hoyos EMPEZADOS y sin cerrar pesan más que los que nunca se tocaron: acá hay tiros cargados
   que se descartan al finalizar, y ésta es la última pantalla antes de que pase (revisión final).
   Mismo bloque, en el rojo de error, para que se lea como lo que es y no como un dato más. */
.review-warn--empezados { background: var(--error-soft, #f7e3de); border-left-color: var(--error, #c0432f); }
.review-warn--empezados i { color: var(--error, #c0432f); }
.review-warn + .review-warn { margin-top: var(--space-2, 8px); }

/* controles con el label ARRIBA y centrado de su input */
.ctrl {
  text-align: center;
}
.ctrl-label {
  font-weight: 600;
  font-size: var(--fs-sm, 0.9rem);
  color: var(--text-muted, #555);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ctrl .stepper {
  justify-content: center;
}
.ctrl-sub {
  margin-top: 8px;
  min-height: 1.6em;
  font-weight: 700;
  color: var(--text-muted, #555);
}
.ctrl-sub.under {
  color: var(--brand, #1e7b34);
}
.ctrl-sub.over {
  color: #c0392b;
}
/* Valor del stepper de golpes coloreado por vs par (la lectura clave del momento) */
.stepper-val.under { color: var(--score-under, #1f7a47); }
.stepper-val.over { color: var(--score-over, #c0432f); }
/* Cápsula "+1 bogey" bajo el stepper (reemplaza el vs par como texto suelto) */
.vs-cap {
  display: inline-block;
  padding: 2px 11px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.74rem;
  font-weight: 700;
}
.vs-cap.under { background: var(--score-under-soft, #d8ecdf); color: var(--brand-700, #134d2d); }
.vs-cap.over { background: var(--score-over-soft, #f6e2dd); color: var(--score-dbl, #8f2c1d); }
.vs-cap.even { background: var(--surface-2, #eef1ea); color: var(--text-muted, #57605a); }
.ctrl--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ctrl--small .ctrl-label {
  margin-bottom: 6px;
}
/* C26 (prueba integral 2026-09-17): min-width/min-height puestos ACÁ, no en cada `width`/`height`
   que lo pisa más abajo (el bloque cqh del final del archivo y el @media de pantallas bajas) —
   son una propiedad distinta, así que el piso de 44px queda sin importar cuál de esas reglas gana
   el ancho/alto puntual (mismo selector, misma especificidad, pero min-* no se sobreescribe si
   nadie más lo vuelve a declarar). Antes: 40px acá, 40px con el clamp (5cqh tope 40 a 874px de
   alto) y 28px en el piso de pantallas ≤660px de alto — los tres por debajo de 44. */
.stepper--sm .stepper-btn {
  width: 40px;
  height: 40px;
  min-width: var(--tap-min, 44px);
  min-height: var(--tap-min, 44px);
  font-size: 1.2rem;
}
.stepper--sm .stepper-val {
  font-size: 1.3rem;
}

/* fairway en iconos */
/* El piso táctil va ACÁ (mismo criterio que C26 en `.stepper--sm .stepper-btn`): los dos pisos de
   alto del final del archivo —el clamp por cqh y el @media (max-height: 660px)— solo tocan
   `padding` y `font-size`, así que el min-height de 44px sobrevive sin excepción por alto. Antes,
   con el padding de 4px de esas reglas, el segmentado quedaba en ~27px de alto (spec §10 R6). */
.seg--icons .seg-btn {
  padding: 10px 18px;
  min-height: var(--tap-min, 44px);
  font-size: 1.2rem;
  display: grid;
  place-items: center;
}

/* botones toggle: GIR / Up & Down / Sand save */
.cargar-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong, rgba(0, 0, 0, 0.18));
  background: var(--surface-1, #fff);
  color: var(--text, #1a1a1a);
  font-weight: 600;
  font-size: var(--fs-sm, 0.9rem);
  cursor: pointer;
}
.toggle-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Estado ON en soft (no verde pleno): deja leer el texto y convive con el disco de icono */
.toggle-btn.is-on {
  background: var(--brand-50, #eef6f1);
  color: var(--brand-700, #134d2d);
  border-color: var(--brand, #1f7a47);
}
/* Icono en disco: apagado neutro, prendido en marca */
.tgl-disc {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.82rem;
  background: var(--surface-2, #eef1ea);
  color: var(--text-muted, #57605a);
  margin-left: -6px;
}
.toggle-btn.is-on .tgl-disc { background: var(--brand, #1f7a47); color: #fff; }
/* Sugerencia AUTOMÁTICA (girOf/upDownOf) ≠ elección manual: borde punteado + tag "auto".
   Al tocarla pasa a manual (girManual/upDownManual) y el punteado desaparece. */
.toggle-btn.is-sug { border-style: dashed; }
.tgl-auto {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-400, #43996b);
}
/* El CRITERIO de la casilla, dentro del propio botón (E3, ronda 1 de revisión): mismo tamaño que
   `.tgl-auto` pero en el ámbar del bunker, porque no es una sugerencia automática sino la definición
   de lo que se marca. Va acá y no en un `title` —que en un iPhone no se muestra nunca— ni en un
   párrafo bajo la fila: un `.cargar-hint` ahí mide 37,5px y hacía DESBORDAR el hoyo del modo Rápido
   a 375x667 (17px) y a 360x568 (30px), con el cuerpo en `overflow: hidden`. */
.tgl-crit {
  /* .68rem = el mínimo legible del proyecto (ver la nota de `.pbp-eye`), y esta es la única cadena
     de esa pantalla cuyo único propósito es LEERSE. Medido antes de subirla: con .56 y con .68 la
     fila de toggles mide lo mismo y el cuerpo no desborda en 360x640, 375x667 ni 402x874 — o sea
     que el tamaño chico no estaba comprando nada. */
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--warning-text, #875c12);
}
/* A 568px de alto la fila de toggles NO tiene lugar: medido, CUALQUIER texto extra en el botón la
   parte en dos líneas (34px → 72px) y el cuerpo desborda 19px. Ahí el criterio cede, igual que ceden
   el eyebrow y la tira del hero cuando el hero se achica. De 600px para arriba —todo teléfono
   moderno— se ve siempre. */
@media (max-height: 600px) { .tgl-crit { display: none; } }
/* Bunker en arena (--gold): el color cuenta la historia del lie */
.toggle-btn--gold.is-on {
  background: var(--gold-soft, #f4ecd9);
  border-color: var(--gold, #b4862f);
  color: #7a5a16;
}
.toggle-btn--gold.is-on .tgl-disc { background: var(--gold, #b4862f); color: #fff; }

/* GIR sin determinar (putts en "–" y sin marcar a mano): borde punteado + "sin dato". No es un GIR
   fallado — el hoyo queda FUERA del GIR% hasta que el socio lo fije. Un toque lo resuelve. */
.toggle-btn--nd { border-style: dashed; color: var(--text-light, #899189); }
.toggle-btn--nd .tgl-auto { color: var(--text-light, #899189); }

/* "Levantó" en ámbar (--warning): no es una stat como GIR o Bunker sino el estado del hoyo — lo
   empezaste y no lo terminaste. Encendido, el hoyo no tiene score y en una partida cede el hoyo. */
.toggle-btn--lev.is-on {
  background: var(--warning-soft, #f6ead2);
  border-color: var(--warning, #c2871f);
  color: #8a5f14;
}
.toggle-btn--lev.is-on .tgl-disc { background: var(--warning, #c2871f); color: #fff; }
/* Botón de "levantó" por compañero, al lado de su stepper (mismo gesto, un solo toque). */
.ms1-levb {
  width: 44px; height: 44px; flex: 0 0 auto; margin-left: 2px;
  border-radius: 11px; border: 1px solid var(--border, #e2e6dd);
  background: var(--surface, #fff); color: var(--text-light, #899189);
  font-size: 1rem; display: grid; place-items: center; cursor: pointer;
}
.ms1-levb.is-on {
  background: var(--warning-soft, #f6ead2);
  border-color: var(--warning, #c2871f);
  color: var(--warning, #c2871f);
}
.ms1-levb:active { transform: scale(.94); }

/* ============================================================================
   Mejoras mobile-first: CTA principal, carrusel de canchas, tabla de tees,
   scorecard por nueve.
   ============================================================================ */

/* CTA "Cargar vuelta" — primero y prominente en la página Cancha */
.cargar-cta-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  padding: 16px var(--space-4);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand, #1e7b34);
  border: none;
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 8px 20px rgba(30, 123, 52, 0.28);
  cursor: pointer;
}
.cargar-cta-top i {
  font-size: 1.35rem;
}
.cargar-cta-top:active {
  transform: scale(0.99);
}
.cargar-cta-top:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: default;
}

/* Mini-cards bajo el CTA: partidas donde un amigo te agregó (en vivo o de hoy) */
#amigosPartidas { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-4); }
.amp-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e6dd);
  border-radius: var(--radius-md, 14px);
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 3px rgba(16, 32, 22, 0.06);
}
.amp-card__ico { font-size: 1.25rem; color: var(--brand, #1e7b34); flex: 0 0 auto; }
.amp-card__info { flex: 1; min-width: 0; }
/* El que se acorta es el NOMBRE, no la frase: recortando la línea entera, un nombre largo dejaba
   "Gerardo Píriz Etchega…" y se perdía el "te sumó a su partida", que es de lo que va la tarjeta. */
.amp-card__title { font-weight: 600; font-size: 0.9rem; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
.amp-card__title .amp-card__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.amp-card__meta { font-size: 0.78rem; color: var(--text-muted, #57605a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp-card__go { color: var(--text-muted, #888); }
.amp-vivo {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; color: #c22a22;
  background: rgba(224, 52, 42, 0.1); border: 1px solid rgba(224, 52, 42, 0.3);
  padding: 3px 8px; border-radius: 20px;
}
.amp-vivo__dot { width: 6px; height: 6px; border-radius: 50%; background: #e0342a; animation: amp-pulse 1.5s infinite; }
@keyframes amp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .amp-vivo__dot { animation: none; } }

/* Carrusel de canchas con portada (setup de carga de vuelta) */
.cancha-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px var(--space-2);
}
.cancha-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
  text-align: left;
  padding: 0;
  overflow: hidden;
  background: var(--surface-1, #fff);
  border: 2px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-md, 14px);
  cursor: pointer;
}
.cancha-card.is-selected {
  border-color: var(--brand, #1e7b34);
  box-shadow: 0 0 0 1px var(--brand, #1e7b34);
}
.cancha-card__img {
  display: grid;
  place-items: center;
  height: 88px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2, #eef2ee);
  color: var(--brand, #1e7b34);
  font-size: 1.8rem;
}
.cancha-card__name {
  display: block;
  padding: 8px 10px;
  font-weight: 600;
  font-size: var(--fs-sm, 0.875rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabla de tees (ficha de cancha) — reemplaza los recuadros, mejor en móvil */
.tees-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--fs-sm, 0.9rem);
}
.tees-table th,
.tees-table td {
  padding: 8px 6px;
  text-align: right;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  white-space: nowrap;
}
.tees-table th {
  font-size: var(--fs-2xs, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #666);
  font-weight: 600;
}
.tees-table th:first-child,
.tees-table td:first-child {
  text-align: left;
}
.tee-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.tees-table .tee-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}

/* Golpes + putts agrupados en una card: el foco principal del hoyo, contenido y con relieve.
   H6 (revisión final): única declaración de `.ctrl-grid` — antes había otra a nivel raíz
   (grid-template-columns: 1fr 1fr, sin el minmax) que esta pisaba por venir después en cascada;
   se unificó acá para que editarla tenga efecto visible de una sola vez.
   Los dos steppers entran centrados sin desbordar en pantallas angostas: minmax(0,1fr) evita que
   el contenido fuerce el ancho de columna; steppers más compactos. */
.ctrl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e6dd);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-3) var(--space-2);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(10, 25, 15, 0.05));
}
.ctrl-grid .stepper { gap: var(--space-2); }
.ctrl-grid .stepper-btn { width: 46px; height: 46px; font-size: 1.4rem; }
.ctrl-grid .stepper-val { min-width: 1.6ch; font-size: 1.8rem; }

/* ===== Detalle de la vuelta: PANTALLA COMPLETA (antes era un modal) =====
   Overlay fijo sobre el nav, como el flujo de carga: header con cancha/fecha + botón volver,
   pestañas (solo si la vuelta tiene partida grupal), cuerpo scrolleable y acciones fijas abajo.
   El patrón de secciones espeja el del link público /r/<token> que se comparte. */
.vd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1070; /* sobre el nav (--z-modal 1050), debajo de los toasts (--z-toast 1080) */
  display: none;
  background: var(--bg-page, #fafbf8);
}
.vd-overlay.is-open { display: block; }
.vd-screen { height: 100dvh; display: flex; flex-direction: column; }
.vd-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-top: max(var(--space-3), env(safe-area-inset-top, 0px));
  border-bottom: var(--border-width, 1px) solid var(--border, #e5e5e5);
  background: var(--surface, #fff);
}
.vd-back {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md, 10px);
  background: var(--surface-2, #eef1ea);
  color: var(--text-1, #222);
  font-size: 1.2rem;
  cursor: pointer;
}
.vd-title { min-width: 0; }
.vd-title__c {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-title__d { font-size: 0.74rem; color: var(--text-muted, #888); }
.vd-tabs { margin: var(--space-3) var(--space-4) 0; }
.vd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  /* Lo lee .rd-nine para romper este padding y usar el ancho completo de la pantalla. */
  --rd-pad: var(--space-4);
}
.vd-foot {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
  border-top: var(--border-width, 1px) solid var(--border, #e5e5e5);
  background: var(--surface, #fff);
}
/* Se achica (min-width:0) para que "Reintentar compartir" / "Preparando imagen…" no manden
   "Editar" sola a una segunda línea. */
.vd-foot__share { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-inline: 12px; }
.vd-foot .btn--icon { width: 42px; padding: 0; flex: none; }
/* "Cargar datos avanzados" (beta): fila completa arriba de las acciones estándar. */
.vd-foot { flex-wrap: wrap; }
.vd-foot__avz { flex: 1 1 100%; }
/* La tarjeta de partida ya trae su propio ancho/sombra (es la misma pieza que se exporta a PNG). */
.vd-body .rc-wrap { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.vd-body .rc-share { align-self: stretch; }

/* ===== Tarjeta del jugador: cabecera + stats + scorecard a TODO el ancho =====
   Estética minimal (hairlines, sin grilla, mucho aire) conservando el lenguaje clásico del golf
   en el score: ○ birdie · ◎ eagle · □ bogey · ⧉ doble+ (clases .mark de styles/golf.css).
   La tabla NO usa .scorecard: así no arrastra el min-width:640px ni el sticky del CSS global.
   La cancha y la fecha NO se repiten acá: ya las muestra el encabezado del modal. */
.rd-hero { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border, #e8e8e8); margin-bottom: var(--space-3); }
.rd-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.rd-hero__l { min-width: 0; }
.rd-hero__meta { font-size: 0.72rem; color: var(--text-muted, #999); margin-bottom: 4px; }
.rd-gross { font-size: 2.5rem; font-weight: 300; line-height: 0.88; letter-spacing: -0.03em; }
.rd-vs { font-size: 0.82rem; font-weight: 600; color: var(--text-muted, #666); padding-bottom: 3px; }
.rd-vs.under { color: var(--brand, #1e7b34); }
.rd-vs.over { color: #c0392b; }

.rd-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: var(--space-4); }
.rd-stat { font-size: 0.74rem; color: var(--text-muted, #888); }
.rd-stat b { color: var(--text-1, #222); font-weight: 650; font-variant-numeric: tabular-nums; }

/* FULL-BLEED: la tarjeta rompe el padding de su contenedor (--rd-pad, que declara .vd-body) y usa
   el ancho REAL de la pantalla, con un respiro mínimo para no quedar pegada al borde. Es lo que
   hace que las columnas respiren y que "Fairway" entre entero. */
.rd-nine {
  margin-bottom: var(--space-4);
  margin-inline: calc(var(--rd-pad, var(--space-4, 1rem)) * -1);
  padding-inline: var(--space-2, 0.5rem);
}
.rd-nine__t {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #999); margin-bottom: 3px;
}
.rd-nine__t b { font-size: 0.8rem; letter-spacing: 0; color: var(--text-1, #222); font-weight: 700; }
.rd-nine__t b i { font-style: normal; font-weight: 400; color: var(--text-muted, #999); }

/* C12 (prueba integral 2026-09-17): min-width: 0 pisa el ancho mínimo por contenido que un <table>
   arrastra dentro de un contenedor flex/grid — sin esto, table-layout: fixed no alcanza para que
   los cuatro bloques de una vuelta de 36 hoyos entren a 402px sin desbordar. */
.rd-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* La etiqueta necesita entrar "FAIRWAY" (la palabra más larga) sin pisar la primera columna. */
.rd-table col.rd-c-lab { width: 58px; }
.rd-table col.rd-c-tot { width: 32px; }
.rd-table th, .rd-table td { text-align: center; padding: 3px 0; font-size: 0.68rem; }
.rd-table thead th {
  font-size: 0.6rem; font-weight: 500; color: var(--text-muted, #aaa);
  border-bottom: 1px solid var(--border, #e8e8e8); padding-bottom: 4px;
}
/* C10: numero de hoyo tappable en el detalle de la vuelta → abre la edición en ese hoyo. Reset de
   <button> para que se vea igual que el <th> de siempre, con un subrayado punteado como única pista
   de que es tocable (columnas angostas: no entra un touch target de 44px real). */
.rd-hoyo-tap {
  all: unset; display: block; width: 100%; text-align: center; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 2px;
}
.rd-hoyo-tap:active { color: var(--brand, #1e7b34); }
.rd-table .rd-lab {
  text-align: left; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #aaa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-table .rd-tot { font-weight: 700; }
.rd-table tr.rd-par td { color: var(--text-muted, #999); font-size: 0.64rem; }
.rd-table tr.rd-sc td { padding: 2px 0; }
.rd-table tr.rd-sub { border-top: 1px solid var(--border, rgba(0, 0, 0, 0.05)); }
.rd-table tr.rd-sub td { font-size: 0.64rem; color: var(--text-1, #444); font-weight: 600; }
.rd-table tr.rd-sub .rd-lab { font-weight: 400; }

/* La marca (número) ancla las pseudo-formas; el círculo/cuadrado se centra sobre el dígito.
   (En styles/golf.css el ::before/::after es absoluto respecto del td y queda descentrado.) */
.rd .score-cell .mark { width: 21px; height: 21px; font-size: 0.72rem; position: relative; }
.rd .score-cell .mark::before,
.rd .score-cell .mark::after { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.rd .score-cell .mark.under::before { width: 21px; height: 21px; }
.rd .score-cell .mark.over::before { width: 19px; height: 19px; }
.rd .score-cell .mark.eagle::after { width: 15px; height: 15px; }
.rd .score-cell .mark.dbl::after { width: 14px; height: 14px; }
.sc-ok { color: var(--brand, #1e7b34); font-weight: 700; }
.sc-miss { color: #c0392b; font-weight: 700; }
.sc-dim { color: var(--text-muted, #aaa); }
.sc-legend { margin: var(--space-2) 0 0; font-size: 0.68rem; color: var(--text-muted, #777); }
.sc-legend .sc-ok, .sc-legend .sc-miss, .sc-legend .sc-dim { font-size: 0.74rem; }

/* Vuelta 'detalle': resumen Strokes Gained + secuencia de golpes */
.sc-sg { margin-top: var(--space-3); }
.sc-shots > summary { cursor: pointer; font-size: .85rem; color: var(--brand, #1e7b34); margin-top: 6px; }
.sc-shotlist { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.sc-shotrow { display: flex; gap: 8px; font-size: .82rem; padding: 2px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,.05)); }
.sc-shotrow__h { font-weight: 700; min-width: 22px; color: var(--text-muted, #888); }
.sc-shotrow__s { color: var(--text-1, #333); }

/* Cancha bloqueada (modo edición de tarjeta) */
.cargar-locked {
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  font-weight: 600;
}

/* ===== Análisis: tendencias ===== */
/* Fila de controles del gráfico: modo (vuelta/mes/trimestre) a la izquierda, rango (1A/3A/Todo)
   a la derecha. En pantallas angostas los toggles bajan de línea sin romper el card. */
.an-controls { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.an-controls .an-toggle { margin-bottom:0; }
.an-toggle { display:inline-flex; border:1px solid var(--border,#ddd); border-radius:var(--radius-2,8px); overflow:hidden; margin-bottom:var(--space-3); }
/* C98: área de toque ≥44px real (antes ~28px). */
.an-seg { min-height:var(--tap-min, 44px); display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; background:transparent; border:0; font-size:.85rem; color:var(--text-muted,#666); cursor:pointer; }
.an-seg.is-on { background:var(--brand,#1e7b34); color:#fff; }
.an-toggle--rango .an-seg { padding:6px 11px; font-variant-numeric:tabular-nums; }
/* V65: segModo/segRango (por vuelta/mes/trimestre · 1A/3A/Todo) se unificaron en 2 <select> nativos —
   comparten fila con el resto de .an-controls y no apilan más filas al subir el tap target de .an-seg. */
.an-sel { min-height:var(--tap-min, 44px); flex:1 1 0; min-width:0; padding:6px 10px; border:1px solid var(--border,#ddd); border-radius:var(--radius-2,8px); background:var(--card,#fff); font-size:.82rem; color:var(--text-1,#333); }
/* Contra qué nivel se compara el Strokes Gained (se elige en Perfil → Strokes Gained, 2026-09-30). */
.an-bench { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); flex-wrap:wrap; }
.an-bench__txt { margin:0; font-size:.8rem; line-height:1.45; color:var(--text-muted,#777); }
.an-bench__txt strong { color:var(--text-1,#333); font-weight:600; }
.an-bench__txt a { color:var(--brand,#1e7b34); font-weight:600; text-decoration:none; white-space:nowrap; padding:6px 0; }
.an-head { display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; }
.an-metric { font-size:.9rem; color:var(--text-muted,#666); }
.an-value { font-size:1.6rem; font-weight:600; }
.an-delta { font-size:.85rem; }
.an-delta.an-up { color:#1e7b34; }
.an-delta.an-down { color:#c0392b; }
.an-hint { margin:var(--space-2) 0 0; font-size:.8rem; }
.an-chart { margin:var(--space-3) 0; }
.an-group { margin-top:var(--space-3); }
.an-group__label { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted,#888); margin-bottom:6px; }
.an-chips { display:flex; flex-wrap:wrap; gap:6px; }
/* C98: min-height:44px = área de toque real (antes ~26-28px). */
.an-chip { min-height:var(--tap-min, 44px); display:inline-flex; align-items:center; padding:5px 11px; border:1px solid var(--border,#ddd); border-radius:999px; background:transparent; font-size:.8rem; color:var(--text-1,#333); cursor:pointer; }
.an-chip.is-on { background:var(--brand,#1e7b34); color:#fff; border-color:var(--brand,#1e7b34); }
/* V66: opacity:.4 sobre #333 daba ~2.2:1 de contraste (casi ilegible); .55 + un color sólido de
   `--text-muted` sube el contraste (≥3:1) sin perder la distinción visual de "deshabilitado". */
.an-chip:disabled { opacity:.55; color:var(--text-muted); cursor:not-allowed; }
.an-chips--row { margin-bottom:var(--space-3); }

/* Selector de categoría (tabs). V65: antes 5 columnas fijas que repartían el ancho y partían el
   texto en 2 líneas ("Juego corto/largo") — ahora una sola línea con scroll horizontal: cada tab
   mide lo que necesita su texto, el socio desliza para ver el resto. */
.an-tabs {
  display:flex; gap:2px; margin-bottom:var(--space-2);
  border-bottom:1px solid var(--border,#e5e5e5);
  /* Sin scroll horizontal (Franco, 2026-09-22): las etiquetas cortas (ETIQUETA_GRUPO en analisis.js)
     entran en 390 px; si algún día no entran, las pestañas se reparten el ancho en vez de scrollear. */
  overflow:hidden; white-space:nowrap;
}
/* flex-basis auto: cada pestaña toma el ancho de su texto y se reparte el sobrante; con 1 1 0 y seis
   pestañas iguales "Approach" desbordaba la suya en 375 px. */
.an-tabs .an-tab { flex:1 1 auto; padding-left:4px; padding-right:4px; }
.an-tab {
  flex:0 0 auto; min-width:0; display:flex; align-items:center; justify-content:center;
  min-height:var(--tap-min, 44px); text-align:center; padding:7px 12px; background:transparent; border:0;
  border-bottom:2px solid transparent; font-size:.74rem; line-height:1.15; white-space:nowrap;
  color:var(--text-muted,#666); cursor:pointer;
}
.an-tab.is-on { color:var(--brand,#1e7b34); border-bottom-color:var(--brand,#1e7b34); font-weight:600; }

/* ===== Análisis · vista Strokes Gained ampliada (2026-09-30, mock aprobado por Franco) =====
   Análisis: [Filtros] [Comparar] → "N vueltas · vs nivel" → Radiografía → Cambios recientes →
   Tendencias (con Cortes). El card que la contiene (.card.card-pad) se vuelve transparente y cada
   bloque es su propia tarjeta. La Radiografía también va en Tu juego → Tiro a tiro. Verde = golpes
   ganados, naranja = perdidos (se distinguen también por el lado de la barra y el signo). */
/* En :root y no en .sgx-host: los Cortes también se pintan en la vista reducida de Cancha, fuera de
   las tarjetas de Análisis, y sin las variables quedaban sin color. */
:root { --sgx-gana: var(--brand,#1f7a47); --sgx-gana-txt: var(--success-text,#186138); --sgx-gana-soft: var(--brand-50,#eef6f1);
  --sgx-pierde: #e0914f; --sgx-pierde-txt: #9a4a14; --sgx-pierde-soft: #fbefe5; }
.sgx-host { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
  display:flex; flex-direction:column; gap:var(--space-3); }
.sgx-host > .stats-switch { margin:0; }
.sgx-card { background:var(--surface,#fff); border:1px solid var(--border,#e2e6dd); border-radius:var(--radius-lg,16px);
  box-shadow:var(--shadow-sm,none); padding:14px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.sgx-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.sgx-card__head--col { flex-direction:column; align-items:flex-start; gap:2px; }
.sgx-card__head h3 { margin:0; font-size:1rem; font-weight:700; }
.sgx-card__head span { font-size:.78rem; color:var(--text-muted,#57605a); }
.sgx-num { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.sgx-num.is-pos { color:var(--sgx-gana-txt); }
.sgx-num.is-neg { color:var(--sgx-pierde-txt); }
.sgx-nada { margin:0; font-size:.85rem; color:var(--text-muted,#57605a); }

/* Selector con rótulo arriba (Comparar → "Qué comparar"). `flex:none` + alto fijo: `.an-sel` trae
   `flex:1 1 0` para compartir fila, y en una COLUMNA eso le daba alto 0 → en el iPhone la caja se
   achicaba y cortaba el texto (prueba de Franco, 2026-09-30). */
.sgx-filtro { display:flex; flex-direction:column; gap:4px; min-width:0; margin:0; }
.sgx-filtro > span { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-muted,#57605a); }
.sgx-filtro .an-sel { flex:none; width:100%; height:var(--tap-min,44px); }
.sgx-barra { display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* Análisis → Rendimiento: la fila del botón "Filtros" dentro del card (fuera de .sgx-host no hay gap). */
:not(.sgx-host) > .sgx-barra { margin-bottom:var(--space-2); }
.sgx-meta { margin:-4px 0 0; }
.sgx-link { min-height:var(--tap-min,44px); display:inline-flex; align-items:center; gap:6px; padding:0 12px; flex:0 0 auto;
  border:1px solid var(--border-strong,#ccd3c6); border-radius:999px; background:var(--surface,#fff);
  color:var(--brand,#1f7a47); font-size:.82rem; font-weight:600; cursor:pointer; }

/* Filas extra de la Radiografía en Tu juego (Compromiso, Tiger 5): sin barra, debajo del total. */
.sgx-extras { display:flex; flex-direction:column; gap:6px; padding-top:8px; border-top:1px solid var(--surface-2,#eef1ea); }
.sgx-extra { display:flex; align-items:center; justify-content:space-between; font-size:.88rem; font-weight:600; min-height:28px; }

/* Botón de filtros. En Cancha y en el perfil de un amigo va al lado del título "Tendencias" y es solo
   el ícono; en Análisis dice "Filtros". Con filtros activos, verde y con el número. */
.dash-section__head.an-head-filtros { justify-content:flex-start; }
.an-filtrar { position:relative; min-width:var(--tap-min,44px); height:var(--tap-min,44px); display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 12px; flex:0 0 auto; border:1px solid var(--border-strong,#ccd3c6); border-radius:999px; background:var(--surface,#fff);
  color:var(--text-1,#18211b); font-size:.85rem; font-weight:600; cursor:pointer; }
.an-filtrar .ph { font-size:1.15rem; }
.an-filtrar:not(.an-filtrar--texto) { padding:0; width:var(--tap-min,44px); }
.an-filtrar.is-on { border-color:var(--brand,#1f7a47); color:var(--brand,#1f7a47); background:var(--brand-50,#eef6f1); }
.an-filtrar__n { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--brand,#1f7a47); color:#fff;
  font-size:.7rem; font-weight:700; line-height:18px; text-align:center; }
.an-filtrar:not(.an-filtrar--texto) .an-filtrar__n { position:absolute; top:-4px; right:-4px; }
.an-controls--solo { justify-content:flex-end; }
.an-controls .an-filtrar { flex:0 0 auto; }

/* Hoja de filtros */
.an-filtros .modal-header { padding:var(--space-4) var(--space-5); }
.an-filtros .modal-body { padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.an-filtros .modal-footer { padding:var(--space-3) var(--space-5); }
.an-filtros .modal-footer .btn { min-height:var(--tap-min,44px); }
.an-fgrupo { border:0; margin:0; padding:0; min-width:0; }
.an-fgrupo legend { padding:0; margin-bottom:8px; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-muted,#57605a); }

/* Barras divergentes (Radiografía y lie de origen) */
.sgx-fila { display:grid; grid-template-columns:88px minmax(0, 1fr) 48px; align-items:center; gap:8px; min-height:28px; }
.sgx-fila--lie { grid-template-columns:118px minmax(0, 1fr) 48px; min-height:40px; }
.sgx-fila__lbl { font-size:.88rem; font-weight:600; display:flex; flex-direction:column; min-width:0; }
.sgx-fila__lbl b { font-weight:600; }
.sgx-fila__lbl small { font-size:.72rem; font-weight:400; color:var(--text-muted,#57605a); }
.sgx-bar { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); height:14px; }
.sgx-bar__neg { display:flex; justify-content:flex-end; }
.sgx-bar__pos { display:flex; border-left:1.5px solid var(--text-muted,#899189); }
.sgx-bar__neg i { display:block; height:100%; background:var(--sgx-pierde); border-radius:4px 0 0 4px; }
.sgx-bar__pos i { display:block; height:100%; background:var(--sgx-gana); border-radius:0 4px 4px 0; }
.sgx-total { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--surface-2,#eef1ea); font-size:.9rem; font-weight:600; }
.sgx-total b { font-size:1.25rem; font-weight:800; }

/* Cambios recientes */
.sgx-cambio { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; }
.sgx-cambio.is-pos { background:var(--sgx-gana-soft); }
.sgx-cambio.is-neg { background:var(--sgx-pierde-soft); }
.sgx-cambio__ico { width:32px; height:32px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; }
.sgx-cambio.is-pos .sgx-cambio__ico { background:var(--sgx-gana); }
.sgx-cambio.is-neg .sgx-cambio__ico { background:#b4541a; }
.sgx-cambio__txt { flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.sgx-cambio__txt b { font-size:.92rem; font-weight:600; }
.sgx-cambio__txt small { font-size:.78rem; color:var(--text-muted,#57605a); font-variant-numeric:tabular-nums; }
.sgx-cambio > .sgx-num { font-size:1rem; font-weight:800; }

/* Cortes */
.sgx-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:1px; border:1.5px solid var(--border-strong,#ccd3c6);
  border-radius:10px; overflow:hidden; background:var(--border,#e2e6dd); }
.sgx-seg__btn { min-height:var(--tap-min,44px); border:0; background:var(--surface,#fff); color:var(--text-1,#18211b); font-size:.85rem; font-weight:600; cursor:pointer; padding:0 4px; }
.sgx-seg__btn.is-on { background:var(--brand,#1f7a47); color:#fff; font-weight:700; }
.sgx-corte { display:flex; flex-direction:column; gap:8px; }
.sgx-seg + .sgx-corte { margin-top:12px; } /* vista reducida (Cancha): sin el gap de .sgx-card */
.sgx-card > .sgx-seg + .sgx-corte { margin-top:0; }
.sgx-lectura { margin:2px 0 0; padding:10px 12px; border-radius:12px; background:var(--sgx-pierde-soft); font-size:.85rem; line-height:1.4; }
.sgx-lectura b { font-weight:600; }
.sgx-tramo { display:grid; grid-template-columns:minmax(0, 1fr) 72px 64px; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:var(--surface-inset,#f1f4ee); }
.sgx-tramo__lbl { font-size:.9rem; font-weight:600; }
.sgx-tramo__col { display:flex; flex-direction:column; align-items:flex-end; }
.sgx-tramo__col small { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-muted,#57605a); }
.sgx-tramo__col b { font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* Approach (2026-09-30): tabla de 25 yd en la que cada fila es un botón que elige el tramo; debajo,
   "Dónde terminaron" con la misma barra apilada de "Mental" (.dist-bar / .dist-legend). */
.sgx-ttabla { display:flex; flex-direction:column; margin-top:4px; font-variant-numeric:tabular-nums; }
.sgx-trow { display:grid; grid-template-columns:minmax(0, 1fr) 38px 52px 44px 54px; gap:6px; align-items:center;
  width:100%; min-height:var(--tap-min,44px); padding:0 8px; border:0; border-bottom:1px solid var(--surface-2,#eef1ea);
  background:transparent; font:inherit; font-size:.86rem; color:var(--text-1,#18211b); text-align:right; cursor:pointer; border-radius:8px; }
.sgx-trow > span:first-child { text-align:left; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sgx-trow.is-sel { background:var(--brand-50,#eef6f1); box-shadow:inset 3px 0 0 var(--brand,#1f7a47); }
.sgx-trow.is-pocos { color:var(--text-muted,#899189); }
.sgx-trow.is-pocos > span:first-child { font-weight:400; }
.sgx-trow--head { min-height:32px; cursor:default; border-bottom-color:var(--border,#e2e6dd); border-radius:0;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--text-muted,#57605a); }
.sgx-trow--head > span:first-child { font-weight:700; }
/* Putting (tiro a tiro): tabla de 4 columnas que elige. */
.sgx-trow--4 { grid-template-columns:minmax(0, 1fr) 56px 56px 60px; }
.sgx-pstats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:6px; }
.sgx-pstats > div { display:flex; flex-direction:column; gap:2px; padding:10px 8px; border-radius:12px; background:var(--surface-inset,#f1f4ee); text-align:center; }
.sgx-pstats small { font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--text-muted,#57605a); }
.sgx-pstats b { font-size:1.15rem; font-weight:800; font-variant-numeric:tabular-nums; }
.sgx-fin { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.sgx-fin__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.sgx-fin__head h4 { margin:0; font-size:.95rem; font-weight:700; }
.sgx-fin__head span { font-size:.8rem; color:var(--text-muted,#57605a); }
.sgx-fin .dist-bar { margin:0; }
.sgx-fin .dist-legend { margin-top:2px; }

/* Tablas (Comparar) */
.sgx-tabla { width:100%; border-collapse:collapse; font-size:.88rem; font-variant-numeric:tabular-nums; }
.sgx-tabla th, .sgx-tabla td { padding:8px 4px; border-bottom:1px solid var(--surface-2,#eef1ea); text-align:right; white-space:nowrap; }
.sgx-tabla th[scope="row"], .sgx-tabla thead th:first-child { text-align:left; font-weight:600; }
.sgx-tabla thead th { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-muted,#57605a); border-bottom-color:var(--border,#e2e6dd); }
.sgx-tabla tr.is-pocos th, .sgx-tabla tr.is-pocos td { color:var(--text-muted,#899189); font-weight:400; }
.sgx-tabla--comparar .sgx-ab__a { font-weight:700; }
.sgx-tabla--comparar td:nth-child(3) { color:var(--text-muted,#57605a); }
.sgx-dif { font-weight:800; }
.sgx-dif.is-mejor { color:var(--sgx-gana-txt); }
.sgx-dif.is-peor { color:var(--sgx-pierde-txt); }
.sgx-dif.is-igual { color:var(--text-muted,#899189); font-weight:400; }

/* Comparar */
.sgx-volver { align-self:flex-start; min-height:var(--tap-min,44px); display:inline-flex; align-items:center; gap:4px; padding:0 4px;
  border:0; background:transparent; color:var(--brand,#1f7a47); font-size:.9rem; font-weight:600; cursor:pointer; }
.sgx-titulo { margin:-6px 0 0; font-size:1.35rem; font-weight:700; }
.sgx-ab { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.sgx-ab__lado { padding:10px 12px; border-radius:12px; border:1.5px solid var(--border,#e2e6dd); background:var(--surface-inset,#f1f4ee); display:flex; flex-direction:column; min-width:0; }
.sgx-ab__lado--a { background:var(--brand-50,#eef6f1); border-color:var(--brand-200,#a7d2b8); }
.sgx-ab__lado small { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-muted,#57605a); }
.sgx-ab__lado b { font-size:.9rem; font-weight:700; }
.sgx-ab__lado span { font-size:.76rem; color:var(--text-muted,#57605a); }

/* Distribución (métricas "Mental"): barra 100% apilada + leyenda */
.an-dist { margin:var(--space-3) 0; }
.dist-bar { display:flex; height:26px; border-radius:7px; overflow:hidden; background:var(--surface-2,#eee); }
.dist-seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem; font-weight:700; min-width:0; }
.dist-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:var(--space-2); }
.dist-leg { font-size:.78rem; display:flex; align-items:center; gap:5px; }
.dist-dot { width:10px; height:10px; border-radius:3px; display:inline-block; }

/* ===== Partida grupal (cargar-match.js) ===== */
/* Setup: jugadores + modalidades */
.mset { margin-top:var(--space-3); border-top:1px solid var(--border,#e5e5e5); padding-top:var(--space-3); }
.mset-head { display:flex; align-items:center; gap:6px; font-weight:600; color:var(--text-1,#222); margin-bottom:var(--space-2); }
.mset-head .mset-opt { font-weight:400; color:var(--text-muted,#888); font-size:.82rem; }
/* "Jugar Gross": en la misma fila del título y con su mismo cuerpo de letra. Marcado, la partida no
   pide índices y nadie recibe golpes de ventaja (neto = bruto). */
/* Doble clase: `.cargar-setup label` (a .8rem) le gana a una clase sola, y el pedido es que el
   checkbox vaya en el MISMO cuerpo que el título "Partida". */
/* V11: label con área de toque de 44px (el visual del checkbox se mantiene aparte, en el input). */
.mset-head .mset-gross { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:1rem; margin-bottom:0; cursor:pointer; white-space:nowrap; min-height:44px; }
.mset-gross input { width:22px; height:22px; margin:0; accent-color:var(--brand,#1f7a47); cursor:pointer; }
/* % de hándicap de la partida (2026-09-30, opción B del mock): barra de 6 botones, mismo lenguaje que
   el selector "Rápido / Tiro por tiro". Solo sin "Jugar Gross" y con compañeros (pctHtml). */
.mset-pct { margin-bottom:10px; }
.mset-pct__lbl { display:block; font-size:.875rem; font-weight:600; color:var(--text,#18211b); margin-bottom:6px; }
.mset-pct__seg { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:1px; border:1.5px solid var(--border-strong,#ccd3c6); border-radius:10px; overflow:hidden; background:var(--border,#e2e6dd); }
.mset-pct__b { min-height:44px; border:0; background:var(--surface,#fff); color:var(--text,#18211b); font:inherit; font-size:.94rem; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; padding:0; }
.mset-pct__b.is-on { background:var(--brand,#1f7a47); color:#fff; font-weight:700; }
.mset-players { display:flex; flex-direction:column; gap:8px; }
.mset-name, .mset-idx, .mset-tee {
  border:1px solid var(--border,#ddd); border-radius:9px; padding:7px 9px; font-size:.85rem; background:var(--surface,#fff); color:var(--text-1,#222);
}
/* V44: área de toque mínima (44px) en los dos inputs que se tocan con el dedo — nombre e índice.
   Aparte de la regla base (que también gobierna `.mset-tee`, sin tocar) porque el select de tee ya
   mide bien y no hace falta agrandarlo. `min-height` no pelea con el padding más chico de la
   variante inline de "Vos" (`.mset-f--inline .mset-idx`): sigue midiendo 44px igual, más angosto. */
.mset-name, .mset-idx { min-height:44px; }
/* Jugadores como CARDS con avatar + HCP de cancha visible (mejora visual 2026-07-24). El hándicap
   de cancha ya se calculaba (recomputeHandicaps) pero no se mostraba: ahora es el feedback
   inmediato al tipear el índice (se refresca en vivo sin re-render, ver refreshHcps). */
.mset-card { background:var(--surface,#fff); border:1px solid var(--border,#e2e6dd); border-radius:14px; padding:10px 12px; }
.mset-card--you { border-color:var(--brand-200,#a7d2b8); background:linear-gradient(0deg, var(--surface,#fff) 60%, #f4faf6); }
.mset-card__top { display:flex; align-items:center; gap:10px; }
.mset-av { position:relative; width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:inline-grid; place-items:center; font-weight:700; font-size:.9rem; background:var(--surface-2,#eef1ea); color:var(--text-muted,#57605a); }
.mset-av--you { background:var(--brand,#1f7a47); color:#fff; }
.mset-av--amigo { background:var(--brand-100,#d4e9dc); color:var(--brand-700,#134d2d); }
.mset-av--sm { width:28px; height:28px; font-size:.75rem; }
.mset-av__mini { position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%; background:var(--brand,#1f7a47); color:#fff; font-size:.55rem; display:grid; place-items:center; border:2px solid var(--surface,#fff); }
.mset-card__nm { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.mset-card__nm b { font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mset-card__nm small { font-size:.68rem; color:var(--text-light,#899189); }
.mset-card__nm .mset-name { width:100%; }
.mset-hcp { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; }
.mset-hcp small { font-size:.56rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light,#899189); font-weight:700; }
.mset-hcp b { font-weight:800; font-size:1.05rem; line-height:1.1; color:var(--brand-700,#134d2d); }
.mset-card__fields { display:flex; gap:8px; margin-top:8px; }
.mset-f { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mset-f > span { font-size:.56rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light,#899189); font-weight:700; }
/* Sello del índice OFICIAL (federado): el campo viene cargado y en solo-lectura, así que el
   sello es lo que explica por qué no se puede tipear. */
.mset-of { color:var(--brand,#1f7a47); font-size:.72rem; vertical-align:-1px; }
.mset-f .mset-idx[readonly] { background:var(--surface-2,#eef1ea); color:var(--brand-700,#134d2d); font-weight:700; cursor:default; }
.mset-f .mset-idx, .mset-f .mset-tee { width:100%; background:var(--surface-inset,#f1f4ee); }
.mset-f--inline { flex:0 0 auto; width:64px; }
.mset-f--inline .mset-idx { padding:5px 8px; text-align:center; }
.mset-f .mset-teefix { width:100%; text-align:left; padding:7px 9px; }
/* V43: aclaración de dónde salió el Índice Azalea provisional — debajo de la fila de "Vos" (no
   solo del input: la fila es flex y el hint necesita el ancho completo para no cortarse). Solo
   aparece mientras `j.indiceProvisional` es true; el propio JS lo saca del DOM apenas se tipea. */
.mset-idxhint { margin-top:6px; font-size:.72rem; line-height:1.3; color:var(--text-muted,#57605a); display:flex; align-items:flex-start; gap:5px; }
.mset-idxhint i { flex:0 0 auto; margin-top:1px; color:var(--brand,#1f7a47); }
.mset-del { width:40px; height:40px; margin-right:-6px; flex:0 0 auto; border:0; border-radius:50%; background:transparent; color:var(--text-light,#b9c1ba); font-size:1.1rem; cursor:pointer; }
.mset-del:hover { background:var(--surface-2,#f0f0f0); color:var(--text-muted,#57605a); }
/* Agregar: "amigo" con énfasis (activa la feature Amigos — ve la ronda en vivo), invitado neutro */
.mset-add { margin-top:8px; display:flex; align-items:center; justify-content:center; gap:7px; background:var(--surface,#fff); border:1.5px solid var(--border,#e2e6dd); border-radius:12px; padding:9px; width:100%; color:var(--text,#18211b); font-weight:600; cursor:pointer; }
.mset-add__d { width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:inline-grid; place-items:center; font-size:.75rem; background:var(--surface-2,#eef1ea); color:var(--text-muted,#57605a); }
.mset-add--amigo { border-color:var(--brand-200,#a7d2b8); background:#f4faf6; color:var(--brand-700,#134d2d); }
.mset-add--amigo .mset-add__d { background:var(--brand,#1f7a47); color:#fff; }
.mset-hint { font-size:.8rem; color:var(--text-muted,#888); margin:8px 0 0; }
/* Amigos en la partida (feature Amigos): fila de botones agregar + chip de amigo + picker modal.
   V9: a 402px con los 3 botones en una fila a `flex`, "Agregar amigo" no entraba en una línea.
   Primero se probó la corrección mínima del acta (subir la especificidad de `.mset-add--avz` para
   que sí ganara el `flex:0 0 auto` que el propio comentario viejo ya pedía) — no alcanzó: medido
   a 402px, el reparto entre 3 botones deja ~60px de texto para "Agregar amigo" (13 caracteres),
   muy poco pase lo que pase quién se estira. Se aplica entonces la grilla de 2 columnas del plan
   (Ruling del lead): "Agregar amigo"/"Invitado" en su propia columna (~181px cada uno a 402px,
   suficiente para el texto en una línea) y "Avanzado" en una fila propia debajo, alineado a la
   derecha — se ve igual cuando "Avanzado" queda solo (n≥4 esconde los otros dos). */
.mset-addrow { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mset-add--avz { grid-column:1 / -1; justify-self:end; gap:5px; padding-left:11px; padding-right:9px; }
.mset-add__cx { font-size:.8rem; color:var(--text-muted,#888); transition:transform .18s ease; }
.mset-add--avz.is-open .mset-add__cx { transform:rotate(180deg); }
.mset-add--avz.is-on { border-color:var(--brand-200,#a7d2b8); background:#f4faf6; color:var(--brand-700,#134d2d); }
.mset-add--avz.is-on .mset-add__d { background:var(--brand,#1f7a47); color:#fff; }
/* Panel desplegable: filas conmutador (no modal — es una lista corta y el setup ya scrollea). */
.mset-avz { margin-top:8px; display:flex; flex-direction:column; gap:6px; border:1px solid var(--border,#e2e6dd); border-radius:12px; padding:7px; background:var(--surface-2,#f3f7f3); }
.mset-avzopt { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid transparent; border-radius:10px; background:var(--surface,#fff); cursor:pointer; text-align:left; }
.mset-avzopt__box { width:22px; height:22px; flex:0 0 auto; border-radius:7px; border:1.5px solid var(--border,#d5dbd2); background:var(--surface,#fff); display:grid; place-items:center; font-size:.8rem; color:transparent; }
.mset-avzopt__txt { display:flex; flex-direction:column; min-width:0; }
.mset-avzopt__txt b { font-size:.88rem; font-weight:600; color:var(--text,#18211b); }
.mset-avzopt__txt small { font-size:.74rem; color:var(--text-muted,#888); }
.mset-avzopt.is-on { border-color:var(--brand-200,#a7d2b8); background:#f4faf6; }
.mset-avzopt.is-on .mset-avzopt__box { background:var(--brand,#1f7a47); border-color:var(--brand,#1f7a47); color:#fff; }
.mset-avzopt:active { transform:scale(.99); }
.mset-name--amigo { display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--brand,#1e7b34); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* El picker se abre sobre el overlay de carga (z 1070): sin esto queda detrás e "invisible" */
#msetAmigosModal { z-index: 1075; /* debajo de los toasts (--z-toast 1080) */ }
/* V58: la confirmación de borrar se abre DESDE el detalle de vuelta (.vd-overlay, z 1070) — mismo
   caso que #msetAmigosModal arriba: sin esto el modal-overlay por defecto (--z-modal 1050) queda
   detrás y el clic en "Borrar"/"Cancelar" lo intercepta el detalle. */
#confirmBorrarVuelta { z-index: 1075; /* debajo de los toasts (--z-toast 1080) */ }
/* V5 fix ronda 3: mismo caso que #confirmBorrarVuelta arriba. Hoy startEdit cierra .vd-overlay
   (vdClose) o no tiene overlay abierto antes de llamar a avisoEditarAvanzado(), así que el 1050
   por defecto ya alcanzaría — pero este aviso vive en el mismo flujo que cargarOverlay/.vd-overlay
   (ambos z 1070), así que se lo deja en 1075 como a sus hermanos, por si un cambio futuro llega a
   abrirlo con alguno de esos dos ya abierto. */
#avisoEditarAvanzado { z-index: 1075; /* debajo de los toasts (--z-toast 1080) */ }
/* Picker de amigos: filas píldora con avatar + hcp en badge (lista de contactos, no formulario) */
.mset-amigos { display:flex; flex-direction:column; gap:8px; }
.mset-amigo { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:6px 12px 6px 6px; border:1px solid var(--border,#ddd); border-radius:999px; background:transparent; cursor:pointer; text-align:left; }
.mset-amigo:hover { border-color:var(--brand,#1e7b34); }
.mset-amigo__l { display:flex; align-items:center; gap:9px; min-width:0; }
.mset-amigo__nombre { font-weight:600; color:var(--text-1,#333); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mset-amigo__badge { flex:0 0 auto; padding:2px 10px; border-radius:999px; background:var(--brand-50,#eef6f1); color:var(--brand-700,#134d2d); font-weight:700; font-size:.72rem; }
.mset-amigo__badge--none { background:var(--surface-3,#e6eae1); color:var(--text-light,#899189); font-weight:600; }
.mset-amigo-sub { font-size:.78rem; color:var(--text-muted,#57605a); margin:0 0 10px; }
/* Modalidades como tiles con icono (patrón .terr-tile); ON en soft con borde de marca */
.mset-modos { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:var(--space-2); }
/* C39: el nombre estaba a .66rem (10,56px con la raíz de 16px de este proyecto) — se sube a .8rem
   (12,8px). El acta sugería .72–.75rem, pero .75rem son 12px justos y el propio criterio de cierre
   de la tarea es que `ios:recorrido` NO liste ninguna tile por debajo de 12,5px: .75rem no llega,
   así que se sube un poco más para cruzar ese piso con margen. Medido a 402px con las 9 tiles a 3
   columnas (~119px cada una): con el nombre más largo del catálogo ("Match equipos · desempate
   peor bola") y dos más ("Fourball / mejor bola", "Match equipos · 2 y 1") el texto SÍ partía en
   2–3 líneas dentro de la tile — igual que anticipaba el plan, así que entra el fallback a 2
   columnas (Ruling del lead), no solo el font-size.
   Ronda 1 de revisión: el corte de 419px (medido solo a 402px) no alcanzaba — medido de nuevo a
   420 y 430px (donde ya entran las 3 columnas), "Fourball / mejor bola" y "Match equipos · 2 y 1"
   TAMBIÉN partían en 2 líneas ahí (antes no se habían medido esos anchos, ver acta). Una tile de 3
   columnas necesita ~182px para que esos dos nombres entren en una línea (el ancho que ya da 2
   columnas a 402px) — muy por encima de cualquier ancho de teléfono real en portrait, así que 3
   columnas nunca tiene margen en este rango. Se sube el corte a 768px (mismo breakpoint "tablet"
   que ya usa este archivo, `.draft-bar` línea ~3456): con eso 3 columnas queda para pantallas
   claramente más anchas que un teléfono, donde el ancho por tile deja de ser el problema. */
@media (max-width: 768px) {
  .mset-modos { grid-template-columns:repeat(2,1fr); }
}
.mset-modo { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px 7px; border:1.5px solid transparent; border-radius:12px; background:var(--surface-2,#eef1ea); color:var(--text-muted,#57605a); font-size:.8rem; font-weight:600; line-height:1.15; text-align:center; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.mset-modo i { font-size:1rem; }
/* V46: `--brand-50` contra `--surface-2` (el fondo sin elegir) diferían en apenas 8 unidades de
   verde/azul — a simple vista lo único que se notaba era el borde. `--brand-100` cuadriplica esa
   diferencia de luminosidad (ver medición en el reporte de la tarea) y sigue leyéndose "soft", no
   un verde sólido. Se suma además el check (`.mset-modo__ck`, HTML) para no depender solo del
   color — quien no distingue bien el verde igual ve la tile marcada. */
.mset-modo.is-on { background:var(--brand-100,#d4e9dc); border-color:var(--brand,#1f7a47); color:var(--brand-700,#134d2d); box-shadow:0 1px 4px rgba(31,122,71,.15); }
.mset-modo__nm { display:block; }
/* Ronda 2 (V46+C39): el check arrancó adentro de `.mset-modo__nm` (a la derecha del nombre) — con
   un nombre largo SELECCIONADO en la grilla de 3 columnas a su ancho REAL (~141px, `.cargar-setup`
   de la pantalla real, no los ~159px que medía el harness viejo — ver acta) el ancho que sumaba el
   check alcanzaba a partir el nombre en 2 líneas. Pasa a badge en la esquina superior derecha de
   la tile, position:absolute — no ocupa ancho del texto del nombre en ningún tamaño de grid. */
.mset-modo__ck { position:absolute; top:4px; right:4px; font-size:.8rem; line-height:1; color:var(--brand,#1f7a47); }
.mset-equipos { margin-top:var(--space-2); }
.mset-sub { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted,#888); margin-bottom:6px; }
.mset-teamrow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 0; font-size:.85rem; }
.mset-ab { display:flex; gap:3px; }
.mset-team { width:30px; height:28px; border:1px solid var(--border,#ddd); border-radius:8px; background:transparent; font-weight:700; font-size:.8rem; cursor:pointer; color:var(--text-1,#333); }
.mset-team.is-on { background:var(--brand,#1e7b34); color:#fff; border-color:var(--brand,#1e7b34); }

/* Paso de acompañantes (pantalla propia por hoyo): fila de jugadores + marcador embebido */
.cargar-mstep__body { display:flex; flex-direction:column; gap:var(--space-3); }
/* Los bloques NO se achican: el que scrollea es el body. Sin esto, en un iPhone chico con la tabla
   de posiciones abajo (stableford/skins) el flex repartía el faltante y aplastaba el hero de 98px a
   28px: como .ms1-hero lleva overflow:hidden, su alto mínimo automático es 0 y en vez de empujar el
   scroll se recortaba a sí mismo — el resultado de la partida quedaba cortado al medio. */
.cargar-mstep__body > * { flex: none; }

/* --- Paso "cómo viene la ronda" (jugando solo) -------------------------------------------------
   Con 18 hoyos entra entera en el alto de la pantalla, con la tarjeta a TODO el ancho (el
   margin-inline negativo de .rd-nine se apoya en --rd-pad = padding del body) y sin caja alrededor.
   C12 (prueba integral 2026-09-17): con la opción "36 hoyos" son CUATRO bloques (el doble de alto),
   así que el body tiene que poder scrollear — overflow-y: hidden los recortaba sin forma de llegar
   a "Ida · 2ª"/"Vuelta · 2ª". auto no cambia nada cuando entra entero (18 hoyos): sigue sin barra. */
.cargar-prog__body {
  --rd-pad: var(--space-4);
  overflow-y: auto;
  gap: var(--space-3);
  justify-content: flex-start;
}
.cargar-prog__body .rd-nine { margin-bottom: var(--space-3); }
.cargar-prog__body .rd-nine:last-child { margin-bottom: 0; }
/* Hero del progreso: el vs par ES el dato → cápsula grande coloreada, golpes/hoyos como sub,
   y mini barras del vs par por hoyo (la forma de la ronda). Reemplaza a .prog-hero (dos números). */
.prog-hero2 { text-align: center; padding-top: var(--space-2); }
.prog-vscap {
  display: inline-block;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 10px 24px;
  border-radius: var(--radius-pill, 999px);
}
.prog-vscap.under { background: var(--score-under-soft, #d8ecdf); color: var(--brand-700, #134d2d); }
.prog-vscap.over { background: var(--score-over-soft, #f6e2dd); color: var(--score-dbl, #8f2c1d); }
.prog-vscap.even { background: var(--surface-2, #eef1ea); color: var(--text-muted, #57605a); }
.prog-hero2__sub { margin-top: 8px; font-size: 0.85rem; color: var(--text-muted, #57605a); }
.prog-hero2__sub b { color: var(--text, #18211b); }
.prog-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 30px; margin-top: 10px; }
.prog-bars i { width: 10px; border-radius: 3px 3px 0 0; }
.prog-bars .u { background: var(--brand, #1f7a47); height: 32%; }
.prog-bars .e { background: var(--border-strong, #ccd3c6); height: 14%; }
.prog-bars .o1 { background: #e0937f; height: 55%; }
.prog-bars .o2 { background: var(--score-over, #c0432f); height: 82%; }
@media (max-height: 720px) {
  .prog-vscap { font-size: 1.7rem; padding: 8px 18px; }
  .prog-bars { height: 22px; margin-top: 8px; }
}
.prog-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.prog-lbl {
  display: block; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #999); margin-bottom: 2px;
}
.prog-hero__l b { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.prog-hero__r { text-align: right; }
.prog-vs { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.prog-vs.under { color: var(--brand, #1e7b34); }
.prog-vs.over { color: var(--danger, #c0392b); }
.prog-vs.even { color: var(--text-muted, #666); }
/* Pantallas bajas: la tarjeta de 18 hoyos con 5 filas x2 tramos es lo primero que aprieta. */
@media (max-height: 720px) {
  .cargar-prog__body .rd-table th, .cargar-prog__body .rd-table td { padding: 1px 0; }
  .cargar-prog__body .prog-hero__l b { font-size: 1.7rem; }
  .cargar-prog__body .rd-nine { margin-bottom: var(--space-2); }
}
.hole-hero--mstep { padding-top:var(--space-2); }
.ms-board:empty { display:none; }

/* ── Paso de acompañantes "Opción 1": hero de estado + cards de carga (2026-07-24) ──────────────
   El color del hero dice si vas ganando: verde (win) · gris (lose) · ocre (tie/AS). */
.ms1-hero { border-radius:16px; padding:14px 16px; color:#fff; position:relative; overflow:hidden; }
.ms1-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 100% 0, rgba(255,255,255,.15), transparent 55%); }
.ms1-hero > * { position:relative; z-index:1; }
.ms1-hero--win { background:linear-gradient(120deg, var(--brand-700,#134d2d), var(--brand,#1f7a47) 72%); }
.ms1-hero--lose { background:linear-gradient(120deg, #3a4550, #5a6672 72%); }
.ms1-hero--tie { background:linear-gradient(120deg, #8a6d1f, var(--gold,#b4862f) 72%); }
.ms1-hero__eye { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; opacity:.85; }
.ms1-hero__st { font-size:1.7rem; font-weight:800; line-height:1.05; letter-spacing:-.01em; margin-top:3px; }
.ms1-hero__st small { font-size:1rem; font-weight:700; opacity:.9; }
.ms1-hero__sub { font-size:.79rem; opacity:.88; margin-top:4px; }
.ms1-hero__gold { color:#ffe6a6; font-weight:700; } /* "N en juego" (pozo de skins) */

/* Varias modalidades activas → una barra compacta por cada una */
.ms1-heroes { display:flex; flex-direction:column; gap:6px; }
.ms1-hbar { display:flex; align-items:center; gap:10px; border-radius:12px; padding:9px 13px; color:#fff; }
.ms1-hbar__eye { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.85; }
.ms1-hbar__st { font-size:1rem; font-weight:800; margin-left:auto; }
.ms1-hbar__st small { font-size:.78rem; font-weight:700; opacity:.85; }
.ms1-hbar--win { background:linear-gradient(120deg, var(--brand-700,#134d2d), var(--brand,#1f7a47)); }
.ms1-hbar--lose { background:linear-gradient(120deg, #3a4550, #5a6672); }
.ms1-hbar--tie { background:linear-gradient(120deg, #8a6d1f, var(--gold,#b4862f)); }

/* Cards de carga (una por jugador) */
.ms1-cards { display:flex; flex-direction:column; gap:9px; margin-top:11px; }
.ms1-card { display:flex; align-items:center; gap:11px; background:var(--surface,#fff); border:1px solid var(--border,#e2e6dd); border-radius:14px; padding:10px 12px; }
.ms1-card.is-you { border-color:var(--brand-200,#a7d2b8); background:linear-gradient(0deg, var(--surface,#fff) 55%, #f4faf6); }
.ms1-av { width:38px; height:38px; flex:0 0 auto; border-radius:50%; display:inline-grid; place-items:center; font-weight:700; font-size:.95rem; background:var(--surface-2,#eef1ea); color:var(--text-muted,#57605a); }
.ms1-av--you { background:var(--brand,#1f7a47); color:#fff; }
.ms1-card__nm { flex:1; min-width:0; display:flex; flex-direction:column; }
/* `.n` es flex (nombre + badge de ventaja): `text-overflow` NO aplica a los hijos de un flex, así
   que el recorte tiene que vivir en `.nm`, y el badge queda afuera — antes un nombre largo se
   cortaba a lo bruto (sin puntos suspensivos) y se comía el "+1", que es el dato que decide el hoyo. */
.ms1-card__nm .n { font-weight:600; font-size:.92rem; display:flex; align-items:center; min-width:0; }
.ms1-card__nm .n .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms1-card__nm .n .ms1-adv { flex:0 0 auto; }
.ms1-card__nm .acc { font-size:.72rem; color:var(--text-muted,#57605a); margin-top:1px; }
.ms1-card__nm .acc b { color:var(--text,#18211b); }
/* Golpe de hándicap del compañero: un punto por golpe (convención de la tarjeta de papel), del
   mismo verde y tamaño que el .sc-vdot de la tarjeta terminada. Más de 3 golpes en un hoyo no
   pasa en la práctica, pero si pasara se muestra un punto y "×n" en vez de una hilera ilegible. */
.ms1-adv { display:inline-flex; align-items:center; gap:3px; margin-left:6px; vertical-align:middle; }
.ms1-adv i { display:block; width:7px; height:7px; border-radius:50%; background:var(--brand,#1f7a47); }
.ms1-adv b { font-size:.62rem; font-weight:800; color:var(--brand-700,#134d2d); }
.ms1-youval { text-align:center; flex:0 0 auto; }
.ms1-youval .v { font-size:1.5rem; font-weight:800; line-height:1; }
.ms1-youval .l { display:block; font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-light,#899189); font-weight:700; }
.ms1-stp { display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; }
.ms1-stp b { min-width:1.6ch; text-align:center; font-size:1.35rem; font-weight:800; }
.ms1-stp__b { width:44px; height:44px; border-radius:12px; border:0; background:var(--brand-50,#eef6f1); color:var(--brand-700,#134d2d); font-size:1.25rem; font-weight:600; display:grid; place-items:center; box-shadow:inset 0 -2px 0 rgba(19,77,45,.12); cursor:pointer; }
.ms1-stp__b:active { background:var(--brand-100,#d4e9dc); transform:scale(.96); }
/* Hoyo LEVANTADO: el "–" cedió el hoyo en la partida. Tiene que distinguirse a simple vista del "–"
   de un hoyo todavía sin cargar — son estados opuestos (uno ya perdió el hoyo, el otro no jugó).
   Sólo color: un tachado sobre un guión se lee como "=", no como "cedido". */
.ms1-lev { color:var(--warning,#c2871f); font-weight:800; }

/* Posiciones (modalidades de acumulación): tabla compacta bajo las cards; reusa .mc-stand */
.ms1-stand { margin-top:11px; background:var(--surface,#fff); border:1px solid var(--border,#e2e6dd); border-radius:14px; padding:4px 13px 6px; }
.ms1-stand__t { margin:8px 0 0; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-light,#899189); font-weight:700; }
.ms1-stand .mc-stand { margin-bottom:0; }
.ms1-stand .mc-stand tr:first-child td { border-top:0; }
.mc-row { display:flex; gap:7px; margin-top:8px; }
.mc-row--step { margin-top:0; }
.mc-chip { flex:1 1 0; min-width:0; position:relative; background:var(--surface,#fff); border:1px solid var(--border,#e8ede8); border-radius:12px; padding:9px 5px 8px; text-align:center; }
.mc-chip.is-you { background:var(--surface-2,#f3f7f3); }
.mc-badge { position:absolute; top:-5px; right:7px; min-width:18px; height:18px; padding:0 3px; border-radius:9px; background:#e8612c; color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.mc-badge.dbl { background:#cf3b3b; }
.mc-av { width:26px; height:26px; border-radius:50%; background:var(--brand,#1e7b34); color:#fff; font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 3px; }
.mc-nm { font-size:.72rem; color:var(--text-muted,#666); margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-val { font-size:1.15rem; font-weight:700; color:var(--text-1,#16241a); }
.mc-stp { display:flex; align-items:center; justify-content:center; gap:5px; }
.mc-stp__b { width:24px; height:24px; border:0; border-radius:7px; background:var(--surface-2,#eef3ee); color:var(--brand,#1e7b34); font-weight:700; font-size:1rem; cursor:pointer; }
.mc-stp b { font-size:1.05rem; min-width:16px; }
.mc-net { font-size:.66rem; color:var(--brand,#1e7b34); font-weight:600; margin-top:4px; }

/* Marcador del paso: posiciones + hoyo por hoyo (antes bottom-sheet, ahora embebido) */
.mc-lb { margin-bottom:var(--space-3); }
.mc-lb h4 { margin:0 0 6px; font-size:.9rem; display:flex; align-items:baseline; gap:8px; }
.mc-lb__leg { font-size:.72rem; font-weight:400; color:var(--text-muted,#888); }
.mc-lb table { width:100%; border-collapse:collapse; font-size:.86rem; }
.mc-lb td { padding:5px 4px; border-top:1px solid var(--border,#eee); }
.mc-lb td:last-child { text-align:right; font-weight:600; }
.mc-lb tr.is-lead td { color:var(--brand,#1e7b34); font-weight:700; }

/* Equipos en el setup: dos columnas claras (tocar un jugador lo mueve) */
.mset-thint { font-weight:400; color:var(--text-muted,#999); text-transform:none; letter-spacing:0; }
/* Equipos: columnas TEÑIDAS con el color del equipo (los mismos TEAM_COLOR del marcador) en vez
   de dos cajas grises idénticas; jugadores como chips-píldora con avatar y swap central visible. */
.mset-equipos2 { display:flex; gap:8px; align-items:stretch; }
.mset-tcol { flex:1 1 0; min-width:0; border:1.5px solid var(--border,#e5e5e5); border-radius:14px; padding:9px; background:var(--surface-2,#f5f7f5); }
.mset-tcol--a { background:#f0f7f2; border-color:var(--brand-200,#a7d2b8); }
.mset-tcol--b { background:#eef3f9; border-color:#a9c4e2; }
.mset-th { display:flex; align-items:center; gap:6px; font-weight:700; font-size:.8rem; margin-bottom:7px; }
.mset-tdot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.mset-tchip { display:flex; align-items:center; gap:8px; width:100%; background:var(--surface,#fff); border:1px solid rgba(0,0,0,.07); border-radius:999px; padding:5px 10px 5px 5px; margin-bottom:6px; font-size:.8rem; font-weight:600; color:var(--text-1,#222); cursor:pointer; box-shadow:0 1px 2px rgba(10,25,15,.06); }
.mset-tchip__av { width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:inline-grid; place-items:center; font-size:.62rem; font-weight:700; background:var(--surface-2,#eef1ea); color:var(--text-muted,#57605a); }
.mset-tchip__av--you { background:var(--brand,#1f7a47); color:#fff; }
.mset-tchip__nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mset-swap { align-self:center; flex:0 0 auto; width:30px; height:30px; margin:0 -19px; z-index:1; position:relative; border-radius:50%; background:var(--surface,#fff); border:1px solid var(--border,#e2e6dd); display:grid; place-items:center; color:var(--text-muted,#57605a); font-size:.85rem; box-shadow:0 1px 3px rgba(10,25,15,.1); }
.mset-tempty { display:block; color:var(--text-muted,#aaa); font-size:.82rem; padding:6px 2px; }
/* C34: aviso de equipos desparejos (3 vs 1 / 4 vs 0) bajo las columnas — mismo tono que los demás
   avisos ámbar del setup (avz-intro__warn, avz-msg--ob). */
.mset-warn { display:flex; align-items:center; gap:6px; margin:8px 0 0; font-size:.8rem; font-weight:600; color:var(--warning,#c2871f); }

/* Tag de equipo en el chip por hoyo */
.mc-team { position:absolute; top:-5px; left:7px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; color:#fff; font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* Resultado: standings + hoyo por hoyo */
.mc-stand { width:100%; border-collapse:collapse; font-size:.86rem; margin-bottom:8px; }
.mc-stand td { padding:5px 4px; border-top:1px solid var(--border,#eee); }
.mc-stand td:last-child { text-align:right; font-weight:600; }
.mc-stand tr.is-lead td { color:var(--brand,#1e7b34); font-weight:700; }

/* Tira de match — celdas flexibles, partida Ida/Vuelta (máx 9 por bloque): entra a lo ancho sin scroll */
.mh-blk { font-size:.68rem; font-weight:700; color:var(--text-muted,#777); letter-spacing:.02em; margin:8px 0 3px; }
.mh-strip { display:flex; gap:4px; padding:2px 0 4px; }
.mh-cell { flex:1 1 0; min-width:0; max-width:48px; border-radius:8px; padding:4px 0; text-align:center; background:var(--surface-2,#eee); }
.mh-cell .mh-n { display:block; font-size:.66rem; color:var(--text-muted,#777); }
.mh-cell .mh-up { display:block; font-size:.72rem; font-weight:700; color:var(--text-1,#222); }
.mh-cell.w0 { background:rgba(30,123,52,.16); } .mh-cell.w0 .mh-up { color:#1e7b34; }
.mh-cell.w1 { background:rgba(43,108,176,.16); } .mh-cell.w1 .mh-up { color:#2b6cb0; }
.mh-cell.halve { background:var(--surface-2,#eef0ee); }
.mh-leg { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; font-size:.72rem; color:var(--text-muted,#777); }
.mh-leg .mh-k { width:11px; height:11px; border-radius:3px; display:inline-block; margin-left:6px; }
.mh-leg .mh-k.w0 { background:rgba(30,123,52,.55); } .mh-leg .mh-k.w1 { background:rgba(43,108,176,.55); } .mh-leg .mh-k.halve { background:#cfd4cf; }

/* Tabla hoyo×competidor — ancho fijo al 100%, partida Ida/Vuelta: entra sin scroll lateral */
.mh-table { margin-top:2px; }
.mh-table + .mh-table { margin-top:9px; }
.mh-table table { border-collapse:collapse; font-size:.76rem; width:100%; table-layout:fixed; }
.mh-cap { caption-side:top; text-align:left; font-size:.68rem; font-weight:700; color:var(--text-muted,#777); letter-spacing:.02em; padding:2px 0; }
.mh-table th, .mh-table td { padding:4px 3px; text-align:center; border-top:1px solid var(--border,#eee); position:relative; }
.mh-table thead th { color:var(--text-muted,#888); font-weight:600; border-top:0; }
/* Golpes de hándicap del hoyo: NUMERITO en la esquina de la celda (F1, pedido de Franco
   2026-09-22). Reemplaza a los puntitos `.mh-dots` que ocupaban este mismo lugar: con 2 golpes,
   dos puntos se leían como suciedad de la impresión y no como "recibís dos". Es la misma marca
   que la pestaña "Tarjeta" del link público (`.hb` en round-share/pagina.ts), con el verde de
   marca en vez del rojo `--live` de ahí —que en la app significa error— y el mismo verde que ya
   usa el punto del marcador en vivo (`.ms1-adv`). OJO: el punto del marcador en vivo y el de la
   imagen que se comparte (`.sc-vdot`) NO cambian (decisión del 2026-09-17). */
/* Corrida arriba/derecha y 1px más chica para no morder la esquina del número del score. */
.mh-hb { position:absolute; top:-2px; right:-3px; display:inline-flex; align-items:center; justify-content:center;
  min-width:11px; height:11px; padding:0 2px; border-radius:6px; background:var(--brand,#1f7a47);
  color:#fff; font-size:.5rem; font-weight:700; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.28); }
/* En la leyenda el badge va INLINE, no anclado a la esquina de una celda. */
.mh-hb--leg { position:static; vertical-align:-1px; margin-right:2px; }
.mh-table thead th:first-child { width:22%; }
.mh-table thead th:last-child { width:12%; }
.mh-table .mh-lbl { text-align:left; font-weight:600; white-space:normal; line-height:1.1; }
/* El <span data-nombre> lo mide `ajustarNombres` (shared/utils/nombres.js) y su contrato exige
   nowrap + ellipsis: `scrollWidth > clientWidth` es lo que significa "no entra". Sin esto hereda
   el `white-space:normal` de la celda, "Pedro Invitado" envuelve en dos líneas —engordando la
   fila— en vez de bajar un escalón a "Pedro I.". */
.mh-table .mh-lbl > [data-nombre] { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-table .mh-tot { font-weight:700; border-left:1px solid var(--border,#ddd); }
/* Fila Par: dato de la cancha, no del jugador — mismo tono apagado que `.rd-table tr.rd-par`. */
.mh-table tr.mh-par td { color:var(--text-muted,#999); font-size:.68rem; }

/* ===== Tarjeta de resultado / compartible (match-card.js) — estilo editorial ===== */
.rc-wrap { margin-top:var(--space-3); }
.rc-share { width:100%; margin-top:var(--space-3); }
.rc-actions { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); }
.rc-card { background:#fff; border:1px solid #edf1ed; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(20,60,35,.10); font-family:'Jost',system-ui,sans-serif; color:#16241a; }
.rc-hd { padding:16px 18px 12px; border-bottom:1px solid #eef2ee; }
.rc-ttl { font-size:18px; font-weight:600; letter-spacing:.2px; }
.rc-sub { font-size:11px; color:#9aa79c; margin-top:3px; }
.rc-wins { display:flex; flex-wrap:wrap; gap:7px; padding:12px 18px 0; }
.rc-w { font-size:11px; color:#46604f; background:#f0f8f1; border:1px solid #d8ecdd; border-radius:999px; padding:4px 10px; }
.rc-w b { color:#1e7b34; }
.rc-sec { padding:12px 18px 4px; }
.rc-st { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#b3bdb5; font-weight:700; margin-bottom:8px; }
.rc-pl { display:flex; align-items:center; gap:9px; font-size:12.5px; padding:3px 0; }
.rc-av { width:24px; height:24px; border-radius:50%; background:#eef5ef; color:#1e7b34; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rc-pl .rc-nm { font-weight:600; flex:1; min-width:0; }
.rc-team { font-weight:700; font-size:11px; }
.rc-hc { color:#9aa79c; font-size:11px; }
.rc-gp { color:#1e7b34; font-weight:600; font-size:11px; min-width:34px; text-align:right; }
.rc-grossblock { margin-bottom:8px; }
.rc-blabel { font-size:10px; color:#9aa79c; font-weight:600; margin:4px 0 2px; }
.rc-gx { border-collapse:collapse; width:100%; }
.rc-gx caption { caption-side:top; text-align:left; font-size:10px; color:#9aa79c; padding:2px 0; }
.rc-gx th, .rc-gx td { text-align:center; padding:4px 2px; font-size:11px; }
.rc-gx thead th { color:#b3bdb5; font-weight:600; font-size:9.5px; border-bottom:1px solid #eef2ee; }
.rc-gx tbody td { border-bottom:1px solid #f3f6f3; }
.rc-gx .rc-rl { text-align:left; font-weight:600; font-size:10.5px; color:#27332a; white-space:nowrap; }
.rc-gx .rc-par td, .rc-gx .rc-par { color:#c2ccc4; font-size:9.5px; }
.rc-gx .rc-par .rc-rl { color:#c2ccc4; }
.rc-c { position:relative; }
.rc-dot { position:absolute; top:0; right:5px; width:5px; height:5px; border-radius:50%; background:#1e7b34; }
.rc-dot2 { right:11px; }
.rc-tot { font-weight:700; }
.rc-note { font-size:9.5px; color:#c2ccc4; margin-top:4px; }
.rc-mod { margin-bottom:10px; }
.rc-mh { font-size:12.5px; font-weight:600; margin-bottom:6px; }
.rc-leg { font-size:10.5px; font-weight:400; color:#9aa79c; }
.rc-stand { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:6px; }
.rc-stand td { padding:4px 4px; border-bottom:1px solid #f3f6f3; }
.rc-stand td:last-child { text-align:right; font-weight:600; }
.rc-stand tr.is-lead td { color:#1e7b34; font-weight:700; }
.rc-vx { margin-bottom:6px; }
.rc-strip { display:flex; flex-wrap:wrap; gap:4px; }
.rc-mh-cell { width:30px; border-radius:7px; padding:3px 0; text-align:center; background:#eef0ee; }
.rc-mh-n { display:block; font-size:9px; color:#9aa79c; }
.rc-mh-u { display:block; font-size:10.5px; font-weight:700; color:#27332a; }
.rc-mh-cell.w0 { background:rgba(30,123,52,.15); } .rc-mh-cell.w0 .rc-mh-u { color:#1e7b34; }
.rc-mh-cell.w1 { background:rgba(43,108,176,.15); } .rc-mh-cell.w1 .rc-mh-u { color:#2b6cb0; }
.rc-ft { text-align:center; padding:13px; border-top:1px solid #eef2ee; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#bcc6be; }
.rc-ft b { color:#1e7b34; }
.rc-tgrp { font-size:10px; font-weight:700; letter-spacing:.04em; margin:8px 0 4px; display:flex; align-items:center; gap:5px; }
.rc-tdot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.rc-tee { font-size:10.5px; color:#9aa79c; }
.mset-teefix { width:96px; flex:0 0 auto; font-size:.82rem; color:var(--text-muted,#888); text-align:center; padding:7px 0; }

/* Los acompañantes de la partida ahora viven en la línea 2 de .rv-row (ver "Mis vueltas" arriba). */

/* ===== Tarjeta de resultado "La Tahona" (match-card.js) — hi-fi, exportable ===== */
.sc-card { width:100%; max-width:440px; margin:0 auto; background:#fff; color:#18211b; font-family:'Jost',system-ui,sans-serif; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(20,60,35,.10); font-variant-numeric:tabular-nums; }
.sc-hero { background:radial-gradient(120% 110% at 85% -10%,#1c6d42,transparent 55%),linear-gradient(160deg,#134d2d,#0b2a19); color:#fff; padding:22px 22px 20px; }
.sc-hero__top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sc-kick { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#a7d2b8; font-weight:600; }
.sc-date { font-size:11px; color:#a7d2b8; }
.sc-course { margin:12px 0 4px; font-size:25px; font-weight:600; letter-spacing:-.02em; line-height:1.05; color:#fff; }
.sc-hoyos { font-size:12px; color:#bcd6c5; }
.sc-hero__res { margin-top:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.16); padding-top:16px; }
.sc-gan__lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#a7d2b8; }
/* El nombre del ganador va a 30px y comparte fila con el bloque "Por": sin `min-width:0` no tenía
   a dónde encogerse y un nombre largo empujaba el resultado fuera de la tarjeta (que se exporta
   como PNG, o sea que el desborde quedaba congelado en la imagen que se comparte). */
.sc-gan { min-width:0; }
.sc-gan__name { font-size:30px; font-weight:700; line-height:1; margin-top:6px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-gan__sub { font-size:13px; color:#9fc4ad; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-por { text-align:right; flex:0 0 auto; }
.sc-por__lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#e7cd92; }
.sc-por__val { font-size:40px; font-weight:700; line-height:1; color:#e3b85f; }

.sc-sec { padding:16px 22px 6px; }
.sc-sectitle { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#899189; font-weight:600; margin-bottom:12px; }

.sc-tcol-wrap { display:grid; grid-template-columns:1fr 1px 1fr; gap:16px; align-items:start; }
/* `1fr` es `minmax(auto, 1fr)`: sin `min-width:0` la columna no baja de su min-content y con dos
   nombres largos medía 323px en vez de 182 — la tarjeta se pasaba 245px de sus 440, y eso quedaba
   así en el PNG que se comparte. Es el mismo `min-width:0` que ya tienen los items flex de al lado. */
.sc-tcol { min-width:0; }
.sc-vdiv { background:#eef1ea; width:1px; align-self:stretch; }
.sc-thead { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.sc-tdot { width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.sc-tname { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.sc-prow { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 0; border-top:1px solid #f0f2ed; }
.sc-pname { font-size:16px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-pright { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.sc-pgross { font-size:19px; font-weight:700; }
.sc-mejor { font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#fff; background:#b4862f; padding:3px 7px; border-radius:999px; }

.sc-blk { margin-bottom:14px; }
.sc-blktitle { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#1f7a47; font-weight:700; margin-bottom:5px; }
.sc-gx { width:100%; border-collapse:collapse; table-layout:fixed; }
.sc-h { background:#0b2a19; color:#fff; font-size:12px; font-weight:600; padding:6px 0; text-align:center; }
/* 92px y no 62. Con 62 la columna daba 52px de contenido: no entraban ni las etiquetas FIJAS del
   propio diseño ("Nosotros" mide 71px acá) y el nombre se montaba encima de los hoyos, congelado
   así en el PNG. Con 82 de contenido entra el escalón "pila + inicial" de la mayoría de los
   nombres reales (medido en la propia celda: "Martín S." 73, "Nosotros" 71, "Gerardo P." 82); los
   más largos ("Sebastián R." 100) caen a iniciales, que es justamente para lo que están.
   Fijarlo para TODOS pedía 110px y eso ya es un cuarto de la tarjeta. Los 30px salen de las nueve
   columnas de hoyos, que pasan de 32,7px a 29,3px — de sobra para un número de dos dígitos. */
.sc-h--l { width:92px; text-align:left; padding-left:10px; font-size:11px; letter-spacing:.04em; }
.sc-h--t { width:40px; background:#134d2d; font-weight:700; font-size:10px; }
.sc-gx td { text-align:center; padding:7px 0; font-size:14px; border-top:1px solid #eef1ea; }
.sc-rl { text-align:left; padding-left:10px; font-weight:600; font-size:13px; white-space:nowrap; }
/* La columna mide 92px fijos (.sc-h--l) menos los 10 de padding: el nombre se recorta dentro del
   span, no se monta encima de los hoyos. `max-width` en px porque en `table-layout:fixed` el 100%
   del span no se resuelve contra el ancho de la columna.
   V50: eran 82px exactos —el ancho medido de "Gerardo P.", cero margen— y html2canvas (vendorizado)
   no dibuja `text-overflow:ellipsis`: si el escalón elegido por `ajustarNombres` entraba justito y
   después la fuente terminaba de aplicarse (carrera de `document.fonts.ready`, ver compartirRonda),
   lo que sobraba quedaba cortado a mitad de glifo en vez de con "…". 78px le da margen real al
   escalón elegido — el trade-off es que algún nombre que antes entraba completo ("Gerardo P.") ahora
   cae un escalón más, a iniciales ("GP"). */
.sc-rl span { display:block; max-width:78px; overflow:hidden; text-overflow:ellipsis; }
.sc-rl--par, .sc-par { color:#9aa29a; font-size:12px; }
.sc-tot { font-weight:700; background:#f4f6f2; }
.sc-tot--par { color:#6a726b; font-weight:600; }
.sc-cellv { position:relative; display:inline-block; }
/* Hoyo cedido en la tarjeta de la partida: "–" marcado, distinto del "·" de un hoyo no jugado. */
.sc-lev { color:var(--warning,#c2871f); font-weight:700; }
.sc-vdot { position:absolute; top:-2px; right:-8px; width:6px; height:6px; border-radius:50%; background:#1f7a47; }
.sc-leg { display:flex; gap:16px; flex-wrap:wrap; padding:10px 2px 2px; font-size:12px; color:#57605a; align-items:center; }
.sc-leg__i { display:inline-flex; align-items:center; gap:6px; }
.sc-leg__sw { width:14px; height:14px; border-radius:4px; border:1px solid; display:inline-block; }
.sc-leg__dot { position:relative; width:14px; height:14px; display:inline-block; }
.sc-leg__dot::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:#1f7a47; }

.sc-mod { border-top:1px solid #eef1ea; margin-top:10px; padding-top:16px; }
.sc-modhead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:12px; }
.sc-modname { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#899189; font-weight:600; }
.sc-modres { font-size:15px; font-weight:700; color:#1f4d70; text-align:right; }
.sc-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.sc-gcell { border-radius:9px; padding:7px 0 6px; text-align:center; }
.sc-gnum { font-size:10px; color:#9aa29a; line-height:1; }
.sc-gstate { font-size:14px; font-weight:700; margin-top:3px; }
.sc-gcell.is-n { background:#e6f1ea; } .sc-gcell.is-n .sc-gstate { color:#176136; }
.sc-gcell.is-e { background:#e6eef5; } .sc-gcell.is-e .sc-gstate { color:#1f4d70; }
.sc-gcell.is-as { background:#eef1ea; } .sc-gcell.is-as .sc-gstate { color:#6a726b; }
.sc-gridnote { font-size:11px; color:#9aa29a; margin-top:10px; }
.sc-worm { margin-top:16px; }
.sc-wtitle { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#899189; font-weight:600; margin-bottom:8px; }
.sc-wleg { display:flex; justify-content:space-between; font-size:12px; color:#899189; margin-top:6px; }
.sc-wdot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.sc-narr { margin-top:12px; font-size:13.5px; color:#57605a; line-height:1.5; }
.sc-narr strong { color:#1f4d70; }
/* V48: aviso bajo la tabla por hoyo cuando el motor excluyó alguno de la suma (strokeNeto: alguien no
   completó el hoyo). Mismo tratamiento visual que .sc-gridnote: letra chica, no compite con la tabla. */
.sc-nota { font-size:11px; color:#899189; margin-top:8px; line-height:1.4; }
.sc-stand { width:100%; border-collapse:collapse; font-size:14px; margin-bottom:8px; }
.sc-stand td { padding:6px 4px; border-bottom:1px solid #f3f6f3; }
.sc-stand td:last-child { text-align:right; font-weight:600; }
.sc-stand tr.is-lead td { color:#1f7a47; font-weight:700; }

.sc-foot { padding:16px 22px; border-top:1px solid #eef1ea; display:flex; align-items:center; justify-content:space-between; background:#fafbf9; }
.sc-foot__logo { height:26px; width:auto; }
.sc-foot__wm { font-size:14px; font-weight:700; letter-spacing:.1em; color:#1f7a47; }
.sc-foot__mc { font-size:11px; letter-spacing:.18em; color:#b6bdb4; text-transform:uppercase; white-space:nowrap; }

/* Resumen compacto de la partida en la app (la tarjeta rica va solo al PNG) */
.rs { }
.rs-head { display:flex; align-items:center; gap:6px; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted,#899189); font-weight:700; margin-bottom:8px; }
.rs-players { font-size:.86rem; color:var(--text-1,#16241a); line-height:1.5; margin-bottom:10px; }
.rs-tl { font-weight:700; }
.rs-results { display:flex; flex-direction:column; }
.rs-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-top:1px solid var(--border,#eef1ea); font-size:.9rem; }
.rs-mod { color:var(--text-muted,#57605a); }
.rs-win { font-weight:600; color:var(--text-1,#16241a); text-align:right; white-space:nowrap; }
.rs-win b { color:#1f7a47; }

/* ============================================================================
   Sección "Análisis" (Analisis/script.js) — análisis por cancha: tabla por hoyo
   (coloreo caliente/frío vs TU media) + detalle por hoyo al tocar. Namespace .an-*
   (mismo prefijo que las tendencias de arriba; el detalle usa .andet-* propio para
   no chocar con .an-seg/.an-dist/.an-metric de las tendencias). Verde = mejor que
   tu media ("frío"), rojo = peor ("caliente"). Diseño sobrio, móvil-first.
   ============================================================================ */

/* Filtro de período: chips (Todo / 3-6-12 meses / Personalizado) + Desde/Hasta + comparar. */
.an-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
/* C98: min-height:44px = área de toque real (antes ~28px). */
.an-chip {
  min-height:var(--tap-min, 44px); display:inline-flex; align-items:center;
  padding:5px 12px; border:1px solid var(--border,#d5dcd0); background:#fff; color:var(--text-1,#16231b);
  border-radius:999px; font:inherit; font-size:.85rem; line-height:1.2; cursor:pointer;
}
.an-chip.is-on { background:var(--brand,#1e7b34); border-color:var(--brand,#1e7b34); color:#fff; font-weight:600; }
.an-chip:disabled { opacity:.55; color:var(--text-muted); cursor:not-allowed; } /* V66 */
.an-dates { display:flex; align-items:center; gap:8px; margin-top:8px; }
.an-dates[hidden] { display:none; }
.an-dates input[type="date"] {
  flex:1 1 auto; min-width:0; padding:8px 10px; border:1px solid var(--border,#d5dcd0);
  border-radius:8px; font:inherit; background:#fff; color:var(--text-1,#16231b);
}
.an-dates__sep { color:var(--text-muted,#5f6f64); font-size:.85rem; }
/* V68: el checkbox nativo caía en ~13×13px (sin regla propia); el label entero es el área de toque
   real (44px), el cuadrado visual sube a 22px — ambos dentro del criterio de aceptación del acta. */
.an-compare { min-height:var(--tap-min, 44px); display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.85rem; color:var(--text-1,#16231b); cursor:pointer; }
.an-compare input[type="checkbox"] { width:22px; height:22px; flex:none; }
.an-compare.is-disabled { opacity:.5; cursor:default; }
/* Badge ▲/▼ de comparación en las tarjetas de Resumen (flecha = dirección, color = mejoró/empeoró). */
.an-delta { margin-left:6px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.an-delta--up { color:#1c6d38; }   /* mejoró */
.an-delta--down { color:#c0392b; } /* empeoró */
.an-delta--flat { color:var(--text-muted,#5f6f64); font-weight:500; }

/* Tabla por hoyo */
/* Tabla acotada para entrar en el ancho de un celular en vertical (7 columnas, sin scroll). */
.an-holes { width:100%; border-collapse:collapse; font-size:.82rem; table-layout:fixed; }
.an-holes.an-iv { table-layout:auto; } /* la comparativa ida/vuelta (3 col) se auto-ajusta */
/* V68: .64rem (≈10.2px) era ilegible; .7rem (≈11.2px) sigue entrando sin scroll en las 7 columnas a
   375-402px (medido junto con el resto de la Tarea 6.3 — table-layout:fixed reparte el ancho fijo). */
.an-holes thead th {
  position:sticky; top:0; background:var(--surface,#fff); color:var(--text-muted,#888);
  font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.01em;
  padding:8px 3px; text-align:center; border-bottom:1px solid var(--border,#e5e5e5); white-space:nowrap;
}
.an-holes thead th:first-child { text-align:left; }
.an-holes tbody td { padding:7px 3px; border-top:1px solid var(--border,#eef0ee); text-align:center; }
.an-holes .an-num { font-variant-numeric:tabular-nums; }
.an-holes tbody tr:hover td { background:var(--surface-2,#f7faf7); }

.an-hoyo { text-align:left; white-space:nowrap; }
.an-hoyo__n {
  display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px;
  border-radius:7px; background:var(--surface-2,#eef2ee); color:var(--text-1,#16241a);
  font-weight:700; font-size:.82rem; padding:0 5px; margin-right:7px;
}
.an-hoyo__par { font-size:.72rem; color:var(--text-muted,#999); }
.an-tail { color:var(--text-muted,#888); font-size:.78rem; white-space:nowrap; }

/* Realce SOLO por color de fuente (sin fondo): rojo = peor que tu media, verde = mejor. */
.an-num.an-hot { color:#c0392b; font-weight:700; }
.an-num.an-cold { color:#1c6d38; font-weight:700; }
/* Celda de par: número tenue (el header ya dice "Par"). */
.an-holes .an-par { color:var(--text-muted,#8a8f8a); }

/* Fila con muestra chica: atenuada. */
.an-row--dim td { opacity:.62; }

/* Badge "muestra chica" */
.an-badge {
  display:inline-block; margin-left:6px; font-size:.64rem; font-weight:700; letter-spacing:.02em;
  padding:1px 7px; border-radius:999px; vertical-align:middle;
}
.an-badge--warn { background:rgba(224,138,30,.16); color:#a5641a; }

/* Leyenda de la tabla */
.an-legend { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:var(--space-2); font-size:.76rem; }
.an-swatch { display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:middle; margin-right:2px; }
.an-swatch.an-hot { background:rgba(192,57,43,.35); }
.an-swatch.an-cold { background:rgba(30,123,52,.4); }

/* Fila clickeable: abre el detalle del hoyo en un overlay a pantalla completa (patrón cargar vuelta). */
.an-hrow { cursor:pointer; }
.an-holes .an-chev { color:var(--text-muted,#b3b8b3); width:1%; }
.an-holes tbody tr.an-hrow:hover .an-chev { color:var(--brand,#1e7b34); }

/* ── Detalle de un hoyo (dentro del overlay .cargar-screen): distribución de resultado + métricas vs
   tu media. Prefijo .andet-* / .an-hd-* propio para NO chocar con .an-seg/.an-dist de las tendencias. ── */
/* Cuerpo del detalle: flexea y scrollea (como .cargar-body) para que SIEMPRE entre en el alto de la
   pantalla; si el contenido excede, scroll interno (header + número del hoyo quedan fijos arriba).
   El objetivo es que NO haga falta ese scroll: el contenido se mide en _observe_fit_analisis.html y
   entra en 375x667 (el iPhone chico) en el caso peor. Los espacios son ELÁSTICOS (svh) — se aprietan
   en pantallas chicas y respiran en las grandes, mismo criterio que la carga de hoyo. */
.an-hd-body {
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
  /* C96: sin sumar el home indicator, el último bloque podía quedar pegado al borde. */
  padding:clamp(12px, 2.6svh, 20px) var(--space-4) calc(clamp(12px, 2.6svh, 20px) + env(safe-area-inset-bottom, 0px));
  gap:clamp(16px, 3.9svh, 30px);
}
.an-hd-sec__ttl { margin-bottom:clamp(5px, 1.3svh, 10px); }
.andet-bar { display:flex; height:24px; border-radius:7px; overflow:hidden; background:var(--surface-2,#eee); }
.andet-bar--lg { height:clamp(22px, 4.2svh, 32px); border-radius:9px; }
.andet-seg { height:100%; }
.andet-seg--eagle { background:#0b5c2e; }  /* águila o mejor */
.andet-seg--bird { background:#1e7b34; }  /* birdie */
.andet-seg--par  { background:#7bb98a; }  /* par */
.andet-seg--bog  { background:#e0a83a; }  /* bogey */
.andet-seg--dbl  { background:#c0392b; }  /* doble o peor */
/* Leyenda en UNA línea: reparte el ancho y encoge la tipografía con el ancho de pantalla (vw) en vez
   de envolver a dos líneas. Si aun así no entra (pantalla muy angosta), envuelve — no se recorta. */
.andet-legend {
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:4px clamp(5px, 1.4vw, 12px); margin-top:clamp(6px, 1.4svh, 11px);
  font-size:clamp(.66rem, 2.75vw, .8rem); color:var(--text-muted,#777);
}
.andet-legend > span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.andet-dot { display:inline-block; width:9px; height:9px; border-radius:3px; flex:0 0 auto; }

/* Métricas del hoyo: UNA LÍNEA por métrica (etiqueta izquierda · valor derecha) en dos columnas.
   Antes cada una apilaba etiqueta sobre valor (40px por fila, 4 filas) y repetía "tu media" seis
   veces; el "vs tu media" lo dice el título de la sección una sola vez. */
.andet-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(4px, 1.5svh, 12px) var(--space-4); }
.andet-kpi {
  display:flex; align-items:baseline; justify-content:space-between; gap:6px; min-width:0;
  padding-bottom:clamp(2px, .8svh, 6px); border-bottom:1px solid var(--border,#e9ece7);
}
.andet-kpi__lbl { font-size:clamp(.72rem, 1.9svh, .85rem); color:var(--text-muted,#777); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.andet-kpi__val { font-size:clamp(.9rem, 2.2svh, 1.05rem); font-weight:600; white-space:nowrap; }
.andet-kpi__med { font-weight:400; font-size:.82em; color:var(--text-muted,#777); }

/* GIR por destino del drive: las cuatro salidas en UNA fila (antes 2x2). */
.andet-tee { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(4px, 1.2vw, 10px); }
.andet-tee__c { text-align:center; min-width:0; }
.andet-tee__lbl { display:block; font-size:clamp(.64rem, 2.6vw, .76rem); color:var(--text-muted,#777); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.andet-tee__n { opacity:.75; }
.andet-tee__val { display:block; margin-top:2px; font-size:clamp(.95rem, 2.4svh, 1.15rem); font-weight:600; }

/* Flechas a los costados del número del hoyo (navegación entre hoyos en el detalle).
   El número no repite el header ("Hoyo 18 de 18"): con 36-50px alcanza y libera ~40px de alto. */
.an-hero { display:flex; align-items:center; justify-content:center; gap:var(--space-4); padding:clamp(4px, 1.2svh, 12px) 0 clamp(2px, .8svh, 8px); }
.an-hero__center { text-align:center; }
.an-hero .hole-hero__num { font-size:clamp(2.1rem, 6.2svh, 3.4rem); line-height:1.08; }
.an-hero .hole-hero__meta { font-size:clamp(.78rem, 2svh, .92rem); }
.an-hero__arrow {
  flex:0 0 auto; width:clamp(38px, 6svh, 48px); height:clamp(38px, 6svh, 48px);
  border-radius:50%; border:1px solid var(--border,#ddd);
  background:var(--card,#fff); color:var(--text-1,#2a2a2a); font-size:1.4rem; display:grid; place-items:center; cursor:pointer;
}
.an-hero__arrow:hover:not(:disabled) { border-color:var(--brand,#1e7b34); color:var(--brand,#1e7b34); }
.an-hero__arrow:disabled { opacity:.3; cursor:default; }

/* Comparativa ida vs vuelta: reusa la tabla .an-holes; label a la izquierda + mejor tramo en verde. */
.an-iv td.an-iv__lbl { text-align:left; color:var(--text-muted,#777); }
.an-num.an-best { color:#1c6d38; font-weight:700; }

/* ============================================================================
   "Carga avanzada" (método PRIME) — enriquecimiento post-ronda de una vuelta
   tiro a tiro: banderas del día + posicionar tiros/putts en el mapa. Reusa el
   look de la carga (cargar-*); el mapa flexea y el panel queda debajo con
   scroll propio. OJO: nada de `position` en elementos de Marker de MapLibre.
   ============================================================================ */
.seg-beta { font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold, #b4862f); margin-left: 3px; vertical-align: 2px; }

/* Header propio: título 2 líneas + "Guardar avance". */
.avz-top { gap: var(--space-2); }
.avz-top__t { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; }
.avz-top__t b { font-size: .95rem; }
.avz-top__t span { font-size: .74rem; color: var(--text-muted, #57605a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.avz-save { border: 1.5px solid var(--border-strong, #ccd3c6); background: var(--surface, #fff); color: var(--brand, #1f7a47); font-family: inherit; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.avz-save:disabled { opacity: .4; cursor: default; }
.avz-save--ph { visibility: hidden; border: none; width: 40px; padding: 0; }

/* Intro (pantalla 0). */
.avz-intro { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-5)); }
.avz-intro__icon { font-size: 2.4rem; color: var(--brand, #1f7a47); }
.avz-intro h2 { font-size: 1.2rem; margin: 0; }
.avz-intro__p { margin: 0; font-size: .9rem; color: var(--text-muted, #57605a); max-width: 42ch; }
.avz-intro__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: .88rem; }
.avz-intro__steps li { display: flex; align-items: baseline; gap: 8px; }
.avz-intro__steps .ph { color: var(--brand, #1f7a47); }
.avz-intro__warn { margin: 0; font-size: .8rem; color: var(--warning, #c2871f); }
.avz-intro .cargar-cta { margin-top: auto; width: min(100%, 340px); }

/* Mapa + barra del hoyo + footer. */
.avz-mapwrap { position: relative; flex: 1 1 auto; min-height: 180px; background: var(--surface-2, #eef1ea); overflow: hidden; }
.avz-mapwrap .avz-map { position: absolute; inset: 0; }
.avz-map .maplibregl-map { position: absolute; inset: 0; }
.avz-holebar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 8px; background: rgba(15, 23, 18, .82); color: #fff; font-size: .84rem; border-radius: 999px; padding: 6px 12px; white-space: nowrap; max-width: calc(100% - 16px); }
.avz-holebar .avz-dim { color: rgba(255, 255, 255, .65); }
/* C26: piso de 44px (antes ~20-22px reales) — ya era grid+place-items:center, así que el glyph
   queda centrado en la caja más grande sin más cambios. */
.avz-nav { border: none; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; padding: 2px 4px; min-width: var(--tap-min, 44px); min-height: var(--tap-min, 44px); display: grid; place-items: center; }
.avz-nav:disabled { opacity: .3; cursor: default; }
.avz-okico { color: #6ee7a0; }
.avz-foot { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; padding: var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom, 0px) + var(--space-3)); background: var(--surface-1, #fff); border-top: 1px solid var(--border, #e2e6dd); }
.avz-foot .cargar-cta { flex: 1; }

/* Panel de controles (pasos 2–3), debajo del mapa con scroll propio. */
.avz-panelhost { flex: 0 0 auto; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom, 0px) + var(--space-2)); background: var(--surface-1, #fff); border-top: 1px solid var(--border, #e2e6dd); }
.avz-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.avz-msg { margin: var(--space-3) 0; text-align: center; color: var(--text-muted, #57605a); font-size: .9rem; }
.avz-msg--ob { margin: 2px 0; text-align: left; color: var(--warning, #c2871f); font-size: .82rem; }
.avz-dim { color: var(--text-light, #899189); font-weight: 400; }
.avz-pen { color: var(--error, #c0432f); font-weight: 700; margin-left: 2px; }

/* Chips de golpes (selector) + chips genéricos (lie / palo). */
.avz-shots { display: flex; flex-flow: row wrap; gap: 4px; }
.avz-chip-g { padding: 4px 9px; border-radius: 999px; border: 1.5px solid var(--border-strong, #ccd3c6); background: var(--surface-2, #eef1ea); color: var(--text, #18211b); font-family: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.avz-chip-g.is-on { background: var(--brand, #1f7a47); border-color: var(--brand, #1f7a47); color: #fff; }
.avz-chip-g--putt { background: var(--score-under-soft, #d8ecdf); color: var(--brand-700, #134d2d); }
.avz-chip-g.is-static { cursor: default; }
.avz-lies, .avz-palos { display: flex; flex-flow: row wrap; gap: 4px; }
.avz-chip { flex: 0 1 auto; padding: 6px 9px; border: 1.5px solid var(--border-strong, #ccd3c6); border-radius: var(--radius-md, 10px); background: var(--surface, #fff); color: var(--text-muted, #57605a); font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.avz-chip.is-on { background: var(--brand, #1f7a47); border-color: var(--brand, #1f7a47); color: #fff; }
.avz-chip--none { color: var(--text-light, #899189); }

/* Tarjeta del golpe seleccionado. */
.avz-sel { display: flex; flex-direction: column; gap: 8px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border, #e2e6dd); border-radius: var(--radius-lg, 16px); background: var(--surface, #fff); box-shadow: var(--shadow-sm); }
.avz-sel__hd { font-size: .84rem; font-weight: 700; color: var(--text, #18211b); display: flex; flex-flow: row wrap; align-items: baseline; gap: 6px; }
.avz-sel__lbl { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light, #899189); }
.avz-sel__row { display: flex; flex-flow: row wrap; align-items: center; gap: 8px; }
.avz-disc { font-size: .72rem; font-weight: 700; color: var(--warning, #c2871f); background: rgba(194, 135, 31, .12); border-radius: 999px; padding: 2px 8px; }
.avz-disp { font-size: .8rem; color: var(--text-muted, #57605a); }
.avz-disp .ph { color: #0284c7; }
.avz-hint-lie { margin: 0; font-size: .76rem; color: var(--text-muted, #57605a); }
.avz-palo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--brand, #1f7a47); border-radius: 999px; background: var(--surface, #fff); color: var(--brand, #1f7a47); font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.avz-palo.is-ok { background: var(--brand, #1f7a47); color: #fff; }
.avz-actions { display: flex; gap: 8px; align-items: center; }
.avz-actions .cargar-cta { flex: 1; }

/* Marcadores sobre el mapa (sin `position`: MapLibre ancla por transform). */
/* C26: acá NO se puede agrandar el círculo visible (son marcadores de mapa — un glyph más grande
   tapa el mapa y a los puntos vecinos, y en tiros/putts cercanos el drag-target correcto se vuelve
   ambiguo). Mismo patrón que .course-dot (golfreal.css:~145): glyph chico intacto + área de toque
   invisible de 44px vía ::before, centrada en el punto real sin importar la variante (--end.is-sel
   26px, --putt 20px, …). El click/drag sigue yendo al elemento host (los pseudo-elementos no son
   nodos del DOM): mismo listener de siempre, sin tocar avanzado-map.js. */
.avz-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: grab; }
.avz-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--tap-min, 44px); height: var(--tap-min, 44px); transform: translate(-50%, -50%); }
.avz-dot--tee { background: #64748b; cursor: default; }
.avz-dot--end { background: var(--brand, #1f7a47); }
.avz-dot--end.is-sel { background: #ef4444; width: 26px; height: 26px; }
.avz-dot--ob { background: var(--warning, #c2871f); font-size: .6rem; cursor: default; }
.avz-dot--putt { background: #0284c7; width: 20px; height: 20px; font-size: .62rem; }

/* Revisión final. */
.avz-review { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-4)); }
.avz-review h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 6px; }
.avz-review h2 .ph { color: var(--brand, #1f7a47); }
.avz-review__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.avz-review__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border, #e2e6dd); border-radius: var(--radius-md, 10px); background: var(--surface, #fff); font-size: .86rem; cursor: pointer; }
.avz-review__list li.is-enr { border-color: var(--brand-300, #74b691); }
.avz-review__list li.is-bad { border-color: var(--error, #c0432f); }
.avz-review__hoyo { font-weight: 700; min-width: 34px; }
.avz-review__tag { margin-left: auto; font-size: .74rem; color: var(--text-muted, #57605a); }
.avz-review__list li.is-enr .avz-review__tag { color: var(--brand, #1f7a47); font-weight: 700; }
.avz-review__list li.is-bad .avz-review__tag { color: var(--error, #c0432f); font-weight: 700; }
.avz-foot--rev { border-top: none; padding-left: 0; padding-right: 0; }

/* Spinner de los botones de compartir (gateShareBtn, "Preparando imagen…"): Phosphor NO trae
   una clase .ph-spin (eso es de Font Awesome) → sin esta regla el icono queda estático.
   Reusa @keyframes spin de styles/base.css. inline-block: transform no aplica a inline. */
.ph-spin { display: inline-block; animation: spin 0.9s linear infinite; }

/* ============================================================================
   Setup de "cargar vuelta" — paso 1 (elegir cancha). Cada .cg-pick es un pane
   absoluto (inset 0); el activo NO lleva .is-off. Los recorridos salen hacia la
   izquierda (.is-off--back). Hoy queda un solo pane: el catálogo completo se
   recorre desde la hoja de búsqueda (.selc), no con más panes.
   ============================================================================ */
.cg-pick {
  transition: opacity 0.28s var(--ease-out, ease-out), transform 0.28s var(--ease-out, ease-out),
    visibility 0s linear 0.28s;
}
.cg-pick.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(22px);
}
.cg-pick.is-off--back { transform: translateX(-22px); }
@media (prefers-reduced-motion: reduce) {
  .cg-pick { transition: none; }
  .cg-pick.is-off { transform: none; }
}

/* Card "Otra cancha" al final del carrusel de cercanas: misma silueta que una card
   de cancha, look de acción (fondo suave + globo), sin degradado de foto.
   V33: más angosta que una card de cancha (86%) para que asome bastante más aunque
   haya una sola sugerida antes — ya no depende del peek para notarse. El botón
   "Buscar otra cancha" debajo del carrusel es el camino garantizado (acta 5.5). */
.course-slide--otra {
  flex-basis: 58%;
}
.course-slide--otra .course-slide__cover {
  /* Misma ALTURA que la portada 16:9 de una card de cancha (86% de ancho): con 16:9 a 58% de ancho
     quedaba ~40 px más baja y pegada arriba, descolgada al lado de la foto (pedido de Franco,
     2026-10-10). 58·16 / (86·9) = 928 / 774. */
  aspect-ratio: 928 / 774;
  background: radial-gradient(120% 90% at 50% 0%, var(--brand-50, #eef6f1) 0%, var(--surface-2, #eef1ea) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
}
.course-slide--otra .course-slide__cover::after { display: none; }
.course-slide--otra .otra-ico {
  font-size: 52px;
  line-height: 1;
  color: var(--brand, #1f7a47);
}
.course-slide--otra .otra-t1 {
  font-weight: 700;
  font-size: var(--fs-h4, 1.125rem);
  color: var(--text, #18211b);
}
.course-slide--otra .otra-t2 {
  margin: 0;
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text-muted, #57605a);
}

/* ============ Hoja "Buscar cancha" (shared/selector-cancha.js) ============
   Catálogo completo con buscador, detrás de la card final del carrusel de sugeridas.
   La usan cargar vuelta y la Vista Previa GPS: el carrusel sirve para las pocas
   relevantes, esto para las decenas restantes (36 en Argentina y creciendo). */
.selc {
  position: fixed;
  inset: 0;
  z-index: 1075; /* sobre el overlay de carga (1070), debajo de los toasts (--z-toast 1080) */
  display: flex;
  flex-direction: column;
  background: var(--bg-page, #f7f9f5); /* era --bg, que no existe en variables.css */
  animation: selc-in 0.22s var(--ease-out, ease-out);
}
@keyframes selc-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .selc { animation: none; }
}
.selc__top { flex: 0 0 auto; }

.selc__search {
  position: relative;
  flex: 0 0 auto;
  padding: var(--space-3, 12px) var(--space-4, 16px);
}
.selc__search-ico {
  position: absolute;
  left: calc(var(--space-4, 16px) + 12px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #57605a);
  pointer-events: none;
}
.selc__input,
.selc__pais-input {
  width: 100%;
  padding-left: 38px; /* deja lugar a la lupa (si no, tapa la 1ª letra: "Quscar país…") */
}
/* La X nativa de type=search desentona con el resto de los inputs del portal. */
.selc__input::-webkit-search-cancel-button,
.selc__pais-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.selc__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--space-4, 16px);
  padding-bottom: max(var(--space-5, 24px), env(safe-area-inset-bottom));
}

.selc-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  width: 100%;
  margin-bottom: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  background: var(--surface-1, #fff);
  border: var(--border-width, 1px) solid var(--border, #e2e6dd);
  border-radius: var(--radius-lg, 16px);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.selc-row:active { transform: scale(0.99); }
.selc-row__thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  /* La miniatura es el LOGO del club: `contain` + padding para verlo ENTERO (con `cover` los
     escudos no cuadrados se recortaban). Fondo blanco: los PNG transparentes lo asumen. */
  object-fit: contain;
  padding: 5px;
  border-radius: var(--radius-md, 12px);
  background: #fff;
  border: 1px solid var(--border, #e3e8e2);
}
.selc-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.selc-row__name {
  font-weight: 600;
  color: var(--text, #18211b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selc-row__meta {
  font-size: 0.82rem;
  color: var(--text-muted, #57605a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selc-row__km {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted, #57605a);
  white-space: nowrap;
}
/* Elegida y abriéndose (opción `preparar`): la fila muestra el spinner en el lugar de los km y el
   resto se apaga, así se ve que el toque llegó y que no hace falta tocar de nuevo. */
.selc-row__spin { display: none; flex: 0 0 auto; font-size: 1.15rem; color: var(--brand, #1f7a47); }
.selc-row.is-cargando .selc-row__spin { display: inline-block; }
.selc-row.is-cargando .selc-row__km { display: none; }
.selc-row.is-cargando { border-color: var(--brand-300, #74b691); }
.selc.is-cargando .selc-row:not(.is-cargando) { opacity: 0.45; transition: opacity 0.15s; }
.selc-flat { padding-top: var(--space-3, 12px); }
.selc-empty { padding: var(--space-5, 24px) 0; text-align: center; }

/* Fase 1 de la hoja: elegir país (se saltea si ya hay uno recordado o si hay uno solo). */
.selc-pais {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  width: 100%;
  margin-bottom: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-2, 8px);
  background: var(--surface-1, #fff);
  border: var(--border-width, 1px) solid var(--border, #e2e6dd);
  border-radius: var(--radius-lg, 16px);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.selc-pais:first-child { margin-top: var(--space-3, 12px); }
.selc-pais:active { transform: scale(0.99); }
.selc-pais__flag {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 30px;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  background: var(--surface-2, #eef1ea);
  display: grid;
  place-items: center;
  box-shadow: 0 1px 3px rgba(10, 25, 15, 0.18);
}
.selc-pais__flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fallback tipográfico cuando el país no tiene bandera conocida (o la imagen falló). */
.selc-pais__flag > span { display: none; font-weight: 700; font-size: 0.8rem; color: var(--brand-300, #74b691); }
.selc-pais__flag--txt > span { display: block; }
.selc-pais__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selc-pais__n { flex: 0 0 auto; font-size: 0.82rem; color: var(--text-muted, #57605a); }
.selc-pais__go { flex: 0 0 auto; color: var(--text-light, #899189); font-size: 0.9rem; }

/* Barra de alcance en la fase 2: qué país se está viendo + volver a elegirlo. */
.selc__scope {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  /* Aire arriba: sin él la fila del país quedaba pegada a la línea del encabezado. */
  padding: var(--space-3, 12px) var(--space-4, 16px) 0;
}
.selc__scope-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.selc__scope-t { font-weight: 600; font-size: 0.9rem; }
.selc__scope-x {
  margin-left: auto;
  min-height: 36px;
  padding: 6px 14px;
  border: var(--border-width, 1px) solid var(--border, #e2e6dd);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-1, #fff);
  color: var(--brand, #1f7a47);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* ============ Sección Análisis: switch de VISTAS (Por cancha / Rendimiento / SG / Avanzado) ============
   4 pastillas: en pantallas angostas se acomodan 2×2 (wrap); radios menos "pill" para que el wrap no
   deforme. El botón Avanzado llega oculto (hidden) y lo revela el gate beta de Carga avanzada. */
#anVistaSwitch { margin: var(--space-2) 0 var(--space-4); flex-wrap: wrap; border-radius: var(--radius-lg, 16px); }
#anVistaSwitch .stats-switch__btn { flex: 1 1 45%; white-space: nowrap; }
#anVistaSwitch .stats-switch__btn[hidden] { display: none; }
/* Con el botón Avanzado oculto quedan TRES pastillas, y el 45% de arriba las partía en 2 + 1:
   "Strokes Gained" caía sola en un renglón. En el teléfono entran las tres en una línea si se saca
   el ícono y se achica un poco la letra. Con las cuatro (gate beta) vuelve a repartirse en filas. */
@media (max-width: 480px) {
  #anVistaSwitch .stats-switch__btn { flex: 1 1 auto; font-size: 0.8rem; padding: 10px 8px; }
  #anVistaSwitch .stats-switch__btn i { display: none; }
}

/* ============ Análisis avanzado: rediseño (sub-pestañas + formatos coherentes) ============ */
#anAvanzado .an-tabs { margin: var(--space-4) 0 var(--space-2); }
#anAvanzado .dash-section { margin-top: var(--space-4); }
.avz-header__resumen { margin: 0 0 var(--space-2); color: var(--text-muted, #57605a); }
.avz-header__resumen strong { color: var(--text-1, #1c231e); }
.avz-header__controles { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.avz-header__controles .an-bench { margin-bottom: 0; }
.avz-hint { font-size: .58em; font-weight: 400; color: var(--text-muted, #8a8f8a); }
.avz-note { margin: var(--space-2) 0 0; font-size: .78rem; color: var(--text-muted, #6b756e); }
.avz-tabla-wrap { overflow-x: auto; }
.avz-tabla-wrap .an-holes td:first-child { text-align: left; }
/* Barra de patrón de miss: versión chica de .dist-bar (Mental), con gaps de 2px entre segmentos */
.avz-missbar { height: 18px; border-radius: 5px; min-width: 140px; }
.avz-missbar span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .66rem; font-weight: 700; }
.avz-missbar span + span { border-left: 2px solid var(--surface, #fff); }
.avz-leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-2); font-size: .75rem; color: var(--text-muted, #6b756e); }
.avz-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; font-size: .8rem; line-height: 10px; }
.avz-scatter { max-width: 340px; display: block; margin: var(--space-3) auto 0; color: var(--text-1, #333); }
.avz-mapa { height: 380px; border-radius: var(--radius-lg, 16px); overflow: hidden; }

/* Análisis avanzado: mini-stats (reemplazan cards que ocupaban demasiado) + missbar 4-dir */
.avz-mini { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-2) 0; }
.avz-mini > div { display: flex; flex-direction: column; }
.avz-mini__v { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.avz-mini__v .unit { font-size: .8rem; font-weight: 500; color: var(--text-muted, #8a8f8a); margin-left: 1px; }
.avz-mini__l { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #8a8f8a); }


/* ============ Análisis avanzado: modal "Ver última ronda" (repaso de greens) ============ */
.avz-ver-ronda { margin-top: var(--space-3); }
.avz-modal { max-width: 460px; }
.avz-modal-body { padding: var(--space-4) var(--space-5); }
.avz-review { display: flex; flex-direction: column; gap: var(--space-3); }
.avz-review__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.avz-review__hoyo { font-size: var(--fs-h4, 1.1rem); font-weight: 700; }
.avz-review__par { margin-left: var(--space-2); color: var(--text-muted, #8a8f8a); font-size: .85rem; }
.avz-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill, 999px); font-size: .76rem; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.avz-badge i { font-size: .7em; }
.avz-review__diag { display: flex; justify-content: center; }
.avz-review__diag .avz-green-svg { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; background: var(--surface-2, #f2f5f0); border: 1px solid var(--border, #e5e8e4); border-radius: var(--radius-lg, 16px); color: var(--text-muted, #6b756e); }
.avz-review__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); font-size: .82rem; color: var(--text-1, #333); }
.avz-review__meta i { color: var(--brand, #1e7b34); margin-right: 3px; }
.avz-modal-foot { justify-content: space-between; align-items: center; }
.avz-step-ind { font-size: .82rem; font-weight: 600; color: var(--text-muted, #6b756e); font-variant-numeric: tabular-nums; }
.avz-modal-foot .btn[disabled] { opacity: .4; pointer-events: none; }


/* ---- Carga del hoyo SIN scroll vertical (v3: hero elástico) ------------------------------------
   El body del hoyo del modo RÁPIDO (.cargar-hoyo__body, clase propia — el paso de acompañantes
   scrollea y NO debe entrar acá) mide su contenido, y el HERO es el resorte: crece con el
   espacio libre y se encoge (hasta min-height) ante diferencias de métrica tipográfica — así
   nunca aparece un micro-scroll por unos px. El número escala con el alto REAL del hero
   (container query anidada), no con el viewport. Bloque al FINAL del archivo a propósito
   (misma especificidad ⇒ gana la última). Verificar con _observe_fit_hoyo.html. */
.cargar-hole .cargar-top { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(8px, 1.4cqh, 12px)); padding-bottom: clamp(8px, 1.4cqh, 12px); }
.cargar-hoyo__body {
  flex: 0 0 auto;
  gap: clamp(5px, 1.4cqh, 16px);
  padding-top: clamp(7px, 1.4cqh, 16px);
  padding-bottom: clamp(7px, 1.4cqh, 16px);
}
.hole-hero:not(.hole-hero--mstep) {
  flex: 1 1 auto;
  min-height: 72px;
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(4px, 1.2cqh, 14px);
  padding-bottom: clamp(2px, 0.8cqh, 10px);
}
.hole-hero__num { font-size: clamp(1.7rem, 34cqh, 4rem); } /* cqh = alto del HERO (resorte) */
.hole-hero__chips { margin-top: clamp(4px, 4cqh, 10px); }
.hole-track { margin-top: clamp(4px, 4cqh, 12px); }
.hole-gps { margin-top: clamp(2px, 0.8cqh, 6px); }
.ctrl-grid { padding: clamp(6px, 1.1cqh, 12px) var(--space-2); }
.ctrl-label { margin-bottom: clamp(2px, 0.7cqh, 8px); }
.stepper-btn { width: clamp(36px, 6cqh, 52px); height: clamp(36px, 6cqh, 52px); font-size: clamp(1.15rem, 2.6cqh, 1.6rem); }
.stepper--sm .stepper-btn { width: clamp(30px, 5cqh, 40px); height: clamp(30px, 5cqh, 40px); font-size: clamp(1rem, 2cqh, 1.2rem); }
.stepper-val { font-size: clamp(1.4rem, 3cqh, 2rem); }
.ctrl-sub { margin-top: clamp(2px, 0.8cqh, 6px); }
.seg--icons .seg-btn { padding: clamp(4px, 1.1cqh, 10px) 18px; }
.toggle-btn { padding: clamp(4px, 1.1cqh, 10px) 16px; }
.cargar-hole .cargar-foot { padding-top: clamp(8px, 1.4cqh, 12px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(8px, 1.8cqh, 16px)); }
/* Lo accesorio del hero cede según el alto DEL HERO: primero el eyebrow, después el track */
@container (max-height: 132px) { .hole-hero__eyebrow { display: none; } }
@container (max-height: 104px) { .hole-track { display: none; } }
@container (max-height: 88px) { .hh-chip { padding: 2px 8px; font-size: 0.66rem; } }
/* Piso para pantallas muy chicas */
@media (max-height: 660px) {
  .ctrl-label { font-size: 0.72rem; }
  .stepper-btn { width: 34px; height: 34px; font-size: 1.05rem; }
  .stepper--sm .stepper-btn { width: 28px; height: 28px; font-size: 0.95rem; }
  .stepper-val { font-size: 1.3rem; }
  .vs-cap { font-size: 0.64rem; padding: 1px 8px; }
  .seg--icons .seg-btn { padding: 4px 11px; font-size: 1rem; }
  .toggle-btn { padding: 4px 9px; font-size: 0.76rem; }
  .hole-gps__bar { padding: 4px 6px 4px 10px; }
  .cargar-toggles { gap: 4px; }
}
@media (max-height: 640px) {
  .prog-bars { display: none; }
  .prog-vscap { font-size: 1.5rem; padding: 6px 16px; }
}

/* ── Pill fija "Vuelta en curso" (dashboard Cancha) ──────────────────────────────────────────────
   Opción B elegida por Franco (2026-07-25): cápsula centrada del ancho de su contenido, con un
   punto "en vivo". Tapa mucho menos que una barra full-width y deja el verde pleno del CTA como
   única acción primaria grande. El contenedor fijo ocupa todo el ancho pero es pointer-events:none
   (los costados vacíos NO interceptan taps del contenido de abajo); solo la pill recibe eventos. */
.draft-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 1040; /* bajo el overlay de carga (1070): desaparece mientras cargás */
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}
.draft-bar > * { pointer-events: auto; }
.draft-bar__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  /* El aire de arriba y abajo lo pone el botón, no la píldora: así el área que se toca llega a los
     44 px de --tap-min (medía 28) sin que la píldora cambie de tamaño. */
  padding: 0 8px 0 14px;
  border-radius: var(--radius-pill, 999px);
  background: var(--brand-700, #134d2d);
  box-shadow: 0 8px 22px rgba(10, 30, 18, 0.34);
}
.draft-bar__main {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: var(--tap-min, 44px);
  padding: 7px 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
/* Punto "en vivo": late suave para decir que la vuelta sigue abierta. */
.draft-bar__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #7fe0a5;
  box-shadow: 0 0 0 3px rgba(127, 224, 165, 0.22);
  animation: draftPulse 2.4s ease-in-out infinite;
}
@keyframes draftPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(127, 224, 165, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(127, 224, 165, 0.05); }
}
@media (prefers-reduced-motion: reduce) { .draft-bar__dot { animation: none; } }
.draft-bar__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
}
.draft-bar__t b { font-weight: 800; }
.draft-bar__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  color: var(--brand-700, #134d2d);
  border-radius: var(--radius-pill, 999px);
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
/* ✕ solo en el estado "vuelta de hoy" (oculta un aviso, no borra nada). El borrador se descarta
   desde adentro (Revisar → Descartar), que es donde corresponde una acción destructiva. */
.draft-bar__x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.draft-bar__x:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* Colchón al pie para que la pill no tape el final de la página */
body.has-draftbar { padding-bottom: 76px; }
@media (max-width: 768px) {
  .draft-bar { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px); }
  body.has-draftbar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 70px); }
}

/* Badge GPS en la fila de la hoja de canchas: tinte suave del sistema (opción B elegida por
   Franco — misma pill que "Vinculado" en el Perfil y que .badge--brand del carrusel). */
.selc-row__gps {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 7px; border-radius: var(--radius-pill, 999px);
  background: var(--brand-100, #d4e9dc); color: var(--brand-700, #134d2d);
}

/* ============ Selector de hoyos (selector-hoyos.js, Task 8) — MISMO patrón que .selc: pantalla
   completa (position: fixed; inset: 0), no una hoja. Reusa la animación de entrada de .selc
   (@keyframes selc-in, arriba) y su mismo z-index: nunca están abiertos los dos a la vez. Sus
   celdas repiten el vocabulario de colores de la tira (.hole-track, más abajo en este archivo)
   para que se lean como el mismo control. ============ */
.selh {
  position: fixed;
  inset: 0;
  z-index: 1075; /* igual que .selc: sobre el overlay de carga (1070), debajo de los toasts (1080) */
  display: flex;
  flex-direction: column;
  background: var(--bg-page, #f7f9f5);
  animation: selc-in 0.22s var(--ease-out, ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .selh { animation: none; }
}
.selh__top { flex: 0 0 auto; }
.selh__ctx {
  flex: 0 0 auto;
  padding: 0 var(--space-4, 16px) var(--space-3, 12px);
  color: var(--text-muted, #57605a);
  font-size: 0.86rem;
}
.selh__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--space-4, 16px);
  padding-bottom: max(var(--space-5, 24px), env(safe-area-inset-bottom));
}
.selh__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
/* 55×58 en el diseño (spec §6.4): el ancho lo da la grilla fluida (minmax(0,1fr), nunca baja de
   ~48px en los 360-402px soportados); el alto queda fijo. Los dos, arriba del mínimo táctil —
   que es todo el punto de tener un selector en primer lugar. */
.selh-c {
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px 7px;
  background: var(--surface-1, #fff);
  border: var(--border-width, 1px) solid var(--border, #e2e6dd);
  border-radius: var(--radius-md, 12px);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.selh-c:active { transform: scale(0.97); }
.selh-c.is-actual { border: 2px solid var(--brand, #1f7a47); }
.selh-c__n { font-size: 1.05rem; font-weight: 700; color: var(--text, #18211b); line-height: 1; }
.selh-c__sub { font-size: 0.68rem; color: var(--text-muted, #57605a); line-height: 1; }
.selh-c__sub.under { color: var(--brand-700, #134d2d); }
.selh-c__sub.over { color: var(--score-dbl, #8f2c1d); }
.selh-c__bar { width: 22px; height: 3px; border-radius: 2px; margin-top: 1px; background: var(--border, #e2e6dd); }
.selh-c--completo .selh-c__bar { background: var(--brand, #1f7a47); }
.selh-c--empezado .selh-c__bar { background: var(--warning, #c2871f); }
.selh-c--levantado .selh-c__bar { background: var(--text-light, #899189); }
.selh__leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3, 12px) var(--space-4, 16px);
  padding: var(--space-4, 16px) var(--space-1, 4px);
}
.selh__leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted, #57605a); }
.selh__leg-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--border, #e2e6dd); }
.selh__leg-dot--completo { background: var(--brand, #1f7a47); }
.selh__leg-dot--empezado { background: var(--warning, #c2871f); }
.selh__leg-dot--levantado { background: var(--text-light, #899189); }

/* ---- Tiro por tiro SIN SCROLL en un iPhone SE (Tarea N.7, bug 3 de Franco 2026-09-22) ----------
   Franco carga en un iPhone SE (375×667): con Bunker (regla + "¿para qué lado falló?") la tarjeta
   del paso medía 510px contra 472 útiles y el botón "Registrar golpe" quedaba abajo del pie, sin
   forma de llegar (`.cargar-pbp` es `overflow: hidden` a propósito). La reestructura saca el CTA de
   la tarjeta al pie, junta hoyo+GPS en una línea y cambia la brújula 2D por una fila de chips;
   acá va lo que queda: apretar el header y el pie de ESTA pantalla (no la del modo Rápido) para
   llegar al presupuesto de la tarea (header ≤56 + fila 44 + camino ≤26 + paso ≤318 + pie ≤66).
   Bloque al FINAL a propósito (misma especificidad ⇒ gana la última), como el de "hero elástico".
   Verificar con verif/tarea-N.7.mjs (perfiles iPhone SE e iPhone 14 con insets). */
.cargar-hole--pbp .cargar-top {
  gap: 2px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--space-3) 8px;
}
/* Ronda 1 de corrección (hallazgo 2): habían bajado a 38px, por debajo del --tap-min del proyecto
   (política C26, prueba integral 2026-09-17). El header sigue midiendo ~55-60px igual. */
.cargar-hole--pbp .cargar-x,
.cargar-hole--pbp .cargar-card-btn {
  width: var(--tap-min, 44px);
  height: var(--tap-min, 44px);
  font-size: 1.25rem;
}
/* Retoque de la re-revisión (Tarea N.7, ronda 1): con los botones del header a 44px (hallazgo 2) el
   peor caso ("Hoyo 12/18 · +12 · SG −12.3", dos dígitos en los tres números) se elipsaba por 3px en
   el SE incluso con el rótulo ya acortado (holeSgBadge corto). 0.78rem le da margen (164px medidos
   contra ~169px disponibles) sin achicar los botones ni el resto del header. */
.cargar-hole--pbp .cargar-thru { font-size: 0.78rem; }
.cargar-hole--pbp .cargar-foot {
  padding: 7px var(--space-3) calc(env(safe-area-inset-bottom, 0px) + 8px);
}
/* La fila hoyo/GPS ya reserva su propio alto: el margin fluido de la píldora del modo Rápido no
   aplica a la variante chip (si no, vuelven los px que esta tarea sacó). */
.pbp-holebar .hole-gps--chip { margin: 0; }
/* Los 4 chips del hoyo + el botón GPS tienen que entrar en UNA línea a 375px: con el padding de
   siempre (11px) los chips se pasaban unos px y la fila saltaba a 57px. */
.pbp-holebar .hh-chip { padding: 3px 8px; font-size: 0.68rem; }
/* Pantallas cortas (SE/8): la rueda de distancia y el rótulo del lado ceden unos px antes que
   cualquier cosa que se pueda tocar. Nada de `overflow: auto` — si no entra, es error de diseño. */
@media (max-height: 700px) {
  .cargar-hole--pbp .ruler__val { font-size: 1.35rem; }
  /* Ronda 1 de corrección (hallazgo 1): bajar el alto acá pisaba `.ruler--vals .rl-tick` (44px) y
     dejaba el botón tocable en 26px, con los números de la regla superpuestos a los ticks. El
     alto de la rueda se recorta con el resto de este bloque (hallazgo 4, tarjeta compacta), nunca
     achicando un botón por debajo de --tap-min. */
  .cargar-hole--pbp .pbp-dist { min-height: 56px; }
}

/* ---- Tiger 5: conteo (resumen al guardar, detalle de la vuelta, Tu juego → Tiro a tiro) ---- */
.t5v { margin-top: var(--space-4); }
.t5v--resumen { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width, 1px) solid var(--border); }
.t5v__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.t5v__title { margin: 0; font-size: var(--fs-h4, 1.05rem); }
.t5v__total { font-weight: 700; color: var(--error, #c0392b); font-variant-numeric: tabular-nums; }
.t5v__total--cero { color: var(--brand, #1e7b34); }
.t5v__meta { margin: 0 0 var(--space-2); font-size: .76rem; color: var(--text-muted, #57605a); }
.t5v__list { list-style: none; margin: 0; padding: 0; }
.t5v__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width, 1px) solid var(--border); }
.t5v__row:last-child { border-bottom: 0; }
.t5v__name { font-weight: 600; min-width: 0; }
.t5v__nivel { display: block; font-weight: 400; font-size: .76rem; color: var(--text-muted, #57605a); }
.t5v__res { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.t5v__num { display: block; font-weight: 700; }
.t5v__de { font-weight: 400; font-size: .76rem; color: var(--text-muted, #57605a); }
.t5v__hoyos { display: block; font-size: .76rem; color: var(--text-muted, #57605a); }
.t5v__row--rota .t5v__num { color: var(--error, #c0392b); }
.t5v__row--ok .t5v__num { color: var(--brand, #1e7b34); }
.t5v__row--na .t5v__num { color: var(--text-muted, #57605a); font-weight: 400; }
.t5v__foot { margin: var(--space-2) 0 0; font-size: .74rem; color: var(--text-muted, #57605a); }
.t5-modal .t5v { margin-top: 0; }

/* Debajo de "Cargar vuelta" (2026-09-29): Tutoriales y Reportar un error. Secundarios a propósito:
   chicos, sin relleno de color, en una sola fila — no compiten con la acción principal. */
.cancha-acciones { display: flex; gap: 8px; margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.cancha-accion {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 10px; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-muted); background: transparent; border: var(--border-width) solid var(--border);
  border-radius: 999px; text-decoration: none; cursor: pointer;
}
.cancha-accion i { font-size: 1.05rem; }
.cancha-accion:active { transform: scale(0.98); }

/* Página de tutoriales (GolfReal/tutoriales.html, 2026-09-29). */
.tut-volver { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); text-decoration: none; }
.tut-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tut-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); cursor: default;
}
.tut-item__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--brand-50); color: var(--brand); font-size: 1.3rem; }
.tut-item__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tut-item__t { font-weight: 600; }
.tut-item__d { font-size: var(--fs-sm); color: var(--text-muted); }
.tut-item__tag { flex: none; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); background: var(--surface-2, #f1f2ef); padding: 3px 8px; border-radius: 999px; }
a.tut-item { text-decoration: none; cursor: pointer; }
a.tut-item:active { transform: scale(0.99); }
.tut-item__ir { flex: none; color: var(--text-muted); font-size: 1.1rem; }

/* Tutorial de la carga tiro a tiro (GolfReal/tutorial-tiro-a-tiro.html, 2026-09-30). Capa a pantalla
   completa: la captura real de la carga en un marco de teléfono (para que no se confunda con la
   pantalla de verdad), un velo con un hueco sobre el elemento del paso y un globo. Las medidas del
   globo van en cqw para que escalen con el marco. */
.tuts { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--bg-page, #f4f6f1); padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.tuts-top { width: min(420px, 100%); display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.tuts-top__t { font-weight: 600; font-size: 1.125rem; }
.tuts-top__x { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; color: var(--text); font-size: 1.3rem; text-decoration: none; }
.tuts-tel { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: center; container-type: size; }
.tuts-pantalla { position: relative; aspect-ratio: 390 / 844; width: min(100cqw, calc(100cqh * 390 / 844)); border-radius: 26px; overflow: hidden;
  container-type: inline-size; background: #f4f6f1; border: 5px solid var(--brand-900, #0b2a19); }
.tuts-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.tuts-track::-webkit-scrollbar { display: none; }
.tuts-paso { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; overflow: hidden; }
.tuts-paso img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.tuts-foco { position: absolute; border-radius: 3.6cqw; box-shadow: 0 0 0 200vmax rgba(11, 22, 15, .62); pointer-events: none; }
.tuts-foco::after { content: ""; position: absolute; inset: -1.2cqw; border-radius: 4.6cqw; border: 0.6cqw solid #fff; opacity: .9; }
.tuts-paso.is-act .tuts-foco::after { animation: tutsLate 1.8s ease-out infinite; }
@keyframes tutsLate { 0% { transform: scale(.97); opacity: .95; } 70% { transform: scale(1.05); opacity: 0; } 100% { opacity: 0; } }
.tuts-globo { position: absolute; left: 3cqw; right: 3cqw; background: #fff; color: var(--text, #18211b); border-radius: 4.2cqw;
  padding: 4cqw 4.6cqw; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .25); }
.tuts-globo h2 { margin: 0; font-size: max(20px, 6.6cqw); line-height: 1.15; font-weight: 600; text-wrap: balance; }
.tuts-globo p { margin: 1.6cqw 0 0; font-size: max(16px, 5.2cqw); line-height: 1.35; color: #2f3832; }
.tuts-globo b { color: var(--text, #18211b); font-weight: 600; }
.tuts-globo__n { display: block; font-size: max(12px, 3.8cqw); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 1.2cqw; }
.tuts-globo::before { content: ""; position: absolute; width: 4cqw; height: 4cqw; background: #fff; transform: rotate(45deg); left: var(--pico, 50%); margin-left: -2cqw; }
.tuts-globo.is-abajo::before { top: -1.8cqw; }
.tuts-globo.is-arriba::before { bottom: -1.8cqw; }
/* Pasos del final (el porqué del método): no son capturas. El marco de teléfono se apaga para que
   no se lean como una pantalla de la app. */
.tuts-pantalla { transition: border-color .25s, background .25s; }
.tuts-pantalla.is-libre { border-color: transparent; background: var(--bg-page, #f5f7f3); }
.tuts-paso--libre { display: flex; align-items: center; }
.tuts-libre { width: 100%; padding: 0 3cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.tuts-libre h2 { margin: 0 0 3cqw; font-size: max(26px, 9.4cqw); line-height: 1.1; font-weight: 600; text-wrap: balance; }
.tuts-libre__visual { background: #fff; border-radius: 5cqw; padding: 5cqw 4.6cqw; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4cqw 10cqw rgba(20,40,25,.08); }
.tuts-libre__txt { margin: 3cqw 0 0; font-size: max(17px, 5.6cqw); line-height: 1.35; color: var(--text, #18211b); font-weight: 500; }
.tuts-libre__nota { margin: 4cqw 0 0; font-size: max(13px, 4.2cqw); color: var(--text-muted, #57605a); }
.tuts-libre__nota b { color: var(--text, #18211b); }
/* Barras de Strokes Gained por área, centradas en cero */
.tuts-sgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3.4cqw; }
.tuts-sg { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 2.6em; align-items: center; gap: 2cqw; font-size: max(15px, 4.8cqw); }
.tuts-sg__n { color: var(--text-muted, #57605a); font-weight: 500; }
.tuts-sg__eje { position: relative; height: 5.6cqw; }
.tuts-sg__eje::before { content: ""; position: absolute; left: 50%; top: -1.4cqw; bottom: -1.4cqw; width: 1px; background: var(--border-strong, #ccd3c6); }
.tuts-sg__eje i { position: absolute; top: 0; bottom: 0; border-radius: 1.2cqw; }
.tuts-sg__eje i.pos { background: var(--brand-300, #74b691); }
.tuts-sg__eje i.neg { background: #e3b0a6; }
.tuts-sg__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tuts-sg.is-peor .tuts-sg__n, .tuts-sg.is-peor .tuts-sg__v { color: var(--error, #c0432f); font-weight: 700; }
.tuts-sg.is-peor .tuts-sg__eje i { background: var(--error, #c0432f); }
/* Un hoyo golpe por golpe */
.tuts-hoyo__cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3cqw; font-size: max(14px, 4.4cqw); color: var(--text-muted, #57605a); }
.tuts-hoyo__cab b { color: #8f2c1d; font-weight: 600; }
.tuts-golpes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.8cqw; }
.tuts-golpes li { display: flex; align-items: center; gap: 3cqw; min-height: 10.4cqw; padding: 0 3cqw; border-radius: 2.6cqw; background: var(--surface-2, #eef1ea); font-size: max(15px, 4.9cqw); min-height: max(44px, 12cqw); }
.tuts-golpes__n { width: 1.2em; text-align: center; font-weight: 700; color: var(--text-muted, #57605a); font-size: .85em; }
.tuts-golpes__d { flex: 1; }
.tuts-golpes__d small { color: var(--text-muted, #57605a); font-size: .85em; }
.tuts-golpes b { font-variant-numeric: tabular-nums; font-weight: 600; }
.tuts-golpes b.pos { color: var(--brand, #1f7a47); }
.tuts-golpes b.neg { color: var(--text-muted, #57605a); }
.tuts-golpes li.is-peor { background: #f7e3de; box-shadow: inset 0 0 0 1.5px var(--error, #c0432f); }
.tuts-golpes li.is-peor b { color: var(--error, #c0432f); font-weight: 700; }
/* Carga rápida contra tiro a tiro */
.tuts-cmp { display: flex; flex-direction: column; gap: 1.4cqw; padding: 4cqw; border-radius: 3.4cqw; }
.tuts-cmp + .tuts-cmp { margin-top: 3cqw; }
.tuts-cmp__t { font-size: max(12px, 3.8cqw); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tuts-cmp__d { font-size: max(16px, 5.2cqw); font-weight: 500; display: flex; align-items: center; gap: 2cqw; }
.tuts-cmp--rapida { background: var(--surface-2, #eef1ea); color: var(--text-muted, #57605a); }
.tuts-cmp--tiro { background: var(--brand, #1f7a47); color: #fff; }
.tuts-cmp--tiro .tuts-cmp__d { font-size: max(19px, 6.2cqw); font-weight: 600; }
/* Tres columnas con la derecha vacía del mismo ancho que ‹: así el hoyo queda centrado en la pantalla. */
.tuts-ctrl { width: min(420px, 100%); display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.tuts-atras { flex: none; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; }
.tuts-atras:disabled { opacity: .35; }
/* Abajo, el hoyo visto de arriba (un par 4 con dogleg): cada paso es un golpe de la pelota hacia la
   bandera. Tocarlo avanza. El dibujo y la animación están en tutorial-tiro-a-tiro.js. */
.tuts-campo { min-width: 0; width: 100%; position: relative; aspect-ratio: 320 / 92; max-height: 100px; border: 0; padding: 0; background: #b9d7a0;
  cursor: pointer; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); touch-action: manipulation; }
.tuts-campo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tuts-chip { position: absolute; left: 8px; top: 7px; font-size: .8125rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; pointer-events: none;
  background: rgba(255,255,255,.9); color: var(--text, #18211b); font-variant-numeric: tabular-nums; }
.tuts-chip:empty { display: none; }
/* Paso 1: el aviso de que se avanza tocando, y un anillo que late sobre la pelota. */
.tuts-chip.is-aviso { background: var(--brand); color: #fff; }
@keyframes tutsPelota { 0% { r: 4; opacity: .9; } 100% { r: 13; opacity: 0; } }
#tutsAnillo { animation: tutsPelota 1.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { #tutsAnillo { animation: none; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .tuts-paso.is-act .tuts-foco::after { animation: none; } }

/* "Ver golpes" con el SG de cada golpe (2026-09-29). Cada golpe es una pastilla "Tee 412 yd +0.12"
   que baja de línea cuando no entra; el SG del hoyo queda fijo a la derecha. */
.sc-shotrow { align-items: flex-start; }
.sc-golpes { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sc-golpe { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2, #f3f4f1); white-space: nowrap; font-size: .78rem; }
.sc-golpe__t { color: var(--text-1, #333); }
.sc-golpe__sg { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-muted, #888); }
.sc-golpe__sg.sc-ok { color: var(--brand, #1e7b34); }
.sc-golpe__sg.sc-miss { color: #c0392b; }
.sc-shotrow__tot { flex: none; min-width: 44px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 2px; }