@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600;1,9..144,700&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --green-950: #0a2e1c;
  --green-900: #0f3d24;
  --green-700: #1f5c3a;
  --green-600: #2d7a4d;
  --green-100: #eef2ea;
  --sand: #ffffff;
  --cream: #f2ede1;
  --ink: #1c221d;
  --muted: #656b5f;
  --line: #ddd6c2;
  --white: #ffffff;
  --gold: #b8863a;
  --gold-light: #e9d9b8;
  --lime-accent: #a8e063;
  --header-forest: #003d25;
  --danger: #a83b2c;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 20, 0.06);
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* overflow-x: clip (no "hidden") a propósito: hidden en html/body es un bug
   conocido de Safari/iOS que bloquea el scroll táctil horizontal de CUALQUIER
   carrusel anidado (overflow-x:auto), aunque ese carrusel esté bien armado —
   esto es lo que rompía el swipe de "Canchas destacadas" todo este tiempo,
   no el CSS/JS del carrusel en sí. clip recorta el desborde igual que hidden
   pero sin crear ese contexto de scroll que confunde al touch routing de iOS. */
html { overflow-x: clip; max-width: 100%; background: var(--green-950); }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.55;
  font-size: 15.5px;
  overflow-x: clip;
  max-width: 100%;
  /* Sin esto, una pantalla con poco contenido (ej. "Comunidad" en su
     estado Próximamente, o cualquier pantalla recién intercambiada por el
     motor de navegación fluida -- ver setupSmoothNav() en app.js -- antes
     de que termine de cargar sus datos) deja ver el verde oscuro de <html>
     (arriba, pensado solo para el rebote elástico del scroll en iOS) por
     debajo, como si la pantalla estuviera "cortada". min-height asegura
     que el fondo claro del body siempre tape toda la pantalla, sin importar
     cuánto contenido real tenga en ese instante. 100dvh (viewport dinámico,
     se ajusta con la barra de Safari/el teclado) con 100vh como respaldo
     para navegadores que no lo soportan.
  */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Prevent grid/flex items (which default to min-width:auto) from
   inflating their container past the viewport width on mobile. */
.detail-grid > *,
.account-layout > *,
.account-two-col > *,
.chat-layout > *,
.footer-grid > *,
.benefit-row > *,
.steps-row > *,
.testi-row > * {
  min-width: 0;
}

/* Wrap any <table> that might be wider than the screen (fixed-width
   inputs, many columns) so it scrolls locally instead of blowing out
   the whole page horizontally. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px;
}
.table-scroll table { margin: 0; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .table-scroll table { font-size: 0.82rem; }
  .table-scroll th, .table-scroll td { padding: 8px 6px; }
}

/* Tarjetas de "Mis reservas" (tee times) — reemplazan la tabla ancha para
   que no haya que hacer swipe horizontal para llegar a "Llamar carrito". */
.res-card-list { display: flex; flex-direction: column; gap: 12px; }
.res-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.res-card-highlight { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(45, 122, 77, 0.18); }
.res-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.res-card-top strong { font-size: 0.98rem; }
.res-card-details { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: 0.84rem; margin: 8px 0 12px; }
.res-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.res-card-actions:empty { display: none; }
.res-card-date-strong { color: var(--green-700); font-weight: 700; }

