/* ============================================================================
   NATIVO — ajustes de la app iOS (Capacitor, WKWebView).
   Se enlaza en TODAS las páginas y DESPUÉS del resto de los CSS: con igual
   especificidad, lo de acá gana por orden.

   Contexto de la app (capacitor.config.json):
   - StatusBar.overlaysWebView = false, barra BLANCA con texto oscuro → el WebView
     arranca DEBAJO de la barra de estado y env(safe-area-inset-top) vale 0.
     Lo que antes se despegaba del notch con ese env() ahora queda pegado al
     borde blanco: acá le devolvemos el aire a mano.
   - env(safe-area-inset-bottom) sí vale (~34px, el home indicator).
   - native.js pone .native / .native-ios en <html> antes del primer pintado.

   Regla de la casa: lo que solo tiene sentido en la app va colgado de
   html.native (la web comparte este archivo y no se tiene que enterar). Las
   media queries de tacto (hover: none / pointer: coarse) van sin html.native
   a propósito: son igual de ciertas en el navegador de un teléfono.
   ============================================================================ */

/* ==========================================================================
   1 · ESQUEMA DE COLOR
   Tema claro obligatorio. Sin esto, con el iPhone en modo oscuro los controles
   nativos (el <input type="date"> de fecha de nacimiento del Perfil, los
   <select>) salían oscuros e ilegibles sobre nuestras superficies claras.
   ========================================================================== */
:root { color-scheme: light; }

/* ==========================================================================
   2 · PANTALLAS OSCURAS BAJO LA BARRA BLANCA
   ========================================================================== */

/* (a) Cancha GPS — mapa satelital a pantalla completa. El borde blanco de la
   barra contra la foto quedaba como un corte seco y los controles pegados a él.
   Un velo oscuro→transparente arriba lo suaviza y le da contraste a los FAB.
   Solo en la vista del MAPA: en el setup (.gps-setup, fondo claro) y en el
   arranque (.is-boot) no va. z-index 1: por encima del mapa y sus markers
   (sin z-index), por debajo de los controles (z 5) y de los controles de
   MapLibre (z 2). */
html.native .gps-screen:not(.gps-setup):not(.is-boot)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 15, 13, 0.6) 0%, rgba(11, 15, 13, 0) 100%);
}
html.native .gps-fab { top: 16px; }
html.native .gps-holechip { top: 18px; }
/* El rail no tenía z-index (quedaba debajo de todo lo posicionado): sin esto el velo
   de arriba lo taparía. z 2 y no 5: si crece mucho, el botón "hoyo siguiente" (z 5)
   tiene que seguir pintándose encima, como hasta ahora. Baja lo mismo que subió el
   FAB y reserva el home indicator al pie. */
html.native .gps-rail {
  z-index: 2;
  top: 64px;
  max-height: calc(100% - 80px - env(safe-area-inset-bottom, 0px));
}

/* (b) "Ver green" (GolfReal/green-view.js) — la barra del hoyo quedaba con 9px
   contra la barra blanca. El FAB de cierre baja lo mismo para no quedar pegado
   a la barra (green-view.js mide el alto real para el encuadre, se acomoda solo). */
html.native .gv-topbar { padding-top: 14px; }
html.native .gv-fab { top: 56px; }

/* (c) Banner de cancha del setup (cargar vuelta / Vista Previa): la × y los
   badges estaban a 8–12px del borde blanco. */
html.native .cg-banner__x,
html.native .cg-banner__badges { top: 14px; }

/* (d) Modal de avisos (avisos.js): el safe-area de arriba ya no empuja nada. */
html.native .avm { padding-top: max(24px, var(--avm-margen)); }

/* (e) Hoja "Buscar cancha" (shared/selector-cancha.js): el primer bloque es su
   cabecera (.cargar-top.selc__top), que sin el env() quedaba con 12px arriba. */
html.native .selc__top { padding-top: 20px; }

/* ==========================================================================
   3 · HOME INDICATOR (abajo)
   ========================================================================== */
/* Modales del design system (components.css): 24px de padding no alcanzan
   cuando el panel es alto y el pie cae sobre el home indicator. */
html.native .modal-overlay {
  padding-bottom: max(var(--space-5), calc(env(safe-area-inset-bottom, 0px) + 12px));
}
/* "Exportar Excel" del Perfil (CSS inline en perfil.html, padding 16px). */
html.native .exp-modal {
  padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}

/* ==========================================================================
   4 · LOGIN / REGISTRO / RESET · TECLADO · ZOOM
   ========================================================================== */
/* 100vh en WKWebView no se entera del teclado ni de la barra; dvh sí. */
html.native body { min-height: 100dvh; }

/* .auth-main es grid con place-items: center. Centrado, al abrir el teclado la
   tarjeta saltaba hacia arriba; anclada arriba con aire se queda quieta. En un
   teléfono chico la tarjeta larga (registro) simplemente scrollea. El max()
   no deja que el aire baje de lo que ya tenía. Abajo, el home indicator. */
html.native .auth-main {
  place-items: start center;
  padding-top: max(var(--space-6), 10vh);
  padding-bottom: max(var(--space-6), calc(env(safe-area-inset-bottom, 0px) + 24px));
}

/* iOS hace zoom al enfocar un campo con letra < 16px (y no vuelve solo).
   Controles de las pantallas de la app que estaban por debajo:
   - .mset-name / .mset-idx / .mset-tee — partida grupal (golfreal.css, .85rem)
   - .rv-sel — filtros de "Mis vueltas" (golfreal.css, .8rem) */
