/* css/reservas-sedes.css — CSS de la página de listado de sedes de
   Reservas (portal/reservas-sedes.html), extraído del <style> inline
   (2026-07-31, pedido explícito: "podriamos hacer lo mismo con
   reservas desde round robin" — mismo patrón ya usado en Landing,
   Round Robin Express, Club y Open Play). 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;
    --font-display: 'Barlow Condensed', sans-serif;
  }
  /* Tema RAQplay (2026-08-10) — mismo criterio que css/jugar.css/
     portal/registro-jugador.html: fondo negro sólido + tarjetas blancas
     con texto oscuro legible, botones lima intactos. Esta página tiene
     foto de fondo (.page-bg-photo/.page-bg-overlay más abajo) así que
     NO se toca --bg, solo se oscurece el overlay. Las variables de
     texto se redefinen SOLO adentro de .card-sede (la tarjeta real de
     cada sede) — nunca en html[data-brand="raqplay"] directo — para no
     dejar invisible el título/subtítulo/header que viven afuera de
     cualquier tarjeta, sobre la foto oscura. NOTA: portal/reservas-sedes.html
     también precarga (prefetch, no <link rel="stylesheet">) css/jugar.css
     para la siguiente pantalla — ese archivo no controla nada acá, ya
     tiene su propio bloque raqplay independiente. */
  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%);
  }
  html[data-brand="raqplay"] .card-sede{
    --border-soft: #e2e2e2; --text: #0a0a0a; --text-muted: #55565c; --text-faint: #8a8a8a;
    background:rgba(255,255,255,0.94); color:#0a0a0a;
  }
  /* Lima como TEXTO sobre tarjeta blanca no se lee (2026-08-10, mismo
     hallazgo que css/jugar.css/css/openplay.css/portal/registro-jugador.html). */
  html[data-brand="raqplay"] .card-sede .card-sede-ver-club{ 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:1000px; margin:0 auto; padding:0 24px 60px; }

  /* 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" — "reserva de
     cancha"). Mismo patrón que Landing/Inscripciones: dos capas fixed
     detrás de todo, y .card-sede pasa de un fondo sólido a
     semitransparente. Las tarjetas CON foto real de sede (.tiene-foto,
     ver más abajo) no cambian — esa foto real siempre tapa por
     completo el color de fondo, con o sin transparencia debajo. */
  .page-bg-photo{
    position:fixed; inset:0; z-index:-2;
    background-image:url('/img/reservas-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%);
  }

  .site-header{ border-bottom:1px solid var(--border-soft); padding:16px 0; margin-bottom:32px; }
  .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 24px; flex-wrap:wrap; row-gap:10px; }
  /* Bug real reportado (2026-08-05): "el boton de home queda fuera en
     version de celular" — país + ES/EN + "Inicio" (3 elementos en
     .header-right) no entran en una sola fila en un celular angosto;
     sin flex-wrap arriba, "Inicio" quedaba empujado fuera de la
     pantalla en vez de bajar de línea. En pantallas anchas esto no
     cambia nada (todo sigue entrando en una sola fila). */
  @media (max-width: 480px){
    .header-right{ flex:1 1 100%; justify-content:flex-end; }
  }
  .logo{ display:flex; align-items:center; gap:10px; }
  .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); }
  .back-link:hover{ color:var(--lime); }
  .header-right{ display:flex; align-items:center; gap:16px; }
  /* Toggle ES/EN (2026-08-04, bug real reportado: "sigue saliendo
     reserva sin traducir" — resultó ser esta página, /jugar, la lista
     de sedes; el arreglo anterior había cubierto solo portal/jugar.html,
     la página de UNA sede). Mismo componente/markup que jugar.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); }
  /* pais-filtro-select (2026-07-31, pedido explícito: "que filtre toda
     la data... por pais") — mismo componente reusado en torneos.html. */
  .pais-filtro-select{
    background:var(--card-soft); border:1px solid var(--border); border-radius:8px;
    color:var(--text-muted); font-family:var(--font-display); font-weight:700;
    font-size:12px; letter-spacing:0.3px; padding:7px 8px; cursor:pointer; max-width:130px;
  }
  .pais-filtro-select:hover{ color:var(--text); }

  h1{ font-family:var(--font-display); font-size:clamp(28px,4vw,40px); font-weight:800; margin-bottom:8px; }
  .subinfo{ font-size:14px; color:var(--text-muted); margin-bottom:28px; }

  /* "Cerca de mí" (2026-07-29, pedido explícito) — mismo botón/patrón
     visual que ya usan Torneos (portal/torneos.html) y Open Play
     (portal/openplay-listado.html), para consistencia en todo el
     Portal. */
  .res-cerca-de-mi-row{ margin-bottom:20px; }
  .res-cerca-de-mi-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:12px 16px; background:var(--card-soft); border:1px solid var(--border);
    border-radius:10px; color:var(--text-muted); font-size:13px; font-weight:700; cursor:pointer;
    font-family:'Barlow', sans-serif; white-space:nowrap;
  }
  .res-cerca-de-mi-btn:hover{ color:var(--text); }
  .res-cerca-de-mi-btn.is-activo{ color:var(--lime); border-color:var(--lime); background:rgba(200,245,29,0.12); }

  .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
  /* Vuelve a 0.4 (2026-08-06, pedido explícito con captura de pantalla:
     "/jugar... esos contenedores, la parte azul, el efecto de apple y
     transparencia" — la franja de info debajo de la foto se veía
     sólida). Había pasado a 0.95 el 2026-08-02 (commit 84342e2, pedido
     explícito de ese momento: "reservas igual al 0,95") — cambio de
     parecer confirmado hoy, escrito acá para que quede el porqué. Solo
     esta página: no se toca Landing/Inscripciones/RRE, que en ese
     mismo commit se llevaron a 0.95 junto con esta y no fueron parte
     del pedido de hoy. La foto de la sede (.card-sede-foto, abajo) no
     se ve afectada — tiene su propia imagen opaca encima, este cambio
     solo se nota en la franja de texto sin foto. */
  .card-sede{ position:relative; overflow:hidden; 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; }
  /* Foto de sede (2026-08-02, pedido explícito: "en reservas hay que
     hacer lo que hicimos en open play dejar la foto solida de club") —
     mismo patrón que .opl-card-foto (css/openplay-listado.css): franja
     propia arriba de la tarjeta, SIN degradado oscuro encima — se ve
     sólida/limpia. El texto vive abajo en .card-sede-body, sobre el
     fondo normal de la tarjeta, no sobre la foto — no hace falta
     atenuarla para que se siga leyendo. */
  .card-sede-foto{ height:120px; background-size:cover; background-position:center; }
  .card-sede-body{ padding:20px; display:flex; flex-direction:column; gap:8px; }
  .card-sede h3{ font-family:var(--font-display); font-weight:800; font-size:19px; }
  .card-sede p{ font-size:13px; color:var(--text-muted); }
  .card-sede .btn{ margin-top:8px; text-align:center; background:var(--lime); color:#0a0e16; font-family:var(--font-display); font-weight:700; padding:10px; border-radius:9px; }
  .card-sede-ver-club{ color:var(--lime); font-weight:700; font-size:12px; }
  .card-sede-ver-club:hover{ text-decoration:underline; }
  .placeholder{ color:var(--text-muted); font-size:14px; text-align:center; padding:40px 0; grid-column:1/-1; }

  /* Crema 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-02. */

  /* Sistema de iconos PICKCR (compartido con Round Robin Express). */
  .rre-icon{ display:inline-block; vertical-align:-3px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

  /* Barra inferior tipo Round Robin Express (2026-08-02, pedido
     explícito: "reservas en la version de ipad ios y android o
     visualizacion de telefono deberia tener el menu que tiene round
     robin"). Escondida en desktop (más de 980px, mismo corte "es
     mobile" que ya usa index.html) — en escritorio esta página ya
     tiene su propio header de navegación, no hace falta la barra fija
     abajo.
     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. 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: 980px){
    .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)); }
    main.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)); }