/* WHEEL DATE PICKER (estilo iOS: swipe para elegir día/mes/año) */
.date-trigger-btn { min-width: 168px; justify-content: flex-start; }
.date-trigger-btn svg { flex: none; opacity: 0.7; }
.date-picker-overlay {
  position: fixed; inset: 0; background: rgba(10, 30, 20, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 500; padding: 0;
}
.date-picker-sheet {
  background: var(--white); width: 100%; max-width: 420px;
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(10, 30, 20, 0.2);
  animation: datePickerUp 0.22s ease; overflow: hidden;
}
@keyframes datePickerUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Segundo paso del login cuando la cuenta tiene 2FA activado (login.html) --
   mismo patrón de overlay que .date-picker-overlay arriba, pero centrado
   (no bottom-sheet) porque no es específico de mobile. */
.twofa-overlay {
  position: fixed; inset: 0; background: rgba(10, 30, 20, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 16px;
}
.twofa-card {
  background: var(--white); width: 100%; max-width: 380px;
  border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(10, 30, 20, 0.25);
  padding: 28px;
}
.twofa-code-input {
  width: 100%; text-align: center; font-size: 1.5rem; letter-spacing: 6px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-sans); margin: 14px 0;
}
.date-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--green-950);
  border-radius: 20px 20px 0 0;
}
.date-picker-title { font-weight: 700; font-size: 0.9rem; color: var(--sand); }
.date-picker-clear, .date-picker-done {
  border: none; cursor: pointer; padding: 6px 13px; font-size: 0.82rem; border-radius: 999px;
  font-weight: 700;
}
.date-picker-clear { background: transparent; color: rgba(250, 247, 240, 0.75); }
.date-picker-clear:hover { color: var(--sand); }
.date-picker-done { background: var(--sand); color: var(--green-950); }
.date-picker-done:hover { background: var(--white); }
.date-picker-wheels { position: relative; display: flex; height: 216px; padding: 0 10px 18px; }
.date-picker-highlight {
  position: absolute; left: 10px; right: 10px; top: 50%; height: 36px; transform: translateY(-50%);
  border-top: 1px solid var(--green-200, #cfe3d5); border-bottom: 1px solid var(--green-200, #cfe3d5);
  background: var(--cream); border-radius: 10px; pointer-events: none; z-index: 0;
}
.date-picker-col {
  position: relative; z-index: 1;
  flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  padding: 90px 0; scrollbar-width: none; -ms-overflow-style: none;
}
.date-picker-col::-webkit-scrollbar { display: none; }
.date-picker-item {
  height: 36px; display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; font-size: 0.94rem; color: var(--muted);
  transition: color 0.15s ease, font-weight 0.15s ease, font-size 0.15s ease;
}
.date-picker-item.active { color: var(--green-950); font-weight: 700; font-size: 1.04rem; }

/* Section header row used to group table rows by day (ej. panel admin
   de reservas). Va dentro de <tbody>, ocupa todas las columnas. */
.table-group-row td {
  background: var(--cream, #f4f1e8);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted, #6b6b6b);
  padding: 8px 10px;
  border-top: 1px solid var(--border, #e2ddd0);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* NAV */
#nav {
  background: var(--sand);
}

/* Banner de "cambia tu contraseña" (must_reset_password) -- se inserta justo
   después de #nav vía renderMustResetBanner() en app.js, como elemento
   normal del flujo del documento (no fixed/sticky) para no interferir con
   el resto de las barras position:fixed de la app (ver --kb-offset arriba).
   No es descartable a propósito: debe seguir visible en cada página hasta
   que el usuario realmente cambie la contraseña en change-password.html. */
.must-reset-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: #fdf3e3;
  border-bottom: 1px solid var(--gold-light);
  color: var(--green-950);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}
.must-reset-banner a.btn {
  padding: 6px 16px;
  font-size: 0.82rem;
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--green-950);
  letter-spacing: -0.01em;
}
.brand-mark { width: 22px; height: auto; flex: none; }
.brand-tee { color: var(--green-600); }
.nav-links { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; }
.nav-link { color: var(--muted); font-weight: 600; font-size: 0.92rem; padding: 4px 0; border-bottom: 1px solid transparent; }
.nav-link.active, .nav-link:hover { color: var(--green-950); border-bottom-color: var(--gold); }
.nav-right { display: flex; align-items: center; gap: 14px; }

/* Login/registro: nav mínimo (solo el nombre + "Volver"), sin Canchas/
   Clases/Caddies/Simuladores ni Entrar/Crear cuenta (ya estás en esa
   pantalla). Fondo crema en vez de blanco puro. Solo estas páginas — no
   toca el nav de las demás. */
/* Escritorio: paleta oscura igual al landing (#0c1210/#edf0ec/#c9a85c,
   Playfair Display + JetBrains Mono) en vez del crema/blanco de antes --
   pedido explícito de mantener login/registro visualmente consistentes
   con index.html. Mobile no se toca (login usa .signin-mobile aparte,
   register tiene su propio bloque oscuro ya existente dentro del @media
   de arriba). */
body.auth-page { background: #0c1210; }
body.auth-page #nav .nav-links { display: none; }
body.auth-page .auth-back-link {
  color: #c9a85c; font-weight: 700; font-size: 0.92rem; text-decoration: none;
}
body.auth-page .auth-back-link:hover { color: #edf0ec; }
body.auth-page #nav { background: #0c1210; border-bottom-color: rgba(237,240,236,.14); }
body.auth-page #nav .brand, body.auth-page #nav .brand-tee { color: #edf0ec; }
/* brandMark() dibuja el logo con relleno verde oscuro fijo (#0a2e1c) por
   defecto -- invisible sobre el nuevo fondo oscuro del nav. Filtro en vez
   de tocar app.js (que comparte brandMark() con todas las páginas). */
body.auth-page #nav .brand-mark { filter: brightness(0) invert(1); }

/* Sign in (mobile), doc "Playtee Sign In Mobile": pantalla inmersiva propia
   con foto + overlay oscuro, bien distinta del .form-card claro que sigue
   usando el escritorio. Solo en login.html (body.login-page, no en
   register.html/forgot-password.html, que comparten .form-card pero no este
   diseño) y solo en el breakpoint mobile de siempre -- en escritorio
   .signin-mobile queda oculto y se ve el .form-card de toda la vida. No
   toca #nav (solo se oculta en este breakpoint+página) ni renderNav(). */
.signin-mobile { display: none; }
/* Crear cuenta (mobile): default oculto ACÁ, antes del @media de abajo que la
   muestra en mobile (línea ~296) -- misma especificidad, así que gana la que
   viene DESPUÉS en el archivo. Antes vivía más abajo (línea ~471, después del
   @media que la muestra), así que esa regla "oculta" ganaba siempre y la foto
   nunca se veía ni en mobile. Mismo bug que .hero-row/.hero-photo-cards, pero
   al revés: acá el default debe ir ANTES del override, no después. */
.register-hero-mobile { display: none; }
.signin-mobile-hero {
  position: absolute; top: 0; left: 0; right: 0; height: 300px;
  background-size: cover; background-position: 65% 28%;
}
/* En la app empacada (Capacitor) se saca la foto de fondo -- queda solo el
   degradé oscuro de abajo como fondo liso, se ve más limpio en la pantalla
   compacta de mobile. La web/PWA (Safari) sigue mostrando la foto igual que
   siempre -- ver body.native-app en app.js. */
body.native-app .signin-mobile-hero { background-image: none !important; }
.signin-mobile-fade {
  position: absolute; top: 0; left: 0; right: 0; height: 300px;
  background: linear-gradient(180deg, rgba(10,16,12,.8) 0%, rgba(10,16,12,.72) 45%, rgba(10,16,12,.9) 75%, #0c1210 100%);
}
/* padding-top suma env(safe-area-inset-top) (notch/Dynamic Island) -- antes
   era un fijo "40px" y en el iPhone empacado (WKWebView a pantalla completa,
   viewport-fit=cover) el nombre "Playtee" y el título quedaban tapados
   detrás del notch. */
.signin-mobile-header { position: relative; padding: calc(40px + env(safe-area-inset-top)) 26px 0; }
.signin-mobile-logo { width: 40px; height: 40px; margin: 0 0 14px; display: block; }
.signin-mobile-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 600;
}
.signin-mobile-pty {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: #c9a85c;
}
.signin-mobile-h1 { font-family: 'Playfair Display', Georgia, serif; margin: 20px 0 0; font-size: 38px; line-height: 1.02; font-weight: 400; }
.signin-mobile-sub { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: rgba(237,240,236,.7); }
.signin-mobile-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 16px 26px 26px; margin: 0; }
.signin-mobile-forgot-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.signin-mobile-forgot-row a { font-size: 12px; color: #c9a85c; }
.signin-mobile-fields { display: flex; flex-direction: column; gap: 9px; }
.signin-mobile-fields input {
  font-family: inherit; width: 100%; font-size: 15px; color: #edf0ec;
  background: rgba(237,240,236,.05); border: 1px solid rgba(237,240,236,.18);
  border-radius: 10px; padding: 16px; outline: none;
}
.signin-mobile-fields input::placeholder { color: rgba(237,240,236,.35); }
.signin-mobile-fields input.has-error { border-color: rgba(224,139,106,.6); }
.signin-mobile-field-error { display: block; font-size: 12px; color: #e08b6a; }
.signin-mobile-msg {
  margin-top: 16px; padding: 12px 14px; border-radius: 8px; font-size: 12px; line-height: 1.5;
}
.signin-mobile-msg-error { border: 1px solid rgba(224,139,106,.4); background: rgba(224,139,106,.08); color: #f0b79c; }
/* margin-top da espacio suficiente para que la cabeza de la mascota (ver
   .signin-mobile-mascot abajo) no se monte sobre el campo de Contraseña de
   arriba -- antes eran 40px y la mascota terminaba tapando el input. */
.signin-mobile-submit-wrap { position: relative; margin-top: 88px; }
.signin-mobile-mascot {
  /* Como en el doc: la mascota va DELANTE del botón (z-index mayor), con las
     patas asomando arriba de "Entrar" como si se estuviera asomando. */
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  width: 220px; height: auto; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.signin-mobile-submit {
  font-family: 'JetBrains Mono', monospace; position: relative; z-index: 1;
  width: 100%; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #12241a; border: 0; border-radius: 10px; padding: 18px; margin-top: 76px;
  background: #c9a85c; cursor: pointer;
}
.signin-mobile-submit:disabled { background: #a89053; cursor: wait; }
.signin-mobile-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(237,240,236,.4);
}
.signin-mobile-divider span { flex: 1; height: 1px; background: rgba(237,240,236,.14); }
.signin-mobile-oauth { display: flex; gap: 9px; }
.signin-mobile-oauth button {
  font-family: inherit; flex: 1; font-size: 13px; color: #edf0ec;
  background: rgba(237,240,236,.05); border: 1px solid rgba(237,240,236,.2);
  border-radius: 10px; padding: 15px; cursor: pointer;
}
.signin-mobile-terms {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 11px 0;
  min-height: 44px; font-size: 12px; line-height: 1.55; color: rgba(237,240,236,.7); cursor: pointer;
}
.signin-mobile-terms input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #c9a85c; cursor: pointer; }
.signin-mobile-terms a { color: #c9a85c; }
.signin-mobile-signup { margin: 16px 0 0; text-align: center; font-size: 12px; color: rgba(237,240,236,.6); }
.signin-mobile-signup a { color: #c9a85c; font-weight: 600; }

/* Bienvenida (welcome.html) -- elección "Iniciar sesión"/"Crear cuenta" que
   se ve después del splash de apertura de la app. Mismo fondo oscuro que
   .signin-mobile, pero sin foto de fondo ni formulario, solo logo + dos
   botones. Oculto por defecto (se muestra en el @media de mobile de abajo,
   igual que .signin-mobile). */
.welcome-mobile { display: none; }
.welcome-mobile-fade {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(45,122,77,.25), transparent 60%);
}
.welcome-mobile-body {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 26px; gap: 4px;
}
.welcome-mobile-logo { width: 76px; height: 76px; margin-bottom: 14px; }
.welcome-mobile-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 600;
}
.welcome-mobile-h1 {
  font-family: 'Playfair Display', Georgia, serif; margin: 16px 0 36px;
  font-size: 34px; line-height: 1.08; font-weight: 400;
}
.welcome-mobile-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.welcome-mobile-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; text-align: center; text-decoration: none;
  border-radius: 10px; padding: 13px; cursor: pointer;
}
.welcome-mobile-btn-primary { background: #c9a85c; color: #12241a; }
.welcome-mobile-btn-ghost { background: rgba(237,240,236,.05); color: #edf0ec; border: 1px solid rgba(237,240,236,.2); }
.welcome-mobile-divider {
  width: 100%; text-align: center; margin: 16px 0 12px; color: rgba(237,240,236,.4);
  font-size: 0.8rem; position: relative;
}
.welcome-mobile-divider::before, .welcome-mobile-divider::after {
  content: ""; position: absolute; top: 50%; width: 42%; height: 1px;
  background: rgba(237,240,236,.14);
}
.welcome-mobile-divider::before { left: 0; }
.welcome-mobile-divider::after { right: 0; }
.welcome-mobile-social { width: 100%; display: flex; gap: 10px; }
.welcome-mobile-social-btn {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(237,240,236,.05); border: 1px solid rgba(237,240,236,.2); color: #edf0ec;
  border-radius: 10px; padding: 12px; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.welcome-mobile-social-btn:hover { border-color: #c9a85c; }

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  body.welcome-page .site-bottom-nav { display: none; }
  body.welcome-page.has-site-bottom-nav { padding-bottom: 0; }
  body.welcome-page .welcome-mobile {
    display: flex; flex-direction: column; position: relative;
    min-height: 100dvh; min-height: 100vh; overflow: hidden;
    background: #0c1210; color: #edf0ec;
  }
  body.login-page #nav { display: none; }
  body.login-page .form-card { display: none; }
  /* .site-bottom-nav se crea aparte, pegado a document.body (ver
     renderSiteBottomNav() en app.js) -- no vive adentro de #nav, así que
     ocultar #nav arriba no la tapaba. En esta pantalla inmersiva no hace
     falta (ya tiene su propio "Crear cuenta" arriba) y quedaba flotando
     encima de la foto/formulario. */
  body.login-page .site-bottom-nav,
  body.register-page .site-bottom-nav { display: none; }
  body.login-page.has-site-bottom-nav,
  body.register-page.has-site-bottom-nav { padding-bottom: 0; }
  body.login-page .signin-mobile {
    display: flex; flex-direction: column; position: relative;
    min-height: 100dvh; min-height: 100vh; overflow: hidden;
    background: #0c1210; color: #edf0ec;
  }

  /* Crear cuenta (mobile): mismo estilo que sign in -- foto + overlay oscuro
     arriba (esta vez sin la mascota, foto de golf en vez de golfista) y el
     resto en la misma paleta oscura (#0c1210/#edf0ec/#c9a85c). No es un
     layout nuevo completo como el sign in (register tiene muchos más campos
     que no entrarían en una pantalla tipo foto+overlay de una sola vista),
     así que la foto es un bloque fijo arriba y abajo se reusa el .form-card
     de siempre, recoloreado. Solo en register.html (body.register-page) y
     solo mobile -- escritorio queda tal cual estaba, sin la foto. */
  body.register-page { background: #0c1210; }
  body.register-page #nav { display: none; }
  .register-hero-mobile {
    display: flex; align-items: flex-end; position: relative;
    height: 240px; background-size: cover; background-position: 60% 35%;
    color: #edf0ec;
  }
  .register-hero-mobile-fade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,16,12,.25) 0%, rgba(10,16,12,.55) 60%, #0c1210 100%);
  }
  .register-hero-mobile-copy { position: relative; z-index: 1; padding: 0 26px 20px; }
  .register-hero-mobile-h1 { font-size: 32px; }
  body.register-page .form-card {
    background: #0c1210; border-color: rgba(237,240,236,.14); color: #edf0ec;
    margin-top: 0;
  }
  body.register-page .auth-title { color: #edf0ec; }
  body.register-page .auth-subtitle { color: rgba(237,240,236,.6); }
  body.register-page .field label { color: #edf0ec; }
  body.register-page .field input,
  body.register-page .field select,
  body.register-page .field textarea {
    background: rgba(237,240,236,.05); border-color: rgba(237,240,236,.18); color: #edf0ec;
  }
  body.register-page .field input::placeholder,
  body.register-page .field textarea::placeholder { color: rgba(237,240,236,.35); }
  body.register-page .field select option { color: #12241a; }
  body.register-page .btn-social {
    background: rgba(237,240,236,.05); border-color: rgba(237,240,236,.2); color: #edf0ec;
  }
  body.register-page .auth-divider { color: rgba(237,240,236,.4); }
  body.register-page .auth-divider::before, body.register-page .auth-divider::after { background: rgba(237,240,236,.14); }
  body.register-page .btn-primary { background: #c9a85c; color: #12241a; border-color: #c9a85c; }
  body.register-page .terms-check label { color: rgba(237,240,236,.7); }
  body.register-page .terms-check label a { color: #c9a85c; }
  body.register-page .card-meta { color: rgba(237,240,236,.5); }
  body.register-page > p, body.register-page > p a,
  body.register-page .form-card > p, body.register-page .form-card > p a { color: rgba(237,240,236,.6); }
  body.register-page .form-card > p a { color: #c9a85c; font-weight: 700; }
}

/* Nav transparente flotando sobre la foto del hero, solo en index.html
   (body.home-hero-page) y solo cuando la vista pública (deslogueada) del
   hero es la que se muestra — si el usuario está logueado, .dash-user
   reemplaza este nav por el shell del dashboard, así que esta regla no
   aplica ahí. No toca #nav en ninguna otra página. */
@media (min-width: 641px) {
  body.home-hero-page:not(.dash-user) #nav {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    background: transparent; border-bottom: none;
  }
  /* .grass-strip es la decoración de "piso de césped" que renderNav() pone
     al final de #nav para el look de barra sólida normal — sobre la foto
     transparente del hero se veía como una franja rayada suelta, así que se
     oculta solo en este contexto. */
  body.home-hero-page:not(.dash-user) #nav .grass-strip { display: none; }
  /* Nav minimal sobre la foto: solo logo centrado + Entrar/Crear cuenta,
     sin la fila completa de links (Canchas/Clases/Caddies/etc.) que en la
     app normal sí va en el nav pero acá compite con la foto y el título. */
  body.home-hero-page:not(.dash-user) #nav .nav-links { display: none; }
  body.home-hero-page:not(.dash-user) #nav .brand,
  body.home-hero-page:not(.dash-user) #nav .nav-link { color: #edf0ec; }
  body.home-hero-page:not(.dash-user) #nav .nav-link.active,
  body.home-hero-page:not(.dash-user) #nav .nav-link:hover { color: #c9a85c; border-bottom-color: #c9a85c; }
  /* Logo a la izquierda, Playfair Display normal (no itálica) — igual al
     doc: "Playtee" + badge mono "PTY", sin centrar. Con .nav-links oculto ya
     no queda nada con flex:1 empujando #navRight hacia el borde derecho —
     sin esto, logo y Sign in/Log in quedan pegados del mismo lado
     (izquierda). */
  body.home-hero-page:not(.dash-user) .nav-inner { position: relative; justify-content: space-between; }
  body.home-hero-page:not(.dash-user) #nav .brand {
    font-family: 'Playfair Display', Georgia, serif; font-style: normal; font-weight: 500; font-size: 1.3rem;
    color: #ffffff; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 12px;
  }
  body.home-hero-page:not(.dash-user) #nav .brand-mark { display: none; }
  /* ".brand-tee" es "Tee", la segunda mitad de la palabra "PlayTee" (no un
     badge aparte) — se mantiene blanco parejo, mismo tamaño que "Play". El
     badge "PTY" real del doc se agrega aparte vía JS (ver index.html), sin
     tocar renderNav() compartido. */
  body.home-hero-page:not(.dash-user) #nav .brand-tee { color: #ffffff; font-size: inherit; font-family: inherit; letter-spacing: inherit; text-transform: none; }
  .nav-pty-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.2em;
    color: rgba(237,240,236,0.45); text-transform: uppercase;
  }
  /* Selector de país debajo del nombre — un <select> real (por ahora solo
     Panamá como única opción), barrita transparente con flechita, sin fondo
     sólido. */
  .nav-brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
  .nav-country-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(237,240,236,0.75); background-color: transparent;
    border: 1px solid rgba(237,240,236,0.25); border-radius: 999px; padding: 3px 24px 3px 11px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23edf0ec' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 8px 5px;
  }
  .nav-country-select:hover { border-color: rgba(237,240,236,0.45); }
  .nav-country-select option { color: #12241a; background: #edf0ec; text-transform: none; letter-spacing: normal; }
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--green-950); color: var(--sand); border-color: var(--green-950); }
.btn-primary:hover { background: var(--green-700); }
.btn-ghost { background: transparent; color: var(--green-950); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green-950); }
/* Botón "Verificar" del número de socio (course.html) -- verde, chico, no
   ocupa todo el ancho como los .btn-primary normales. */
.btn-verify {
  background: var(--green-600); color: var(--white); border-color: var(--green-600);
  flex: none; padding: 10px 18px; white-space: nowrap;
}
.btn-verify:hover { background: var(--green-700); border-color: var(--green-700); }
.btn-verify:disabled { opacity: 0.6; cursor: default; }
.btn-sm { padding: 6px 13px; font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* HERO */
.hero {
  background: var(--green-950);
  color: var(--sand);
  padding: 64px 0 74px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(250,247,240,0.08) 1px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
}
.hero .container { position: relative; }
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 14px;
}
.hero h1 { font-size: 2.5rem; line-height: 1.15; margin: 0 0 16px; max-width: 620px; font-weight: 600; }
.hero h1 .accent { color: var(--gold-light); font-style: italic; }
.hero p { font-size: 1.05rem; opacity: 0.82; max-width: 540px; margin: 0 0 30px; }
.hero .hero-tagline {
  font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--gold-light); opacity: 1; margin: 0 0 14px; max-width: 560px;
}
.hero .btn-primary { background: var(--sand); color: var(--green-950); border-color: var(--sand); }
.hero .btn-primary:hover { background: var(--gold-light); }
.hero-flex { display: block; }

/* Fondo fotográfico real del hero (todas las pantallas ≥641px). */
.hero-bg-photo { display: none; }
/* .hero-row (el párrafo "Elige día, jugadores y hoyos..." + .hero-photo-cards)
   es contenido de escritorio -- en mobile el buscador de abajo ya cubre lo
   mismo. Default oculto acá (antes del @media de escritorio a propósito,
   mismo patrón que .hero-bg-photo arriba) para que la regla de adentro del
   media query, con la MISMA especificidad, gane en escritorio por venir
   después en el archivo. Sin esto, en mobile el párrafo quedaba visible
   suelto (display block por default) como texto sobrante en el hero. */
.hero-row { display: none; }
@media (min-width: 641px) {
  .hero-bg-photo {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero-bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-bg-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Colores exactos del doc (Playtee Landing.html): fondo #0c1210, sin
       tinte verde. Dos capas: tinte horizontal para que el texto se lea sobre
       la foto + degradado vertical que funde el borde inferior de la foto
       hacia el mismo #0c1210 con el que arranca el fondo de #marketingHome
       justo debajo. */
    background:
      linear-gradient(180deg, rgba(12,18,16,0) 42%, #0c1210 82%, #0c1210 100%),
      linear-gradient(100deg, rgba(10,16,12,0.96) 0%, rgba(10,16,12,0.88) 38%, rgba(10,16,12,0.55) 68%, rgba(10,16,12,0.32) 100%);
  }
  .hero::before { z-index: 0; }
  .hero .container { z-index: 1; }
  /* Padding inferior +~28% (116px → 150px) para dejarle espacio de sobra al
     degradado antes de que el buscador flote encima — ver .hero + .container
     más abajo. */
  .hero { padding: 108px 0 150px; }
  .hero .eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.22em;
    color: #c9a85c; text-transform: uppercase;
  }
  .hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 3.6rem; line-height: 1; max-width: 760px; font-weight: 400; letter-spacing: -0.01em; }
  .hero h1 .accent { color: #c9a85c; font-style: italic; }
  .hero p { font-size: 1.1rem; line-height: 1.7; max-width: 480px; color: rgba(237,240,236,0.82); opacity: 1; }
  .hero .hero-tagline { font-family: 'JetBrains Mono', monospace; color: #c9a85c; }

  .hero-photo-cards { display: none; }
  body:not(.dash-user) .hero-photo-cards {
    /* Una sola tarjeta ("Canchas socias") desde que se quitó la de
       Marketplace -- el banner de PlayTee Premium pasó a promocionar el
       marketplace, así que esta quedaba duplicada. Columna única a todo el
       ancho en vez de "1fr 1fr", que dejaba media columna vacía. */
    display: grid; grid-template-columns: 1fr; gap: 16px;
  }
  .hero-photo-card {
    position: relative; display: block; min-height: 190px; border-radius: 14px;
    overflow: hidden; background-size: cover; background-position: center;
    transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
  }
  .hero-photo-card:hover { transform: scale(1.05); }
  .hero-photo-card::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,16,12,0.1) 0%, rgba(10,16,12,0.88) 100%);
  }
  .hero-photo-card-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; }
  .hero-photo-card-copy h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-weight: 500; color: #edf0ec; margin: 0 0 6px; }
  .hero-photo-card-copy p { font-size: 0.78rem; line-height: 1.4; color: rgba(237,240,236,0.82); margin: 0; max-width: none; }

  /* El buscador queda flotando sobre la parte final (ya sólida, sin foto)
     del degradado del hero, sin mover el resto de la estructura del hero:
     .hero mantiene su tamaño de contenido normal, solo se estira el padding
     de abajo y el buscador se monta encima con margen negativo. */
  .hero + .container { position: relative; z-index: 2; margin-top: -92px; }

  /* Buscador: se mantiene la posición/mecánica flotante intacta (frágil,
     ver comentarios en .search-card más abajo), sólo se recolorea de tarjeta
     blanca a barra oscura translúcida — igual al doc, sin verde. */
  .hero + .container { max-width: 1220px; }
  body:not(.dash-user) .search-card {
    background:
      linear-gradient(90deg, rgba(18,26,22,0.18) 0%, rgba(18,26,22,0.3) 32%, rgba(18,26,22,0.45) 60%, rgba(18,26,22,0.5) 100%);
    border: 1px solid rgba(237,240,236,0.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #edf0ec;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  }
  body:not(.dash-user) .search-card label { color: rgba(237,240,236,0.55); font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
  body:not(.dash-user) .search-card input,
  body:not(.dash-user) .search-card select {
    background: transparent; color: #edf0ec; border-color: rgba(237,240,236,0.2);
  }
  body:not(.dash-user) .search-card input::placeholder { color: rgba(237,240,236,0.4); }
  body:not(.dash-user) .search-card .search-icon-btn,
  body:not(.dash-user) .search-card .search-filter-btn { color: rgba(237,240,236,0.6); }
  body:not(.dash-user) .search-card .btn-primary {
    background: #c9a85c; color: #12241a; border-color: #c9a85c;
  }
  body:not(.dash-user) .search-card .btn-primary:hover { background: #dcc188; }
}
@media (min-width: 641px) and (max-width: 880px) {
  .hero { padding: 76px 0 105px; }
  .hero h1 { font-size: 2.6rem; }
  .hero + .container { margin-top: -70px; }
}

/* Home pública (desktop): página puramente explicativa — qué es PlayTee y
   por qué existe. Se ocultan el buscador, el carrusel de notificaciones,
   los badges de confianza y las listas de canchas/tee times (eso vive en
   courses.html y en el dashboard logueado); en su lugar se muestra
   #aboutExplainer. En móvil no cambia nada — sigue el lobby estilo
   Playtomic tal cual estaba. */
.about-explainer, .hero-cta-desktop, .about-closing { display: none; }
@media (min-width: 641px) {
  #lobbyNotifCarousel, .trust-row,
  #lobbyFeaturedCoursesSection, #lobbyNextTeeTimesSection { display: none; }

  /* Sign in / Log in dentro del hero, igual al header del doc — sin CTA de
     registro (eso ya vive en el nav como "Crear cuenta"). */
  .hero-cta-desktop { display: flex; align-items: center; gap: 20px; margin-top: 34px; }
  .btn-hero-signin {
    font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #edf0ec; background: transparent; border: 1px solid rgba(237,240,236,0.45);
    border-radius: 999px; padding: 11px 24px; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease;
  }
  .btn-hero-signin:hover { border-color: #c9a85c; color: #c9a85c; }
  .hero-cta-link {
    font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(237,240,236,0.85); text-decoration: none; transition: color 0.15s ease;
  }
  .hero-cta-link:hover { color: #c9a85c; }

  /* Párrafo del hero + tarjetas-foto en fila, igual al doc (texto a la
     izquierda, tarjetas a la derecha). */
  .hero-row { display: grid; grid-template-columns: 1fr 0.95fr; gap: 48px; align-items: start; margin-top: 14px; }
  .hero-row p { margin: 0; }

  /* Página pública de escritorio: fondo #0c1210 plano, exacto al doc
     (Playtee Landing.html) — sin degradado verde. body sigue en --sand para
     no afectar el lobby móvil; aquí sólo se oscurece #marketingHome en
     desktop. */
  body:not(.dash-user) #marketingHome {
    background: #0c1210;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  /* .btn trae su propio font-family (Manrope, del resto del sitio) que gana
     por especificidad aunque #marketingHome ya esté en Helvetica Neue — los
     botones del doc son todos mono en mayúsculas, así que se fuerza acá. */
  body:not(.dash-user) #marketingHome .btn {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem;
  }

  .about-explainer { display: block; padding: 92px 0 0; }
  .about-intro { max-width: 720px; margin: 0 auto 40px; text-align: center; }
  .about-intro .eyebrow, .about-mascot-copy .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.68rem;
    font-weight: 400; color: #c9a85c; margin-bottom: 14px;
  }
  .about-intro h2 {
    font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; line-height: 1.15;
    margin: 0; font-weight: 400; color: #edf0ec;
  }

  .about-story {
    max-width: 620px; margin: 0 auto; padding: 0 0 88px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .about-story p { font-size: 1rem; line-height: 1.75; color: rgba(237,240,236,0.74); margin: 0; }
  .about-story-lead { color: #edf0ec !important; }

  .about-mascot {
    display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: center;
    max-width: 1040px; margin: 0 auto 0;
    padding-top: 64px; border-top: 1px solid rgba(237,240,236,0.14);
  }
  .about-mascot-photo {
    aspect-ratio: 1; overflow: hidden;
    background: radial-gradient(circle at 50% 30%, rgba(201,168,92,0.14), transparent 70%);
  }
  .about-mascot-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .about-mascot-copy h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; font-weight: 400; margin: 10px 0 14px; color: #edf0ec; }
  .about-mascot-copy p { font-size: 1rem; line-height: 1.75; color: rgba(237,240,236,0.74); margin: 0; max-width: 520px; }
  @media (max-width: 880px) {
    .about-mascot { grid-template-columns: 1fr; text-align: center; }
    .about-mascot-photo { max-width: 240px; margin: 0 auto; }
    .about-mascot-copy p { margin: 0 auto; }
  }

  /* El campo: grid interactivo de 18 hoyos */
  .about-campo {
    max-width: 1040px; margin: 88px auto 0;
    padding-top: 64px; border-top: 1px solid rgba(250,247,240,0.14);
  }
  .about-campo-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
  .about-campo-head h2 {
    font-family: var(--font-display); font-size: 1.9rem; line-height: 1.28;
    margin: 0; font-weight: 600; color: var(--sand);
  }
  .about-campo-head p { font-size: 1rem; line-height: 1.6; color: rgba(237,240,236,0.7); margin: 10px 0 0; }

  .hole-grid {
    display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px;
    background: rgba(237,240,236,0.1);
  }
  .hole-btn {
    font-family: inherit; cursor: pointer; border: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 18px 14px; background: #0f1512; color: #edf0ec; text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .hole-btn-n { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; line-height: 1; }
  .hole-btn-par { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; opacity: 0.65; }
  .hole-btn.selected { background: #c9a85c; color: #12241a; }
  .hole-btn.selected .hole-btn-par { opacity: 0.75; }

  .hole-detail {
    display: grid; grid-template-columns: 1fr 0.8fr; gap: 1px;
    background: rgba(237,240,236,0.1); margin-top: 1px;
  }
  .hole-detail-photo { min-height: 380px; }
  .hole-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hole-detail-copy {
    background: #0f1512; padding: 40px;
    display: flex; flex-direction: column; gap: 28px;
  }
  .hole-detail-copy .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.66rem;
    font-weight: 400; color: #c9a85c; margin-bottom: 10px;
  }
  .hole-detail-copy h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; font-weight: 400; color: #edf0ec; margin: 12px 0 0; }
  .hole-detail-copy p { font-size: 0.95rem; line-height: 1.7; color: rgba(237,240,236,0.7); margin: 14px 0 0; }
  .hole-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(237,240,236,0.1); }
  .hole-detail-stats > div { background: #0f1512; padding: 20px 4px 20px 0; }
  .hole-detail-stats span { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; color: #edf0ec; margin-top: 8px; }
  .hole-detail-stats label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237,240,236,0.45); }
  .hole-detail-foot {
    display: flex; justify-content: space-between; padding-top: 22px;
    border-top: 1px solid rgba(237,240,236,0.1);
    font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(237,240,236,0.5);
  }
  @media (max-width: 880px) {
    .hole-grid { grid-template-columns: repeat(6, 1fr); }
    .hole-detail { grid-template-columns: 1fr; }
    .hole-detail-photo { min-height: 220px; }
  }

  /* Tee times: grid de horarios del día */
  .about-teetimes {
    max-width: 1040px; margin: 88px auto 0;
    padding-top: 64px; border-top: 1px solid rgba(237,240,236,0.14);
  }
  .teetime-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: rgba(237,240,236,0.12);
  }
  .teetime-slot { background: #0f1512; padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
  .teetime-time { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; line-height: 1; color: #edf0ec; }
  .teetime-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: rgba(237,240,236,0.55); }
  .teetime-more { justify-content: center; }
  .teetime-more-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c9a85c; }
  .teetime-foot {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(237,240,236,0.12);
    font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(237,240,236,0.5);
  }
  @media (max-width: 880px) {
    .teetime-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ¿Qué estamos creando? */
  .about-creating {
    max-width: 1040px; margin: 88px auto 0;
    padding-top: 64px; border-top: 1px solid rgba(237,240,236,0.14);
  }
  .about-creating h3 {
    font-family: 'Playfair Display', Georgia, serif; font-size: 1.9rem; font-weight: 400;
    color: #edf0ec; margin: 0 0 28px;
  }
  .creating-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: rgba(237,240,236,0.12);
  }
  .creating-item { background: #0f1512; padding: 34px 32px; }
  .creating-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #c9a85c; }
  .creating-item p { margin: 14px 0 0; font-size: 0.94rem; line-height: 1.7; color: rgba(237,240,236,0.7); }
  @media (max-width: 880px) {
    .creating-grid { grid-template-columns: 1fr; }
  }

  /* Nuestra visión */
  .about-vision {
    max-width: 1040px; margin: 88px auto 0;
    padding-top: 44px; padding-bottom: 96px; border-top: 1px solid rgba(237,240,236,0.12);
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  }
  .about-vision h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; font-weight: 400; color: #edf0ec; margin: 0; }
  .about-vision-copy p { margin: 0 0 14px; font-size: 1rem; line-height: 1.75; color: rgba(237,240,236,0.74); }
  .about-vision-tagline { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: #c9a85c; margin-top: 8px !important; }
  @media (max-width: 880px) {
    .about-vision { grid-template-columns: 1fr; text-align: center; }
    .about-vision-copy p { max-width: 480px; margin-left: auto; margin-right: auto; }
  }

  /* App Store / Google Play */
  .about-store-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
  .store-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 17px 28px; border-radius: 4px; cursor: default;
  }
  .store-btn-primary { background: #c9a85c; color: #12241a; }
  .store-btn-ghost { background: transparent; color: #edf0ec; border: 1px solid rgba(237,240,236,0.3); }
  .about-store-label { display: none; }
  .about-cta-secondary {
    margin-top: 22px; display: flex; justify-content: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(237,240,236,0.5);
  }
  .about-cta-secondary a { color: rgba(237,240,236,0.75); text-decoration: underline; }
  .about-cta-secondary a:hover { color: #c9a85c; }

  .about-closing {
    display: block;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    position: relative;
    padding: 96px 48px; text-align: left;
  }
  .about-closing::before {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(10,16,12,0.96) 0%, rgba(10,16,12,0.93) 55%, rgba(10,16,12,0.55) 80%, rgba(10,16,12,0.2) 100%),
      url("../img/contact-app-golfer.png");
    background-size: cover; background-position: 78% 30%;
  }
  .about-closing > * { position: relative; }
  .about-closing-inner { max-width: 540px; }
  .about-closing h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; font-weight: 400; line-height: 1.1; margin: 0 0 20px; color: #edf0ec; }
  .about-closing p { font-size: 1.05rem; line-height: 1.7; color: rgba(237,240,236,0.8); margin: 0 0 30px; }
  .about-cta { display: none; }
  .about-closing-contact {
    margin-top: 38px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: rgba(237,240,236,0.55);
  }

  /* Footer, solo en la home pública (desktop) — mismo palette exacto del
     doc. La franja de césped (.grass-strip) que renderFooter() pone justo
     antes se quita acá, igual que se quitó en el nav sobre la foto. */
  body.home-hero-page:not(.dash-user) #footer .grass-strip { display: none; }
  body.home-hero-page:not(.dash-user) .site-footer {
    background: #0c1210; color: rgba(237,240,236,0.74);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  body.home-hero-page:not(.dash-user) .footer-brand {
    color: #ffffff; font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  }
  body.home-hero-page:not(.dash-user) .footer-tee { color: #c9a85c; }
  body.home-hero-page:not(.dash-user) .footer-tag { color: rgba(237,240,236,0.6); }
  body.home-hero-page:not(.dash-user) .footer-col h4 {
    color: rgba(237,240,236,0.5); font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
  }
  body.home-hero-page:not(.dash-user) .footer-col a,
  body.home-hero-page:not(.dash-user) .footer-social a { color: rgba(237,240,236,0.68); }
  body.home-hero-page:not(.dash-user) .footer-col a:hover,
  body.home-hero-page:not(.dash-user) .footer-social a:hover { opacity: 1; color: #c9a85c; text-decoration: none; }
  body.home-hero-page:not(.dash-user) .footer-bottom {
    border-top-color: rgba(237,240,236,0.12); color: rgba(237,240,236,0.5);
    font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  }
}
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .hero {
    margin: 20px 20px 0;
    padding: 22px;
    border-radius: 20px;
    overflow: hidden;
    min-height: 260px;
    max-height: 285px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
  .hero .container { padding: 0; max-width: none; }
  .hero-flex { display: flex; align-items: center; gap: 14px; }
  .hero-copy { flex: 0 1 60%; min-width: 0; }
  .hero .eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 1.3px; margin-bottom: 0; }
  .hero h1 { font-size: 1.95rem; line-height: 1.08; font-weight: 700; margin: 12px 0 0; }
  .hero p { font-size: 0.9rem; line-height: 1.4; margin: 10px 0 0; max-width: 280px; }
  .hero-ground { display: none; }
}

.search-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-top: -42px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--ink);
  position: relative;
  z-index: 2;
  /* El carrusel de recordatorios (#lobbyNotifCarousel) va justo debajo y
     cambia de alto/ancho cada vez que llega 1+ notificación nueva (reescribe
     su innerHTML). En flujo normal de documento eso NUNCA debería mover ni
     redimensionar .search-card (está antes en el DOM) — lo que sí lo movía
     era el "scroll anchoring" nativo del navegador reajustando el scroll para
     compensar el cambio de alto de la caja de abajo, sumado a un
     window.scrollTo() manual que hacía la misma compensación por su cuenta
     (ver loadLobbyNotifCarousel() en index.html). Con 2+ recordatorios el
     salto era grande y las dos compensaciones peleando entre sí hacían que el
     buscador se viera estirado/roto un instante. Fix real: se sacó el
     scrollTo manual y se le puso overflow-anchor:none a #lobbyNotifCarousel
     (ver styles.css) para que el navegador no reajuste solo. Esto de acá
     (transform/isolation/contain) se deja además como refuerzo — su propia
     capa de composición y su propio contexto de contención, así ningún
     repintado ajeno puede tocar su render. */
  transform: translateZ(0);
  isolation: isolate;
  contain: layout paint style;
  overflow-anchor: none;
}
.search-card input, .search-card select {
  flex: 1;
  min-width: 160px;
}

/* SECTIONS */
section { padding: 52px 0; }
section:nth-of-type(even) { background: var(--cream); }
.section-title { font-size: 1.5rem; margin-bottom: 6px; }
.section-sub { color: var(--muted); margin: 0 0 30px; font-size: 0.95rem; }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-title-row .section-sub { margin-bottom: 0; }
.section-title-link { flex: none; margin-top: 6px; font-weight: 700; font-size: 0.85rem; color: var(--green-700); white-space: nowrap; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  /* Viewport de referencia 393px, margen lateral 16px → 361px de ancho útil
     de contenido (spec exacto del lobby mobile). width:100% explícito (no
     alcanza con el align-items:stretch por default de #marketingHome, que es
     flex-direction:column): sin esto, el .container del buscador (el que
     tiene .search-card con los <select> de HORA/JUGADORES) terminaba
     creciendo a ~422px en vez de 375px -- un cálculo de tamaño intrínseco
     con los <select> anidados hacía que el stretch por default no alcanzara
     a fijar el ancho en 100%, cortando "Buscar tee times" y JUGADORES fuera
     de la pantalla. Confirmado en vivo: forzar width:100% lo resuelve
     completo (probado con getBoundingClientRect antes/después). */
  .container { padding: 0 16px; width: 100%; box-sizing: border-box; }
  section { padding: 24px 0; }
  .section-title { font-size: 1.75rem; font-weight: 700; }
  .section-sub { margin-bottom: 4px; }
  .section-title-row { margin-top: 8px; margin-bottom: 14px; }
  .section-title-link { font-size: 0.88rem; }
  /* Contenedor de canchas destacadas: fila estática de 3 columnas que
     siempre cabe en pantalla (ya no es un carrusel — el swipe no resultaba
     confiable en dispositivo real, así que se pasó a un layout fijo de 3
     cards angostas, sin scroll ni botón de flecha). Sin caja/borde propio —
     las cards quedan sueltas sobre el fondo de la sección. */
  .hscroll-box {
    position: relative;
    width: 100%; max-width: 100%;
  }
  .grid.hscroll-mobile {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow: visible;
    min-width: 0; width: 100%; max-width: 100%;
    margin: 0; padding: 0;
  }
  /* Cards angostas y flexibles (en vez de ancho fijo) para que las 3 quepan
     siempre en el ancho disponible, sin necesitar scroll ni swipe. */
  .hscroll-mobile > .card { flex: 1 1 0; width: auto; min-width: 0; min-height: 148px; border-radius: 12px; }
  .hscroll-mobile .card-media { height: 62px; border-radius: 12px 12px 0 0; }
  .hscroll-mobile .card-body { padding: 7px; gap: 2px; }
  .hscroll-mobile .card-body h3 { font-size: 0.74rem; font-weight: 600; line-height: 1.15; }
  .hscroll-mobile .card-meta { font-size: 0.62rem; }
  .hscroll-mobile .card-price { font-size: 0.72rem; font-weight: 700; }
  .hscroll-mobile .card-media .fav-btn {
    width: 26px; height: 26px; top: 4px; right: 4px;
    display: flex; align-items: center; justify-content: center;
  }
  .hscroll-mobile .fav-btn svg { width: 14px; height: 14px; }
  /* trust-row: oculto en mobile — no aparece en la maqueta estilo Playtomic
     (ver bloque "LOBBY MÓVIL ESTILO PLAYTOMIC" más abajo) */
  .trust-row { display: none; }
}

/* ==================== LOBBY MÓVIL ESTILO PLAYTOMIC ====================
   Saludo personalizado + accesos rápidos (iconos circulares) arriba del
   buscador; el buscador pasa a ser el primer bloque de contenido real y el
   hero queda como banner secundario y compacto debajo de él. Todo esto
   reordena visualmente los hijos directos de #marketingHome vía flexbox
   `order` (sin tocar el DOM), así el truco de overlap hero/search-card en
   escritorio (margin-top negativo, depende de adyacencia en el DOM) sigue
   intacto — escritorio nunca entra a este @media. */
.lobby-greeting, .lobby-quick-actions { display: none; }
.hero-premium-mobile, .hero-premium-ball, .hero-premium-grass, .hero-premium-fade { display: none; }
/* .hero-photo-cards ("Canchas socias"/"Marketplace") es SOLO de escritorio
   -- su display:none vivía adentro de @media (min-width:641px), así que en
   mobile no aplicaba ninguna de las dos reglas y el <div> caía al display
   por default (block), quedando visible y amontonado arriba del banner de
   PlayTee Premium (se veía como si el banner tuviera texto de Marketplace).
   Con este display:none sin scope, mobile siempre lo oculta; el
   "body:not(.dash-user) .hero-photo-cards{display:grid}" de adentro del
   media query de escritorio lo sigue mostrando ahí como siempre. */
.hero-photo-cards { display: none; }
.lobby-next-teetimes { display: none; }
.search-card-title-mobile { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  #marketingHome {
    display: flex; flex-direction: column;
    background: var(--white); border-radius: 60px 60px 0 0;
    margin-top: 0; position: relative; z-index: 1;
    /* OJO: NO poner transform/backface-visibility acá. Se probó como fix del
       glitch verde de la esquina, pero #marketingHome es ancestro directo
       del carrusel de canchas destacadas (que usa
       -webkit-overflow-scrolling:touch) — un transform en un ancestro es una
       causa clásica y documentada de que iOS deje de darle momentum/touch
       scroll nativo a un overflow-x:auto anidado adentro. Rompía el swipe
       por completo, así que se revirtió: prioridad al carrusel funcionando
       sobre el glitch cosmético de la esquina. */
  }
  /* Sin esto, un hijo flex con un carrusel overflow-x:auto adentro (canchas
     destacadas) hereda min-width:auto y en vez de scrollear internamente
     empuja/infla el propio contenedor — body's overflow-x:hidden entonces
     recorta las cards 2 y 3 en vez de dejarlas alcanzables por swipe. Mismo
     patrón que .detail-grid > * etc. arriba. */
  #marketingHome > * { min-width: 0; }
  #marketingHome > *:nth-child(1) { order: 1; }  /* saludo */
  #marketingHome > *:nth-child(2) { order: 2; }  /* accesos rápidos */
  #marketingHome > *:nth-child(3) { order: 4; }  /* .hero → banner secundario */
  #marketingHome > *:nth-child(4) { order: 3; }  /* buscador (container) */
  #marketingHome > *:nth-child(5) { order: 5; }  /* canchas destacadas */
  #marketingHome > *:nth-child(6) { order: 6; }  /* próximos tee times */

  /* Escala cómoda (no miniatura): saludo, accesos rápidos e íconos con
     tamaños legibles de un vistazo, como una app nativa — no una versión
     encogida del sitio de escritorio. Márgenes laterales 36-38px en todo
     el contenido principal de esta sección (spec exacto de referencia). */
  .lobby-greeting { display: block; padding: 30px 37px 0; }
  .lobby-greeting h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; color: #10251d; }
  .lobby-greeting p { margin: 5px 0 0; font-size: 16px; line-height: 1.35; color: var(--muted); }

  /* Cada acceso rápido es su propia card blanca (no un círculo flotando):
     borde y sombra muy sutiles porque el fondo general también es blanco —
     la diferencia debe notarse, no gritar. */
  /* Esta fila de accesos rápidos usa un margen lateral más angosto (24px)
     que el resto de la sección (37px en saludo/buscador) a propósito: es un
     patrón común en apps para que la fila de íconos "respire" más ancha que
     el texto/buscador debajo. Junto con gap y padding interno reducidos,
     esto le da más ancho real a cada bloque blanco sin perder alineación
     visual (arranca en el mismo borde izquierdo del contenido). */
  /* Cuadrados de verdad (ancho ≈ alto vía aspect-ratio), un toque más
     grandes: margen y gap recortados un poco más para "correr" las 4
     columnas más juntas y ganarle ese espacio extra al ancho de cada
     cuadrado (y su ícono/texto van a juego). */
  /* Márgenes/gap al mínimo posible (8px/2px, igual al padding base de
     .container) — es prácticamente el máximo ancho de cuadrado que caben 4
     en una fila en un iPhone de referencia. */
  .lobby-quick-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    padding: 20px 8px 0; margin-bottom: 16px;
  }
  .lobby-quick-item {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; box-sizing: border-box;
    background: var(--white); border: 1px solid #e8eae5; border-radius: 19px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.055);
    text-align: center; font-size: 14px; font-weight: 600; line-height: 1.2; color: #10251d;
  }
  /* Icono fijo a 10px del borde superior en las 4 cards por igual — esto ya
     era simétrico. Lo que rompía la simetría era el bloque de texto: labels
     de distinto largo ("Caddies" vs "Simuladores") ocupaban 1 o 2 líneas y
     quedaban pegadas justo debajo del ícono sin altura reservada, así que el
     conjunto ícono+texto tenía distinta altura total en cada card y se veían
     desalineadas entre sí. Fix: reservar una altura fija igual para el
     bloque de texto (2 líneas) y centrar el texto adentro, sin importar si
     ocupa 1 o 2 líneas — así las 4 cards quedan pixel-a-pixel simétricas. */
  .lobby-quick-icon {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    margin-top: 9px;
    background: #eef8d8; color: var(--green-700);
    display: flex; align-items: center; justify-content: center;
  }
  .lobby-quick-icon svg { width: 22px; height: 22px; }
  .lobby-quick-item > span:last-child {
    display: flex; align-items: center; justify-content: center;
    flex: none; width: 100%; margin-top: 5px; min-height: 30px;
    overflow-wrap: break-word; word-break: break-word; hyphens: auto;
  }

  .search-card-title-mobile {
    display: block; margin: 0 0 18px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--green-950);
  }
  .search-card-top { display: none; }

  /* Hero: banner secundario debajo del buscador. Antes 361×165px se veía
     casi cuadrado — se baja la altura para que quede claramente un
     rectángulo ancho y bajo (formato "banner"), no un bloque cuadrado.
     OJO: era `height` fijo (132px) con overflow:hidden heredado de .hero
     base — a 45% de ancho el texto viejo no entraba en una línea, se
     partía en varias líneas y se recortaba. Fix: min-height (nunca
     recorta). Ahora este banner promociona PlayTee Premium (antes era
     tagline genérico "Mejores campos. Mejores momentos.") — se quita
     .hero-photo y .hero-copy pasa a 100% de ancho porque el contenido
     (badge + eyebrow + título + descripción + botón real) ya no comparte
     espacio con la ilustración lateral. */
  .hero { margin: 20px 16px 28px; min-height: 132px; padding: 20px; }
  .hero h1, .hero .eyebrow, .hero-copy > p { display: none; }
  .hero .container { position: relative; z-index: 2; }
  .hero-copy { flex: 1 1 100%; }
  .hero-premium-mobile { display: block; }
  /* Bola de golf de fondo (foto real, recortada por el overflow:hidden de
     .hero base para que sangre fuera del banner igual que en la referencia).
     El gradiente radial de .hero-premium-fade encima la apaga hacia
     abajo/izquierda para que no compita con el texto. */
  .hero-premium-ball {
    display: block; position: absolute; top: -10px; right: -30px;
    width: 190px; height: 190px; z-index: 1; pointer-events: none;
    object-fit: contain; opacity: 0.4; filter: brightness(0.7) saturate(1.15);
  }
  /* Pasto recortado (fondo blanco quitado) apoyado en la base de la bola,
     detrás de ella, para dar la ilusión de que la bola está sobre
     el césped. Mismo tratamiento de opacidad/filtro que la bola. */
  .hero-premium-grass {
    display: block; position: absolute; bottom: -8px; right: -20px;
    width: 680px; max-width: none; height: auto; z-index: 0; pointer-events: none;
    object-fit: contain; opacity: 0.4; filter: brightness(0.84) saturate(0.85);
  }
  .hero-premium-fade {
    display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(circle at 82% 10%, transparent 0%, rgba(10, 46, 28, 0.25) 22%, rgba(10, 46, 28, 0.65) 55%, var(--green-950) 85%);
  }
  .hero-premium-top { display: flex; align-items: center; gap: 8px; }
  .hero-premium-badge {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: rgba(250, 247, 240, 0.14); color: var(--sand);
    border: 1.5px solid rgba(250, 247, 240, 0.4);
    display: flex; align-items: center; justify-content: center;
  }
  .hero-premium-badge svg { width: 16px; height: 16px; }
  .hero-premium-eyebrow {
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem;
    font-weight: 700; color: var(--gold-light);
  }
  .hero-premium-title {
    margin: 8px 0 0; font-size: 1.32rem; line-height: 1.18; font-weight: 800;
    color: var(--sand);
  }
  .hero-premium-desc {
    margin: 4px 0 0; font-size: 0.84rem; line-height: 1.4; max-width: 280px;
    color: rgba(250, 247, 240, 0.82);
  }
  .hero-premium-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 12px; padding: 10px 20px; min-height: 40px;
    background: var(--sand); color: var(--green-950);
    border-radius: 999px; font-weight: 700; font-size: 0.86rem;
    text-decoration: none;
  }
  .hero-premium-btn:hover, .hero-premium-btn:active { background: var(--gold-light); }

  /* "Próximos tee times": solo visible si el usuario tiene sesión y
     reservas futuras (ver .has-teetimes / loadLobbyNextTeeTimes()). Reutiliza
     .dash-status-pill (mismo pill verde/dorado del dashboard de escritorio). */
  .lobby-next-teetimes.has-teetimes { display: block; }
  /* Es el 2° <section> del DOM → cae en section:nth-of-type(even), que le
     pinta fondo crema (franjas alternas de escritorio). Forzarlo a blanco
     para que combine con el resto del lobby, ahora todo blanco. */
  #lobbyNextTeeTimesSection { background: var(--white); padding-bottom: 48px; }
  .lobby-next-teetimes .section-title { font-size: 1.5rem; }
  #lobbyNextTeeTimesList { display: flex; flex-direction: column; gap: 10px; }
  .lobby-tt-row {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--white); text-decoration: none; color: inherit;
  }
  .lobby-tt-row:active { border-color: var(--green-600); }
  .lobby-tt-date {
    flex: none; width: 50px; height: 50px; border-radius: 14px;
    background: var(--green-100); color: var(--green-950);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .lobby-tt-date span { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
  .lobby-tt-date small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; color: var(--green-700); }
  .lobby-tt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .lobby-tt-info strong { font-size: 0.95rem; font-weight: 700; }
  .lobby-tt-info span { font-size: 0.82rem; color: var(--muted); }
  .lobby-tt-status { flex: none; display: flex; align-items: center; gap: 8px; }
  .lobby-tt-status svg { width: 18px; height: 18px; color: var(--muted); }
  .lobby-tt-empty {
    display: flex; align-items: center; gap: 14px; padding: 16px 14px;
    border: 1px dashed var(--line); border-radius: var(--radius-lg);
    background: var(--green-100); text-decoration: none; color: inherit;
  }
  .lobby-tt-empty-icon {
    flex: none; width: 44px; height: 44px; border-radius: 12px;
    background: var(--white); color: var(--green-700);
    display: flex; align-items: center; justify-content: center;
  }
  .lobby-tt-empty-icon svg { width: 22px; height: 22px; }
  .lobby-tt-empty-text { display: flex; flex-direction: column; gap: 3px; }
  .lobby-tt-empty-text strong { font-size: 0.92rem; font-weight: 700; color: var(--green-950); }
  .lobby-tt-empty-text span { font-size: 0.82rem; color: var(--muted); }

  /* #marketingHome tiene 6 hijos (saludo, accesos rápidos, hero, buscador,
     canchas destacadas, próximos tee times) — las secciones viejas (Clases,
     Caddies, Simuladores, Marketplace, Cómo funciona, Beneficios,
     Testimonios) se borraron directamente del HTML, no solo se ocultaban
     por CSS. Antes había un hack nth-child(n+7)/(n+6) para esconderlas en
     mobile, pero eso dependía de la POSICIÓN del hijo en el DOM: al
     reaparecer en pantallas anchas (rotar el teléfono) o al borrar/mover una
     sección, el corte apuntaba al hijo equivocado y "el menú viejo" volvía a
     aparecer. Sin esas secciones en el DOM, ese bug ya no puede volver a
     pasar. Los 6 hijos actuales tienen cada uno su propio order: explícito
     arriba (#marketingHome > *:nth-child(N) { order: N; }) — si se agrega o
     quita un hijo, hay que revisar esa lista también. */
}

/* GRID / CARDS */
/* Oculto en desktop: el carrusel horizontal (y su barrita de progreso) es
   exclusivo de mobile — en desktop las canchas van en grid normal. */
.hscroll-indicator { display: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 20px;
}
.marketplace-cat-section { margin-bottom: 30px; }
.marketplace-cat-section:last-child { margin-bottom: 0; }
.marketplace-cat-title { font-size: 1.2rem; font-weight: 800; color: var(--green-950); margin: 0 0 14px; }
.proshop-card { cursor: pointer; align-items: center; padding: 22px 14px; gap: 10px; }
.proshop-card-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.proshop-card-icon svg { width: 26px; height: 26px; }
.proshop-card .card-body { padding: 0; gap: 2px; }
.proshop-card .card-body h3 { font-size: 0.95rem; }
/* Marketplace en mobile: antes con minmax(255px,1fr) solo entraba una
   tarjeta por fila (quedaba como una lista vertical de a una) -- ahora son
   siempre 2 columnas fijas, así aparecen de a dos artículos por fila al
   hacer scroll, como cualquier app de compras. Tipografía/padding más
   chicos (mismos valores que .hscroll-mobile) para que quepan cómodos. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .marketplace-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .marketplace-grid .card-media { height: 92px; }
  .marketplace-grid .card-body { padding: 8px; gap: 3px; }
  .marketplace-grid .card-body h3 { font-size: 0.76rem; font-weight: 600; line-height: 1.2; }
  .marketplace-grid .card-meta { font-size: 0.64rem; }
  .marketplace-grid .card-price { font-size: 0.78rem; font-weight: 700; }
  .marketplace-grid .card-badges .badge { padding: 2px 6px; font-size: 0.6rem; }
  .marketplace-grid .card-media .fav-btn {
    width: 26px; height: 26px; top: 6px; right: 6px;
    display: flex; align-items: center; justify-content: center;
  }
  .marketplace-grid .card-media .fav-btn svg { width: 14px; height: 14px; }
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--green-600); transform: translateY(-2px); }
.card-media {
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(250,247,240,0.92);
}
.card-media svg { width: 32px; height: 32px; }
.card-media { position: relative; }
.card-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* GRASS FLOOR */
.grass-strip {
  height: 9px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--green-700) 0px, var(--green-700) 26px,
    var(--green-600) 26px, var(--green-600) 52px
  );
  border-top: 1px solid var(--green-950);
}
.grass-strip.lg {
  height: 20px;
}
/* En la app empacada (Capacitor) esta franja rayada bajo el header se ve
   como un elemento suelto/decorativo de más en la barra compacta de mobile
   -- se saca solo ahí (ver body.native-app en app.js). La web/PWA sigue
   mostrándola igual que siempre. */
body.native-app #nav .grass-strip { display: none; }
/* Home (index.html) en la app empacada: quien la abre ya se la bajó, así
   que todo el bloque de storytelling/marketing ("Conócenos", mascota,
   campo, tee times de ejemplo, visión) y el CTA final de "descárgala" no
   aportan nada -- solo alargan el scroll con contenido pensado para la web
   de escritorio. Se cortan enteros (no solo el footer) para que la página
   termine en blanco justo después de "Próximos tee times", hasta la barra
   de tabs de abajo. La web/PWA (Safari) sigue mostrando todo esto igual que
   siempre -- ver body.native-app en app.js. */
body.native-app #aboutExplainer,
body.native-app #aboutClosing,
body.native-app #footer { display: none; }
/* Como en la app ya no sigue el marketing/footer, "Próximos tee times" queda
   pegado muy cerca de la barra de tabs de abajo -- más aire al final para
   que no se sienta apretado. Solo app (ver body.native-app en app.js); la
   web/PWA sigue con el padding-bottom original (48px) porque ahí después
   sigue el resto del contenido de marketing. */
body.native-app #lobbyNextTeeTimesSection { padding-bottom: 64px; }
.card-body { padding: 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-body h3 { margin: 0; font-size: 1.08rem; font-weight: 600; }
.card-meta { color: var(--muted); font-size: 0.86rem; }
.card-price { font-weight: 700; color: var(--green-950); font-size: 1rem; font-family: var(--font-sans); }
.badge {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--green-600);
  border-radius: 4px;
  color: var(--green-700);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: fit-content;
}
.badge-sold { border-color: var(--danger); color: var(--danger); }
.badge-warn { border-color: var(--gold); color: var(--gold); }
.badge-ok { border-color: var(--green-600); color: var(--green-700); background: #eaf4ea; }

/* FORMS */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  max-width: 420px;
  margin: 48px auto;
}
.form-card h2 { font-size: 1.4rem; }

/* Botón de volver (círculo flotante, foto/fondo oscuro de por medio) para
   login.html y register.html -- en mobile dentro de .signin-mobile /
   .register-hero-mobile, en escritorio dentro de .form-card.auth-split y
   .form-card (register, que es oscuro también en escritorio, ver reglas
   "body.register-page .form-card" más abajo). Lleva a welcome.html, o atrás
   en el historial si venía de ahí mismo (p.ej. de login a crear cuenta). */
.auth-back-btn {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; border: none; cursor: pointer;
  z-index: 5;
}
.auth-back-btn svg { width: 20px; height: 20px; }
.auth-back-btn:hover { background: rgba(0,0,0,.5); }
body.register-page .form-card { position: relative; }
/* register.html en mobile ya tiene su propio botón de volver en
   .register-hero-mobile (la foto de arriba) -- este de acá (en .form-card,
   que en mobile sigue visible debajo de la foto, con los campos) es solo
   para escritorio, donde .register-hero-mobile está oculto. Sin esto
   saldrían los dos apilados en mobile. */
@media (max-width: 640px) {
  .auth-back-btn-desktop-only { display: none; }
}
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.85rem; color: var(--green-950); }
.field input, .field select, .field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--sand);
}
@media (max-width: 640px) {
  /* Safari/iOS hace zoom automático (y a veces se queda pegado, sin volver
     a tamaño normal) al enfocar cualquier input de texto con font-size menor
     a 16px -- pasaba al buscar un jugador para invitar (campo de "Agregar
     jugador" en Dividir pago) y en cualquier otro campo de .field, que
     quedaba en 0.92rem (~14.7px). 16px es el mínimo que evita ese zoom. */
  .field input, .field select, .field textarea, #splitSearchInput {
    font-size: 16px;
  }
}
/* Pantallita de carga entre página y página DENTRO de la app empacada (ver
   setupPageTransitionLoader() en app.js) -- cada pantalla es un HTML
   aparte que se recarga completo (no es una single-page app), así que sin
   esto se notaba un salto feo/abrupto entre el fondo de una página y el
   contenido de la siguiente. No es el splash de apertura (#appSplash,
   ARRIBA de esto en z-index, solo aparece una vez al abrir la app) -- esto
   es más chico y rápido, pensado para repetirse en cada navegación interna.
   Fondo blanco + logo oscuro porque la mayoría de las pantallas del app
   (canchas, dashboard, perfil, etc.) son de fondo claro. */
#pageTransitionLoader {
  position: fixed; inset: 0; z-index: 9998;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--sand);
  transition: opacity 0.22s ease;
}
#pageTransitionLoader.page-transition-out { opacity: 0; }
#pageTransitionLoader img { width: 52px; height: 52px; object-fit: contain; display: block; }
.page-transition-dots { display: flex; gap: 6px; }
.page-transition-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green-700);
  animation: pageTransitionDot 1s ease-in-out infinite;
}
.page-transition-dots span:nth-child(2) { animation-delay: .15s; }
.page-transition-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pageTransitionDot {
  0%, 80%, 100% { opacity: .25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

/* Navegación fluida tipo IG (ver setupSmoothNav() en app.js): en vez de
   recargar el documento entero al tocar un link, se trae el HTML de la
   siguiente pantalla por atrás y se reemplaza el <body> en el mismo
   documento -- la View Transitions API del navegador anima ese cambio con
   un crossfade suave en vez del corte seco de una navegación normal. Si el
   teléfono no soporta la API (iOS viejo), el JS hace el swap sin animar en
   vez de romper algo -- esto de acá solo afina la animación cuando SÍ está
   disponible. Duración corta (220ms) para que se sienta rápido, no lento. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: ease-out;
  }
}
/* La barra de tabs de abajo se captura aparte en la transición: queda fija
   en su lugar (solo cambia el tab resaltado) mientras el contenido de
   arriba hace el crossfade -- igual que Instagram. */
.site-bottom-nav { view-transition-name: pt-tabbar; }

/* Splash de apertura de la app nativa (index.html, ver appLaunchSplash()) --
   solo el logo (glifo blanco recortado, sin aro ni fondo blanco -- ver
   img/logo-glyph.png) "armándose" de abajo hacia arriba sobre el mismo
   verde de fondo (#18341e, el mismo verde del ícono -- por eso no se nota
   ningún borde/recorte), "respira" suavemente mientras carga una barra de
   progreso abajo, y todo se desvanece hacia la app:
     Reveal (0 - 1.6s): el logo se arma de abajo hacia arriba
     Load   (1.6 - 4.4s): logo "respira", barra aparece y llena a 100%
     Exit   (4.4 - 5.2s): logo y barra se desvanecen
   appLaunchSplash() en index.html solo espera esos 5.2s y navega. */
#appSplash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  /* Mismo fondo oscuro que welcome.html/login.html/register.html en mobile
     (#0c1210) -- antes era un verde más claro (#18341e) y se notaba el
     corte de color justo cuando terminaba la animación y entraba la
     pantalla de iniciar sesión / crear cuenta. */
  background: #0c1210;
  transition: opacity 0.3s ease;
}
#appSplash.app-splash-out { opacity: 0; }

.app-splash-glyph-wrap {
  width: 176px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* "Respira" mientras carga (Load: 1.6s -> 4.4s) -- termina justo cuando
     empieza la salida, así no compite con appSplashExit por `transform`. */
  animation: appSplashBreathe 2.6s ease-in-out 1.6s 1,
             appSplashExit 0.7s cubic-bezier(.65,0,.35,1) 4.4s forwards;
}
.app-splash-glyph {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Se "arma" de abajo hacia arriba -- clip-path en vez de mask-image para
     que corra igual de fluido en el WebView nativo de iOS/Android. */
  clip-path: inset(100% 0 0 0);
  animation: appSplashGlyphBuild 1.1s cubic-bezier(.22,.61,.36,1) 0.1s forwards;
}
@keyframes appSplashGlyphBuild {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes appSplashBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@keyframes appSplashExit {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.92); opacity: 0; }
}

.app-splash-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 200px;
  opacity: 0;
  transform: translateY(16px);
  animation: appSplashLoaderIn 0.7s ease 1.3s forwards,
             appSplashFadeOut 0.4s ease 4.4s forwards;
}
.app-splash-bar-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(237,240,236,.18);
  overflow: hidden;
}
.app-splash-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: #c9a85c;
  animation: appSplashBarFill 2.45s ease 1.8s forwards;
}
.app-splash-loader-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237,240,236,.55);
}
@keyframes appSplashLoaderIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes appSplashFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes appSplashBarFill {
  0% { width: 0%; }
  32% { width: 42%; }
  49% { width: 50%; }
  83% { width: 88%; }
  100% { width: 100%; }
}

