/* css/jugar.css — CSS de la página individual de horarios/reserva de
   una sede (portal/jugar.html), extraído del <style> inline
   (2026-07-31, pedido explícito: "algo de reserva a ver horarios
   jugar de cada sede que igual estan lentos" — mismo patrón ya usado
   en Landing, Round Robin Express, Club, Open Play y Reservas
   (listado de sedes)). Página standalone — nadie más carga este
   archivo. Ya cubierto por el Cache-Control de /css/:path* en
   vercel.json.
*/
  :root{
    --bg: #0a0e16; --card: #111726; --card-soft: #141b2c;
    --border: #232b3d; --border-soft: #1a2132;
    --text: #f4f6fa; --text-muted: #8c93a6; --text-faint: #5c6478;
    --lime: #c8f51d; --lime-dark: #9bc212; --red: #f55b5b; --red-bg: #331414;
    --blue: #5b9bf5; --blue-bg: #121f33;
    --font-display: 'Barlow Condensed', sans-serif;
    /* Crema — mismos valores exactos que el resto del sitio. */
    --crema-bg: #efe7da; --crema-border: #d4cab8; --crema-hover: #e8decd;
    --crema-text: #000000; --crema-text-muted: #5f5e5a; --cafe: #3a2c20;
  }
  /* Tema RAQplay (2026-08-10) — mismo criterio que dashboard.css/
     shared/css/theme.css: fondo negro sólido + tarjetas blancas con
     texto oscuro legible, botones lima intactos. La foto de fondo se
     mantiene (no es identidad de marca PICKCR, es genérica de la
     cancha) — solo se oscurece el overlay para que las tarjetas
     blancas resalten con más contraste. Las tarjetas de esta página
     usan rgba() hardcodeado (no var(--card)) para el efecto vidrio
     esmerilado sobre la foto, así que van con selectores propios acá
     abajo en vez de solo redefinir variables. */
  html[data-brand="raqplay"] .page-bg-overlay{
    background:linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.88) 100%);
  }
  /* Las variables de texto/borde se redefinen SOLO adentro de .card
     (2026-08-10, bug real: "fondo oscuro letras negras" — antes esto
     estaba en html[data-brand="raqplay"] directo, así que el título
     del club, "Cargando…" y los placeholders de error, que viven
     AFUERA de .card sobre la foto oscura, heredaban texto oscuro y
     quedaban invisibles). Todo lo de adentro de .card (label,
     .jg-dias-mes-label, .jg-dia-semana, .jg-dia-numero, .placeholder,
     .subinfo si algún día se usa adentro) ya usa var(--text)/
     var(--text-muted) en su regla base — con esto scopeado alcanza,
     sin repetir cada clase una por una. */
  html[data-brand="raqplay"] .card{
    --border: #2a2a2a; --border-soft: #202020;
    --text: #0a0a0a; --text-muted: #55565c; --text-faint: #8a8a8a;
    background:rgba(255,255,255,0.94); color:#0a0a0a;
  }
  html[data-brand="raqplay"] .card input[type="date"],
  html[data-brand="raqplay"] .card select{
    background:#f0f0f0; color:#0a0a0a; border-color:#d8d8d8;
  }
  html[data-brand="raqplay"] .card .filtro-btn{ background:#f0f0f0; color:#55565c; border-color:#d8d8d8; }
  html[data-brand="raqplay"] .card .jg-dia-pill:hover{ background:#eeeeee; }
  html[data-brand="raqplay"] .card .hora-btn{ background:#f0f0f0; color:#0a0a0a; border-color:#d8d8d8; }
  html[data-brand="raqplay"] .card .hora-btn.pasada{ background:#f0f0f0; color:#b5b5b5; }
  html[data-brand="raqplay"] .card .jg-cancha-card{
    background:rgba(255,255,255,0.96); border-color:#e2e2e2;
  }
  html[data-brand="raqplay"] .card .jg-cancha-card-nombre{ color:#0a0a0a; }
  html[data-brand="raqplay"] .card .jg-cancha-card-detalles{ color:#55565c; }
  html[data-brand="raqplay"] .card .jg-cancha-card.elegida{ background:rgba(200,245,29,0.14); }
  html[data-brand="raqplay"] .card .precio-linea{ border-top-color:#e2e2e2; }
  /* Lima como TEXTO sobre tarjeta blanca no se lee (2026-08-10, bug
     real: mismo hallazgo que css/openplay.css) — --lime se queda
     intacto para botones/fondos (necesitan el lima real), pero donde
     se usa como color de texto/ícono sobre la tarjeta clara pasa a un
     tono más oscuro con contraste real. */
  html[data-brand="raqplay"] .card .jg-dia-pill.activo .jg-dia-semana,
  html[data-brand="raqplay"] .card .jg-cancha-card-precio,
  html[data-brand="raqplay"] .card .jg-cancha-card.elegida .jg-cancha-card-nombre,
  html[data-brand="raqplay"] .card .precio-linea strong,
  html[data-brand="raqplay"] .card .exito h2{ color:#6b8200; }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:'Barlow', sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; }
  a{ text-decoration:none; color:inherit; }
  .wrap{ max-width:560px; margin:0 auto; padding:20px 20px 60px; }

  /* Barra inferior tipo Round Robin Express (2026-08-04, pedido
     explícito: "ver horario de cada club agregar navegador... para
     dispositivos celulares") — mismo markup/clases/corte "solo teléfono"
     (max-width:640px) que ya usan club.css/instalaciones.html/
     inscripciones.html.
     Rediseño (2026-08-06, pedido explícito: "dejarlo como este nuevo"
     — mismo dock transparente que round-robin-express.html/.rre-dock)
     — de fondo sólido a transparente sobre la foto, texto/íconos con
     text-shadow marcado para legibilidad en vez de depender de un
     fondo sólido debajo. Ahora son 3 ítems centrados (antes 4 con
     justify-content:space-around, incluyéndose a sí misma) — de ahí el
     cambio a justify-content:center + gap fijo. */
  .rre-bottom-nav{ display:none; }
  @media (max-width: 640px){
    .rre-bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; align-items:center; gap:56px; background:transparent; border:none; padding:12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
    .wrap{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
  }
  .rre-bottom-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; cursor:pointer; font-family:'Barlow', sans-serif; font-size:12px; font-weight:600; color:rgba(244,246,250,0.92); text-decoration:none; text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.5); }
  .rre-bottom-nav-item .rre-icon{ filter:drop-shadow(0 1px 3px rgba(0,0,0,0.8)); }
  /* Bug real reportado (2026-08-05): "en reserva... el navegador de
     abajo se ve raro" — el ítem "Inicio" del nav de abajo lleva la
     clase .back-link A PROPÓSITO (_pickcrAjustarInicioSegunOrigenRRE(),
     shared/js/utils.js, la busca por esa clase exacta para reescribir
     el href si se vino de Round Robin) — pero acá arriba .back-link
     también trae margin-left:auto (pensado para el header, donde
     empuja el link solo a la derecha). Dentro de .rre-bottom-nav eso
     rompe el centrado con gap fijo (margin-left:auto empuja "Inicio" y
     todo lo que sigue al borde derecho). Se anula el margin-left SOLO
     en esta combinación, sin tocar el header. */
  .rre-bottom-nav-item.back-link{ margin-left:0; }
  /* .rre-icon — se me había olvidado copiar esta clase junto con el
     resto del nav (2026-08-04): sin fill:none/stroke:currentColor, los
     íconos de "Reserva"/"Inscripciones" (que usan <rect>, a diferencia
     de "Inicio"/"Clubes" que son solo <path>/<circle>) se rellenaban
     de negro sólido en vez de mostrarse como contorno — mismo bug
     reportado junto con el de arriba. */
  .rre-icon{ display:inline-block; vertical-align:-2px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

  /* Foto de fondo de toda la página + tarjetas transparentes
     (2026-08-02, pedido explícito: "vamos a ir replicando esto en
     todas las paginas pero con diferentes fotos" — "vamos con la de
     reserva de canchas"). Mismo patrón que Landing/Inscripciones/
     Reservas: dos capas fixed detrás de todo, y .card pasa de un
     fondo sólido a semitransparente + blur.
     Actualizada (2026-08-02, pedido explícito: "en la pagina de jugar
     de cada club donde uno ve horarios esto tiene que estar de fondo"
     + foto adjunta de una pelota de pickleball en cancha) — antes
     reusaba landing-hero-fondo.jpg (genérica, de la Landing), ahora
     tiene su propia foto. */
  .page-bg-photo{
    position:fixed; inset:0; z-index:-2;
    background-image:url('/img/jugar-fondo.webp');
    background-size:cover; background-position:center;
    background-repeat:no-repeat;
  }
  .page-bg-overlay{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(10,14,22,0.6) 0%, rgba(10,14,22,0.78) 100%);
  }

  .logo{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
  .logo-mark{ width:32px; height:32px; border-radius:9px; background:linear-gradient(155deg, var(--lime) 0%, var(--lime-dark) 100%); display:flex; align-items:center; justify-content:center; color:#0a0e16; }
  .logo-text{ font-family:var(--font-display); font-weight:800; font-size:15px; display:flex; flex-direction:column; line-height:1.1; }
  .logo-text .name{ font-family:var(--font-display); font-weight:800; font-size:15px; }
  .logo-text .tag{ font-family:'Barlow', sans-serif; font-size:8px; font-weight:600; letter-spacing:1px; color:var(--text-muted); margin-top:1px; }
  .back-link{ font-size:13px; font-weight:600; color:var(--text-muted); margin-left:auto; }
  /* Toggle ES/EN (2026-08-04) — mismo componente/markup que club.css. */
  .idioma-switch{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; flex-shrink:0; }
  .idioma-btn{
    background:transparent; border:none; color:var(--text-muted); font-family:var(--font-display);
    font-weight:700; font-size:12px; letter-spacing:0.5px; padding:7px 11px; cursor:pointer;
  }
  .idioma-btn.is-activo{ background:var(--lime); color:#0a0e16; }
  .idioma-btn:not(.is-activo):hover{ color:var(--text); }

  h1{ font-family:var(--font-display); font-size:28px; font-weight:800; margin-bottom:4px; }
  .subinfo{ font-size:13px; color:var(--text-muted); margin-bottom:20px; }

  .card{ background:rgba(17,23,38,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--border-soft); border-radius:16px; padding:20px; margin-bottom:16px; }
  label{ display:block; font-size:12px; color:var(--text-muted); margin-bottom:8px; }
  input[type="date"], select{
    width:100%; padding:11px 14px; background:var(--card-soft); border:1px solid var(--border);
    border-radius:9px; color:var(--text); font-size:14px; font-family:'Barlow', sans-serif; margin-bottom:14px;
  }

  .filtro-tipo{ display:flex; gap:8px; margin-bottom:14px; }
  .filtro-btn{ flex:1; padding:10px; border-radius:9px; border:1px solid var(--border); background:var(--card-soft); color:var(--text-muted); font-family:'Barlow', sans-serif; font-weight:600; font-size:13px; cursor:pointer; }
  .filtro-btn.activo{ background:var(--lime); color:#0a0e16; border-color:var(--lime); }

  /* Deslizador de días (2026-07-30, pedido explícito: "playtomic usa
     este sistema... hace mas interactivo... conservando un diseno mas
     elegante funcionall y los colores de pickr") — reemplaza el
     <input type="date"> nativo de siempre. Scroll horizontal con
     scroll-snap (mismo comportamiento táctil que un carrusel nativo),
     nunca un calendario desplegable — con 15 días como mucho
     (anticipacionMaximaDias por defecto) entran cómodos deslizando.
     Restyle (2026-08-02, pedido explícito: "ese calendario despegado
     entre rectangulo no se siente integrado... pero un mejor diseno" —
     las tarjetas cuadradas del restyle anterior (2026-07-30, cada día
     con su propio fondo+borde) se leían como botones sueltos flotando
     DENTRO de la tarjeta madre de la sección, un cuadro adentro de otro
     cuadro. Ahora cada día es solo texto — sin fondo ni borde propio —
     y el único acento es un círculo lima sólido detrás del NÚMERO
     cuando ese día está activo (mismo lenguaje que un selector de
     fecha nativo de iOS/Apple Calendar: la fila entera se siente parte
     de la tarjeta que la contiene, no una fila de botones aparte). La
     barra de progreso segmentada debajo y la etiqueta de mes/año arriba
     a la derecha no cambian. */
  .jg-dias-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
  .jg-dias-header label{ margin-bottom:0; }
  .jg-dias-mes-label{ font-size:13px; font-weight:700; color:var(--text-muted); }

  .jg-dias-slider{ display:flex; gap:4px; overflow-x:auto; padding:2px; margin-bottom:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; }
  .jg-dias-slider::-webkit-scrollbar{ display:none; }
  /* Arrastre con mouse (2026-07-30, bug real reportado: "si lo abrimos
     desde computadora el deslizador no funciona con el mouse") — al
     sacar la scrollbar nativa (arriba), en desktop sin trackpad no
     quedaba NINGUNA forma de mover el deslizador. _jgHabilitarArrastreDeslizadorDias()
     (portal/js/jugar.js) agrega clic-y-arrastrar + rueda vertical. */
  .jg-dias-slider.jg-arrastrando{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
  .jg-dias-slider.jg-arrastrando .jg-dia-pill{ pointer-events:none; }
  .jg-dia-pill{ flex:none; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:56px; padding:6px 0; border-radius:14px; background:transparent; border:none; cursor:pointer; font-family:'Barlow', sans-serif; transition:background 0.15s; }
  .jg-dia-pill:hover{ background:var(--card-soft); }
  .jg-dia-semana{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; transition:color 0.15s; }
  .jg-dia-pill.activo .jg-dia-semana{ color:var(--lime); }
  .jg-dia-numero{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:16px; font-weight:800; color:var(--text); transition:background 0.15s, color 0.15s; }
  .jg-dia-pill.activo .jg-dia-numero{ background:var(--lime); color:#0a0e16; }

  .jg-dias-track{ display:flex; gap:3px; margin-bottom:16px; height:4px; }
  .jg-dias-track-seg{ flex:1; height:100%; border-radius:2px; background:var(--border-soft); transition:background 0.15s; }
  .jg-dias-track-seg.activo{ background:var(--lime); }

  .horas-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .hora-btn{ padding:14px 8px; border-radius:10px; border:1px solid var(--border); background:var(--card-soft); color:var(--text); font-weight:700; font-size:14px; cursor:pointer; text-align:center; }
  .hora-btn.ocupada{ background:var(--red-bg); color:var(--red); opacity:0.6; cursor:default; }
  .hora-btn.pasada{ background:var(--card-soft); color:var(--text-faint); opacity:0.35; cursor:default; }
  .hora-btn.clinica{ background:#1b2310; color:var(--lime); border-color:var(--lime); }
  .hora-btn.bloqueada{ background:#332b10; color:#c9a63a; opacity:0.6; cursor:default; }
  /* Open Play — a propósito NUNCA lime (hallazgo real, 2026-07-29: "el
     botón de open play en jugar se confunde con el de reservar
     cancha") — lime es el color de "esto se puede reservar/seleccionar"
     en toda esta pantalla (.elegida, el botón de Confirmar). Open Play
     usa azul en todo el resto del sitio (portal/club.html,
     .openplay-badge-recurrente/.agenda-item-badge.is-openplay) — acá
     igual, para que de un vistazo se note que es una acción DISTINTA a
     reservar cancha. */
  .hora-btn.bloqueada.open-play-bloqueo{ opacity:1; cursor:pointer; border-color:var(--blue); color:var(--blue); background:var(--blue-bg); }
  .hora-btn.bloqueada.open-play-bloqueo:hover{ filter:brightness(1.15); }
  .hora-btn.libre:hover{ border-color:var(--lime); }
  .hora-btn.elegida{ background:var(--lime); color:#0a0e16; border-color:var(--lime); }
  .hora-open-play-hint{ font-size:9px; color:var(--blue); opacity:0.9; margin-top:2px; }

  /* Selector de cancha (2026-08-03, pedido explícito: "cuando tengo
     marcado canchas no se leen pasan de azul a crema deberian pasar a
     cafes cuando se marcan... un poco mas oscuro") — antes color inline
     en portal/js/jugar.js (jgActualizarSelectorCancha()): sin marcar,
     var(--card-soft) (azul marino oscuro); marcada,
     rgba(200,245,29,0.08) — un tinte lima casi transparente, con muy
     poco contraste sobre la tarjeta crema translúcida de esta pantalla
     en celular/iPad. Movido a clases para poder sobreescribirlo acá
     abajo sin tocar escritorio, mismo criterio ya usado en
     portal/inscripcion.html (.dupr-req-muted/etc).
     Transparencia (2026-08-06, pedido explícito: "en reserva jugar...
     dale a los contenedores la parte azul sin afectar la foto" — esta
     SÍ es la tarjeta azul de la pantalla, a diferencia de los botones
     de Open Play que se probaron antes y no eran). rgba(20,27,44,0.95)
     es el mismo var(--card-soft) exacto (#141b2c), solo con alpha —
     0.95 a propósito, no el 0.4 que ya usa .card más arriba: acá la
     tarjeta lleva texto interactivo (nombre/precio/detalles de la
     cancha) que necesita quedarse bien legible, no un fondo tan
     traslúcido como para que la foto le reste contraste.
     Blur (2026-08-06, pedido explícito: "apple lo permite" — agregar
     el efecto vidrio esmerilado real, no solo opacidad plana). Mismo
     backdrop-filter:blur(6px) que ya usa .card en esta misma página —
     con la opacidad alta (0.95) de arriba, el blur casi no se nota en
     el fondo de la tarjeta en sí (que ya es casi opaco), pero sí
     desenfoca lo que se alcanza a ver de la foto en el 5% que queda
     traslúcido, evitando que se vea "ruido" nítido de fondo detrás del
     texto. */
  .jg-cancha-card{ cursor:pointer; border:1.5px solid var(--border); background:rgba(20,27,44,0.95); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:12px; padding:14px; margin-bottom:8px; }
  .jg-cancha-card-nombre{ font-size:14px; color:var(--text); }
  .jg-cancha-card-precio{ font-size:13px; color:var(--lime); font-weight:700; }
  .jg-cancha-card-detalles{ font-size:12px; color:var(--text-muted); margin-top:4px; }
  .jg-cancha-card.elegida{ border-color:var(--lime); background:rgba(200,245,29,0.08); }
  .jg-cancha-card.elegida .jg-cancha-card-nombre{ color:var(--lime); }

  .btn{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:16px; border-radius:10px; border:none; padding:14px 20px; cursor:pointer; width:100%; }
  .btn-lime{ background:var(--lime); color:#0a0e16; }
  /* .btn-black — "Continuar con Apple" (2026-08-04), mismo criterio que
     round-robin-inicio.html/registro-jugador.html. */
  .btn-black{ background:#000; color:#fff; }
  .btn:disabled{ opacity:0.5; cursor:default; }

  .precio-linea{ display:flex; justify-content:space-between; font-size:15px; margin-bottom:16px; padding-top:10px; border-top:1px solid var(--border-soft); }
  .precio-linea strong{ color:var(--lime); font-family:var(--font-display); font-size:20px; }

  .error{ display:none; color:var(--red); font-size:13px; margin-bottom:14px; }
  .exito{ text-align:center; padding:20px 0; }
  .exito h2{ font-family:var(--font-display); font-size:24px; margin-bottom:10px; color:var(--lime); }
  .placeholder{ color:var(--text-muted); font-size:14px; text-align:center; padding:20px 0; grid-column:1/-1; }

  /* Crema difuminado en celular/iPad — revertido (2026-08-03, pedido
     explícito: "reservar cancha vuelve a los colores de la version de
     computadora", confirmado: "sacar el crema de celular/iPad
     también"). Volvió a los colores oscuros originales en todo tamaño
     de pantalla, igual que estaba antes del pedido de crema del
     2026-08-03. */