html.native .mset-name,
html.native .mset-idx,
html.native .mset-tee,
html.native .rv-sel { font-size: 16px; }

/* ==========================================================================
   5 · TACTO
   ========================================================================== */
/* Sin el flash gris de WebKit al tocar: los botones ya tienen su :active. */
html.native { -webkit-tap-highlight-color: transparent; }

/* Sin el menú de "mantener apretado" (copiar / abrir link / guardar imagen),
   que delata que es una web. En los campos de texto sí hace falta (pegar). */
html.native-ios { -webkit-touch-callout: none; }
html.native-ios input,
html.native-ios textarea,
html.native-ios [contenteditable] { -webkit-touch-callout: default; }

/* Un doble toque o un toque largo no pinta de azul media pantalla. Los campos
   tienen que seguir siendo seleccionables (si no, en iOS ni siquiera toman foco). */
html.native { -webkit-user-select: none; user-select: none; }
html.native input,
html.native textarea,
html.native [contenteditable],
html.native select { -webkit-user-select: text; user-select: text; }

/* Sin el rebote elástico de la página entera (se ve el fondo blanco de la app
   detrás). Los scrollers internos no le encadenan el gesto a la página. */
html.native,
html.native body { overscroll-behavior-y: none; }
html.native .table-wrap,
html.native .scorecard,
html.native .yb-preview-host,
html.native .modal-body { overscroll-behavior: contain; }

/* Con un modal abierto el fondo no se mueve. mc.js / avisos.js ya ponen
   overflow:hidden en el body, pero en iOS eso no frena el gesto: hace falta en
   la raíz (mismo truco que html.cargar-open en golfreal.css). */
html.native:has(.modal-overlay.is-open),
html.native:has(.avm.is-open),
html.native:has(.exp-modal.is-open) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* En pantallas táctiles el :hover queda "pegado" después del toque: la card
   levantada y con sombra hasta que tocás otra cosa. Volvemos al valor de reposo
   de cada una (no `inherit`, que dejaría la sombra rota). */
@media (hover: none) {
  /* .btn en reposo no tiene sombra; :not(:focus-visible) para no pisar el anillo de foco. */
  .btn:hover:not(:focus-visible) { transform: none; box-shadow: none; }
  .card--interactive:hover,
  .quick-action-card:hover,
  .perf-card:hover,
  .torneo-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .galeria-item:hover img { transform: none; }
}

/* ==========================================================================
   6 · ÁREA TÁCTIL MÍNIMA 44×44 (Apple HIG)
   ========================================================================== */
@media (pointer: coarse) {
  /* Controles chicos dentro de un layout apretado: se agranda el área con un
     ::after invisible, sin tocar el tamaño visible ni mover nada. position:
     relative solo a los que estaban en static (no los desplaza).
     Los cuatro insets explícitos + place-self: stretch (y no top/left 50% +
     translate): varios de estos botones son grid con place-items: center, y los
     motores que ya alinean hijos absolute centrarían el ::after en otro lado. */
  .course-dot,
  .draft-bar__x,
  .mset-del { position: relative; }

  .course-dot::after,
  .draft-bar__x::after,
  .mset-del::after,
  .avm__x::after { /* .avm__x ya es absolute: sirve de contenedor tal cual */
    content: "";
    position: absolute;
    place-self: stretch;
  }
  /* .hole-gps__see: sacado de acá (C26, prueba integral 2026-09-17) — el botón mide 44×44 real
     directo en golfreal.css, este ::after (28→44, solo bajo touch) quedaba redundante. */
  .mset-del::after { inset: -7px; }                             /* 30 → 44 */
  .avm__x::after { inset: calc((2.25rem - 44px) / 2); }         /* 2.25rem → 44 */
  /* Dots del carrusel: 8px cada 16px. A 44 de ancho se pisarían entre sí y el
     toque iría al dot de al lado; crecen en alto y a lo ancho solo hasta la
     mitad del gap (var(--space-2) en golfreal.css): 16×44. */
  .course-dot::after { inset: -18px -4px; }
  /* × de la píldora de borrador (26px): a la izquierda tiene "Completar" a 4px;
     si el área crece más, un toque en el borde de "Completar" ocultaría el aviso.
     Crece hacia afuera (padding de la píldora) y en alto: 38×44. */
  .draft-bar__x::after { inset: -9px -8px -9px -4px; }

  /* Botones sueltos (FAB, cierres, volver): directo a 44. */
  .gps-fab,
  .gv-fab,
  .cargar-x,
  .cargar-card-btn,
  .cg-banner__x,
  .vd-back { width: 44px; height: 44px; }
  /* El título de .cargar-top se centra con un spacer del mismo ancho que la ×
     (y .cargar-card-btn es su par del otro lado): los tres parejos. */
  .cargar-top__spacer { width: 44px; }

  .btn--sm { min-height: 44px; }
}

/* ==========================================================================
   7 · BARRA INFERIOR
   Un rótulo largo ("Sesiones", "Análisis") en un iPhone angosto empujaba el
   ancho de su pestaña (flex:1 no achica por debajo del contenido) y descentraba
   la barra. min-width:0 deja achicar; el rótulo se corta con "…". El badge
   (.nav-badge, también un span) queda afuera: es absolute y no se recorta.
   ========================================================================== */
html.native .tab-item { min-width: 0; }
html.native .tab-item > span:not(.nav-badge) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}