/* Ojito para mostrar/ocultar contraseña -- inyectado por app.js
   (addPasswordToggles) en TODO input[type=password] de la app. */
.pw-toggle-box { position: relative; }
.pw-toggle-box input { padding-right: 42px !important; }
.pw-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  line-height: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-toggle-btn:hover { color: var(--green-700); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  background: white;
}
.field textarea { resize: vertical; min-height: 90px; }
/* Vista previa de tarjeta -- usada en "Agregar tarjeta" (Configuración /
   Tarjetas guardadas, ver wireAddCardForm() en dashboard.html). Se actualiza
   en vivo mientras el usuario escribe, como referencia visual; PlayTee nunca
   envía ni guarda el número completo ni el CVV (ver h_save_card en server.py
   y tilopay_tokenize_card_mock en payments.py -- solo se manda marca + los
   últimos 4 dígitos). */
.pt-card-visual {
  background: linear-gradient(135deg, var(--green-950), var(--green-700));
  color: var(--white);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 360px;
  box-shadow: 0 10px 24px rgba(10, 46, 28, 0.28);
  margin-bottom: 22px;
}
.pt-card-visual .pt-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.pt-card-visual .pt-card-chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.pt-card-visual .pt-card-logo { font-weight: 800; letter-spacing: 0.5px; font-size: 0.95rem; }
.pt-card-visual .pt-card-number { font-size: 1.25rem; letter-spacing: 2px; font-variant-numeric: tabular-nums; margin-bottom: 20px; }
.pt-card-visual .pt-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.92; }
.pt-card-visual .pt-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-card-visual .pt-card-exp { flex: none; }
.terms-check {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px;
}
.terms-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--green-700);
}
.terms-check label {
  font-size: 0.85rem; font-weight: 400; color: var(--muted); margin: 0;
}
.terms-check label a { color: var(--green-700); font-weight: 700; }

/* iOS Safari le agrega ~8-10px de ancho extra a los inputs date/time
   (el "chrome" nativo del picker no respeta width:100%/box-sizing), lo
   que hace que se salgan de su tarjeta en mobile. Quitarles el estilo
   nativo del sistema arregla el cálculo de ancho sin romper el picker. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  box-sizing: border-box;
}

/* FORM-ROW — filas de campos en línea (admin: agregar horario, caddie,
   coach, simulador, cierre). En mobile, los inputs fijos en px y los
   controles nativos date/time se vuelven impredecibles y se amontonan,
   así que apilamos todo a ancho completo. */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
@media (max-width: 700px) {
  .form-row { flex-direction: column; align-items: stretch; gap: 0; }
  .form-row .field { width: 100% !important; min-width: 0 !important; margin-bottom: 14px !important; }
  .form-row .field input, .form-row .field select, .form-row .field textarea { width: 100% !important; }
  .form-row > .btn { width: 100%; }
}

.error-box {
  background: #f7e9e5;
  border: 1px solid #e3b7ab;
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 0.87rem;
  display: none;
}
.error-box.show { display: block; }

/* AUTH GATE — pantalla de login/registro estilo "log in or sign up" de
   apps móviles: logo centrado, botones sociales en píldora, luego el
   formulario de correo de siempre. Ver login.html / register.html. */
.auth-badge {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.auth-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-title { text-align: center; font-size: 1.45rem; margin: 0 0 6px; }
.auth-subtitle { text-align: center; color: var(--muted); font-size: 0.92rem; margin: 0 0 24px; }
.btn-social {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green-100); border: 1px solid var(--line); color: var(--green-950);
  border-radius: 999px; padding: 12px 16px; font-size: 0.92rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-social:hover { border-color: var(--green-600); }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--muted); font-size: 0.82rem;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-pill { border-radius: 999px !important; }

/* REGISTER DARK (todas las pantallas) — register.html ya tenía esta misma
   paleta oscura (#0c1210/#edf0ec/#c9a85c) pero SOLO en el @media mobile de
   arriba (~línea 328); en escritorio seguía con el .form-card crema de
   siempre. Estas reglas repiten los mismos valores sin el @media para que
   apliquen también en escritorio/iPad y quede consistente con el landing
   (index.html) y con el login ya recoloreado abajo. No toca la foto+overlay
   de .register-hero-mobile (esa sigue siendo solo mobile). */
body.register-page .form-card {
  background: #0c1210; border-color: rgba(237,240,236,.14); color: #edf0ec;
}
body.register-page .auth-title { color: #edf0ec; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
body.register-page .auth-subtitle { color: rgba(237,240,236,.6); }
body.register-page .field label { color: #edf0ec; }
body.register-page .field input,
body.register-page .field select,
body.register-page .field textarea {
  background: rgba(237,240,236,.05); border-color: rgba(237,240,236,.18); color: #edf0ec;
}
body.register-page .field input::placeholder,
body.register-page .field textarea::placeholder { color: rgba(237,240,236,.35); }
body.register-page .field select option { color: #12241a; }
body.register-page .btn-social {
  background: rgba(237,240,236,.05); border-color: rgba(237,240,236,.2); color: #edf0ec;
}
body.register-page .btn-social:hover { border-color: #c9a85c; }
body.register-page .auth-divider { color: rgba(237,240,236,.4); }
body.register-page .auth-divider::before, body.register-page .auth-divider::after { background: rgba(237,240,236,.14); }
body.register-page .btn-primary { background: #c9a85c; color: #12241a; border-color: #c9a85c; }
body.register-page .btn-primary:hover { background: #dcbb75; border-color: #dcbb75; }
body.register-page .terms-check label { color: rgba(237,240,236,.7); }
body.register-page .terms-check label a { color: #c9a85c; }
body.register-page .card-meta { color: rgba(237,240,236,.5); }
body.register-page > p, body.register-page > p a,
body.register-page .form-card > p, body.register-page .form-card > p a { color: rgba(237,240,236,.6); }
body.register-page .form-card > p a { color: #c9a85c; font-weight: 700; }

/* AUTH SPLIT — rediseño editorial de login.html en escritorio/iPad
   (>=641px): placa con patrón a la izquierda, formulario a la derecha.
   Todo bajo body.login-page para no afectar register.html/
   forgot-password.html, que comparten .form-card pero no .auth-split.
   No toca .signin-mobile (bloque @media más arriba, ~línea 243) --
   ese sigue siendo el único login visible en mobile.

   BUG REAL que hubo acá: ".form-card.auth-split" (2 clases) tiene MÁS
   especificidad que la regla mobile ".form-card" (1 clase) que la oculta
   dentro de @media (max-width:640px) -- la especificidad CSS gana sobre
   el @media, así que "display:flex" de esta regla le ganaba al
   "display:none" de mobile pese a estar en el @media equivocado, y el
   diseño de escritorio se veía encima de .signin-mobile en el celular.
   Fix: todo el bloque envuelto en @media (min-width:641px), el espejo
   exacto del @media (max-width:640px) que oculta .form-card -- así es
   imposible que se solape con mobile sin importar la especificidad. */
@media (min-width: 641px) {
  body.login-page .form-card.auth-split {
    display: flex;
    max-width: 960px;
    padding: 0;
    overflow: hidden;
    margin: 48px auto;
    min-height: 560px;
    align-items: stretch;
    background: #0c1210;
    border-color: rgba(237,240,236,.14);
    position: relative;
  }
  body.login-page .auth-split-image {
    flex: 0 0 42%;
    order: 2;
    position: relative;
    background:
      url('../img/mascot-login-desktop.jpg') center 18%/cover no-repeat,
      repeating-linear-gradient(135deg,
        var(--green-950) 0px, var(--green-950) 24px,
        var(--green-900) 24px, var(--green-900) 48px);
  }
  body.login-page .auth-split-image::after {
    content: "";
    position: absolute; inset: 0;
    /* Foto ahora a la derecha -- degradado horizontal que la funde hacia el
       panel oscuro del form (borde izquierdo de la foto) en vez de un corte
       duro entre las dos mitades, + el vertical de siempre para que se lea
       bien abajo. Mismo criterio que .hero-bg-photo en el landing. */
    background:
      linear-gradient(180deg, rgba(12,18,16,0) 0%, rgba(12,18,16,.7) 100%),
      linear-gradient(90deg, #0c1210 0%, rgba(12,18,16,.35) 18%, rgba(12,18,16,0) 40%);
  }
  body.login-page .auth-split-form {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 48px;
    box-sizing: border-box;
  }
  body.login-page .auth-split-inner { width: 100%; max-width: 360px; margin: 0 auto; }
  body.login-page .auth-split-logo { width: 40px; height: 40px; margin: 0 0 18px; display: block; }
  body.login-page .auth-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.2em;
    color: #c9a85c; font-weight: 700; margin: 0 0 10px;
  }
  body.login-page .auth-split-brand {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 2.1rem;
    color: #edf0ec; margin: 0;
  }
  body.login-page .auth-split-rule { border: none; border-top: 1px solid rgba(237,240,236,.14); margin: 18px 0 26px; }
  body.login-page .auth-split-heading {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
    font-size: 1.3rem; margin: 0 0 18px; color: #edf0ec;
  }
  body.login-page .auth-split-form .field label { color: #edf0ec; }
  body.login-page .auth-split-form .field input {
    background: rgba(237,240,236,.05); border-color: rgba(237,240,236,.18); color: #edf0ec;
  }
  body.login-page .auth-split-form .field input::placeholder { color: rgba(237,240,236,.35); }
  body.login-page .field-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
  body.login-page .field-label-row label { margin-bottom: 0; }
  body.login-page .field-label-row a { font-size: 0.78rem; color: rgba(237,240,236,.55); }
  body.login-page .field-label-row a:hover { color: #c9a85c; }
  body.login-page .auth-remember-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; }
  body.login-page .auth-remember-row input { width: 15px; height: 15px; accent-color: #c9a85c; cursor: pointer; margin: 0; }
  body.login-page .auth-remember-row label { font-size: 0.82rem; color: rgba(237,240,236,.6); font-weight: 400; margin: 0; cursor: pointer; }
  body.login-page .btn-auth-outline {
    width: 100%; box-sizing: border-box; padding: 13px 16px;
    border-radius: 999px; border: 1.5px solid #c9a85c;
    background: transparent; color: #c9a85c;
    font-weight: 700; font-size: 0.95rem; font-family: inherit; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  body.login-page .btn-auth-outline:hover { background: #c9a85c; color: #12241a; }
  body.login-page .auth-split-form .auth-divider { margin: 22px 0; color: rgba(237,240,236,.4); }
  body.login-page .auth-split-form .auth-divider::before,
  body.login-page .auth-split-form .auth-divider::after { background: rgba(237,240,236,.14); }
  body.login-page .auth-split-form .btn-social {
    background: rgba(237,240,236,.05); border-color: rgba(237,240,236,.2); color: #edf0ec;
  }
  body.login-page .auth-split-form .btn-social:hover { border-color: #c9a85c; }
  body.login-page .auth-split-links { margin-top: 22px; text-align: center; }
  body.login-page .auth-split-links p { margin: 0 0 8px; font-size: 0.88rem; color: rgba(237,240,236,.6); }
  body.login-page .auth-split-links a { color: #c9a85c; font-weight: 700; }
  body.login-page .auth-split-demo-note { font-size: 0.76rem !important; color: rgba(237,240,236,.45); opacity: 1; }
}
@media (max-width: 900px) and (min-width: 641px) {
  body.login-page .auth-split-image { flex-basis: 34%; }
  body.login-page .auth-split-form { padding: 36px; }
}

/* DETAIL LAYOUT */
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }

/* course.html usa .course-detail-grid además de .detail-grid para poder
   reordenar SOLO esa página (course.html es la plantilla dinámica de todas
   las canchas — no tocamos instructor.html/caddy.html/foodcart.html/etc.
   que también usan .detail-grid con otra estructura). Se separa el nombre/
   ubicación/badge de cancha (.detail-header) del resto del contenido
   (.detail-content: tabs + descripción) como hijos directos del grid, para
   poder mostrar en mobile: 1) nombre/ubicación, 2) horarios y pago
   (.booking-card), 3) descripción — sin perder el layout de escritorio
   (header arriba de la columna izquierda, booking-card a la derecha
   ocupando el alto completo). */
.course-detail-grid {
  grid-template-areas: "content booking";
}
.course-detail-grid > .detail-content { grid-area: content; min-width: 0; }
.course-detail-grid > .booking-card { grid-area: booking; }
@media (max-width: 800px) {
  .course-detail-grid { grid-template-areas: "booking" "content"; }
}

/* Nombre/badges/rating/ubicación superpuestos sobre la foto de portada
   (antes vivían en .detail-header, debajo de la foto) + banda de stats
   Par/Yardas/Slope justo debajo — ver loadCourse() en course.html. */
.detail-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,46,28,0) 35%, rgba(6,26,16,0.85) 100%);
  pointer-events: none;
}
.detail-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 20px 16px;
  color: var(--white);
  max-height: 100%; box-sizing: border-box; overflow: hidden;
}
.detail-hero-overlay .badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.badge-hero {
  border-color: rgba(250,247,240,0.6); color: var(--white); background: rgba(10,46,28,0.35);
  backdrop-filter: blur(2px);
}
.detail-hero-title { margin: 0 0 4px; font-size: 1.35rem; line-height: 1.2; color: var(--white); }
.detail-hero-rating :is(svg, span) { color: var(--gold-light); }
.detail-hero-loc {
  color: rgba(250,247,240,0.9); margin: 6px 0 0; font-size: 0.85rem;
  display: flex; align-items: center; gap: 6px;
}
.detail-hero-loc svg { color: var(--gold-light); width: 14px; height: 14px; flex: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .detail-hero-title { font-size: 1.1rem; }
  .detail-hero-overlay { padding: 10px 14px 12px; }
}

.course-stat-row {
  display: flex; justify-content: space-around; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 10px; margin-bottom: 20px;
}
.course-stat { display: flex; flex-direction: column; gap: 3px; }
.course-stat-label { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.course-stat strong { font-size: 1.15rem; color: var(--green-950); }
.panel { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap: 8px; margin: 16px 0; }
.slot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 6px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.87rem;
  background: var(--sand);
}
.slot.full { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.slot.available { border-color: var(--green-600); }
.slot.few { border-color: var(--gold); background: #fdf6e6; color: #7a5c1e; }
.slot.selected { background: var(--green-950); color: white; border-color: var(--green-950); }
.slot:not(.full):hover { border-color: var(--green-600); }
.slot-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); margin: 4px 0 10px; }
.slot-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Mini-pronóstico de la fecha elegida -- una línea chica y muda (mismo
   tono que slot-legend), no una tarjeta de clima aparte: la idea es que se
   note pero no compita con la grilla de horarios. */
.date-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.date-tab {
  flex: none;
  padding: 7px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--sand);
}
.date-tab.selected { background: var(--green-950); color: white; border-color: var(--green-950); }

/* DETAIL PAGE (cancha / simulador) — estilo tipo OpenTable con la paleta
   verde de PlayTee: foto de portada, header con rating, tarjeta de reserva
   con selectores en pill, tabs y lista de información adicional. */
.detail-hero {
  position: relative;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.detail-hero .card-photo,
.detail-hero > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero .fav-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(250,247,240,0.92);
  border-radius: 50%;
  width: 38px;
  height: 38px;
}
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  /* En mobile la foto queda pegada a la banda Par/Yardas/Slope, como si
     fueran una sola tarjeta: sin separación y con las esquinas que se tocan
     redondeadas solo por fuera. */
  /* Full-bleed: la foto y la banda Par/Yardas/Slope se estiran hasta el
     borde de la pantalla (compensando el padding de .container, que en
     course.html ES el propio #content), sin tocar el resto del layout
     (tabs/descripción/tee times) que se queda dentro del padding normal. */
  .detail-hero, .course-stat-row { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  /* #content es un <section>, que trae padding-top:24px de la regla general
     "section { padding: 24px 0; }" de arriba — eso es la franja blanca sobre
     la foto. La cancelamos solo cuando la foto es lo primero del contenido. */
  #content > .detail-hero:first-child { margin-top: -24px; }
  /* Antes tenía height fija de 210px: con la foto a todo el ancho de
     pantalla (full-bleed) eso la dejaba muy achatada (el corazón de
     favoritos quedaba pegado raro contra el borde). Con aspect-ratio la
     altura crece proporcional al ancho real del teléfono. */
  .detail-hero { height: auto; aspect-ratio: 3 / 2; max-height: 280px; margin-bottom: 0; }
  .detail-hero .fav-btn { top: 44px; }
  .course-stat-row { border-top: none; border-left: none; border-right: none; margin-bottom: 16px; }
  .booking-card .slot { padding: 9px 6px; font-size: 0.84rem; }
}

.detail-header { margin-bottom: 20px; }
.detail-header .badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.detail-header h1 { margin: 0 0 6px; font-size: 1.9rem; }
.detail-header .detail-loc { color: var(--muted); font-size: 0.92rem; margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.detail-header .detail-loc svg { width: 15px; height: 15px; flex: none; color: var(--green-700); }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) { .detail-header h1 { font-size: 1.5rem; } }

/* Tarjeta de reserva: mismos ids/JS de siempre, solo con look de pills
   (redondeado) para que combine con las secciones de arriba. Escapado a
   .booking-card para no afectar los widgets de reserva de instructor.html
   ni caddy.html, que comparten las mismas clases .date-tab/.slot. */
.booking-card { position: sticky; top: 18px; }
.booking-card .players-pill { margin-bottom: 14px; }
.booking-card .players-pill label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 5px;
}
.booking-card .players-pill select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--sand);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--ink);
}
.booking-card .date-tab, .booking-card .slot { border-radius: 999px; }
@media (max-width: 800px) { .booking-card { position: static; } }

/* Date-strip de 3 líneas (día / número / mes) + slots agrupados por franja
   horaria + stepper de jugadores + resumen de reserva — solo en course.html
   (.booking-card), para no tocar instructor.html/caddy.html/simulator.html
   que reusan .date-tab/.slot/.players-pill con su propio markup. */
.booking-card .date-tab {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 56px; padding: 8px 6px 9px;
}
.booking-card .date-tab-wd { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; opacity: 0.75; }
.booking-card .date-tab-day { font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.booking-card .date-tab-mo { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; opacity: 0.75; }

.booking-card .players-stepper-wrap .players-stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 999px; background: var(--sand);
  padding: 6px 8px;
}
.booking-card .stepper-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); color: var(--green-950); font-size: 1.05rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.booking-card .stepper-btn:hover { border-color: var(--green-600); }
.booking-card .stepper-value { font-weight: 800; font-size: 1rem; color: var(--ink); min-width: 24px; text-align: center; }
.booking-card .stepper-hint { margin: 6px 2px 0; font-size: 0.76rem; }

.booking-card .slot-grid { display: flex; flex-direction: column; gap: 14px; }
.booking-card .slot { padding: 13px 8px; font-size: 0.98rem; font-weight: 800; border-width: 1.5px; }
.slot-group-title {
  font-size: 0.68rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
/* Clima de la franja (mañana/mediodía/tarde) -- chip chiquito al lado del
   título, mismo tono apagado que .slot-weather para que no compita con los
   horarios en sí; normal-case + normal-weight porque va al lado de texto
   en mayúsculas/bold y no debe gritar más fuerte que eso. */
.slot-group-weather {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: normal;
  color: var(--muted);
}
.slot-group-weather svg { width: 12px; height: 12px; color: var(--gold); flex-shrink: 0; }
.slot-group-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap: 8px; }
/* Solo en desktop (misma resolución en la que .booking-card pasa a ser
   sidebar fijo, ver @media max-width:800px arriba): los horarios de cada
   franja van en una fila horizontal con scroll, igual que .date-tabs, en
   vez de envolver en varias filas — así el sidebar no queda mucho más alto
   que la columna de contenido y no se ve vacío debajo de Reseñas. En mobile
   se deja el wrap normal (mejor para pantallas angostas). */
@media (min-width: 801px) {
  .booking-card .slot-group-items {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px;
  }
  .booking-card .slot-group-items .slot { flex: 0 0 auto; min-width: 76px; }
}

.booking-summary-title { margin: 0 0 10px; font-size: 0.95rem; }
.booking-summary {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 16px;
}
.booking-summary-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.85rem; color: var(--muted);
}
.booking-summary-row strong { color: var(--ink); font-weight: 700; text-align: right; }
.booking-summary-row.booking-summary-fee {
  border-top: 1px dashed var(--line); margin-top: 2px; padding-top: 9px; color: var(--ink); font-size: 0.9rem;
}

.booking-card .btn-primary#confirmBtn { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.booking-card .btn-primary#confirmBtn:hover { background: #a3762f; border-color: #a3762f; }

/* Menú de carrito de comida (foodcart.html) */
.menu-list { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.menu-item.unavailable { opacity: 0.5; }
.menu-item-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--sand);
}
.menu-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-item-info { flex: 1; min-width: 0; }
.menu-item-name { font-weight: 700; font-family: var(--font-display); font-size: 1.02rem; }
.menu-item-price { font-weight: 700; color: var(--green-700); margin-top: 4px; }

.order-status-steps { display: flex; align-items: flex-start; margin: 18px 0 22px; }
.order-status-step { flex: 1; text-align: center; position: relative; }
.order-status-step:not(:first-child)::before {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0;
}
.order-status-step.done:not(:first-child)::before { background: var(--green-600); }
.order-status-step .dot {
  width: 24px; height: 24px; border-radius: 999px; background: var(--sand); border: 2px solid var(--line);
  margin: 0 auto 6px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
}
.order-status-step.done .dot { background: var(--green-600); border-color: var(--green-600); }
.order-status-step .label { font-size: 0.78rem; color: var(--muted); }
.order-status-step.done .label { color: var(--ink); font-weight: 600; }
.order-status-cancelled { color: var(--red-600, #b3261e); font-weight: 700; margin: 18px 0 22px; }
.qty-stepper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--sand);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.qty-btn:hover { border-color: var(--green-600); color: var(--green-700); }
.qty-value { min-width: 18px; text-align: center; font-weight: 700; }

/* Tabs de detalle (Resumen / Reseñas / Clases / Marketplace) — reutiliza
   .tabs/.tab-btn (ya con scroll horizontal en mobile). */
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; padding-top: 6px; }
@media (max-width: 640px) {
  /* En mobile el contenido de cada tab (Resumen, Reseñas, Opening matches,
     Marketplace) quedaba pegado justo abajo de los botones de tabs -- se
     "paraba" muy arriba, sin aire entre el tab activo y lo que sigue. */
  .detail-tab-panel.active { padding-top: 14px; }
}

/* Barra "Escribir reseña" arriba de la lista de reseñas de la cancha.
   El espacio de arriba ya lo da el padding-top de .detail-tab-panel.active
   (ver arriba) -- acá solo se cuida el aire hacia la lista/empty-state de
   abajo. */
.reviews-write-bar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
@media (max-width: 640px) {
  .reviews-write-bar { margin-bottom: 20px; }
}

/* Lista "Información adicional" — icono + texto, reutiliza .provider-meta-row
   pero un poco más grande al ser una sección propia y no una tarjeta chica. */
.info-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.info-list .provider-meta-row { font-size: 0.92rem; color: var(--ink); }
.info-list .provider-meta-row svg { width: 18px; height: 18px; }

/* Mapa de ubicación en la ficha de cancha (course.html) -- embed de Google
   Maps sin API key (?q=...&output=embed), no requiere billing. */
.course-map { margin-top: 18px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.course-map iframe { display: block; width: 100%; height: 220px; border: 0; }
.course-map-link {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; background: var(--sand); color: var(--green-700);
  font-weight: 700; font-size: 0.88rem; text-decoration: none;
}
.course-map-link:hover { background: var(--green-100); }
.course-map-link svg { width: 16px; height: 16px; }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.05em; }

.tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn {
  padding: 10px 4px;
  margin-right: 20px;
  border: none;
  background: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: none;
}
.tab-btn.active { color: var(--green-950); border-bottom-color: var(--gold); }

/* Subtabs anidados dentro de un tab (ej. Finanzas > Pendientes/Historial) --
   mismo look que .tab-btn pero con su propia clase para que el querySelectorAll
   del switcher de tabs principal no los recoja también. */
.subtab-btn {
  padding: 10px 4px;
  margin-right: 20px;
  border: none;
  background: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: none;
}
.subtab-btn.active { color: var(--green-950); border-bottom-color: var(--gold); }

.empty-state { text-align: center; color: var(--muted); padding: 46px 20px; font-size: 0.92rem; }

/* 404 -- misma paleta oscura que landing/login/registro (#0c1210/#edf0ec/
   #c9a85c, Playfair Display + JetBrains Mono). Página propia, sin
   .container/.empty-state genéricos de antes. */
body.notfound-page { background: #0c1210; min-height: 100vh; }
body.notfound-page #nav { background: #0c1210; border-bottom-color: rgba(237,240,236,.14); }
body.notfound-page #nav .brand, body.notfound-page #nav .brand-tee { color: #edf0ec; }
body.notfound-page #nav .brand-mark { filter: brightness(0) invert(1); }
body.notfound-page #nav .nav-link { color: rgba(237,240,236,.7); }
body.notfound-page #nav .nav-link.active, body.notfound-page #nav .nav-link:hover { color: #c9a85c; border-bottom-color: #c9a85c; }
.notfound-wrap {
  max-width: 480px; margin: 0 auto; padding: 90px 24px 100px;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.notfound-mascot { width: 150px; height: auto; margin-bottom: 22px; filter: drop-shadow(0 14px 24px rgba(0,0,0,.35)); }
.notfound-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: #c9a85c; font-weight: 700; margin: 0 0 12px;
}
.notfound-h1 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 2.4rem;
  color: #edf0ec; margin: 0 0 14px; line-height: 1.1;
}
.notfound-p { color: rgba(237,240,236,.65); font-size: 1rem; line-height: 1.6; margin: 0 0 30px; }
.notfound-btn {
  display: inline-block; padding: 13px 30px; border-radius: 999px;
  background: #c9a85c; color: #12241a; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: background 0.15s ease;
}
.notfound-btn:hover { background: #dcbb75; }
@media (max-width: 640px) {
  .notfound-wrap { padding: 60px 24px 70px; }
  .notfound-mascot { width: 120px; }
  .notfound-h1 { font-size: 1.9rem; }
}

/* FAQ -- misma paleta oscura que landing/login/registro/404
   (#0c1210/#edf0ec/#c9a85c, Playfair Display + JetBrains Mono).
   Acordeón nativo <details>/<summary>, sin JS. */
body.faq-page { background: #0c1210; min-height: 100vh; }
body.faq-page #nav { background: #0c1210; border-bottom-color: rgba(237,240,236,.14); }
body.faq-page #nav .brand, body.faq-page #nav .brand-tee { color: #edf0ec; }
body.faq-page #nav .brand-mark { filter: brightness(0) invert(1); }
body.faq-page #nav .nav-link { color: rgba(237,240,236,.7); }
body.faq-page #nav .nav-link.active, body.faq-page #nav .nav-link:hover { color: #c9a85c; border-bottom-color: #c9a85c; }
.faq-wrap { max-width: 640px; margin: 0 auto; padding: 70px 24px 100px; }
.faq-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: #c9a85c; font-weight: 700; margin: 0 0 12px;
}
.faq-h1 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 2.3rem;
  color: #edf0ec; margin: 0 0 14px; line-height: 1.1;
}
.faq-sub { color: rgba(237,240,236,.65); font-size: 1rem; line-height: 1.6; margin: 0 0 36px; }
.faq-sub a { color: #c9a85c; font-weight: 700; text-decoration: none; }
.faq-sub a:hover { text-decoration: underline; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: rgba(237,240,236,.04); border: 1px solid rgba(237,240,236,.14);
  border-radius: var(--radius-lg); padding: 4px 20px;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-weight: 700; color: #edf0ec; font-size: 0.98rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-size: 1.3rem; font-weight: 400; color: #c9a85c;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: rgba(237,240,236,.65); font-size: 0.92rem; line-height: 1.6; margin: 0 0 18px; }
.faq-item p a { color: #c9a85c; font-weight: 700; text-decoration: none; }
.faq-item p a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .faq-wrap { padding: 40px 20px 70px; }
  .faq-h1 { font-size: 1.8rem; }
}

.footer { padding: 32px 0; text-align: center; color: var(--muted); font-size: 0.82rem; border-top: 1px solid var(--line); }

.toast-box { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
body.has-site-bottom-nav .toast-box { bottom: calc(94px + env(safe-area-inset-bottom)); }
.toast {
  background: var(--green-950);
  color: white;
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: 0.87rem;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { background: var(--danger); }
.toast-success { background: var(--green-700); }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  padding: 6px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  background: white;
  color: var(--muted);
}
.chip.selected { background: var(--green-950); color: white; border-color: var(--green-950); }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.stat-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; flex: 1; min-width: 140px; max-width: 100%; }
.stat-box .num { font-size: 1.4rem; font-weight: 700; color: var(--green-950); font-family: var(--font-display); overflow-wrap: break-word; }
.stat-box .lbl { font-size: 0.76rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 480px) {
  .stat-row { gap: 10px; }
  .stat-box { min-width: calc(50% - 5px); padding: 12px 14px; }
  .stat-box .num { font-size: 1.1rem; }
}

.notice {
  background: #fdf6e6;
  border: 1px solid var(--gold-light);
  color: #7a5c1e;
  padding: 11px 15px;
  border-radius: var(--radius);
  font-size: 0.86rem;
  margin-bottom: 20px;
}

/* SEARCH AUTOCOMPLETE */
.search-field { position: relative; flex: 1; min-width: 160px; }
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(20, 30, 20, 0.14);
  max-height: 280px;
  overflow-y: auto;
  z-index: 30;
  display: none;
  text-align: left;
}
.search-suggestions.show { display: block; }
.search-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion:hover { background: var(--cream); }
.search-suggestion .sugg-icon { width: 18px; height: 18px; color: var(--green-700); flex: none; }
.search-suggestion .sugg-name { font-weight: 700; color: var(--green-950); }
.search-suggestion .sugg-meta { color: var(--muted); font-size: 0.78rem; }
.search-suggestion .sugg-tag {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  flex: none;
}
.search-empty { padding: 14px; color: var(--muted); font-size: 0.85rem; text-align: center; }

/* HERO SEARCH BAR */
.search-card { align-items: flex-end; }
.search-field label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 5px;
}
.search-field input, .search-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--sand);
}
.search-field input:focus, .search-field select:focus { outline: none; border-color: var(--green-600); background: white; }
.search-card .btn { flex: none; height: 42px; }

/* Envoltorios de fila del search-card: en desktop se "aplanan" (display:contents)
   así sus hijos siguen siendo flex-items directos de .search-card, igual que antes
   de que existieran estas filas — el layout de escritorio no cambia. En mobile se
   activan como filas propias (ver media query abajo). */
.search-card-top, .search-card-row { display: contents; }
.search-icon-btn, .search-filter-btn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--green-100); color: var(--green-700); border: none; cursor: pointer; padding: 0;
}
.search-icon-btn svg, .search-filter-btn svg { width: 17px; height: 17px; }
.search-filter-btn { border-radius: 12px; }
.search-field-compact label svg { width: 12px; height: 12px; color: var(--muted); flex: none; margin-right: 3px; vertical-align: -2px; }
.search-submit svg { width: 16px; height: 16px; }

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .search-card {
    flex-direction: column; align-items: stretch; gap: 14px;
    margin-top: 20px; padding: 20px; border-radius: 22px;
    box-sizing: border-box;
  }
  .search-card-top, .search-card-row { display: flex; }
  .search-card-top {
    align-items: center; gap: 12px; height: 58px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 14px; box-sizing: border-box;
  }
  .search-icon-btn { display: inline-flex; width: 22px; height: 22px; background: none; color: var(--muted); flex: none; }
  .search-filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -10px; background: none; color: var(--muted); flex: none;
  }
  .search-icon-btn svg, .search-filter-btn svg { width: 22px; height: 22px; }
  .search-field-main { flex: 1; min-width: 0; }
  .search-field-main label {
    text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 0.8rem;
    color: var(--ink); margin-bottom: 1px;
  }
  .search-field-main input {
    border: none; background: transparent; padding: 0; height: auto;
    font-size: 0.8rem; color: var(--muted); width: 100%;
  }
  .search-field-main input::placeholder { font-size: 0.92rem; }
  .search-field-main input:focus { outline: none; }
  /* width:100% + box-sizing:border-box explícitos -- sin esto, los 3
     <select>/<input> de FECHA/HORA/JUGADORES (con flex:1 1 31% y gap) hacen
     que .search-card-row termine ~10px más ancho que el espacio disponible
     (quirk de cómo el navegador calcula el ancho intrínseco de <select> con
     gap + flex-basis en porcentaje). Como el body tiene overflow-x:clip, ese
     excedente no se veía como scroll horizontal -- se recortaba en
     silencio, dejando "Jugadores"/el botón "Buscar tee times" cortados a la
     derecha sin ningún indicio visible del problema. Confirmado en vivo con
     getBoundingClientRect antes/después de este fix. */
  .search-card-row { gap: 8px; width: 100%; box-sizing: border-box; }
  .search-field-compact {
    flex: 1 1 31%; min-width: 0; padding: 6px 9px; position: relative;
    height: 62px; border: 1px solid var(--line); border-radius: 14px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
  }
  .search-field-compact::after { content: none; }
  .search-field-compact label { display: flex; align-items: center; font-size: 0.7rem; color: var(--muted); }
  .search-field-compact input, .search-field-compact select {
    border: none; background: transparent; padding: 2px 0 0; font-size: 0.88rem;
    font-weight: 700; color: var(--ink); height: auto; min-width: 0; width: 100%;
  }
  .search-card .search-field, .search-card .btn { width: 100%; }
  .search-submit {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 58px; margin-top: 0; border-radius: 14px; font-size: 1.06rem; min-height: 44px;
  }
}

/* TRUST INDICATORS */
.trust-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 22px 0 4px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}
.trust-item { display: flex; align-items: center; gap: 8px; }
.trust-item svg { width: 17px; height: 17px; color: var(--green-700); }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  /* Vuelve a mostrar la fila de confianza en mobile (una regla más arriba
     la ocultaba por completo en la maqueta Playtomic), ahora compacta y
     pegada justo debajo del botón "Buscar tee times" -- mismo contenedor
     que el buscador, así que ya cae ahí sin mover el HTML. Antes, cuando se
     mostraba, quedaba con mucho aire por encima del banner PlayTee Premium. */
  .trust-row {
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
    padding: 14px 4px 0; margin: 0; font-size: 0.72rem;
  }
  .trust-item { gap: 5px; }
  .trust-item svg { width: 14px; height: 14px; }
}

/* CARD MEDIA / BADGES */
.card-media { height: 150px; overflow: hidden; position: relative; padding: 0; }
.card-media svg { transition: transform 0.35s ease; }
.card:hover .card-media svg { transform: scale(1.06); }
.card-media .fav-btn { position: absolute; top: 10px; right: 10px; z-index: 2; }
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.next-slot { font-size: 0.78rem; color: var(--green-700); font-weight: 700; }

/* CARD TIME SLOTS (swipeable) */
.card-slots {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 4px;
  margin: auto 0 4px;
  scrollbar-width: none;
}
.card-slots::-webkit-scrollbar { display: none; }
.card-slot-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--green-950);
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.card-slots-empty { font-size: 0.78rem; color: var(--muted); font-weight: 600; padding: 4px 0; margin-top: auto; }

/* COURSES LIST — estilo app: barra de búsqueda + chips de filtro + tarjetas horizontales */
.course-search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.course-search-box { position: relative; flex: 1; }
.course-search-box svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.course-search-box input {
  width: 100%;
  padding: 8px 16px 8px 44px;
  border-radius: 999px;
  border: 1.5px solid var(--green-950);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
}
.course-search-box input:focus { outline: none; border-color: var(--green-600); }
.course-filter-btn {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-950);
  cursor: pointer;
}
.course-filter-btn svg { width: 19px; height: 19px; }
.course-filter-btn:hover { border-color: var(--green-950); }

.course-chip-row { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 22px; }
.course-chip-row::-webkit-scrollbar { display: none; }
.course-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.84rem;
  white-space: nowrap;
  cursor: pointer;
}
.course-chip svg { width: 14px; height: 14px; }
.course-chip .chip-icon { display: inline-flex; align-items: center; }
.course-chip.selected { background: var(--green-950); color: var(--sand); border-color: var(--green-950); }

.course-list { display: flex; flex-direction: column; gap: 16px; }
.course-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.course-card:hover { border-color: var(--green-600); transform: translateY(-2px); }
.course-card-media { position: relative; width: 100%; height: 170px; }
.course-card-media svg, .course-card-media .card-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card-media .fav-btn { position: absolute; top: 10px; right: 10px; z-index: 2; }
.course-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.course-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.course-card-body h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.course-card-meta { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.85rem; }
.course-card-meta svg { width: 13px; height: 13px; flex: none; }
.course-card-price { font-weight: 700; color: var(--green-950); font-size: 0.95rem; margin-top: 1px; }
.course-card-slots { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 4px; }
.course-card-slots::-webkit-scrollbar { display: none; }
.course-card-slots .card-slot-pill.outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .course-card-media { height: 150px; }
  .course-card-badges .badge { font-size: 0.64rem; padding: 2px 7px; }
  .course-card-body h3 { font-size: 1rem; }
}

/* FAV BUTTON */
.fav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--green-950);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn.active { color: var(--danger); }

/* STAR RATING */
.star-rating { display: inline-flex; align-items: center; gap: 2px; }
.star-rating .rating-num { font-weight: 700; margin-left: 4px; color: var(--ink); font-size: 0.86rem; }
.rating-count { color: var(--muted); font-size: 0.78rem; }

/* SKELETON LOADERS */
.skeleton {
  background: linear-gradient(90deg, var(--cream) 25%, #eee8d8 37%, var(--cream) 63%);
  background-size: 400% 100%;
  animation: skeleton-shine 1.4s ease infinite;
  border-radius: 4px;
}
@keyframes skeleton-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.skeleton-media { height: 100%; width: 100%; border-radius: 0; }
.skeleton-line { height: 12px; margin: 6px 0; }
.skeleton-card { pointer-events: none; }

/* HOW IT WORKS */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 760px) { .steps-row { grid-template-columns: 1fr; } }
.step-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; }
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-950);
  color: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  margin: 0 auto 14px;
}
.step-icon { width: 28px; height: 28px; color: var(--green-700); margin: 0 auto 12px; }
.step-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step-card p { margin: 0; color: var(--muted); font-size: 0.86rem; }

/* BENEFITS */
.benefit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .benefit-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .benefit-row { grid-template-columns: 1fr; } }
.benefit-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.benefit-icon { width: 24px; height: 24px; color: var(--green-700); margin-bottom: 10px; }
.benefit-card h4 { margin: 0 0 5px; font-size: 0.95rem; }
.benefit-card p { margin: 0; color: var(--muted); font-size: 0.83rem; }

/* TESTIMONIALS */
.testi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .testi-row { grid-template-columns: 1fr; } }
.testi-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.testi-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden; }
.testi-name { font-weight: 700; font-size: 0.92rem; }
.testi-course { color: var(--muted); font-size: 0.78rem; }
.testi-comment { font-size: 0.88rem; color: var(--ink); margin: 8px 0 0; font-style: italic; }

/* FOOTER */
.site-footer { background: var(--green-950); color: rgba(250, 247, 240, 0.82); padding: 48px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 30px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.3rem; color: var(--sand); font-weight: 600; }
.footer-brand .brand-mark { width: 22px; }
.footer-tee { color: var(--gold-light); }
.footer-tag { font-size: 0.85rem; margin-top: 10px; max-width: 320px; opacity: 0.85; }
.footer-col h4 { color: var(--sand); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 12px; }
.footer-col a { display: block; font-size: 0.86rem; margin-bottom: 8px; opacity: 0.82; color: rgba(250, 247, 240, 0.82); }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 247, 240, 0.14);
  font-size: 0.8rem;
}
.footer-social { display: flex; gap: 16px; }
.footer-social a { opacity: 0.82; color: rgba(250, 247, 240, 0.82); }
.footer-social a:hover { opacity: 1; }

/* App empacada (Capacitor): footer recortado justo después del grass-strip,
   sin la grilla de links de marketing/legal, para que el scroll no se sienta
   tan largo dentro de la app nativa. */
.site-footer-app { padding: 16px 0 24px; }
.footer-bottom-app { justify-content: center; padding-top: 0; border-top: none; opacity: 0.75; }

/* SCOREBOARD */
.sc-page { max-width: 880px; }
.sc-header { margin-bottom: 14px; }
.sc-title { margin-bottom: 2px; }
.sc-sub { color: var(--muted); font-size: 0.88rem; font-family: var(--font-sans); }

/* Celdas de la grilla: inputs numéricos/texto estilo "chip", más grandes y
   táctiles que una tabla HTML clásica -- números siempre en mono para que
   alineen visualmente en columna. */
.score-input {
  width: 100%;
  height: 36px;
  padding: 4px 2px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 0.86rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--ink);
  background: var(--sand);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.score-input.player-name {
  width: 100%;
  height: auto;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.88rem;
  border-color: transparent;
  background: transparent;
  padding: 4px 2px;
}
.score-input:focus { outline: none; border-color: var(--green-600); background: white; box-shadow: 0 0 0 3px rgba(44,95,45,0.12); }
.score-input.player-name:focus { background: var(--green-100); box-shadow: none; }

/* Semáforo por hoyo: verde si fue par o mejor, amarillo si fue bogey (+1),
   rojo si fue doble bogey o peor (+2 o más) -- referencia estándar de golf
   (par, bogey, doble bogey), no un criterio inventado. */
.score-cell-good .score-input { background: rgba(44,95,45,0.16); border-color: var(--green-600); color: var(--green-950); }
.score-cell-ok .score-input { background: rgba(184,134,58,0.18); border-color: var(--gold); color: #6b4e1e; }
.score-cell-bad .score-input { background: rgba(168,59,44,0.14); border-color: var(--danger); color: var(--danger); }
.score-cell-good .score-input:focus, .score-cell-ok .score-input:focus, .score-cell-bad .score-input:focus { background: white; color: var(--ink); }

/* Mejor/peor de la partida -- arriba de la tabla, con la diferencia en
   golpes entre ambos. Se oculta sola si hay menos de 2 jugadores con algún
   score cargado (nada que comparar todavía). */
.score-leaders { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.score-leader-card {
  flex: 1; min-width: 160px; border-radius: var(--radius-lg); padding: 14px 16px;
  border: 1px solid var(--line); background: var(--sand); box-shadow: var(--shadow);
  display: flex; align-items: flex-start; gap: 10px;
}
.score-leader-card.best { background: linear-gradient(135deg, rgba(44,95,45,0.08), var(--sand)); border-color: rgba(44,95,45,0.35); }
.score-leader-card.worst { background: linear-gradient(135deg, rgba(168,59,44,0.07), var(--sand)); border-color: rgba(168,59,44,0.3); }
.score-leader-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--white);
}
.score-leader-card.best .score-leader-icon { background: var(--green-600); }
.score-leader-card.worst .score-leader-icon { background: var(--danger); }
.score-leader-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.score-leader-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--green-950); line-height: 1.2; }
.score-leader-detail { font-size: 0.8rem; color: var(--muted); margin-top: 3px; font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Tarjeta que envuelve la grilla de hoyos: la grilla scrollea en horizontal
   adentro de la tarjeta (en vez de la tabla HTML clásica), con la columna
   de jugador fija a la izquierda -- así en el celular siempre se ve quién
   es cada fila aunque se deslice por los 18 hoyos. */
.sc-card { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--sand); box-shadow: var(--shadow); overflow: hidden; }
.sc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-grid { display: grid; grid-auto-rows: min-content; width: max-content; min-width: 100%; }
.sc-row { display: contents; }

.sc-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 7px 5px; border-bottom: 1px solid var(--line);
}
.sc-cell-label {
  justify-content: flex-start; padding: 7px 10px;
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--line);
  background: var(--sand);
}
.sc-cell-hole {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem; font-weight: 700; color: var(--muted);
  background: var(--cream);
}
.sc-cell-total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 0.86rem; color: var(--green-950);
  background: var(--green-100);
}
.sc-cell-vspar { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 0.86rem; }
.sc-vspar-under { color: var(--green-600); }
.sc-vspar-over { color: var(--danger); }
.sc-vspar-even { color: var(--muted); }

.sc-row-head .sc-cell { border-bottom: 1.5px solid var(--line); background: var(--green-950); color: var(--white); font-family: var(--font-sans); }
.sc-row-head .sc-cell-hole { background: var(--green-950); color: rgba(255,255,255,0.85); }
.sc-row-head .sc-cell-label-head { font-weight: 700; font-size: 0.82rem; }
.sc-row-head .sc-cell-total-head, .sc-row-head .sc-cell-vspar-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.75); }

.sc-row-meta .sc-cell-label { font-weight: 700; font-size: 0.8rem; }

/* Yardas en tono dorado y Par en tono azul pizarra -- dos colores bien
   distintos entre sí (y del verde/blanco del resto de la grilla) para que
   se diferencien de un vistazo al deslizar por los hoyos. */
.sc-row-yardage .sc-cell { background: rgba(184,134,58,0.09); }
.sc-row-yardage .sc-cell-label { background: var(--gold-light); color: #6b4e1e; }
.sc-row-yardage .yardage-input { background: rgba(184,134,58,0.14); border-color: var(--gold); color: #6b4e1e; }
.sc-row-yardage .yardage-input:focus { background: white; color: var(--ink); }
.sc-row-yardage .sc-cell-total { background: var(--gold-light); color: #6b4e1e; }

.sc-row-par .sc-cell { background: rgba(58,90,138,0.07); }
.sc-row-par .sc-cell-label { background: rgba(58,90,138,0.16); color: #2f4c6e; }
.sc-row-par .par-input { background: rgba(58,90,138,0.12); border-color: #3a5a8a; color: #2f4c6e; }
.sc-row-par .par-input:focus { background: white; color: var(--ink); }
.sc-row-par .sc-cell-total { background: rgba(58,90,138,0.16); color: #2f4c6e; }

.sc-row-player:nth-of-type(odd) .sc-cell { background: rgba(238,242,234,0.35); }
.sc-row-player:nth-of-type(odd) .sc-cell-label { background: var(--green-100); }
.sc-row-player .sc-cell-label { background: var(--sand); }
.sc-row-player .sc-cell-hole { display: none; } /* la fila de hoyos solo va en el header */

.sc-hint { text-align: center; font-size: 0.72rem; color: var(--muted); padding: 7px 0; border-top: 1px solid var(--line); background: var(--cream); }
@media (min-width: 640px) { .sc-hint { display: none; } }

.sc-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sc-publish { display: flex; gap: 8px; align-items: center; }
.sc-publish .score-input { width: auto; min-width: 140px; height: 38px; font-family: var(--font-sans); font-weight: 600; }
.sc-back { margin-left: auto; }

@media (max-width: 520px) {
  .sc-cell-label { width: 120px; }
  .score-input.player-name { font-size: 0.82rem; }
  .sc-cell { padding: 6px 3px; font-size: 0.78rem; }
  .score-leader-card { padding: 11px 13px; min-width: 130px; }
  .score-leader-name { font-size: 0.95rem; }
  .score-leader-detail { font-size: 0.72rem; }
  .sc-back { margin-left: 0; }
}

/* FILTER PANEL (marketplace) */
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 16px 0;
}
.filter-panel .field { margin-bottom: 0; min-width: 140px; flex: 1; }
.filter-toggle { display: none; margin: 12px 0 0; }
@media (max-width: 760px) {
  .filter-toggle { display: inline-flex; }
  .filter-panel { display: none; }
  .filter-panel.show { display: flex; }
}

/* Panel de filtros de courses.html, disparado por el botón redondo de sliders
   junto a la barra de búsqueda — a diferencia de .filter-panel (que va siempre
   visible en desktop en marketplace.html), este va oculto en todos los tamaños
   hasta que se abre. */
.course-filter-panel { display: none; }
.course-filter-panel.show { display: flex; }

/* MOBILE NAV */
#nav { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; will-change: transform; }
.nav-toggle { display: none; background: none; border: none; color: var(--green-950); cursor: pointer; padding: 8px; margin: -8px -8px -8px auto; border-radius: var(--radius); }
.nav-toggle svg { width: 24px; height: 24px; }

/* Acciones compactas (campana + avatar, o entrar/crear cuenta) que sólo se
   muestran en el header de dos filas de mobile — en desktop van en .nav-right. */
.nav-mobile-actions { display: none; align-items: center; gap: 10px; margin-left: auto; }
.nav-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: var(--green-950); flex: none;
}
.nav-bell svg { width: 20px; height: 20px; }
.nav-bell.has-dot::after {
  content: ""; position: absolute; top: 5px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--sand);
}
.notif-badge {
  /* Antes quedaba pegado top:2px/right:2px, encima del propio ícono -- con
     "9+" (2 caracteres) tapaba la campana/carrito entero, sobre todo en los
     tamaños chicos (header hero de 22px). Ahora se empuja hacia afuera del
     botón (offset negativo) para que quede "flotando" en la esquina, nunca
     sobre el dibujo del ícono, sin importar el tamaño del botón. */
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 700;
  line-height: 18px; text-align: center; border: 2px solid var(--sand); box-sizing: border-box;
  z-index: 2;
}
.dash-icon-btn .notif-badge { border-color: var(--white); }
.nav-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-100); border: 1.5px solid var(--line);
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-avatar-fallback { font-weight: 700; font-size: 0.78rem; color: var(--green-950); }

@media (max-width: 760px) {
  /* Header mobile: solo logo + campana + avatar. La navegación entre
     secciones (Inicio/Canchas/Clases/Caddies/Mis reservas) ya vive en la
     barra inferior fija (.site-bottom-nav), así que esta fila se oculta acá
     — antes hacía scroll horizontal propio dentro del header y se sentía
     "temblorosa"/inestable al deslizar. */
  .nav-toggle { display: none; }
  .nav-mobile-actions { display: flex; gap: 10px; }
  .nav-right { display: none; }
  .nav-inner {
    flex-wrap: nowrap; align-items: center; justify-content: space-between;
    padding: 0 20px; gap: 12px; min-height: 0; height: 72px;
    padding-top: env(safe-area-inset-top);
  }
  .nav-inner .brand { font-size: 1.3rem; gap: 8px; }
  .nav-inner .brand-mark { width: 24px; }
  /* Antes era "margin: -10px" (las 4 esquinas) para agrandar el área de toque
     sin ocupar más espacio visual — funcionaba con un solo ícono estilo
     campana. Ahora puede haber dos (campana + carrito de comida, para staff
     con ese rol) uno junto al otro: el margen negativo horizontal en ambos
     comía el "gap" del contenedor y los hacía superponerse. Se deja el
     margen negativo solo en vertical, así el toque sigue siendo grande pero
     el espacio horizontal entre íconos ya no se pisa. */
  .nav-mobile-actions .nav-bell {
    width: 44px; height: 44px; margin: -10px 0;
  }
  .nav-mobile-actions .nav-bell svg { width: 23px; height: 23px; }
  .nav-mobile-actions .nav-bell.has-dot::after { width: 7px; height: 7px; top: 12px; right: 13px; }
  .nav-mobile-actions .nav-avatar { width: 38px; height: 38px; }
  .nav-links { display: none; }
  /* La franja de césped (.grass-strip) que renderNav() pone justo debajo del
     header queda rara en mobile en las páginas de login/registro/olvidé mi
     contraseña -- compite con la tarjeta del formulario que arranca justo
     abajo. En desktop se deja igual, solo se saca en mobile. */
  body.auth-page #nav .grass-strip { display: none; }
}

/* Header oscuro en mobile para TODA la app (antes solo vivía en el lobby vía
   .nav-lobby; ahora #nav lo aplica en cualquier página para que la parte
   superior se vea igual en todos lados). Verde oscuro compacto (100px alto)
   con logo/campana/avatar en blanco y "Tee" en lima. .nav-lobby ya no aporta
   color — queda solo para el margin-top:0 de #marketingHome (ver arriba),
   que hace que la tarjeta blanca del lobby arranque pegada al #nav. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  #nav { background: var(--header-forest); border-bottom: none; border-radius: 0 0 24px 24px; overflow: hidden; }
  /* min-height (no height fijo) + sumar env(safe-area-inset-top) al alto total:
     con box-sizing:border-box, un height:100px fijo hacía que el padding-top
     del notch/Dynamic Island le comiera espacio al contenido (logo/Entrar
     quedaban apretados o tapados). Así el header crece lo que haga falta
     para el notch, sin perder los 100px de aire para el contenido. */
  .nav-inner { min-height: calc(100px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 30px 0; }
  .brand { color: var(--white); font-size: 20px; gap: 7px; }
  .brand-tee { color: var(--lime-accent); }
  .brand-mark { filter: brightness(0) invert(1); width: auto; height: 30px; }
  .nav-mobile-actions .nav-bell { color: var(--white); width: 22px; height: 22px; margin: 0; }
  .nav-mobile-actions .nav-bell svg { width: 22px; height: 22px; }
  .nav-mobile-actions .nav-bell.has-dot::after { background: var(--lime-accent); border-color: var(--header-forest); }
  .nav-mobile-actions .nav-avatar { border-color: var(--white); background: var(--green-700); width: 36px; height: 36px; }
  .nav-mobile-actions .nav-avatar-fallback { color: var(--white); }
  .nav-mobile-actions { gap: 16px; }
  .nav-mobile-actions .nav-link { color: var(--white); }
  .nav-mobile-actions .btn-primary {
    background: var(--white); color: var(--header-forest); border-color: var(--white);
  }
}

/* SITE BOTTOM TAB BAR (páginas públicas, estilo app) */
.site-bottom-nav { display: none; }
/* Barra más alta (94px vs. 78px original) a pedido -- ver .site-bottom-nav
   más abajo. El padding-bottom del body reserva espacio de sobra para que
   el contenido nunca quede tapado detrás. */
body.has-site-bottom-nav { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .site-bottom-nav {
    display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: var(--kb-offset, 0px); z-index: 60;
    min-height: 94px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 16px rgba(10, 30, 20, 0.06);
  }
  .site-bottom-nav-item {
    flex: 1 1 20%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    min-height: 52px; padding: 6px 2px; border-radius: var(--radius); font-size: 0.76rem; font-weight: 600; color: var(--muted);
  }
  .site-bottom-nav-item svg { width: 26px; height: 26px; }
  .site-bottom-nav-item.active { color: var(--green-700); }
  .site-bottom-nav-fab {
    flex: 1 1 20%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    margin-top: -18px; font-size: 0.76rem; font-weight: 700; color: var(--green-950);
  }
  .site-bottom-nav-fab svg {
    width: 36px; height: 36px; padding: 13px; border-radius: 50%; box-sizing: content-box;
    background: var(--green-950); color: var(--white); box-shadow: 0 6px 14px rgba(10, 46, 28, 0.4);
  }
}

/* PAYMENT MODAL */
.pt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 46, 28, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.pt-modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 30, 20, 0.28);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px;
}
.pt-modal.pt-modal-wide { max-width: 640px; }
/* "Elige cómo pagar" como bottom sheet (mismo lenguaje visual que
   .date-picker-overlay/.date-picker-sheet) en vez de un modal centrado --
   ver renderPtModal(html, "sheet") / pickPaymentMethod() en app.js. */
.pt-overlay-sheet { align-items: flex-end; padding: 0; }
.pt-modal-sheet {
  border-radius: 20px 20px 0 0;
  max-width: 480px;
  padding: 20px 22px calc(22px + env(safe-area-inset-bottom));
  animation: datePickerUp 0.22s ease;
}
.pt-sheet-handle { width: 36px; height: 4px; background: var(--line); border-radius: 2px; margin: 0 auto 14px; }
.pt-sheet-policy-link {
  display: block; text-align: center; margin-top: 14px; font-size: 0.8rem;
  color: var(--green-700); font-weight: 700; text-decoration: none;
}
.pt-sheet-policy-link:hover { text-decoration: underline; }
/* "Agregar tarjeta y pagar" -- pantalla completa (no modal/sheet) para
   capturar la tarjeta nueva dentro del flujo de checkout, ver
   showPtAddCardAndPay() en app.js. Reutiliza .pt-card-visual (definida
   junto a .form-card, ver "Agregar tarjeta" en Configuración). */
.pt-fullscreen {
  position: fixed; inset: 0; z-index: 210; background: var(--white);
  display: flex; flex-direction: column; overflow-y: auto;
  /* Sin esto, iOS no le da scroll táctil nativo a un overflow:auto dentro de
     un position:fixed -- mismo patrón que el resto de los scrolls de la app
     (ver .table-scroll, .date-picker-col, .tabs). Se nota sobre todo con el
     teclado abierto mientras se llenan los campos de la tarjeta: el scroll
     se queda "trabado" hasta soltar el teclado. */
  -webkit-overflow-scrolling: touch;
  /* Sin esto, el swipe-down desde arriba del todo del formulario dispara el
     "pull to refresh" nativo del navegador (Chrome/Android sobre todo) --
     eso recarga la página entera a la mitad de agregar la tarjeta, lo cual
     además dejaba la reserva ya creada (ver checkout() en app.js) colgada
     como pendiente. contain evita que el scroll se propague al documento. */
  overscroll-behavior-y: contain;
}
.pt-fullscreen-header {
  display: flex; align-items: center; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 20px 14px;
  border-bottom: 1px solid var(--line); flex: none;
}
.pt-fullscreen-header h3 { margin: 0; font-size: 1.05rem; }
.pt-fullscreen-close {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted);
}
.pt-fullscreen-close:hover { background: var(--cream); }
.pt-fullscreen-body { flex: 1; padding: 22px 20px; max-width: 480px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.pt-fullscreen-footer {
  flex: none; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  max-width: 480px; width: 100%; margin: 0 auto; box-sizing: border-box;
}
.pt-save-card-box.pt-save-card-prominent {
  border-width: 2px; border-color: var(--green-700);
  box-shadow: 0 2px 10px rgba(31, 92, 58, 0.16);
  margin-top: 18px;
}
.pt-save-card-box.pt-save-card-prominent input[type="checkbox"] { width: 22px; height: 22px; }
.split-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.split-share-row .split-share-name { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.split-share-row .split-share-amount { color: var(--muted); font-size: 0.82rem; }

/* 3 puntitos para que el organizador quite a un jugador que no pagó (ver
   renderSplitManageModal en app.js) -- un menú chiquito con una sola
   opción, no hace falta nada más elaborado. */
.split-remove-wrap { position: relative; display: inline-block; margin-left: 6px; }
.split-remove-dots {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 2px 4px;
  border-radius: 4px;
}
.split-remove-dots:hover { background: var(--sand); color: var(--ink); }
.split-remove-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(10, 30, 20, 0.14);
  min-width: 140px; padding: 4px;
}
.split-remove-confirm {
  display: block; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--danger);
}
.split-remove-confirm:hover { background: var(--sand); }

/* Notificaciones (rediseño estilo IG): agrupado por fecha, filas con
   avatar + texto + acciones -- se usa para solicitudes de amistad, avisos
   de seguimiento y mensajes nuevos (todo lo que tiene una persona real
   detrás, a diferencia de pagos/invitaciones de trabajo que se quedan con
   su tarjeta .split-share-row/.card de siempre). */
.notif-group-title { font-size: 1.05rem; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--green-700); margin: 20px 0 8px; }
.notif-group-title:first-child { margin-top: 0; }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.notif-row:last-child { border-bottom: none; }
.notif-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: var(--green-100); color: var(--green-950); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notif-body { flex: 1; min-width: 0; }
.notif-main { font-size: 0.88rem; color: var(--ink); line-height: 1.35; }
.notif-main strong { font-weight: 700; }
.notif-main .notif-time { color: var(--muted); font-weight: 400; }
.notif-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.notif-actions { flex: none; display: flex; gap: 8px; }

.notif-followreq-bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.notif-followreq-avatars { flex: none; display: flex; }
.notif-followreq-avatars .notif-avatar { width: 40px; height: 40px; border: 2px solid #fff; }
.notif-followreq-avatars .notif-avatar:not(:first-child) { margin-left: -14px; }
.notif-followreq-bar .notif-body strong { font-size: 0.88rem; }
.notif-followreq-bar .notif-body span { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
.split-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--cream);
  overflow: hidden;
  margin: 10px 0 4px;
}
.split-progress-fill { height: 100%; background: var(--green-600); border-radius: 999px; }
.split-add-player-box {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 8px;
}
.split-invite-box {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(10, 46, 28, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.split-invite-box.active {
  border-color: var(--green-600);
  box-shadow: 0 6px 18px rgba(10, 46, 28, 0.1);
  background: linear-gradient(135deg, #f4f9f2 0%, #eaf3e5 100%);
}
.split-invite-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 0;
}
/* El checkbox nativo se reemplaza visualmente por un switch tipo pill
   (más "premium" que el checkbox cuadrado de antes); el input sigue
   siendo el real, solo se oculta y el switch se pinta a partir de su
   estado con :checked + selector hermano. */
.split-invite-head input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.split-toggle-switch {
  flex: none; width: 40px; height: 24px; border-radius: 999px;
  background: var(--line); position: relative; transition: background 0.15s ease;
}
.split-toggle-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(10,46,28,0.3);
  transition: transform 0.15s ease;
}
.split-invite-head input[type="checkbox"]:checked ~ .split-toggle-switch { background: var(--green-700); }
.split-invite-head input[type="checkbox"]:checked ~ .split-toggle-switch::after { transform: translateX(16px); }
.split-invite-head input[type="checkbox"]:focus-visible ~ .split-toggle-switch { outline: 2px solid var(--green-600); outline-offset: 2px; }
.split-invite-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(31, 92, 58, 0.3);
}
.split-invite-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.split-invite-text strong { color: var(--green-950); font-size: 0.96rem; }
.pending-pay-banner {
  border: 1.5px solid var(--green-200, #cfe3d5);
  background: linear-gradient(135deg, #f4f9f2 0%, #eaf3e5 100%);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 14px 0 0;
  box-shadow: 0 4px 14px rgba(31, 92, 58, 0.1);
}
.pending-pay-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pending-pay-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(31, 92, 58, 0.3);
}
.pending-pay-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pending-pay-head-text strong { color: var(--green-950); font-size: 0.96rem; }
.pending-pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.pending-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--green-200, #cfe3d5);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* NOTIFICATION LIST (lobby) */
/* #lobbyNotifCarousel es el contenedor fijo (index.html) al que
   loadLobbyNotifCarousel() le reescribe el innerHTML cada vez que hay
   recordatorios nuevos o distintos — con 2+ tarjetas su alto interno cambia
   seguido. contain:layout+paint aísla ese reflow/repintado adentro de esta
   caja para que no se filtre visualmente hacia el buscador de arriba (ver
   comentario en .search-card) ni recalcule el layout de afuera.
   overflow-anchor:none apaga el "scroll anchoring" nativo del navegador para
   esta caja — sin esto, el navegador intenta re-ajustar solo el scroll cada
   vez que esta caja cambia de alto, y ese ajuste automático peleaba con la
   lógica de la app y con el reflow de abajo, deformando visualmente el
   buscador de arriba cuando llegaban 2+ recordatorios a la vez. */
#lobbyNotifCarousel { contain: layout paint; overflow-anchor: none; }
/* Carrusel horizontal de una sola tarjeta a pantalla completa por vez.
   OJO — esto NO usa overflow-x:auto nativo. "Canchas destacadas" ya probó
   ese patrón (scroll-snap nativo anidado) y se abandonó porque "el swipe no
   resultaba confiable en dispositivo real" (ver comentario en
   .hscroll-mobile más arriba): en el teléfono real, arrastrar el dedo
   horizontalmente terminaba arrastrando TODO el layout de abajo con la
   tarjeta en vez de quedar contenido adentro del carrusel.
   Acá se resuelve distinto, sin repetir ese bug:
   1) .notif-carousel es el "viewport": overflow:hidden (nunca se ve ni se
      puede arrastrar nada fuera de su ancho) + touch-action:pan-y — con
      esto el navegador SOLO reconoce paneo vertical nativo sobre este
      bloque; el paneo horizontal de página queda deshabilitado a nivel
      browser, así que la página entera físicamente no puede correrse a la
      derecha durante el swipe, pase lo que pase en JS.
   2) .notif-track es el riel interno (flex row, un .notif-card por
      tarjeta) que SÍ se mueve, pero solo él: wireLobbyNotifCarousel() en
      index.html lo arrastra a mano con Pointer Events y lo transforma con
      translateX() — nunca decide moverlo hasta confirmar que el gesto es
      horizontal (si es vertical, no se toca nada y el scroll de la página
      sigue 100% nativo).
   3) Alto FIJO: .notif-card tiene height fijo + overflow:hidden y
      line-clamp en .card-meta, así el alto nunca cambia. */
.notif-carousel {
  overflow: hidden;
  touch-action: pan-y;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 14px 0 0;
}
.notif-track {
  display: flex;
  flex-direction: row;
  width: 100%;
}
/* Verde oscuro sólido (mismo tono que .btn-primary / el botón de "Buscar
   tee times"), no el degradé claro de antes — y más chico, para que no se
   sienta como un bloque enorme. Los botones/íconos/texto adentro se
   invierten a tonos claros (sand/blanco) para tener contraste contra el
   fondo oscuro. */
.notif-card {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 104px;
  overflow: hidden;
  border: none;
  background: var(--green-950);
  border-radius: var(--radius-lg);
  padding: 14px 38px 14px 16px;
  box-shadow: 0 4px 14px rgba(10, 46, 28, 0.25);
}
.notif-card .notif-card-icon { width: 32px; height: 32px; font-size: 0.9rem; background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.notif-card .notif-card-head strong { color: var(--sand); font-size: 0.92rem; }
.notif-card .card-meta { color: rgba(255, 255, 255, 0.72); }
.notif-card .notif-card-close { background: rgba(255, 255, 255, 0.16); color: var(--sand); }
.notif-card .notif-card-close:hover { background: rgba(255, 255, 255, 0.3); color: var(--sand); }
.notif-card .notif-card-actions { margin-top: 8px; }
.notif-card .btn-primary { background: var(--sand); color: var(--green-950); border-color: var(--sand); }
.notif-card .btn-primary:hover { background: #e9f1ea; }
.notif-card .btn-ghost { background: transparent; color: var(--sand); border-color: rgba(255, 255, 255, 0.4); }
.notif-card .btn-ghost:hover { border-color: var(--sand); }
/* Puntitos de página — muestran cuántos recordatorios hay y cuál está
   activo. wireLobbyNotifCarousel() en index.html los sincroniza con el
   scroll del carrusel. */
.notif-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 8px 0 0; }
.notif-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-200, #cfe3d5);
  transition: background 0.2s, width 0.2s;
}
.notif-dot.active { background: var(--green-700); width: 16px; border-radius: 4px; }
.notif-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-card-close:hover { background: var(--white); color: var(--ink); }
.notif-card-head { display: flex; align-items: center; gap: 12px; }
.notif-card-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(31, 92, 58, 0.3);
}
.notif-card-icon-clock { border: 2px solid var(--white); }
.notif-card-icon-clock svg { width: 18px; height: 18px; }
.notif-card-head strong { color: var(--green-950); font-size: 0.95rem; }
/* line-clamp: sin esto, un recordatorio con texto largo (nombre de cancha +
   organizador + fecha + monto, todo en una sola línea de .card-meta) podía
   pasarse del alto fijo de .notif-card (104px, achicado a propósito) y
   desbordar. A 1 línea máximo el recorte queda prolijo (…) y el alto nunca
   se rompe, incluso con la tarjeta más chica. */
.notif-card .card-meta { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; }
.notif-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.split-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.split-search-result:hover { background: var(--cream); }
.split-search-result-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.split-search-result-info .card-meta { margin: 0; }
/* Bolita con la foto de perfil (o iniciales si no tiene foto) al lado del
   nombre en los resultados de "invitar amigos" -- antes era solo texto. */
.invite-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
}
.invite-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invite-search-suggest-label { margin: 0 0 6px; padding: 2px 10px; }
/* Buscador de "invitar amigos" (course.html) -- antes era un <input> pelado
   sin ninguna clase, se veía angosto/genérico comparado con el resto de la
   app. Mismo look que .field input pero más grueso (más padding/alto). */
.invite-search-input {
  width: 100%; box-sizing: border-box; padding: 8px 14px; font-size: 0.88rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  font-family: inherit; background: var(--white);
}
@media (max-width: 640px) {
  /* Mismo bug de zoom-al-enfocar de iOS que .field input -- este campo
     también vive fuera de .field. */
  .invite-search-input { font-size: 16px; }
}
.invite-search-input:focus { outline: none; border-color: var(--green-600); }
.invite-menu-list { display: flex; flex-direction: column; gap: 10px; }
.invite-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.invite-menu-item:hover { border-color: var(--gold); background: #fdf9ef; }
.invite-menu-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.invite-menu-text { display: flex; flex-direction: column; gap: 2px; }
.invite-menu-text strong { color: var(--green-950); font-size: 0.94rem; }
.pt-modal h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--green-950);
  margin-bottom: 4px;
  padding-right: 40px;
}
/* Título en sans (mismo peso/letra que "Cupo sin asignar" y el resto del
   contenido de estos modales) en vez del serif de --font-display -- usado
   en "Dividir pago entre jugadores" y "Jugadores de esta reserva", donde el
   serif desentonaba con el resto del modal. */
.pt-modal h3.pt-modal-title-sans {
  font-family: var(--font-sans);
  font-weight: 800;
}
.pt-modal .pt-sub { color: var(--muted); font-size: 0.86rem; margin-bottom: 20px; }
.pt-modal .pt-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-100);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--green-950);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}
.pt-modal .pt-close:hover { background: var(--line); }
.pt-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pt-method {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  background: var(--white);
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.pt-method:hover { background: var(--cream); }
.pt-method.selected { border-color: var(--green-700); background: var(--green-100); }
.pt-method .pt-method-icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--green-950);
}
.pt-method .pt-method-icon svg { width: 18px; height: 18px; }
.pt-method .pt-method-name { font-weight: 700; color: var(--ink); font-size: 0.94rem; }
.pt-method .pt-method-desc { color: var(--muted); font-size: 0.78rem; }

/* Variante chica -- usada por la opción "Agregar tarjeta de crédito" (Tilopay
   por debajo) para que quede más discreta frente a Yappy, el método
   principal en Panamá. */
.pt-method.pt-method-compact { padding: 8px 16px; gap: 10px; }
.pt-method.pt-method-compact .pt-method-icon { width: 26px; height: 26px; }
.pt-method.pt-method-compact .pt-method-icon svg { width: 15px; height: 15px; }
.pt-method.pt-method-compact .pt-method-name { font-size: 0.82rem; font-weight: 600; }

/* Logos de métodos de pago (Yappy, Visa, Mastercard) — reemplazan el círculo con
   una letra suelta ($, Y) por una insignia con el color/forma de cada marca.
   .pt-method-icon-logo desactiva el fondo circular por defecto de .pt-method-icon
   para que la insignia rectangular no quede recortada dentro de un círculo. */
.pt-method .pt-method-icon.pt-method-icon-logo {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  gap: 5px;
}
.pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
  flex: none;
}
.pay-logo-visa { background: #1434cb; color: #fff; font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 14px; }
.pay-logo-yappy { width: 56px; background: #fff; border: 1px solid var(--line); color: #1a6fb5; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; font-size: 14px; font-weight: 900; font-style: normal; gap: 3px; }
.pay-logo-mastercard { background: #fff; border: 1px solid var(--line); }
.pt-save-card-box {
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1.5px solid var(--green-200, #cfe3d5);
  background: var(--green-100);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.pt-save-card-box input[type="checkbox"] {
  width: 19px;
  height: 19px;
  accent-color: var(--green-700);
  flex: none;
  cursor: pointer;
}
.pt-save-card-box strong { display: block; color: var(--green-950); font-size: 0.92rem; }
.pt-save-card-desc { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 1px; }
.pt-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  margin-bottom: 16px;
}
.pt-total-row .pt-total-label { color: var(--muted); font-size: 0.85rem; }
.pt-total-row .pt-total-amount { font-family: var(--font-display); font-size: 1.4rem; color: var(--green-950); font-weight: 700; }
.pt-status {
  text-align: center;
  padding: 24px 10px;
}
.pt-status .pt-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--green-700);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: pt-spin 0.8s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }
.pt-status p { color: var(--muted); font-size: 0.88rem; }
.pt-mock-box {
  background: #fdf6e6;
  border: 1px solid var(--gold-light);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.8rem;
  color: #7a5c1e;
  margin-top: 16px;
}
.pt-mock-box p { margin-bottom: 10px; }

/* PROVIDER CARDS (caddies / instructores) */
.provider-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.provider-card:hover { border-color: var(--green-600); transform: translateY(-2px); }
.provider-card-head {
  background: var(--green-950);
  padding: 16px 100px 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.provider-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 2px solid rgba(250,247,240,0.25);
  background: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sand);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.provider-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.provider-card-head h3 { color: var(--sand); margin: 0; font-size: 1.02rem; line-height: 1.25; }
.provider-club { color: rgba(250,247,240,0.72); font-size: 0.78rem; margin-top: 2px; }
.availability-pill {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(250,247,240,0.12);
  color: #8ee6ab;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}
.availability-pill.unavailable { color: rgba(250,247,240,0.6); }
.availability-dot { width: 6px; height: 6px; border-radius: 50%; background: #3ddc74; display: inline-block; flex: none; }
.availability-dot.unavailable { background: rgba(250,247,240,0.5); }
.provider-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.provider-meta-row { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.83rem; flex-wrap: wrap; }
.provider-meta-row svg { width: 15px; height: 15px; flex: none; color: var(--green-700); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--sand);
  white-space: nowrap;
}
.provider-price-row { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-950); font-size: 0.98rem; margin-top: 2px; }
.provider-price-row svg { width: 15px; height: 15px; color: var(--green-700); }
.provider-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.provider-actions .btn { flex: 1; min-width: 88px; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .provider-card-head { padding: 14px 90px 14px 16px; gap: 10px; }
  .provider-avatar { width: 52px; height: 52px; }
  .provider-card-head h3 { font-size: 0.98rem; }
  .provider-club { font-size: 0.76rem; }
  .provider-card-body { padding: 14px 16px; gap: 8px; }
  .tag { font-size: 0.72rem; padding: 3px 9px; }
}

/* TOGGLE SWITCH */
.switch-field { display: flex; align-items: center; gap: 10px; }
.switch-field label:first-child {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--line);
  border-radius: 22px;
  transition: background 0.15s ease;
}
.switch-slider::before {
  content: "";
  position: absolute;
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.switch input:checked + .switch-slider { background: var(--green-700); }
.switch input:checked + .switch-slider::before { transform: translateX(17px); }

/* PROFILE PHOTO UPLOAD (provider dashboard) */
.photo-upload-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.photo-upload-preview {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--green-950);
  color: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.3rem;
  flex: none;
  border: 1px solid var(--line);
}
.photo-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* MI CUENTA — HERO DE PERFIL */
.profile-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 54px; border: 1px solid var(--line); }
.profile-cover { height: 200px; background: var(--green-950); position: relative; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-cover-edit {
  position: absolute; top: 14px; right: 14px; background: rgba(10, 46, 28, 0.55); color: var(--sand);
  border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius); padding: 7px 12px; font-size: 0.78rem;
  font-weight: 700; cursor: pointer;
}
.profile-hero-body { background: var(--white); padding: 18px 24px 20px; position: relative; }
.profile-avatar-wrap { position: absolute; top: -64px; left: 24px; width: 120px; height: 120px; }
.profile-avatar {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--green-950); color: var(--sand);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display);
  font-size: 2rem; border: 4px solid var(--white); box-shadow: 0 2px 10px rgba(10,30,20,0.15);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-edit {
  position: absolute; bottom: 2px; right: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--green-950);
  color: var(--sand); border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.profile-avatar-edit svg { width: 14px; height: 14px; }
.profile-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-left: 136px; flex-wrap: wrap; }
.profile-hero-name { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; margin: 0; }
.profile-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 0.86rem; margin-top: 4px; }
.profile-hero-meta .badge { font-size: 0.74rem; }
.profile-hero-actions { display: flex; gap: 8px; flex: none; }
.profile-pills { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.profile-pill {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 18px;
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 150px;
}
.profile-pill svg { width: 20px; height: 20px; color: var(--green-700); flex: none; }
.profile-pill .num { font-size: 1.2rem; font-weight: 700; color: var(--green-950); font-family: var(--font-display); line-height: 1.1; }
.profile-pill .lbl { font-size: 0.72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

/* MI CUENTA — LAYOUT DE 2 COLUMNAS */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; padding: 28px 0 36px; }
.account-sidebar { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 12px 18px; position: sticky; top: 20px; }
.account-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none;
  padding: 11px 12px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.account-nav-item svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.account-nav-item:hover { background: var(--cream); }
.account-nav-item.active { background: var(--green-950); color: var(--sand); }
.account-nav-item.active svg { color: var(--sand); }
.account-nav-item.danger { color: var(--danger); margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
.account-content { min-width: 0; }
.account-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.account-section-title h3 { margin: 0; font-size: 1.15rem; }
.account-section-title a { font-size: 0.82rem; font-weight: 700; color: var(--green-700); cursor: pointer; }
.account-two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }

/* MI CUENTA — Editar perfil, lista compacta (avatar centrado arriba + filas
   "label / valor" separadas por líneas finas, en vez de varias tarjetas con
   inputs regados por la página). */
.profile-edit-avatar-block { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 20px; text-align: center; }
.profile-edit-avatar-block .profile-edit-avatar-link { color: var(--green-700); font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.profile-edit-avatar { width: 92px; height: 92px; font-size: 1.5rem; cursor: pointer; }
.profile-edit-avatar-square { border-radius: 16px; width: 120px; height: 90px; }
.profile-edit-list { border-top: 1px solid var(--line); }
.profile-edit-row {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
.profile-edit-row > label { flex: 0 0 130px; font-weight: 600; font-size: 0.9rem; color: var(--green-950); }
.profile-edit-row input, .profile-edit-row select {
  flex: 1; min-width: 0; border: none; background: none; text-align: right;
  font-size: 0.9rem; font-family: inherit; color: var(--ink); padding: 4px 0;
}
.profile-edit-row input:focus, .profile-edit-row select:focus { outline: none; color: var(--green-950); }
.profile-edit-row-textarea { align-items: flex-start; flex-direction: column; gap: 6px; }
.profile-edit-row-textarea textarea {
  width: 100%; border: none; background: none; resize: vertical; min-height: 44px;
  font-size: 0.9rem; font-family: inherit; color: var(--ink); padding: 0; text-align: left;
}
.profile-edit-row-textarea textarea:focus { outline: none; }
.profile-edit-cover-trigger { display: flex; align-items: center; gap: 10px; margin-left: auto; cursor: pointer; color: var(--green-700); font-weight: 700; font-size: 0.88rem; }
.profile-edit-cover-thumb { width: 40px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--green-950); flex: none; }
.profile-edit-cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* COMUNIDAD — tabs + feed principal + columna de widgets. Dos columnas solo
   en compu/iPad (>=900px, ver media query abajo); en celular queda apilado
   (sin pulir todavía a propósito — primera pasada es compu/iPad). */
.community-layout { display: flex; flex-direction: column; gap: 26px; }
.community-main { min-width: 0; }
/* Mismo estilo de óvalos que .course-chip-row/.course-chip en canchas.html:
   pill blanco con borde, y se pone verde oscuro sólido cuando está
   seleccionado/activo. */
.community-tabs {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px; margin-bottom: 22px;
}
.community-tabs::-webkit-scrollbar { display: none; }
.community-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); font-weight: 700;
  font-size: 0.84rem; white-space: nowrap; cursor: pointer; font-family: inherit;
}
.community-tab:hover { color: var(--green-950); }
.community-tab.active { background: var(--green-950); color: var(--sand); border-color: var(--green-950); }
.community-course-group { margin-bottom: 26px; }
.community-course-group-title { font-weight: 700; color: var(--green-950); font-size: 0.92rem; margin-bottom: 10px; }
.community-search-input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; font-size: 0.9rem; font-family: inherit; margin-bottom: 16px;
}
.community-search-input:focus { outline: none; border-color: var(--green-700); }
.community-player-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.community-player-row:last-child { border-bottom: none; }
.community-aside { display: flex; flex-direction: column; gap: 18px; }
.community-widget {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px;
}
.community-widget h4 { margin: 0 0 10px; font-size: 0.95rem; color: var(--green-950); }
.community-widget-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.community-widget-row:last-child { border-bottom: none; }
.community-widget-rank { flex: none; width: 18px; font-weight: 700; color: var(--muted); font-size: 0.85rem; text-align: center; }
@media (min-width: 900px) {
  .community-layout { flex-direction: row; align-items: flex-start; gap: 24px; }
  .community-main { flex: 1; min-width: 0; }
  .community-aside { flex: 0 0 280px; position: sticky; top: 84px; }
}

/* ACTIVIDAD RECIENTE */
.activity-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: none; }
.activity-icon {
  width: 42px; height: 42px; border-radius: var(--radius); background: var(--green-950); color: var(--sand);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.activity-icon svg { width: 19px; height: 19px; }
.activity-info { flex: 1; min-width: 0; }
.activity-info strong { display: block; font-size: 0.92rem; }
.activity-info span { color: var(--muted); font-size: 0.78rem; }

/* LOGROS */
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; text-align: center; }
.achievement-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.achievement-icon {
  width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--green-950); color: var(--gold-light); border: 2px solid var(--green-700);
}
.achievement-icon svg { width: 26px; height: 26px; }
.achievement-badge.locked .achievement-icon { background: var(--cream); color: var(--muted); border-color: var(--line); }
.achievement-badge .lbl { font-size: 0.78rem; font-weight: 700; }
.achievement-badge.locked .lbl { color: var(--muted); }
.achievement-badge .sub { font-size: 0.68rem; color: var(--muted); }

/* PERFIL PÚBLICO — botón ⋮ (kebab, estilo IG/Playtomic) y su menú */
.profile-menu-btn {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.profile-menu-btn svg { width: 18px; height: 18px; color: var(--green-950); }
.profile-menu-overlay { display: none; position: fixed; inset: 0; z-index: 80; }
.profile-menu-overlay.open { display: block; }
.profile-menu-backdrop { position: absolute; inset: 0; background: rgba(10, 46, 28, 0.5); }
.profile-menu-panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 8px 4px calc(14px + env(safe-area-inset-bottom));
  max-height: 80vh; overflow-y: auto; box-shadow: 0 -10px 30px rgba(10, 30, 20, 0.18);
}
@media (min-width: 640px) {
  .profile-menu-panel {
    left: 50%; right: auto; bottom: 30px; transform: translateX(-50%);
    width: 380px; border-radius: var(--radius-lg); padding-bottom: 14px;
  }
}
.profile-menu-handle { width: 36px; height: 4px; background: var(--line); border-radius: 2px; margin: 6px auto 8px; }
.profile-menu-group-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 12px 16px 4px; }
.profile-menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none;
  padding: 11px 16px; cursor: pointer; font-family: inherit; text-decoration: none; color: inherit;
}
.profile-menu-row:hover { background: var(--cream); }
.profile-menu-row-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center; color: var(--green-950);
}
.profile-menu-row-icon svg { width: 17px; height: 17px; }
.profile-menu-row-body { flex: 1; min-width: 0; }
.profile-menu-row-body strong { display: block; font-size: 0.9rem; }
.profile-menu-row-body span { display: block; font-size: 0.76rem; color: var(--muted); }
.profile-menu-row-chevron { flex: none; width: 16px; height: 16px; color: var(--muted); }
.profile-menu-row.danger .profile-menu-row-icon { background: rgba(196, 68, 68, 0.1); color: var(--danger); }
.profile-menu-row.danger .profile-menu-row-body strong { color: var(--danger); }
.profile-menu-divider { height: 1px; background: var(--line); margin: 6px 0; }

/* Configuración (dashboard.html) reusa las filas .profile-menu-row de arriba
   como menú "drill-down" -- cada fila abre un .cfg-subview con su propio
   header (flecha de volver + título). */
.cfg-subview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cfg-subview-head strong { font-size: 1rem; }
.cfg-back-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--green-950); display: flex; flex: none; }
.cfg-back-btn svg { width: 20px; height: 20px; }

/* PERFIL PÚBLICO v2 — rediseño responsive estilo Twitter/X con identidad
   PlayTee. Todo en unidades fluidas (%, flex, grid, clamp(), safe-area) —
   sin anchos fijos en px ni position:absolute para el layout principal
   (la única excepción es .pf-cover, que necesita relative/absolute para
   los botones ⋮ y ← flotando sobre la foto de portada). */
.pf-page { max-width: 720px; margin: 0 auto; }
.pf-cover {
  position: relative; width: 100%; height: clamp(130px, 32vw, 190px);
  background: linear-gradient(135deg, var(--green-950), var(--green-700)); overflow: hidden;
}
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-icon-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; padding: 0;
  background: rgba(10, 30, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.28); color: var(--white);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pf-icon-btn svg { width: 20px; height: 20px; }
.pf-back { top: calc(env(safe-area-inset-top) + 12px); left: 14px; }
.pf-kebab { top: calc(env(safe-area-inset-top) + 12px); right: 14px; }

.pf-body { padding: 0 clamp(16px, 4vw, 24px) calc(28px + env(safe-area-inset-bottom)); }

.pf-avatar-row { display: flex; align-items: flex-end; gap: 16px; padding-top: 10px; }
.pf-avatar-wrap {
  flex: none; margin-top: calc(-1 * clamp(46px, 13vw, 54px));
  /* .pf-cover es position:relative, así que sin esto el navegador lo pinta
     encima de .pf-body (que es estático) sin importar el orden en el DOM,
     y la mitad de arriba del avatar queda tapada por el banner. */
  position: relative; z-index: 2;
}
.pf-avatar {
  width: clamp(96px, 26vw, 116px); height: clamp(96px, 26vw, 116px); border-radius: 50%;
  border: 4px solid var(--white); background: var(--green-950); color: var(--white); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-family: var(--font-display); font-size: clamp(1.5rem, 7vw, 2.1rem); box-shadow: 0 2px 10px rgba(10, 30, 20, 0.15);
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-header-text { flex: 1; min-width: 0; padding-bottom: 8px; }
.pf-edit-btn, .pf-follow-btn {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pf-follow-btn svg { width: 17px; height: 17px; flex: none; }
.pf-edit-btn { background: var(--white); border: 1.5px solid var(--green-700); color: var(--green-950); }
.pf-edit-btn:hover { background: var(--green-100); }
.pf-follow-btn { background: var(--green-950); border: 1.5px solid var(--green-950); color: var(--white); }
.pf-follow-btn.pf-follow-btn-ghost { background: var(--white); border-color: var(--line); color: var(--green-950); }
.pf-actions-row { margin-top: 16px; display: flex; gap: 10px; }

.pf-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-name { font-size: clamp(22px, 6vw, 26px); font-weight: 800; margin: 0; color: var(--green-950); font-family: var(--font-display); line-height: 1.2; }
.pf-verified { flex: none; width: 19px; height: 19px; color: var(--green-600); }
.pf-verified svg { width: 100%; height: 100%; display: block; }
.pf-plus-badge { flex: none; width: 19px; height: 19px; color: #D4AF37; }
.pf-plus-badge svg, .pf-plus-badge img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pf-role-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pf-role-badge {
  flex: none; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--green-100); color: var(--green-900);
}
.pf-username { color: var(--muted); font-size: clamp(14px, 3.8vw, 16px); }
.pf-identity { margin-top: 14px; }
.pf-bio { margin: 0; font-size: clamp(14px, 3.8vw, 16px); line-height: 1.4; color: var(--ink); }
.pf-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; color: var(--muted); font-size: clamp(12px, 3.2vw, 13.5px); }
.pf-meta-row span { display: inline-flex; align-items: center; gap: 4px; }
.pf-meta-row svg { width: 14px; height: 14px; flex: none; }

.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-stat { padding: 12px 4px; text-align: center; border-left: 1px solid var(--line); }
.pf-stat:first-child { border-left: none; }
.pf-stat-num { font-size: clamp(20px, 5.5vw, 24px); font-weight: 800; color: var(--green-950); font-family: var(--font-display); line-height: 1.1; }
.pf-stat-lbl { font-size: clamp(11px, 3vw, 13px); color: var(--muted); margin-top: 2px; font-weight: 600; }

.pf-handicap-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.pf-handicap-lbl { font-size: 0.86rem; color: var(--muted); font-weight: 600; }
.pf-handicap-val { font-size: 1.05rem; color: var(--green-950); font-weight: 800; font-family: var(--font-display); }

.pf-posts-section { margin-top: 24px; }
.pf-posts-title { font-size: 1rem; font-weight: 800; color: var(--green-950); font-family: var(--font-display); margin-bottom: 12px; }

.pf-suggested-section { margin-top: 24px; }
.pf-suggested-title { font-size: 1rem; font-weight: 800; color: var(--green-950); font-family: var(--font-display); margin-bottom: 12px; }
.pf-suggested-scroll {
  display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: none;
}
.pf-suggested-scroll::-webkit-scrollbar { display: none; }
.pf-suggested-card {
  flex: none; width: 128px; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 10px; text-align: center; background: #fff;
}
.pf-suggested-avatar {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-950); color: #fff; font-weight: 800; font-size: 1.1rem;
}
.pf-suggested-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-suggested-name {
  font-size: 0.82rem; font-weight: 700; color: var(--green-950); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px;
}
.pf-suggested-add-btn {
  width: 100%; padding: 7px 0; border-radius: 999px; border: 1.5px solid var(--green-950);
  background: var(--green-950); color: #fff; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.pf-suggested-add-btn.pf-suggested-added { background: #fff; color: var(--green-950); }
@media (max-width: 520px) {
  .pf-suggested-card { width: 112px; padding: 12px 8px; }
  .pf-suggested-avatar { width: 48px; height: 48px; }
}

.pf-post-composer { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 16px; background: #fff; }
.pf-post-composer textarea { width: 100%; border: none; resize: vertical; font-family: inherit; font-size: .95rem; color: var(--green-950); outline: none; min-height: 40px; }
.pf-post-composer #pfPostPreviewBox { position: relative; display: inline-block; margin-top: 8px; }
.pf-post-composer #pfPostPreview { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.pf-post-composer #pfPostRemovePhoto {
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--green-950); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pf-post-composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pf-post-photo-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--muted);
  cursor: pointer; padding: 10px 6px; margin: -10px -6px; min-height: 44px; box-sizing: border-box;
}
.pf-post-photo-btn svg { width: 18px; height: 18px; }
.pf-post-composer-actions #pfPostSubmit { min-height: 44px; }

.pf-post-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; background: #fff; }
.pf-post-head { display: flex; align-items: center; gap: 10px; }
.pf-post-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--green-100); color: var(--green-950); font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.pf-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-post-name { font-weight: 700; font-size: .88rem; color: var(--green-950); }
.pf-post-date { font-size: .76rem; color: var(--muted); }
.pf-post-delete {
  margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pf-post-delete svg { width: 18px; height: 18px; }
.pf-post-text { margin: 10px 0 0; font-size: .92rem; color: var(--green-950); white-space: pre-wrap; }
.pf-post-media { margin-top: 10px; border-radius: 12px; overflow: hidden; }
.pf-post-media img { width: 100%; max-height: 420px; object-fit: cover; display: block; }

.pf-tabs { display: flex; margin-top: 18px; border-bottom: 1px solid var(--line); }
.pf-tab {
  flex: 1; text-align: center; background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0; height: clamp(52px, 13vw, 56px); display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pf-tab.active { color: var(--green-950); border-bottom-color: var(--green-600); }
.pf-tab-panel { display: none; padding-top: 16px; }
.pf-tab-panel.active { display: block; }

.pf-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-top: 16px; overflow: hidden; }
.pf-handicap-card { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: clamp(100px, 26vw, 112px); }
.pf-handicap-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--green-950); color: var(--lime-accent);
  display: flex; align-items: center; justify-content: center;
}
.pf-handicap-icon svg { width: 24px; height: 24px; }
.pf-handicap-body { flex: 1; min-width: 0; }
.pf-handicap-label { font-size: 0.76rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.pf-handicap-value { font-size: 1.55rem; font-weight: 800; color: var(--green-950); font-family: var(--font-display); line-height: 1.15; }
.pf-handicap-sub { font-size: 0.76rem; color: var(--muted); margin-top: 1px; }
.pf-handicap-link { flex: none; font-size: 0.84rem; font-weight: 700; color: var(--green-700); background: none; border: none; cursor: pointer; font-family: inherit; }

/* Tarjeta compacta de perfil en Resumen (link al perfil público, sin duplicar el hero).
   Dos filas: foto+nombre arriba, botones abajo a lo ancho — así el nombre/usuario
   nunca queda tapado por los botones aunque el nombre sea largo. */
.pf-resumen-card { display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 18px; }
.pf-resumen-card-top { display: flex; align-items: center; gap: 14px; }
.pf-resumen-card-info { flex: 1; min-width: 0; }
.pf-resumen-card-info strong { display: block; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-resumen-card-info .card-meta { display: block; font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-resumen-card-actions { display: flex; gap: 8px; }
.pf-resumen-card-actions .btn { flex: 1; text-align: center; }

/* FAVORITOS — fila compacta para el resumen */
.favorite-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.favorite-row:last-child { border-bottom: none; }
.favorite-row .card-media { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.favorite-row .fav-info { flex: 1; min-width: 0; }
.favorite-row .fav-info strong { display: block; font-size: 0.88rem; }
.favorite-row .fav-info span { font-size: 0.76rem; color: var(--muted); }

@media (max-width: 860px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .account-nav-item { white-space: nowrap; width: auto; }
  .account-nav-item.danger { border-top: none; margin-top: 0; padding-top: 11px; }
  .account-two-col { grid-template-columns: 1fr; }
  .profile-avatar-wrap { position: static; margin-bottom: -50px; }
  .profile-hero-top { margin-left: 0; margin-top: 60px; }
}

/* Barra de navegación inferior estilo app — solo en pantallas angostas */
.account-bottom-nav { display: none; }
.account-bottom-sheet { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  /* El botón flotante de soporte (fixed, bottom:24px) tapaba/quedaba tapado
     por el "+" de account-bottom-nav en dashboard.html (esa página no usa
     site-bottom-nav, así que nunca recibía el offset de abajo). Se sube lo
     mismo que sube .account-content (72px) para despejarlo. */
  body.has-account-bottom-nav .support-widget-btn { bottom: calc(72px + 20px + env(safe-area-inset-bottom)); }
  body.has-account-bottom-nav .support-widget-panel { bottom: calc(72px + 88px + env(safe-area-inset-bottom)); }

  .account-sidebar { display: none; }
  .account-content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .account-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: var(--kb-offset, 0px); z-index: 60;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 16px rgba(10, 30, 20, 0.06);
  }
  .account-bottom-nav .bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px; border-radius: var(--radius); font-size: 0.66rem; font-weight: 600; position: relative;
  }
  .account-bottom-nav .bottom-nav-item svg { width: 20px; height: 20px; }
  .account-bottom-nav .bottom-nav-item.active { background: none; color: var(--green-700); }
  .account-bottom-nav .bottom-nav-item.active svg { color: var(--green-700); }
  .account-bottom-nav .bottom-nav-fab { margin-top: -16px; font-weight: 700; color: var(--green-950); }
  .account-bottom-nav .bottom-nav-fab svg {
    width: 20px; height: 20px; padding: 12px; border-radius: 50%; box-sizing: content-box;
    background: var(--green-950); color: var(--white); box-shadow: 0 6px 14px rgba(10, 46, 28, 0.4);
  }
  .account-bottom-nav [data-badge] {
    position: absolute; top: 2px; right: calc(50% - 22px); margin-left: 0 !important;
    min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem;
  }
  .account-bottom-sheet { position: fixed; inset: 0; z-index: 70; }
  .account-bottom-sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 46, 28, 0.5); }
  .account-bottom-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0; background: var(--white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    max-height: 70vh; overflow-y: auto; box-shadow: 0 -10px 30px rgba(10, 30, 20, 0.18);
  }
  .account-bottom-sheet-panel .account-nav-item { width: 100%; }
}

/* MENSAJES — CHAT */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; min-height: 480px; background: var(--white); }
.chat-threads { border-right: 1px solid var(--line); overflow-y: auto; max-height: 560px; }
.chat-thread-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.chat-thread-item:hover { background: var(--cream); }
.chat-thread-item.active { background: var(--green-950); color: var(--sand); }
.chat-thread-item.active .card-meta { color: rgba(255,255,255,0.7); }
.chat-window { display: flex; flex-direction: column; min-height: 480px; }
.chat-window .empty-state { margin: auto; }
.chat-header { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; }
.chat-bubble { max-width: 70%; padding: 9px 13px; border-radius: var(--radius-lg); font-size: 0.88rem; line-height: 1.4; }
.chat-bubble.theirs { align-self: flex-start; background: var(--cream); color: var(--ink); }
.chat-bubble.mine { align-self: flex-end; background: var(--green-950); color: var(--sand); }
.chat-send-row { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.chat-send-row input { flex: 1; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.9rem; font-family: inherit; background: var(--sand); }
.chat-send-row input:focus { outline: none; border-color: var(--green-600); background: white; }

/* ==================== CHAT FLOTANTE DE SOPORTE ====================
   Botón redondo fijo (abajo a la derecha) en cualquier página logueada
   (menos support.html, que ya tiene el chat completo a página entera) que
   abre un panel chico con el mismo chat -- sin salir de la página. Reusa
   las burbujas .chat-bubble de arriba. Ver renderSupportWidget() en app.js. */
.support-widget-btn {
  position: fixed; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green-950); color: var(--white); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(10, 46, 28, 0.35); z-index: 70;
  padding: 0; overflow: hidden;
}
.support-widget-btn svg { width: 26px; height: 26px; }
.support-widget-mascot { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Cuando hay barra de tabs fija abajo (.site-bottom-nav, 94px alta), el
   botón sube para no tapar/quedar tapado por ella. */
body.has-site-bottom-nav .support-widget-btn { bottom: calc(94px + 24px + env(safe-area-inset-bottom)); }

.support-widget-panel {
  display: none; flex-direction: column; position: fixed; right: 20px;
  bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 71;
  width: min(360px, calc(100vw - 32px)); height: min(480px, calc(100vh - 170px));
  background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(10, 30, 20, 0.25); overflow: hidden;
}
.support-widget-panel.open { display: flex; }
body.has-site-bottom-nav .support-widget-panel { bottom: calc(162px + env(safe-area-inset-bottom)); }
.support-widget-header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--green-950); color: var(--white);
}
.support-widget-close { background: none; border: none; color: var(--white); cursor: pointer; display: flex; padding: 4px; opacity: 0.85; }
.support-widget-close svg { width: 18px; height: 18px; }
.support-widget-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.support-widget-form { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.support-widget-form input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px;
  font-size: 0.88rem; font-family: inherit; background: var(--sand);
}
.support-widget-form input:focus { outline: none; border-color: var(--green-600); background: var(--white); }
.support-widget-form button { border-radius: 999px; padding: 10px 16px; flex: none; }
@media (max-width: 640px) {
  .support-widget-btn { width: 52px; height: 52px; right: 16px; }
  .support-widget-panel { right: 16px; left: 16px; width: auto; }
}

.account-nav-item [data-badge] { padding: 1px 7px; font-size: 0.66rem; }
@media (max-width: 700px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-threads { max-height: 200px; border-right: none; border-bottom: 1px solid var(--line); }
}

/* Botón ícono compacto (chatear alado del nombre, borrar una nota, etc.) */
.chat-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; background: none;
  color: var(--green-700); cursor: pointer; border-radius: 50%; vertical-align: middle;
  font-size: 1.15rem; line-height: 1;
}
.chat-icon-btn:hover { background: var(--cream); }

/* Pestañas del panel de admin que solo tienen sentido en escritorio (ej.
   Mensajes: en celular el staff de cancha no suele administrar desde ahí). */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .admin-tab-desktop-only { display: none; }
}

/* Panel de admin en celular: el panel completo (tabs, horarios, reservas,
   etc.) requiere una pantalla grande para ser usable, así que en celular
   se reemplaza por una de dos vistas:
   - Rol "carrito": vista simplificada de pedidos con botón grande de
     "pasar a la siguiente etapa" (ver #mobileCarritoView en admin.html).
   - Cualquier otro rol: aviso de que el panel completo no está disponible
     en celular.
   body.role-carrito / body.role-other-mobile los activa admin.html según
   el rol de la cancha seleccionada. */
#mobileCarritoView, #mobileNonCarritoNotice { display: none; }
@media (max-width: 640px) {
  #app.admin-full-ui { display: none !important; }
  body.role-carrito #mobileCarritoView { display: block; }
  body.role-other-mobile #mobileNonCarritoNotice { display: block; }
}

.carrito-order-card { margin-bottom: 16px; }
.carrito-order-card .carrito-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.carrito-order-card .order-status-steps { margin: 14px 0 10px; }
.carrito-order-card .carrito-next-btn { width: 100%; padding: 14px; font-size: 1rem; margin-top: 10px; }
.carrito-order-card .carrito-cancel-btn { width: 100%; margin-top: 8px; }
.carrito-order-card .carrito-items { margin: 10px 0; font-size: 0.9rem; color: var(--muted); }
.carrito-order-card .carrito-chat-btn { width: 100%; margin-top: 8px; }
.carrito-chat-box { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.carrito-chat-box .chat-messages { max-height: 260px; padding: 12px; }
.carrito-chat-box .chat-send-row { padding: 10px 12px; }

/* Tarjetas de producto en la pestaña "Menú" de la vista mobile del rol
   carrito (ver #mobileCarritoMenu en admin.html) — mismo lenguaje visual que
   .carrito-order-card, con un botón grande y explícito para marcar un
   producto agotado/disponible de nuevo. */
.carrito-menu-item { margin-bottom: 16px; }
.carrito-menu-item .carrito-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.carrito-menu-item .carrito-items { margin: 8px 0; font-size: 0.9rem; color: var(--muted); }
.carrito-menu-item .carrito-next-btn { width: 100%; padding: 14px; font-size: 1rem; margin-top: 10px; }
.carrito-menu-item .carrito-cancel-btn { width: 100%; margin-top: 8px; }

/* ==========================================================================
   Dashboard "lobby" de escritorio / iPad (index.html, usuarios logueados)
   Solo se activa en pantallas >= 768px vía body.dash-user — en celular la
   página de marketing normal se mantiene intacta, y en pantallas anchas sin
   sesión también se mantiene intacta. Sidebar fija a la izquierda + contenido
   que se estira hasta el borde derecho de la ventana (sin tope de ancho).
   ========================================================================== */
.dash-shell { display: none; }
@media (min-width: 768px) {
  body.dash-user #nav { display: none; }
  body.dash-user #marketingHome { display: none; }
  body.dash-user .dash-shell { display: flex; align-items: stretch; height: 100vh; overflow: hidden; }
}

/* ==========================================================================
   Mismo shell del lobby, reutilizado en el resto de páginas (canchas, clases,
   caddies, reservas, mi cuenta, liquidaciones, etc.) vía PlayTee.renderNav().
   A diferencia de index.html, acá NO se mueve el contenido de la página en
   el DOM — el sidebar/topbar se insertan como hermanos fijos de #nav y el
   <body> recibe padding-left, así el layout mobile de cada página queda
   intacto (el sidebar/topbar fijo solo se activa a partir de 768px). Se
   excluyen admin.html y platform.html a propósito (ver DASH_SHELL_EXCLUDED_PAGES
   en app.js) — el usuario pidió no tocar el menú admin en este rediseño. */
.dash-sidebar.dash-fixed-sidebar { display: none; }
.dash-topbar.dash-fixed-topbar { display: none; }
@media (min-width: 768px) {
  body.dash-shell-page { padding-left: 220px; background: var(--cream); }
  body.dash-shell-page #nav { display: none; }
  body.dash-shell-page #footer { display: none; }
  body.dash-shell-page .dash-fixed-sidebar {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 60;
  }
  body.dash-shell-page .dash-fixed-topbar {
    display: flex; position: sticky; top: 0; z-index: 55;
  }
  body.dash-shell-page .container {
    max-width: none; margin: 0; padding: 24px 28px 60px;
  }
  /* .booking-card/.account-sidebar se pegan a top:18-20px asumiendo que no hay
     nada más pegado arriba. En páginas con el shell, el topbar fijo (~64px)
     también está sticky top:0, así que sin este ajuste el panel queda tapado
     por el topbar al hacer scroll. */
  body.dash-shell-page .booking-card { top: 82px; }
  body.dash-shell-page .account-sidebar { top: 84px; }
}
@media (min-width: 768px) and (max-width: 1179px) {
  body.dash-shell-page { padding-left: 190px; }
  body.dash-shell-page .dash-fixed-sidebar { width: 190px; }
}

.dash-sidebar {
  flex: 0 0 220px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--green-950);
  color: var(--sand);
  padding: 22px 16px;
  overflow-y: auto;
}
@media (max-width: 1179px) { .dash-sidebar { flex-basis: 190px; } }

.dash-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--sand);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
}
.dash-brand .brand-mark { width: 20px; height: 30px; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.dash-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  color: rgba(250, 247, 240, 0.68);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.87rem;
}
.dash-nav-link svg { width: 17px; height: 17px; flex: none; }
.dash-nav-link:hover { background: rgba(250, 247, 240, 0.08); color: var(--sand); }
.dash-nav-link.active { background: rgba(250, 247, 240, 0.14); color: var(--sand); }

.dash-sidebar-premium {
  background: rgba(250, 247, 240, 0.07);
  border: 1px solid rgba(250, 247, 240, 0.15);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.dash-sidebar-premium strong { display: block; font-size: 0.82rem; margin-bottom: 2px; }
.dash-sidebar-premium p { margin: 0 0 10px; font-size: 0.76rem; color: rgba(250, 247, 240, 0.7); }
.dash-sidebar-premium button {
  width: 100%; background: var(--sand); color: var(--green-950); border: none;
  border-radius: var(--radius); padding: 7px; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.dash-sidebar-logout {
  background: none; border: none; padding: 4px 6px; color: rgba(250, 247, 240, 0.55);
  font-size: 0.76rem; text-align: left; cursor: pointer; font-family: inherit;
}
.dash-sidebar-logout:hover { color: var(--sand); }

.dash-content { flex: 1 1 auto; min-width: 0; height: 100vh; overflow-y: auto; background: var(--cream); }

.dash-topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--white);
  position: sticky; top: 0; z-index: 5;
}
.dash-search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px;
  background: var(--cream); border-radius: var(--radius); padding: 9px 14px; color: var(--muted);
}
.dash-search svg { width: 16px; height: 16px; flex: none; }
.dash-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 0.87rem; font-family: inherit; color: var(--ink); }
.dash-topbar-spacer { flex: 1; }
.dash-topbar-icons { display: flex; align-items: center; gap: 8px; }
.dash-icon-btn {
  background: none; border: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
  text-decoration: none;
}
.dash-icon-btn svg { width: 19px; height: 19px; }
.dash-icon-btn:hover { background: var(--green-100); }
.dash-user-chip {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit;
  padding: 4px 8px 4px 4px; border-radius: 999px;
}
.dash-user-chip:hover { background: var(--green-100); }
.dash-user-chip-info { display: flex; flex-direction: column; line-height: 1.25; }
.dash-user-chip-info strong { font-size: 0.83rem; }
.dash-user-chip-info span { font-size: 0.72rem; color: var(--muted); }

.dash-body { padding: 24px 28px 60px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 1179px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dash-greeting h1 { margin: 0 0 2px; font-family: var(--font-display); font-size: 1.6rem; color: var(--green-950); }
.dash-greeting p { margin: 0 0 16px; color: var(--muted); }

.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; }
.dash-section-head h3 { margin: 0; font-size: 1rem; color: var(--green-950); }
.dash-section-head a { font-size: 0.82rem; color: var(--green-700); font-weight: 600; text-decoration: none; }
.dash-section-head a:hover { text-decoration: underline; }

.dash-top-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
@media (max-width: 900px) { .dash-top-row { grid-template-columns: 1fr; } }

.dash-next-card {
  display: block;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-next-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 46, 28, 0.14); }
/* La tarjeta "próxima reserva" del lobby es solo la foto de la cancha en
   rectangular, con la info superpuesta abajo (label + nombre + fecha +
   botón) sobre un scrim oscuro — no hay franja separada debajo de la foto. */
.dash-next-media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 220px; }
.dash-next-media svg, .dash-next-media .card-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-next-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,46,28,0) 40%, rgba(6,26,16,0.82) 100%);
  pointer-events: none;
}
.dash-next-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  color: var(--white);
}
.dash-next-label { font-size: 0.68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.dash-next-card .dash-next-label {
  align-self: flex-start; color: var(--green-950); background: var(--gold);
  padding: 2px 8px; border-radius: 999px; margin-bottom: 4px;
}
.dash-next-overlay strong { font-size: 1.08rem; color: var(--white); }
.dash-next-overlay .dash-next-meta { font-size: 0.8rem; color: rgba(250,247,240,0.88); }
.dash-next-btn.btn {
  align-self: flex-start; margin-top: 8px;
  background: rgba(250,247,240,0.14); color: var(--white); border: 1px solid rgba(250,247,240,0.55);
  backdrop-filter: blur(2px);
}
.dash-next-btn.btn:hover { background: rgba(250,247,240,0.24); }
.dash-next-card.dash-next-empty {
  display: flex; flex-direction: column; padding: 20px; text-align: left;
  aspect-ratio: auto; max-height: none;
}
.dash-next-card.dash-next-empty p { margin: 2px 0 10px; color: var(--muted); font-size: 0.85rem; }

.dash-quick-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px;
}
.dash-quick-card .dash-next-label { display: block; margin-bottom: 10px; }
.dash-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-quick-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--cream); border-radius: var(--radius); padding: 10px 6px;
  text-decoration: none; color: var(--ink); font-size: 0.72rem; font-weight: 600;
  text-align: center; transition: background 0.15s;
}
.dash-quick-tile svg { width: 18px; height: 18px; color: var(--green-700); }
.dash-quick-tile:hover { background: var(--green-100); }

.dash-mini-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1179px) { .dash-mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-mini-card {
  display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.dash-mini-card:hover { border-color: var(--green-600); transform: translateY(-2px); }
.dash-mini-media { height: 92px; position: relative; }
.dash-mini-media svg, .dash-mini-media .card-photo { width: 100%; height: 100%; display: block; }
.dash-mini-media .fav-btn { position: absolute; top: 6px; right: 6px; }
.dash-mini-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.dash-mini-body strong { font-size: 0.87rem; }
.dash-mini-meta { color: var(--muted); font-size: 0.78rem; }
.dash-mini-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.dash-mini-price { font-weight: 700; color: var(--green-700); font-size: 0.85rem; }
.dash-mini-rating { display: flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.dash-mini-rating svg { width: 13px; height: 13px; color: var(--gold); }

.dash-people-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .dash-people-cols { grid-template-columns: 1fr; } }
.dash-people-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1179px) { .dash-people-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-person-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  text-decoration: none; color: inherit; padding: 12px 8px; border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--line);
}
.dash-person-item:hover { border-color: var(--green-600); }
.dash-person-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.dash-person-avatar svg, .dash-person-avatar .card-photo { width: 100%; height: 100%; object-fit: cover; }
.dash-person-info strong { font-size: 0.8rem; display: block; }
.dash-person-price { font-size: 0.74rem; color: var(--green-700); font-weight: 700; }

.dash-history-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: 0.83rem; }
.dash-history-table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dash-history-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dash-history-table tr:last-child td { border-bottom: none; }
.dash-history-table tr:hover td { background: var(--cream); }
.dash-status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--green-100); color: var(--green-700); }
.dash-status-pill.pending { background: var(--gold-light); color: var(--gold); }

.dash-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-widget { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; }
.dash-widget-dark { background: var(--green-950); color: var(--sand); border-radius: var(--radius-lg); padding: 18px; }
.dash-widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash-widget-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.dash-widget-dark .dash-widget-label { color: rgba(250, 247, 240, 0.65); }
.dash-widget-link { font-size: 0.78rem; color: var(--green-700); text-decoration: none; font-weight: 600; }
.dash-widget-link:hover { text-decoration: underline; }

.dash-weather-main { display: flex; align-items: center; gap: 12px; }
.dash-weather-main svg { width: 44px; height: 44px; flex: none; color: var(--gold); }
.dash-weather-temp { font-family: var(--font-display); font-size: 2rem; color: var(--ink); line-height: 1; }
.dash-weather-cond { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.dash-weather-stats { display: flex; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dash-weather-stat { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.dash-weather-stat svg { width: 14px; height: 14px; }

/* Torneo destacado: antes era el mismo molde que cualquier promo-card de IA
   (círculo con ícono + eyebrow + título) -- ahora es una foto real con un
   "stub" de entrada/ticket superpuesto (día + mes, como un afiche de evento
   real impreso), para que no se sienta como una plantilla genérica. */
#dashTourney.dash-widget-dark { padding: 0; overflow: hidden; }
#dashTourney .dash-widget-head { padding: 16px 18px 0; margin-bottom: 10px; }
.dash-tourney-card { position: relative; }
.dash-tourney-photo {
  height: 92px; background-size: cover; background-position: center 65%;
  filter: saturate(1.05);
}
.dash-event-stub {
  position: absolute; top: 10px; right: 16px; background: var(--sand); color: var(--green-950);
  border-radius: 6px; padding: 5px 10px; text-align: center; line-height: 1.05;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25); transform: rotate(2deg);
}
.dash-event-stub-day { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.dash-event-stub-mon { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.dash-tourney-copy { padding: 12px 18px 18px; }
.dash-widget-dark strong.dash-tourney-name { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.dash-widget-dark .dash-tourney-meta { font-size: 0.8rem; color: rgba(250, 247, 240, 0.75); margin-bottom: 2px; }
.dash-tourney-slots { color: var(--gold-light) !important; }
.dash-widget-dark .btn-light { display: inline-block; margin-top: 10px; background: var(--sand); color: var(--green-950); border: none; border-radius: var(--radius); padding: 8px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer; text-decoration: none; font-family: inherit; }

.dash-stats-list { display: flex; flex-direction: column; gap: 10px; }
.dash-stats-list .row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
.dash-stats-list .row .label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.dash-stats-list .row .label svg { width: 15px; height: 15px; color: var(--green-700); }

.dash-notif-list { display: flex; flex-direction: column; gap: 12px; }
.dash-notif-item { display: flex; align-items: flex-start; gap: 10px; }
.dash-notif-icon {
  width: 32px; height: 32px; border-radius: 50%; background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.dash-notif-icon svg { width: 16px; height: 16px; }
.dash-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-notif-body strong { font-size: 0.85rem; color: var(--ink); }
.dash-stats-list .row .value { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 5px; }
.dash-fav-course-thumb { width: 22px; height: 22px; border-radius: 5px; overflow: hidden; }
.dash-fav-course-thumb svg { width: 100%; height: 100%; }
.dash-widget .btn-block { display: block; width: 100%; text-align: center; margin-top: 12px; }

/* Banner "Marketplace" del aside del dashboard de escritorio -- antes era
   el mismo molde de insignia-circular + eyebrow que el banner de tournament
   (y que medio internet genera con IA). Ahora, igual que el de Torneo,
   es una foto real (equipo de golf) con el texto superpuesto abajo, para
   que las dos tarjetas se sientan hechas a mano y no clonadas entre sí. */
#dashPremium.dash-widget-dark { padding: 0; overflow: hidden; }
#dashPremium .dash-widget-head { padding: 16px 18px 0; margin-bottom: 10px; }
.dash-market-card { position: relative; }
.dash-market-photo {
  height: 92px; background-size: cover; background-position: center 55%;
  filter: saturate(1.05);
}
.dash-market-copy { padding: 12px 18px 18px; }
.dash-widget-dark strong.dash-premium-title {
  display: block; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2;
  font-weight: 600; color: var(--sand);
}
.dash-widget-dark .dash-premium-desc {
  margin: 4px 0 0; font-size: 0.8rem; line-height: 1.4;
  color: rgba(250, 247, 240, 0.82);
}
.dash-premium-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; padding: 9px 18px; min-height: 36px;
  background: var(--sand); color: var(--green-950);
  border-radius: 999px; font-weight: 700; font-size: 0.82rem;
  text-decoration: none;
}
.dash-premium-btn:hover, .dash-premium-btn:active { background: var(--gold-light); }

/* Páginas legales (terminos.html, privacidad.html) — texto largo, sin
   layout de app, pensadas para colgar como URL propia (Apple/Google piden
   esto para la ficha de la app, no aceptan un PDF adjunto). */
.legal-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.legal-page h1 { font-size: 1.7rem; margin: 0 0 6px; }
.legal-page .legal-updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 32px; }
.legal-page h2 { font-size: 1.15rem; margin: 32px 0 10px; }
.legal-page p, .legal-page li { color: var(--muted); line-height: 1.7; }
.legal-page ul { margin: 8px 0; padding-left: 20px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--green-700); text-decoration: underline; }
.legal-page .legal-notice {
  background: var(--cream); border-radius: var(--radius-lg); padding: 14px 16px;
  font-size: 0.85rem; color: var(--muted); margin-bottom: 32px;
}

/* =====================================================================
   PANTALLAS DE ENTRADA EN BLANCO (pedido: "la animación del inicio y la
   pestaña de después -- iniciar sesión / crear cuenta -- con fondo blanco,
   y la P de la animación verde"). Antes eran oscuras (#0c1210); estas
   reglas van al FINAL del archivo a propósito para pisar las de arriba sin
   tener que tocarlas una por una. Logo en el verde oscuro de la marca
   (img/logo-glyph-dark.png, --green-950). El fondo blanco además coincide con el
   backgroundColor nativo de Capacitor (#ffffff), así no hay corte de color
   entre la animación y la pantalla siguiente.
   ===================================================================== */
#appSplash { background: #ffffff; }
.app-splash-bar-track { background: rgba(18,36,26,.10); }
.app-splash-bar-fill { background: var(--green-950); }
.app-splash-loader-label { color: rgba(18,36,26,.5); }

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  /* Bienvenida */
  body.welcome-page .welcome-mobile { background: #ffffff; color: #12241a; }
  .welcome-mobile-fade { background: radial-gradient(circle at 50% 30%, rgba(45,122,77,.08), transparent 60%); }
  .welcome-mobile-btn-primary { background: var(--green-950); color: #ffffff; }
  .welcome-mobile-btn-ghost { background: #ffffff; color: var(--green-950); border: 1px solid rgba(18,36,26,.18); }
  .welcome-mobile-divider { color: rgba(18,36,26,.45); }
  .welcome-mobile-divider::before, .welcome-mobile-divider::after { background: rgba(18,36,26,.12); }
  .welcome-mobile-social-btn { background: #ffffff; border: 1px solid rgba(18,36,26,.18); color: #12241a; }
  .welcome-mobile-social-btn:hover { border-color: var(--green-950); }
  .signin-mobile-pty { color: var(--green-950); }

  /* Iniciar sesión */
  body.login-page .signin-mobile { background: #ffffff; color: #12241a; }
  body.native-app .signin-mobile-fade,
  .signin-mobile-fade { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.95) 75%, #ffffff 100%); }
  .signin-mobile-sub { color: rgba(18,36,26,.65); }
  /* Baja el logo para que no quede debajo del botón "atrás" (arriba a la izq.). */
  .signin-mobile-header { padding-top: calc(66px + env(safe-area-inset-top)); }
  .signin-mobile-forgot-row a { color: var(--green-950); }
  .signin-mobile-fields input { color: #12241a; background: #f6f7f5; border: 1px solid rgba(18,36,26,.14); }
  .signin-mobile-fields input::placeholder { color: rgba(18,36,26,.4); }
  .signin-mobile-msg-error { color: #b42318; background: #fdecec; border-color: rgba(180,35,24,.25); }
  .signin-mobile-submit { background: var(--green-950); color: #ffffff; }
  .signin-mobile-submit:disabled { background: #5c6e63; }
  .signin-mobile-mascot { filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
  .signin-mobile-divider { color: rgba(18,36,26,.45); }
  .signin-mobile-divider span { background: rgba(18,36,26,.12); }
  .signin-mobile-oauth button { color: #12241a; background: #ffffff; border: 1px solid rgba(18,36,26,.18); }
  .signin-mobile-terms { color: rgba(18,36,26,.7); }
  .signin-mobile-terms input { accent-color: var(--green-950); }
  .signin-mobile-terms a, .signin-mobile-signup a { color: var(--green-950); }
  .signin-mobile-signup { color: rgba(18,36,26,.6); }

  /* Crear cuenta */
  body.register-page { background: #ffffff; }
  .register-hero-mobile { color: #12241a; }
  .register-hero-mobile-fade { background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.6) 60%, #ffffff 100%); }
  body.register-page .form-card { background: #ffffff; border-color: transparent; color: #12241a; }
  body.register-page .auth-title { color: #12241a; }
  body.register-page .auth-subtitle { color: rgba(18,36,26,.6); }
  body.register-page .field label { color: #12241a; }
  body.register-page .field input,
  body.register-page .field select,
  body.register-page .field textarea { background: #f6f7f5; border-color: rgba(18,36,26,.14); color: #12241a; }
  body.register-page .field input::placeholder,
  body.register-page .field textarea::placeholder { color: rgba(18,36,26,.4); }
  body.register-page .btn-social { background: #ffffff; border-color: rgba(18,36,26,.18); color: #12241a; }
  body.register-page .auth-divider { color: rgba(18,36,26,.45); }
  body.register-page .auth-divider::before, body.register-page .auth-divider::after { background: rgba(18,36,26,.12); }
  body.register-page .btn-primary { background: var(--green-950); color: #ffffff; border-color: var(--green-950); }
  body.register-page .terms-check label { color: rgba(18,36,26,.7); }
  body.register-page .terms-check label a { color: var(--green-950); }
  body.register-page .card-meta { color: rgba(18,36,26,.5); }
  body.register-page > p, body.register-page > p a,
  body.register-page .form-card > p, body.register-page .form-card > p a { color: rgba(18,36,26,.6); }
  body.register-page .form-card > p a { color: var(--green-950); }

  /* Botón "atrás": ahora sobre fondo claro */
  body.welcome-page .auth-back-btn,
  body.login-page .signin-mobile .auth-back-btn,
  body.register-page .register-hero-mobile .auth-back-btn { background: rgba(18,36,26,.08); color: #12241a; }
}

/* PlayTee: panel de jugador y navegación compacta. Marketing y móvil conservan su layout. */
@media (min-width: 768px) {
  body.dash-user { overflow:hidden; }
  body.dash-user #footer { display:none; }
  .dash-sidebar { flex-basis:220px; padding:28px 16px 18px; gap:28px; background:#0c3022; }
  body.dash-shell-page { padding-left:220px; }
  body.dash-shell-page .dash-fixed-sidebar { width:220px; }
  .dash-brand { font-size:1.5rem; gap:4px; }
  .dash-nav { gap:4px; }
  .dash-nav-link { font-weight:500; padding:11px 12px; border-radius:9px; }
  .dash-nav-link.active { background:#294b3b; }
  .dash-nav-heading { padding:18px 12px 5px; font-size:.62rem; text-transform:uppercase; letter-spacing:.13em; color:#a7bdaf; }
  .dash-sidebar-footer { display:flex; align-items:center; gap:8px; border-top:1px solid #ffffff20; padding-top:18px; }
  .dash-sidebar-profile { display:flex; gap:10px; align-items:center; flex:1; min-width:0; color:var(--sand); text-decoration:none; }
  .dash-sidebar-profile strong { font-size:.82rem; display:block; }
  .dash-sidebar-profile small { display:block; color:#b0c2b7; font-size:.72rem; }
  .dash-sidebar-profile .nav-avatar { width:34px; height:34px; flex:none; }
  .dash-collapse-btn { border:1px solid #ffffff30; border-radius:8px; background:transparent; color:var(--sand); font-size:24px; width:28px; height:32px; cursor:pointer; }
  .dash-collapse-btn:hover { background:#ffffff15; }
  .dash-body { padding:32px 32px 60px; }
  .dash-content { background:#f7f6f0; }
  .dash-grid { grid-template-columns:minmax(0,1fr) 270px; gap:26px; }
  .dash-main { gap:14px; }
  .dash-greeting h1 { font-size:clamp(1.6rem,2vw,2rem); margin:8px 0; letter-spacing:-.025em; }
  .dash-greeting p { font-size:.9rem; margin:0 0 10px; }
  .dash-mini-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .dash-mini-media { height:145px; }
  .dash-mini-media .card-photo { object-fit:cover; }
  .dash-mini-body { padding:16px; gap:7px; }
  .dash-mini-body strong { font-size:.9rem; min-height:2.5em; }
  .dash-mini-price { font-size:1rem; }
  .dash-card-action { display:flex; justify-content:space-between; font-size:.75rem; font-weight:600; color:var(--green-700); border-top:1px solid var(--line); padding-top:12px; margin-top:6px; }
  .dash-section-head { margin:14px 0 0; }
  .dash-section-head h3 { font-size:1.2rem; }
  .dash-aside { padding-top:6px; }
  .dash-widget { padding:20px; }
  .dash-notif-list { max-height:260px; overflow:auto; }
  body.dash-menu-collapsed .dash-sidebar { flex-basis:76px; padding:28px 12px 18px; align-items:center; }
  body.dash-menu-collapsed .dash-fixed-sidebar { width:76px; }
  body.dash-menu-collapsed.dash-shell-page { padding-left:76px; }
  body.dash-menu-collapsed .dash-brand { font-size:0; gap:0; }
  body.dash-menu-collapsed .dash-brand::before { content:'P'; font-size:1.6rem; }
  body.dash-menu-collapsed .dash-nav-link span, body.dash-menu-collapsed .dash-nav-heading, body.dash-menu-collapsed .dash-sidebar-profile span { display:none; }
  body.dash-menu-collapsed .dash-nav { width:100%; }
  body.dash-menu-collapsed .dash-nav-link { justify-content:center; padding:12px; }
  body.dash-menu-collapsed .dash-sidebar-footer { flex-direction:column; }
  body.dash-menu-collapsed .dash-sidebar-logout { font-size:.6rem; padding:4px 0; text-align:center; }
  .dash-collapse-btn:focus-visible, .dash-nav-link:focus-visible, .dash-sidebar-profile:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
}
@media (min-width:768px) and (max-width:1199px) {
  .dash-grid { grid-template-columns:1fr; }
  .dash-aside { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (min-width:768px) and (max-width:950px) {
  .dash-mini-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dash-body { padding:24px 20px; }
}

/* Buscador de cancha del dashboard de escritorio */
@media (min-width: 768px) {
  .dash-booking-search { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); }
  .dash-search-copy { padding:24px; min-width:0; }
  .dash-search-heading { display:grid; gap:6px; margin-bottom:20px; }
  .dash-search-heading strong { font-family:var(--font-display); font-size:1.45rem; color:var(--green-950); line-height:1.2; }
  .dash-search-heading span { font-size:.82rem; color:var(--muted); }
  .dash-booking-fields { display:flex; align-items:flex-end; gap:12px; }
  .dash-booking-fields label { flex:1; min-width:0; font-size:.7rem; color:var(--muted); display:grid; gap:6px; }
  .dash-booking-fields select { width:100%; border:1px solid var(--line); border-radius:8px; background:#fafaf7; color:var(--ink); padding:12px; font:inherit; font-size:.85rem; }
  .dash-booking-fields .btn { white-space:nowrap; }
}
@media (min-width:768px) and (max-width:950px) {
  .dash-booking-fields { flex-direction:column; align-items:stretch; }
}

/* Pro shops: listado de tiendas */
.proshop-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.5rem); color: var(--green-950); margin: 6px 0 4px; letter-spacing: -.02em; }
.proshop-sub { color: var(--muted); margin: 0 0 18px; font-size: .95rem; }
.proshop-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; height: 50px; }
.proshop-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.proshop-search input { border: none; outline: none; background: transparent; flex: 1; font: inherit; font-size: .92rem; color: var(--ink); min-width: 0; }
.proshop-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; flex-wrap: wrap; }
.proshop-filters .chip-row { margin: 0; }
.proshop-filters select { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 9px 14px; font: inherit; font-size: .82rem; color: var(--ink); }
.proshop-kicker { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; font-weight: 700; }
.proshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.proshop-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.proshop-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12, 48, 34, .12); }
.proshop-media { position: relative; height: 170px; background: linear-gradient(135deg, var(--green-900, #0c3022), var(--green-700, #2d7a4d)); }
.proshop-media-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffffcc; }
.proshop-media-fallback svg { width: 48px; height: 48px; }
.proshop-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.proshop-tile-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.proshop-tile-body h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; color: var(--green-950); }
.proshop-loc { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.proshop-loc svg { width: 14px; height: 14px; }
.proshop-tile-body p { margin: 0; font-size: .8rem; color: var(--ink-soft, var(--muted)); line-height: 1.45; flex: 1; }
.proshop-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.proshop-tags span { font-size: .68rem; border: 1px solid var(--line); background: #faf8f2; border-radius: 999px; padding: 4px 10px; color: var(--muted); }
.proshop-go { width: 100%; margin-top: 4px; }
.proshop-cta { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 20px; background: #fbf9f3; border: 1px solid var(--line); border-radius: var(--radius-lg); flex-wrap: wrap; }
.proshop-cta-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex: none; }
.proshop-cta-icon svg { width: 24px; height: 24px; }
.proshop-cta-text { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.proshop-cta-text strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--green-950); }
.proshop-cta-text span { font-size: .82rem; color: var(--muted); }
@media (max-width: 640px) {
  .proshop-grid { grid-template-columns: 1fr; }
  .proshop-filters { align-items: stretch; }
  .proshop-cta .btn { width: 100%; }
}

/* Pro shops: vista interior de una tienda */
.proshop-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px; }
.proshop-hero-media { position: relative; min-height: 260px; background: linear-gradient(135deg, var(--green-900, #0c3022), var(--green-700, #2d7a4d)); }
.proshop-hero-info { padding: 24px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.proshop-hero-info h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; color: var(--green-950); }
.proshop-hero-info p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.proshop-demo-tag { align-self: flex-start; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--green-700); background: var(--green-100); border-radius: 999px; padding: 4px 10px; }
.proshop-hero-stats { display: flex; gap: 22px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.proshop-hero-stats div { display: grid; gap: 2px; }
.proshop-hero-stats strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--green-950); }
.proshop-hero-stats span { font-size: .72rem; color: var(--muted); }
.proshop-inside-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.proshop-search-sm { height: 44px; flex: 1; min-width: 220px; max-width: 360px; }
.proshop-sample { cursor: default; }
@media (max-width: 640px) {
  .proshop-hero { grid-template-columns: 1fr; }
  .proshop-hero-media { min-height: 190px; }
  .proshop-search-sm { max-width: none; }
}
.proshop-sec-count { font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--green-100); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.proshop-inside-bar select { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 9px 14px; font: inherit; font-size: .82rem; color: var(--ink); }
.proshop-inside-bar .chip-row { flex: 1 1 100%; order: 3; }

/* ===== Selector "Elige cómo pagar" (course.html) — estilo checkout tipo Playtomic ===== */
.pay-choose { margin: 4px 0 14px; }
.pay-choose-title { margin: 0 0 10px; font-size: 1rem; }
.pay-opt {
  border: 1.5px solid var(--line); background: var(--white); border-radius: var(--radius-lg);
  margin-bottom: 10px; cursor: pointer; overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pay-opt.selected { border-color: var(--green-600); box-shadow: 0 4px 14px rgba(10, 46, 28, 0.1); }
.pay-opt:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.pay-opt-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.pay-radio {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--green-600);
  position: relative; background: var(--white);
}
.pay-opt.selected .pay-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--green-600);
}
.pay-opt-icon { flex: none; position: relative; width: 34px; height: 30px; color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.pay-opt-icon b {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; background: var(--green-600); color: #fff; font-size: 0.68rem; line-height: 20px; text-align: center; border: 2px solid var(--white);
}
.pay-opt-icon b.dark { background: var(--green-700); }
.pay-opt-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.98rem; }
.pay-opt-name small { display: block; font-weight: 400; font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.pay-opt-amount { flex: none; font-weight: 700; font-size: 1rem; }
.pay-opt-extra { background: #fff; border-top: 1px solid var(--line); cursor: default; }
.pay-participants {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: none;
  font: inherit; cursor: pointer; text-align: left;
}
.pay-participants-label { flex: 1; display: flex; flex-direction: column; }
.pay-participants-label small { color: var(--muted); font-size: 0.78rem; }
.pay-chevron { font-size: 1.6rem; color: var(--muted); line-height: 1; }
.pay-avatars { display: flex; }
.pay-av {
  width: 34px; height: 34px; border-radius: 50%; box-sizing: border-box; margin-left: -8px; border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700;
}
.pay-av:first-child { margin-left: 0; }
.pay-av-me { background: var(--green-700); color: #fff; }
.pay-av-filled { background: var(--green-100); color: var(--green-700); }
.pay-av-empty { background: #fff; color: var(--green-600); border-color: #cfe3d4; font-size: 1.1rem; font-weight: 400; }
.pay-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
.pay-note svg { flex: none; margin-top: 1px; }

/* Pantalla "Agregar jugadores" */
.addp-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(10, 30, 20, 0.45); display: none; }
.addp-overlay.open { display: flex; align-items: flex-end; justify-content: center; }
.addp-sheet {
  position: relative; background: var(--white); width: 100%; max-width: 520px; height: 100%; max-height: 100dvh;
  overflow-y: auto; padding: 18px 20px 96px; box-sizing: border-box; display: flex; flex-direction: column;
}
@media (min-width: 640px) { .addp-sheet { height: auto; max-height: 90vh; border-radius: 18px; align-self: center; } .addp-overlay.open { align-items: center; } }
.addp-back { align-self: flex-start; border: 0; background: none; font-size: 1.6rem; cursor: pointer; padding: 4px 8px 4px 0; color: var(--ink, #12281c); }
.addp-title { margin: 8px 0 18px; font-size: 1.6rem; }
.addp-slots { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.addp-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.addp-slot small { font-size: 0.78rem; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addp-circle {
  width: 62px; height: 62px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; font-family: inherit;
}
.addp-me { background: var(--green-700); color: #fff; }
.addp-filled { background: var(--green-100); color: var(--green-700); cursor: pointer; }
.addp-empty { background: #f1f3f2; color: var(--green-700); }
.addp-search { padding: 14px 16px; background: #fff; border-color: var(--line); margin-bottom: 14px; }
.addp-suggest { background: #fff; margin: 0 -20px; padding: 16px 20px; flex: 1; }
.addp-suggest .split-search-result { background: #fff; border: 1px solid var(--line); margin-bottom: 8px; border-radius: 12px; padding: 10px 12px; }
.addp-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 0.85rem; }
.addp-footer { position: sticky; bottom: -96px; margin: 16px -20px -96px; padding: 14px 20px 22px; background: var(--white); border-top: 1px solid var(--line); }

/* Código de reserva discreto al pie de cada tarjeta de reserva */
.res-card-code { margin-top: 10px; font-size: 0.72rem; letter-spacing: 0.5px; color: #a3aaa6; user-select: all; }

.dash-next-code { display: block; margin-top: 8px; font-size: 0.7rem; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.6); }

/* Siluetas de persona en las opciones de pago (reemplazan los badges x1 / x4) */
.pay-opt-icon.pay-people { width: auto; min-width: 34px; height: 30px; color: var(--green-700); }
.pay-opt-icon.pay-people svg + svg { margin-left: -14px; }
.pay-opt-icon.pay-people svg { filter: drop-shadow(-1px 0 0 #fff); }

/* "Elige cómo pagar": sin cajas, solo líneas separadoras entre opciones */
.pay-choose { border-top: 1px solid var(--line); }
.pay-opt, .pay-opt.selected {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; box-shadow: none; margin-bottom: 0; overflow: visible;
}
.pay-opt-row { padding: 16px 2px; }
.pay-opt-extra { background: transparent; border-top: 0; padding-bottom: 6px; }
.pay-participants { padding: 4px 2px 12px; }

/* Hoja "Elige cómo pagar": lista limpia separada por líneas (sin cajas por opción) */
.pt-methods, .pt-saved-cards { gap: 0 !important; }
.pt-method, .pt-method.pt-method-compact {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; padding: 15px 2px;
}
.pt-method:hover, .pt-method.selected { background: transparent; }
.pt-method > span:nth-child(2) { flex: 1; min-width: 0; }
.pt-method::after {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line); box-sizing: border-box; margin-left: auto;
}
.pt-method.selected::after { border-color: var(--green-700); background: radial-gradient(circle, var(--green-700) 45%, transparent 50%); }
.pt-saved-cards { border-top: 1px solid var(--line); }
.pt-methods { border-top: 1px solid var(--line); }

/* Apple Pay en la hoja de pago */
.pay-logo-applepay { width: 56px; background: #000; color: #fff; font-family: -apple-system, "SF Pro Text", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 14px; gap: 3px; font-style: normal; }
/* Vista previa de tarjeta: cambia a diseño Visa / Mastercard según el número */
.pt-card-visual.pt-card-visa { background: linear-gradient(135deg, #1a1f71 0%, #2b3fb0 100%) !important; color: #fff; }
.pt-card-visual.pt-card-mc { background: linear-gradient(135deg, #1c1c1c 0%, #3a3a3a 100%) !important; color: #fff; }
.pt-card-visa-word { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 800; font-size: 1.5rem; letter-spacing: 1px; color: #fff; }
.pt-card-visual .pay-logo-mastercard { background: transparent; border: 0; }

/* Tus últimas reservas: tarjetas con fecha en recuadro (reemplaza la tabla) */
.dash-history-list { display: flex; flex-direction: column; gap: 10px; }
.dash-hist-card {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dash-hist-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10, 46, 28, 0.08); border-color: var(--green-600); }
.dash-hist-date {
  flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--green-100); color: var(--green-700);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.dash-hist-date strong { font-size: 1.25rem; font-weight: 800; }
.dash-hist-date small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; margin-top: 3px; }
.dash-hist-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-hist-info strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-hist-info small { color: var(--muted); font-size: 0.78rem; }
.dash-hist-chevron { flex: none; color: var(--muted); font-size: 1.5rem; line-height: 1; }

/* Carrusel de fotos en la cancha: se desliza con el dedo (scroll-snap) */
.hero-slider { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hero-slider::-webkit-scrollbar { display: none; }
.hero-slider img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.detail-hero .detail-hero-scrim, .detail-hero .detail-hero-overlay { pointer-events: none; }
.detail-hero .detail-hero-overlay button, .detail-hero .detail-hero-overlay a { pointer-events: auto; }
.hero-dots { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: all 0.2s ease; }
.hero-dots span.on { width: 18px; border-radius: 4px; background: #fff; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.85); color: #12281c; font-size: 1.6rem; line-height: 1; cursor: pointer; display: none; }
.hero-arrow-prev { left: 12px; } .hero-arrow-next { right: 12px; }
@media (hover: hover) and (min-width: 768px) { .hero-arrow { display: block; } }

.notif-dismissable { position: relative; }
.notif-dismissable .notif-x { position: absolute; top: 8px; right: 8px; }

.dash-notif-item { position: relative; }
.dash-notif-x { margin-left: auto; flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 4px 6px; border-radius: 6px; }
.dash-notif-x:hover { background: var(--cream); color: var(--ink, #12281c); }

/* Opciones de pago del mismo tamaño: misma altura, ícono en columna fija y texto alineado */
.pay-opt-row { min-height: 64px; box-sizing: border-box; }
.pay-opt-icon.pay-people { width: 84px; min-width: 84px; justify-content: flex-start; }
.pay-opt-icon.pay-people svg { width: 24px; height: 24px; flex: none; }
.pay-opt-name, .pay-opt-amount { font-size: 1rem; }
.pay-opt-name { font-weight: 600; }

/* Hoja de pago: todas las opciones (tarjeta guardada, Apple Pay, agregar tarjeta, club) del mismo tamaño */
.pt-method, .pt-method.pt-method-compact { min-height: 68px; padding: 12px 2px; box-sizing: border-box; gap: 14px; }
.pt-method .pt-method-icon, .pt-method.pt-method-compact .pt-method-icon { width: 44px; height: 44px; }
.pt-method .pt-method-icon svg, .pt-method.pt-method-compact .pt-method-icon svg { width: 20px; height: 20px; }
.pt-method .pt-method-icon.pt-method-icon-logo { width: 56px; height: 36px; border-radius: 8px; }
.pt-method .pt-method-name, .pt-method.pt-method-compact .pt-method-name { font-size: 0.94rem; font-weight: 700; }
.pt-method .pt-method-desc { font-size: 0.78rem; }

/* ===== Invitaciones (tarjetas) y popover de notificaciones ===== */
.inv-h1 { font-family: inherit; font-size: 2.2rem; font-weight: 800; color: var(--green-950); margin: 6px 0 4px; letter-spacing: -0.5px; }
.inv-sub { color: var(--muted); margin: 0 0 18px; }
.inv-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.inv-chip { border: 1px solid var(--line); background: #fff; color: var(--green-950); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.inv-chip span { background: rgba(0,0,0,0.08); border-radius: 8px; padding: 1px 7px; font-size: 0.78rem; }
.inv-chip.on { background: var(--green-950); color: #fff; border-color: var(--green-950); }
.inv-chip.on span { background: transparent; border: 1px solid var(--gold, #d4af37); color: #fff; }
.inv-card { display: flex; gap: 18px; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(20,60,40,0.05); }
.inv-thumb { position: relative; flex: none; width: 210px; min-height: 164px; border-radius: 14px; background: var(--green-700) center/cover no-repeat; display: flex; align-items: flex-start; }
.inv-date { margin: 10px; background: #fff; border-radius: 10px; padding: 4px 10px; text-align: center; line-height: 1.1; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.inv-date small { display: block; font-size: 0.62rem; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; }
.inv-date b { font-size: 1.3rem; color: var(--green-950); }
.inv-thumb-ico { margin: auto; color: #fff; }
.inv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.inv-kind { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--green-950); }
.inv-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--green-950); }
.inv-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.92rem; color: var(--ink); }
.inv-amount { color: #b8741a; }
.inv-amount b { font-size: 1.1rem; }
.inv-from { display: flex; align-items: center; gap: 0; color: var(--muted); font-size: 0.9rem; }
.inv-from > span:last-child { margin-left: 12px; }
.inv-av { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; margin-left: -8px; background: var(--green-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; }
.inv-from .inv-av:first-child { margin-left: 0; }
.inv-av img { width: 100%; height: 100%; object-fit: cover; }
.inv-av-more { background: #ece9e1; color: var(--ink); }
.inv-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.inv-ago { color: var(--muted); font-size: 0.85rem; }
.inv-actions { display: flex; gap: 10px; }
.inv-btn { border-radius: 10px; padding: 12px 18px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); font-size: 0.92rem; }
.inv-yes { background: var(--green-950); color: #fff; border-color: var(--green-950); }
.inv-no { background: #faf8f3; color: var(--green-950); }
@media (max-width: 760px) {
  .inv-h1 { font-size: 1.5rem; margin-top: 2px; }
  .inv-sub { font-size: 0.85rem; margin-bottom: 12px; }
  .inv-chips { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-bottom: 12px; padding-bottom: 2px; scrollbar-width: none; }
  .inv-chips::-webkit-scrollbar { display: none; }
  .inv-chip { padding: 7px 13px; font-size: 0.8rem; flex: none; }
  .inv-card { display: grid; grid-template-columns: 76px 1fr; gap: 6px 12px; padding: 12px; border-radius: 16px; margin-bottom: 10px; }
  .inv-thumb { width: 76px; min-height: 0; height: 76px; border-radius: 12px; grid-row: 1; }
  .inv-date { margin: 5px; padding: 2px 6px; border-radius: 8px; }
  .inv-date small { font-size: 0.5rem; }
  .inv-date b { font-size: 0.95rem; }
  .inv-main { gap: 3px; }
  .inv-kind { font-size: 0.72rem; color: var(--muted); }
  .inv-kind svg { width: 14px; height: 14px; }
  .inv-title { font-size: 1.02rem; }
  .inv-meta { gap: 2px 12px; font-size: 0.78rem; }
  .inv-amount b { font-size: 0.9rem; }
  .inv-from { display: none; }
  .inv-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
  .inv-ago { font-size: 0.75rem; }
  .inv-btn { padding: 8px 13px; font-size: 0.82rem; border-radius: 9px; }
  .notif-pop-thumb { width: 54px; height: 54px; }
}
.notif-popover { position: fixed; z-index: 9999; width: 340px; max-width: calc(100vw - 24px); background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(10,40,25,0.25); padding: 16px 18px; }
.notif-pop-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.notif-pop-head strong { font-size: 1.05rem; color: var(--green-950); }
.notif-pop-head a { font-size: 0.9rem; color: var(--green-950); font-weight: 600; }
.notif-pop-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.notif-pop-thumb { flex: none; width: 66px; height: 66px; border-radius: 10px; background: var(--green-700); overflow: hidden; }
.notif-pop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.notif-pop-ico { flex: none; color: var(--green-950); display: inline-flex; }
.notif-pop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notif-pop-text strong { font-size: 0.92rem; color: var(--green-950); }
.notif-pop-text small { color: var(--muted); font-size: 0.8rem; }
.notif-pop-meta { flex: none; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.notif-pop-meta em { font-style: normal; font-size: 0.78rem; color: var(--muted); }
.notif-pop-dot { width: 9px; height: 9px; border-radius: 50%; background: #d63a3a; display: block; }
.notif-pop-all { display: flex; justify-content: center; gap: 8px; margin-top: 14px; padding: 13px; border-radius: 12px; background: #f1efe9; color: var(--green-950); font-weight: 600; text-decoration: none; }
.notif-pop-empty { padding: 20px 4px; color: var(--muted); text-align: center; }
.pay-some-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 4px; font-size: 0.92rem; }
.pay-some-step { display: inline-flex; gap: 8px; }
.pay-some-step button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.2rem; cursor: pointer; }
/* Cuidar tamaños: nada se desborda en pantallas chicas */
.inv-card, .inv-main, .notif-popover { box-sizing: border-box; max-width: 100%; }
.inv-title, .notif-pop-text strong, .notif-pop-text small { overflow: hidden; text-overflow: ellipsis; }
.notif-pop-text strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-pop-text small { white-space: nowrap; }
.notif-popover { max-height: calc(100vh - 90px); overflow-y: auto; }
@media (max-width: 760px) {
  .inv-title { white-space: nowrap; }
  .inv-meta span { white-space: nowrap; }
  .inv-actions { flex: none; }
  .notif-popover { padding: 12px 14px; border-radius: 16px; }
  .notif-pop-item { gap: 10px; padding: 10px 0; }
  .notif-pop-ico svg { width: 18px; height: 18px; }
  .notif-pop-text strong { font-size: 0.85rem; }
  .notif-pop-text small { font-size: 0.74rem; }
  .notif-pop-all { padding: 11px; font-size: 0.88rem; }
}

/* ===== Modal "Ver pago" (pago dividido) ===== */
.sp-modal { background: #fbf8f1; padding: 22px; max-width: 560px; }
.sp-head { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.sp-head-text { flex: 1; min-width: 0; }
.sp-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.6px; }
.sp-title { font-size: 1.7rem; line-height: 1.1; margin: 8px 0 6px; color: var(--green-950); font-weight: 800; }
.sp-place { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 0.92rem; margin-bottom: 10px; }
.sp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 0.78rem; }
.sp-hero { flex: none; width: 42%; min-height: 130px; border-radius: 14px; background: var(--green-700) center/cover no-repeat; }
.sp-status-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.sp-prog-head { display: flex; justify-content: space-between; align-items: center; }
.sp-prog-head strong { color: var(--green-950); }
.sp-prog-head span { color: var(--green-700); font-weight: 700; font-size: 0.9rem; }
.sp-row { background: #fbf8f1; border-radius: 12px; padding: 10px 12px; gap: 12px; margin-bottom: 8px; }
.sp-av { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--green-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.sp-av img { width: 100%; height: 100%; object-fit: cover; }
.sp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; }
.sp-ok { color: var(--green-700); }
.sp-wait { color: #b8741a; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sp-amount { flex: none; font-weight: 800; color: var(--green-950); font-size: 1.02rem; }
.sp-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; color: var(--muted); }
.sp-total strong { color: var(--green-950); font-size: 1.6rem; }
.sp-info { margin-top: 12px; border: none; background: #e6ebe4; border-radius: 12px; padding: 12px 14px; }
.sp-info-row { display: flex; align-items: center; gap: 10px; color: var(--green-950); font-size: 0.88rem; }
.sp-done { width: 100%; margin-top: 14px; background: var(--green-950); color: #fff; border: none; border-radius: 12px; padding: 15px; font-weight: 700; font-size: 1rem; cursor: pointer; }
@media (max-width: 560px) {
  .sp-modal { padding: 16px; }
  .sp-title { font-size: 1.3rem; }
  .sp-hero { width: 36%; min-height: 110px; }
  .sp-av { width: 38px; height: 38px; }
}

.notif-popover { padding: 12px 14px; border-radius: 16px; }
.notif-pop-thumb { width: 52px; height: 52px; }
.notif-pop-item { gap: 10px; padding: 10px 0; }
.notif-pop-text strong { font-size: 0.84rem; }
.notif-pop-text small { font-size: 0.72rem; }
.notif-pop-all { padding: 10px; font-size: 0.85rem; margin-top: 10px; }

/* ===== Tarjetas de notificaciones ===== */
.nt-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(20,60,40,0.05); }
.nt-top { display: flex; gap: 12px; align-items: flex-start; }
.nt-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #e8efe9; color: var(--green-700); display: inline-flex; align-items: center; justify-content: center; }
.nt-ico-img { background-size: cover; background-position: center; }
.nt-body { flex: 1; min-width: 0; padding-right: 22px; }
.nt-tag { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--green-700); background: #e8efe9; border-radius: 999px; padding: 2px 8px; margin-bottom: 4px; }
.nt-tag-warn { color: #9a5f10; background: #fbeed6; }
.nt-tag-ok { color: #1b6b34; background: #e0f3e6; }
.nt-title { font-weight: 800; font-size: 1rem; color: var(--green-950); line-height: 1.2; }
.nt-detail { color: var(--muted); font-size: 0.82rem; line-height: 1.4; margin-top: 3px; }
.nt-amount { flex: none; font-weight: 800; color: var(--green-950); font-size: 1rem; }
.nt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.nt-actions .btn { flex: 1 1 0; min-width: 96px; justify-content: center; text-align: center; white-space: nowrap; }
.notif-dismissable { position: relative; }
.notif-dismissable .notif-x { top: 10px; right: 10px; }

/* Notificaciones: versión plana y compacta (menos "tarjeta de app") */
.nt-card { background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 12px 2px; margin: 0; }
.nt-top { gap: 10px; align-items: center; }
.nt-ico { width: 38px; height: 38px; border-radius: 50%; background-color: #e9ece6; }
.nt-ico svg { width: 16px; height: 16px; }
.nt-body { padding-right: 18px; }
.nt-tag { background: none !important; padding: 0; margin: 0 0 1px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3px; color: var(--muted); }
.nt-tag-warn { color: #a5651a; }
.nt-tag-ok { color: var(--green-700); }
.nt-title { font-size: 0.9rem; font-weight: 700; }
.nt-detail { font-size: 0.76rem; margin-top: 1px; }
.nt-amount { font-size: 0.88rem; font-weight: 700; }
.nt-actions { border: none; margin-top: 8px; padding: 0 0 0 48px; gap: 6px; }
.nt-actions .btn { flex: none; min-width: 0; padding: 6px 14px; font-size: 0.78rem; border-radius: 8px; min-height: 0; line-height: 1.2; }
.notif-dismissable .notif-x { top: 8px; right: 0; width: 22px; height: 22px; font-size: 0.7rem; background: none; box-shadow: none; }

/* ===== Detalle de invitacion ===== */
.inv-card[data-inv-open] { cursor: pointer; }
.idm { padding: 0; max-width: 520px; width: calc(100% - 24px); background: #fbf8f1; overflow: hidden; border-radius: 22px; }
.idm-hero { position: relative; height: 150px; background: var(--green-700) center/cover no-repeat; }
.idm-date { position: absolute; left: 16px; top: 14px; background: #fff; border-radius: 12px; padding: 6px 12px 0; text-align: center; line-height: 1.1; box-shadow: 0 2px 8px rgba(0,0,0,.18); overflow: hidden; }
.idm-date small { display: block; font-size: 0.62rem; font-weight: 700; color: var(--muted); }
.idm-date b { font-size: 1.5rem; color: var(--green-950); }
.idm-date i { display: block; font-style: normal; background: var(--green-950); color: #fff; font-size: 0.55rem; font-weight: 700; margin: 4px -12px 0; padding: 3px 8px; }
.idm-x { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); cursor: pointer; font-size: 0.9rem; }
.idm-body { padding: 16px 18px 18px; }
.idm-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.idm-kind { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--green-950); }
.idm-title { margin: 4px 0 0; font-size: 1.5rem; line-height: 1.1; color: var(--green-950); font-weight: 800; }
.idm-by { flex: none; text-align: left; }
.idm-by small { color: var(--muted); font-size: 0.75rem; }
.idm-by > div { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.idm-by span b { display: block; font-size: 0.85rem; }
.idm-by span em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.idm-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; font-size: 0.88rem; color: var(--ink); }
.idm-box { background: #f1eee6; border-radius: 14px; padding: 4px 14px; }
.idm-line { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid #e3dfd3; font-size: 0.9rem; }
.idm-line:last-child { border-bottom: none; }
.idm-line strong { font-size: 1.1rem; color: var(--green-950); }
.idm-circles { display: inline-flex; gap: 6px; }
.idm-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--green-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex: none; }
.idm-av img { width: 100%; height: 100%; object-fit: cover; }
.idm-av-empty { background: #e6e1d5; }
.idm-actions { display: flex; gap: 10px; margin-top: 14px; }
.idm-no, .idm-yes { border-radius: 12px; padding: 13px; font-weight: 700; cursor: pointer; font-size: 0.92rem; }
.idm-no { flex: 1; background: #faf8f3; border: 1px solid var(--line); color: var(--green-950); }
.idm-yes { flex: 1.5; background: var(--green-950); border: none; color: #fff; }
@media (max-width: 520px) { .idm-top { flex-direction: column; } .idm-title { font-size: 1.25rem; } .idm-hero { height: 120px; } }
.inv-card[data-inv-open], .inv-card[data-inv-x] { cursor: default; }
.sp-modal2 { max-height: 92vh; overflow-y: auto; }
.sp-list-title { font-weight: 700; color: var(--green-950); margin: 14px 0 8px; font-size: 0.92rem; }
.sp-modal2 .sp-row { background: #fff; }
.sp-modal2 .idm-actions { margin-top: 14px; }
.sp-modal2 .idm-yes { flex: 1; }

/* Ver pago: más cálido */
.sp-modal2 { background: linear-gradient(180deg, #fffdf8 0%, #f8f3e8 100%); border-radius: 26px; box-shadow: 0 24px 60px rgba(10,46,28,.28); }
.sp-modal2 .idm-hero { height: 170px; }
.sp-modal2 .idm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,46,28,.05) 40%, rgba(10,46,28,.38)); }
.sp-modal2 .idm-date, .sp-modal2 .idm-x { z-index: 2; }
.sp-modal2 .idm-body { padding: 18px 20px 20px; }
.sp-modal2 .idm-title { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em; }
.sp-modal2 .idm-kind { color: var(--gold); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.6px; text-transform: uppercase; }
.sp-love { margin: 8px 0 2px; color: var(--green-700); font-size: 0.92rem; font-style: italic; }
.sp-modal2 .idm-box { background: #fff; border: 1px solid #ece4d1; border-radius: 18px; padding: 4px 16px; box-shadow: 0 2px 10px rgba(184,134,58,.08); }
.sp-modal2 .idm-line { border-bottom: 1px dashed #e6dcc4; }
.sp-modal2 .idm-line strong { font-family: var(--font-display); font-size: 1.25rem; }
.sp-modal2 .idm-av { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold-light); }
.sp-modal2 .idm-av-empty { background: #efe9d9; box-shadow: 0 0 0 2px #fff; }
.sp-modal2 .sp-list-title { font-family: var(--font-display); font-size: 1.05rem; margin: 18px 0 8px; }
.sp-modal2 .sp-row { border: 1px solid #ece4d1; border-radius: 16px; padding: 12px; }
.sp-modal2 .sp-amount { font-family: var(--font-display); font-size: 1.1rem; }
.sp-modal2 .sp-ok { color: var(--green-700); font-weight: 600; }
.sp-modal2 .sp-info { background: #eef2e8; border-radius: 14px; }
.sp-modal2 .idm-yes { border-radius: 14px; padding: 15px; font-size: 1rem; box-shadow: 0 6px 16px rgba(10,46,28,.25); }
@media (max-width: 520px) { .sp-modal2 .idm-title { font-size: 1.4rem; } .sp-modal2 .idm-hero { height: 130px; } }
.nt-friends { font-size: 0.78rem; font-weight: 700; color: var(--green-700); padding: 5px 10px; background: #e6efe6; border-radius: 8px; white-space: nowrap; }

/* Ver pago (diseño original): líneas suaves, casi invisibles */
.sp-modal .sp-status-card { border: 1px solid rgba(10,46,28,.06); box-shadow: 0 1px 6px rgba(10,46,28,.04); }
.sp-modal .sp-row { border: none; background: #f7f3ea; }
.sp-modal .sp-total { border-top: 1px solid rgba(10,46,28,.06); }
.sp-modal .split-progress-track { background: rgba(10,46,28,.06); }
.sp-modal .sp-chip { border-color: rgba(10,46,28,.07); }
.sp-modal .sp-info { background: #eaeee6; }

/* Ver pago: todo blanco */
.sp-modal, .sp-modal .sp-status-card, .sp-modal .sp-row, .sp-modal .sp-chip, .sp-modal .sp-info { background: #fff; }
.sp-modal .sp-info { border: 1px solid rgba(10,46,28,.06); }
.sp-modal .sp-hero { min-height: 140px; background-color: var(--green-700); background-size: cover; background-position: center; }
.nt-by { font-size: 0.7rem; font-weight: 700; color: var(--green-700); text-decoration: none; margin-left: 4px; }
a.nt-by:hover { text-decoration: underline; }

/* Ver pago: la foto se funde con el fondo blanco (degradado a la izquierda y abajo) */
.sp-modal { overflow: hidden; position: relative; }
.sp-modal .sp-head { position: relative; margin: -22px -22px 14px; padding: 22px 22px 6px; min-height: 190px; align-items: flex-start; }
.sp-modal .sp-head-text { position: relative; z-index: 2; max-width: 58%; }
.sp-modal .sp-hero {
  position: absolute; right: 0; top: 0; bottom: 0; width: 62%; min-height: 0; border-radius: 0 22px 0 0;
  background-size: cover; background-position: center; z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 30%, #000 62%), linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 30%, #000 62%), linear-gradient(to bottom, #000 62%, transparent 100%);
}
.sp-modal .pt-close { z-index: 3; background: rgba(255,255,255,.9); border-radius: 50%; }
@media (max-width: 560px) {
  .sp-modal .sp-head { margin: -16px -16px 10px; padding: 16px 16px 4px; min-height: 160px; }
  .sp-modal .sp-head-text { max-width: 62%; }
  .sp-modal .sp-hero { width: 58%; }
}
/* Foto pegada al blanco: degradado corto, la foto se ve más y llega hasta el borde del contenido */
.sp-modal .sp-head { margin-bottom: 0; min-height: 210px; }
.sp-modal .sp-hero {
  width: 66%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, #000 78%, transparent 100%);
}
.sp-modal .sp-status-card { position: relative; z-index: 2; margin-top: -8px; }

/* ===== Feed de Comunidad: a todo el ancho, sin bloques ===== */
.community-aside { display: none; }
.community-layout { display: block; }
.community-tabs { gap: 22px; padding: 0 2px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.community-tab { background: none !important; border: none !important; color: var(--muted) !important; padding: 12px 2px; border-radius: 0; font-weight: 600; border-bottom: 2px solid transparent !important; }
.community-tab.active { color: var(--green-950) !important; border-bottom-color: var(--gold) !important; }
.fd-feed { margin: 0 -4px; }
.fd-av { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--green-700); color: #fff; font-weight: 700; font-size: 0.8rem; }
.fd-av img { width: 100%; height: 100%; object-fit: cover; }
.fd-composer { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.fd-comp-row { display: flex; align-items: center; gap: 12px; }
.fd-comp-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: #efeade; border-radius: 999px; padding: 4px 14px; }
.fd-comp-pill input { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 0; font-size: 0.92rem; outline: none; }
.fd-comp-ico { color: var(--green-950); display: inline-flex; cursor: pointer; text-decoration: none; }
.fd-comp-previews { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fd-prev { position: relative; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; }
.fd-prev img { width: 100%; height: 100%; object-fit: cover; }
.fd-prev button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; line-height: 1; }
.fd-comp-send { justify-content: flex-end; margin-top: 10px; }
.fd-post { padding: 16px 4px 6px; border-bottom: 1px solid var(--line); }
.fd-head { display: flex; align-items: center; gap: 12px; }
.fd-who { flex: 1; min-width: 0; }
.fd-name { font-weight: 800; color: var(--green-950); text-decoration: none; font-size: 1rem; }
.fd-sub { color: var(--muted); font-size: 0.82rem; margin-top: 1px; }
.fd-dots { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; }
.fd-dots svg { width: 20px; height: 20px; transform: rotate(90deg); }
.fd-text { margin: 12px 0 0; font-size: 1rem; color: var(--green-950); white-space: pre-wrap; cursor: pointer; line-height: 1.4; }
.fd-media { margin-top: 12px; border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; }
.fd-media img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.fd-media-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fd-media-2 img { height: 220px; }
.fd-car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fd-car::-webkit-scrollbar { display: none; }
.fd-car img { flex: none; width: 100%; height: 260px; scroll-snap-align: start; object-fit: cover; }
.fd-count { position: absolute; top: 12px; right: 12px; background: rgba(20,30,25,.6); color: #fff; font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; }
.fd-actions { display: flex; align-items: center; gap: 22px; padding: 12px 2px 10px; }
.fd-act { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--green-950); font-size: 0.95rem; cursor: pointer; padding: 4px 0; }
.fd-act.on { color: var(--green-700); }
.fd-share { margin-left: auto; }
/* detalle */
.pd-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(10,30,20,.45); display: flex; justify-content: center; }
.pd-sheet { width: 100%; max-width: 560px; height: 100%; background: #fbf8f1; display: flex; flex-direction: column; position: relative; }
.pd-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--green-950); color: #fff; }
.pd-back { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; width: 32px; }
.pd-scroll { flex: 1; overflow-y: auto; padding-bottom: 80px; }
.pd-hero img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.pd-hero .fd-car img { height: 280px; }
.pd-card { background: #fbf8f1; border-radius: 22px 22px 0 0; margin-top: -18px; position: relative; padding: 18px 16px 8px; }
.pd-text { cursor: default; }
.pd-comments { margin-top: 6px; border-top: 1px solid var(--line); }
.pd-comment { display: flex; gap: 12px; padding: 14px 0; }
.pd-c-body { flex: 1; min-width: 0; }
.pd-c-text { margin: 2px 0 6px; color: var(--green-950); line-height: 1.35; }
.pd-c-actions { display: flex; gap: 16px; font-size: 0.82rem; color: var(--muted); }
.pd-c-actions button { background: none; border: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 0; }
.pd-c-actions button.on { color: #c0392b; }
.pd-compose { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--line); }
.pd-compose input { flex: 1; min-width: 0; border: none; background: #efeade; border-radius: 999px; padding: 12px 16px; outline: none; font-size: 0.92rem; }
.pd-send { border: none; background: var(--green-950); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer; }

/* Detalle de publicación: mismo estilo que el feed */
.pd-sheet, .pd-card { background: var(--cream, #f2ede1); }
.pd-overlay { background: rgba(10,30,20,.35); }
.pd-card { padding: 18px 16px 8px; border-radius: 22px 22px 0 0; }
.pd-card .fd-head { margin-bottom: 0; }
.pd-card .fd-text { font-size: 1rem; margin-top: 12px; }
.pd-card .fd-actions { border-bottom: none; }
.pd-comments { border-top: 1px solid var(--line); }
.pd-comment + .pd-comment { border-top: none; }
.pd-compose { background: var(--cream, #f2ede1); }
.pd-bar strong { font-size: 1.05rem; font-weight: 700; }
@media (max-width: 760px) { .pd-sheet { max-width: none; } }

/* Comentarios en línea bajo cada publicación */
.fd-inline { padding: 4px 2px 12px; border-top: 1px solid var(--line); }
.fd-inline-list { padding: 10px 0 8px; font-size: 0.9rem; color: var(--muted); }
.fd-empty { color: var(--muted); }
.fd-more { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 0.9rem; }
.fd-ic { color: var(--green-950); padding: 3px 0; line-height: 1.35; }
.fd-ic strong, .fd-ic a { color: var(--green-950); text-decoration: none; }
.fd-ic em { font-style: normal; color: var(--muted); font-size: 0.78rem; margin-left: 4px; }
.fd-inline-row { display: flex; align-items: center; gap: 10px; }
.fd-inline-row input { flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 12px 18px; font-size: 0.92rem; outline: none; }
.fd-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--green-950); color: #fff; cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.fd-act.on { color: #c0392b; }
.fd-heart-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: fdPop .7s ease-out forwards; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
@keyframes fdPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%,-60%) scale(1); } }

/* Perfil: banner a todo el ancho (estilo Twitter) con la foto de perfil pegada a la izquierda */
.pf-page { max-width: none; margin: 0; }
.pf-cover { height: clamp(140px, 24vw, 260px); border-radius: 0; }
.pf-body { max-width: none; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
.pf-avatar-wrap { margin-top: calc(-1 * clamp(52px, 8vw, 78px)); }
.pf-avatar { width: clamp(100px, 16vw, 150px); height: clamp(100px, 16vw, 150px); }
.pf-actions-row { max-width: 560px; }
@media (max-width: 760px) {
  .pf-avatar-wrap { margin-top: calc(-1 * clamp(46px, 13vw, 54px)); }
  .pf-avatar { width: clamp(96px, 26vw, 116px); height: clamp(96px, 26vw, 116px); }
}

/* Fotos de publicaciones: siempre completas y con tamaño razonable (sin recortes ni zoom) */
.pf-posts-section, .pf-post-composer { max-width: 640px; }
.pf-post-media { background: #efeade; border-radius: 14px; text-align: center; }
.pf-post-media img { width: auto; max-width: 100%; height: auto; max-height: 520px; object-fit: contain; margin: 0 auto; }
.fd-feed { max-width: 680px; margin-left: auto; margin-right: auto; }
.fd-media { background: #efeade; }
.fd-media > img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.fd-media-2 img { height: 240px; object-fit: cover; }
.fd-car img { height: 340px; object-fit: contain; background: #efeade; }
.pd-hero img { max-height: 420px; object-fit: contain; background: #efeade; }
.pd-hero .fd-car img { height: 340px; }
@media (max-width: 760px) { .fd-feed { margin: 0; max-width: none; } .fd-car img { height: 300px; } }
.pf-fd { padding-left: 0; padding-right: 0; }

/* Fotos de publicaciones: siempre el mismo estilo (proporción fija 5:3, esquinas redondeadas, recorte centrado) */
.fd-media, .pf-post-media { border-radius: 18px; overflow: hidden; background: #e7e2d4; margin-top: 12px; position: relative; }
.fd-media > img, .pf-post-media img {
  display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 5 / 3; object-fit: cover; object-position: center; margin: 0;
}
.fd-media-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: transparent; }
.fd-media-2 img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.fd-media-2 img:first-child { border-radius: 18px 0 0 18px; }
.fd-media-2 img:last-child { border-radius: 0 18px 18px 0; }
.fd-car img { width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; background: #e7e2d4; }
.pd-hero img, .pd-hero .fd-car img { aspect-ratio: 4 / 3; height: auto; max-height: none; object-fit: cover; width: 100%; }
.fd-count { top: 12px; right: 12px; background: rgba(25,35,30,.6); font-weight: 600; }
@media (max-width: 760px) { .fd-car img { height: auto; } }

/* Comunidad: fondo blanco */
body.page-comunidad, body.page-white { background: #fff; --sand: #fff; --cream: #fff; }
body.page-comunidad .fd-comp-pill, body.page-comunidad .pd-compose input { background: #f3f3f1; }
body.page-comunidad .fd-inline-row input { background: #fff; border-color: #e8e8e4; }
body.page-comunidad .fd-post, body.page-comunidad .fd-composer, body.page-comunidad .fd-inline, body.page-comunidad .community-tabs { border-color: #ececE8; }
body.page-comunidad .fd-media, body.page-comunidad .fd-car img { background: #eeeeea; }
body.page-comunidad .pd-sheet, body.page-comunidad .pd-card, body.page-comunidad .pd-compose { background: #fff; }

/* Todos los fondos de página en blanco */
html, body { background: #fff; }
body > section.container { background: #fff; }
section:nth-of-type(even):not([class*="hero"]):not(.hero) { background: #fff; }
.account-content, .dash-main, .dash-content, .app-main, main { background: #fff; }
:root { --sand: #ffffff; }

/* Buscadores: tarjeta blanca con texto oscuro (nada translúcido sobre fondo blanco) */
body .search-card, body:not(.dash-user) .search-card {
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(10,46,28,0.06);
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink);
}
body .search-card label, body:not(.dash-user) .search-card label { color: var(--muted); }
body .search-card input, body .search-card select,
body:not(.dash-user) .search-card input, body:not(.dash-user) .search-card select {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
body .search-card input::placeholder, body:not(.dash-user) .search-card input::placeholder { color: var(--muted); opacity: .8; }
body .search-card .search-icon-btn, body .search-card .search-filter-btn,
body:not(.dash-user) .search-card .search-icon-btn, body:not(.dash-user) .search-card .search-filter-btn { color: var(--green-950); }
body .search-card .btn-primary, body:not(.dash-user) .search-card .btn-primary { background: var(--green-950); color: #fff; border-color: var(--green-950); }

/* ===== Feed (referencia: texto grande, reacciones con emoji, comentarios y compartir a la derecha) ===== */
.fd-pagehead { display: flex; align-items: center; gap: 14px; margin: 6px 0 6px; }
.fd-pagehead .section-title { margin: 0; font-size: 2rem; font-weight: 800; }
.fd-post { padding: 18px 4px 4px; }
.fd-name { font-size: 1.1rem; font-weight: 800; }
.fd-sub { font-size: 0.9rem; }
.fd-text { font-size: 1.12rem; line-height: 1.38; margin-top: 14px; }
.fd-actions { display: flex; align-items: center; gap: 14px; padding: 14px 2px 14px; }
.fd-reacts { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: nowrap; }
.fd-r { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.88rem; padding: 2px 4px; border-radius: 12px; }
.fd-r .e { font-size: 1.7rem; line-height: 1; }
.fd-r.on { background: rgba(10,46,28,.07); color: var(--green-950); font-weight: 700; }
.fd-r-add { color: var(--muted); justify-content: center; align-self: flex-start; }
.fd-cm, .fd-share { flex-direction: column; gap: 3px; color: var(--muted); font-size: 0.88rem; align-items: center; }
.fd-share { margin-left: 0; }
.fd-picker { position: fixed; z-index: 500; display: flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; box-shadow: 0 8px 28px rgba(10,46,28,.2); }
.fd-picker button { background: none; border: none; font-size: 1.6rem; cursor: pointer; padding: 4px 6px; border-radius: 50%; transition: transform .12s; }
.fd-picker button:hover { transform: scale(1.25); }
.fd-fab { position: fixed; right: 22px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--green-700); background: #fff; color: var(--green-950); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(10,46,28,.22); cursor: pointer; z-index: 60; }
@media (min-width: 900px) { .fd-fab { bottom: 28px; } }
.fd-news-title { font-weight: 800; font-size: 1.12rem; cursor: default; }
.fd-news-sum { margin: 8px 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.4; }
.fd-news-src { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; font-size: 0.88rem; }
.fd-news-chip { background: rgba(10,46,28,.07); color: var(--green-950); font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; }
.fd-news-src a { color: var(--green-700); font-weight: 700; text-decoration: none; }
.fd-news-src a:hover { text-decoration: underline; }

/* Tarjeta de score (feed y hoja de publicar) */
.fd-score, .pub-card { background: #f6f4ee; border: 1px solid rgba(10,46,28,.08); border-radius: 20px; padding: 18px 20px; margin-top: 12px; }
.fd-score-label, .pub-label { font-size: 0.8rem; letter-spacing: .08em; color: var(--muted); }
.fd-score-course, .pub-course { font-size: 1.45rem; font-weight: 800; color: var(--green-950); margin: 4px 0 14px; line-height: 1.15; }
.fd-score-stats, .pub-stats { display: flex; gap: 34px; }
.fd-score-stats small, .pub-stats small { display: block; color: var(--muted); font-size: 0.85rem; }
.fd-score-stats b, .pub-stats b { font-size: 2rem; line-height: 1.1; color: var(--green-950); }
.fd-score-pill, .pub-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; background: #fff; border: 1px solid rgba(10,46,28,.1); border-radius: 999px; padding: 6px 16px 6px 6px; font-weight: 700; color: var(--green-950); }
.pub-av { width: 28px; height: 28px; border-radius: 50%; background: var(--green-950); color: #fff; font-size: 0.65rem; display: inline-flex; align-items: center; justify-content: center; }
.pub-sheet { max-width: 460px; width: calc(100% - 24px); }
.pub-text { width: 100%; margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-family: inherit; font-size: 0.95rem; resize: none; box-sizing: border-box; }
.pub-count { text-align: right; color: var(--muted); font-size: 0.78rem; margin: 2px 2px 12px; }
.pub-stats { gap: 26px; }
.pub-stats b { font-size: 1.7rem; }

/* Perfil público (mobile): el banner sube por detrás del header redondeado para que
   las esquinas del header no dejen ver el fondo blanco de la página. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .pf-cover { margin-top: -24px; padding-top: 24px; box-sizing: content-box; }
  .pf-cover .pf-back, .pf-cover .pf-kebab { margin-top: 24px; }
}