/* css/openplay.css — CSS de la página de un Open Play individual
   (portal/openplay.html), extraído del <style> inline (2026-07-31,
   pedido explícito: "los open si duran un poco mas en cargar" —
   junto con minificar openplay-registro.js y precargar todo desde
   Round Robin Express / el listado de Open Play). No se cachea
   nunca yendo pegado al documento HTML. Página standalone — nadie
   más carga este archivo. Ya cubierto por el Cache-Control de
   /css/:path* en vercel.json (agregado con la Landing).
*/

  :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;
    --font-display: 'Barlow Condensed', sans-serif;
    /* Crema revertida (2026-08-03, pedido explícito: "quiero que sea
       azul otra vez") — esta página había pasado a crema/café el mismo
       día ("dentro de open play igual"), mismo criterio que ya se
       revirtió antes en Reservar cancha/Open Play (listado). Vuelve al
       tema oscuro original de siempre. */
    --verde-cancha: #4c7a4a; --verde-claro: #8fbf6a;
  }
  /* Tema RAQplay (2026-08-10) — mismo criterio que css/jugar.css: fondo
     negro sólido + tarjetas blancas con texto oscuro legible, botones
     lima intactos. Ver comentario extendido en css/jugar.css. */
  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" — con esto en
     html[data-brand="raqplay"] directo, el logo/menú del header y el
     nav inferior, que viven AFUERA de #op-contenido/.card sobre la
     foto oscura, heredaban texto oscuro y quedaban invisibles). Todo
     lo de adentro de .card (label, .placeholder, etc.) ya usa
     var(--text)/var(--text-muted) en su regla base. */
  html[data-brand="raqplay"] .card,
  html[data-brand="raqplay"] .op-cancha-grid,
  html[data-brand="raqplay"] .op-sport-badge,
  html[data-brand="raqplay"] .op-dupr-requisito-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 .op-cancha-slot{ background:rgba(0,0,0,0.05); }
  html[data-brand="raqplay"] .op-menu-dropdown{ background:#ffffff; }
  html[data-brand="raqplay"] .op-menu-item{ color:#0a0a0a; }
  html[data-brand="raqplay"] .op-menu-item:hover,
  html[data-brand="raqplay"] .op-menu-item:active{ background:#f0f0f0; }
  /* Lima sobre tarjeta blanca no se lee (2026-08-10, bug real: "el como
     llegar verde no se lee") — --lime se queda igual (los botones lo
     necesitan intacto, texto oscuro adentro), pero el TEXTO en lima
     sobre fondo claro sí necesita un tono más oscuro para contraste. */
  html[data-brand="raqplay"] .card .op-como-llegar,
  html[data-brand="raqplay"] .card .exito h2,
  html[data-brand="raqplay"] .card .op-dupr-rango-valores strong,
  html[data-brand="raqplay"] .card .op-cancha-slot-avatar,
  html[data-brand="raqplay"] .card .op-info-row svg{ color:#6b8200; }
  html[data-brand="raqplay"] .card .op-cancha-slot-avatar{ border-color:#6b8200; }
  html[data-brand="raqplay"] .card .btn-outline{ color:#0a0a0a; border-color:#d8d8d8; }
  html[data-brand="raqplay"] .card input{
    background:#f0f0f0; color:#0a0a0a; border-color:#d8d8d8;
  }
  html[data-brand="raqplay"] .rre-quickmenu-panel{ background:#ffffff; }
  html[data-brand="raqplay"] .rre-quickmenu-panel a{ color:#0a0a0a; }
  html[data-brand="raqplay"] .rre-quickmenu-panel a:hover{ background:#f0f0f0; }

  *,*::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:480px; margin:0 auto; padding:24px; padding-top:calc(24px + env(safe-area-inset-top, 0px)); }

  /* Foto de fondo de toda la página (2026-08-06, pedido explícito:
     mismo patrón que Landing/Inscripciones/Reservas/RRE/Jugar —
     ver comentario en portal/openplay.html). Reusa
     img/openplay-fondo.webp, ya existente en el repo. */
  .page-bg-photo{
    position:fixed; inset:0; z-index:-2;
    background-image:url('/img/openplay-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%);
  }

  .op-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:28px; }
  .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; }

  /* 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); }

  .op-menu-wrap{ position:relative; flex-shrink:0; }
  .op-menu-btn{
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--border); border-radius:10px;
    color:var(--text); font-size:20px; line-height:1; cursor:pointer;
  }
  .op-menu-dropdown{
    position:absolute; top:calc(100% + 8px); right:0; min-width:180px;
    background:var(--card); border:1px solid var(--border-soft); border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4); overflow:hidden; z-index:1000;
  }
  .op-menu-item{
    display:block; width:100%; text-align:left; background:transparent; border:none;
    color:var(--text); font-family:'Barlow', sans-serif; font-size:14px; font-weight:500;
    padding:13px 16px; cursor:pointer;
  }
  .op-menu-item:hover, .op-menu-item:active{ background:var(--card-soft); }

  .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:24px; }
  h1{ font-family:var(--font-display); font-size:26px; font-weight:800; margin-bottom:6px; }
  .info{ font-size:13px; color:var(--text-muted); margin-bottom:20px; }
  .op-como-llegar{ color:var(--lime); }

  /* Descripción corta + logo DUPR (2026-08-05, pedido explícito: "quiero
     ahi una opcion de descripcion que salga en incribirse corta. y si
     es dupr el evento que salga el logo de dupr en incripcion") —
     _opInfoDescripcionHtml(), portal/js/openplay-registro.js. */
  .op-descripcion{ font-size:13px; color:var(--text-muted); line-height:1.5; margin:-10px 0 20px; }
  .op-dupr-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text-muted); background:var(--card-soft); border:1px solid var(--border-soft); border-radius:20px; padding:4px 10px 4px 4px; margin:-10px 0 20px; }
  .op-dupr-badge img{ width:20px; height:20px; border-radius:5px; object-fit:cover; display:block; }

  .btn{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:15px; border-radius:10px; border:none; padding:13px 20px; cursor:pointer; width:100%; margin-bottom:10px; }
  .btn-lime{ background:var(--lime); color:#0a0e16; }
  .btn-outline{ background:transparent; border:1px solid var(--border); color:var(--text); }
  .btn:disabled{ opacity:0.5; cursor:default; }
  /* .btn-black — "Continuar con Apple" (2026-08-04, regla 4.8 de la App
     Store), mismo criterio negro/blanco que registro-jugador.html/
     round-robin-inicio.html. Solo se pinta cuando hay puente nativo de
     iOS — ver opLoginConApple() en portal/js/openplay-registro.js. */
  .btn-black{ background:#000; color:#fff; }

  input{
    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:10px;
  }

  .toggle-correo{ text-align:center; font-size:12px; color:var(--text-faint); margin:10px 0; cursor:pointer; }
  .form-correo{ display:none; margin-top:10px; }

  .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:22px; margin-bottom:8px; color:var(--lime); }
  .placeholder{ color:var(--text-muted); font-size:14px; text-align:center; padding:20px 0; }

  .rre-icon{ display:inline-block; vertical-align:-2px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

  /* Menú inferior — mismo patrón que .rre-bottom-nav de
     round-robin-express.html (2026-07-27, primera vez que se replica
     en el Portal).
     Rediseño (2026-08-06, pedido explícito: "falta en incripcion de
     open play... cambiarlo" — mismo dock transparente que
     round-robin-express.html/.rre-dock) — de fondo sólido a
     transparente, texto/íconos con text-shadow marcado. Mismos 3
     ítems (Puntos/Inicio/Mis Partidos) — ninguno se saca, ya no
     incluían esta página (el detalle de un Open Play puntual,
     /open-play/:id) a sí misma. */
  body{ padding-bottom:82px; }
  .rre-icon-solid{ fill:currentColor; stroke:none; }
  .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)); }
  .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:11px; font-weight:600; color:rgba(244,246,250,0.92); 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)); }

  /* Panel "Más" — mismo patrón .rre-quickmenu-panel de round-robin-express.html,
     anclado hacia ARRIBA (no hacia abajo como en RRE) porque el disparador
     acá vive en la barra inferior, no en el header. Sin Idioma ni "Buscar
     actualizaciones" (dependen de js/round-robin-express-adapter.js, que
     esta página no carga). */
  .rre-bottom-nav-item.opl-quickmenu{ position:relative; }
  .opl-quickmenu-btn{ all:unset; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; color:inherit; font:inherit; }
  .rre-quickmenu-panel{ display:none; position:absolute; bottom:calc(100% + 10px); right:0; background:var(--card-soft); border:1px solid var(--border); border-radius:10px; padding:6px; min-width:170px; z-index:50; box-shadow:0 10px 28px rgba(0,0,0,.4); text-align:left; }
  .rre-quickmenu-panel.show{ display:block; }
  .rre-quickmenu-panel a{ display:block; padding:9px 12px; font-size:13px; font-weight:600; color:var(--text); border-radius:7px; }
  .rre-quickmenu-panel a:hover{ background:var(--bg); color:var(--lime); }

  /* Vista de canchas — "Open Match" (2026-08-08, pedido explícito con
     foto de referencia: "tenemos este nueva pagina con una foto de la
     cancha donde cada persona que se incribe aparece en la cancha o si
     se desincribe desaparece"). Ver _opRenderVistaCanchas(),
     portal/js/openplay-registro.js — SOLO para sistema:'round_robin',
     el resto de Open Play sigue con la lista de texto de siempre. Cada
     cancha: 2 columnas (un lado de la red cada una) con 2 cupos cada
     una, línea vertical en el medio simulando la red — mismo criterio
     de "vidrio esmerilado" azul que ya usan las tarjetas de Inscripciones/
     horario de reserva en el resto de la app (rgba(17,23,38,0.4) +
     blur), no un azul propio inventado para esto. */
  .op-canchas-wrap{ display:flex; flex-direction:column; gap:16px; margin-top:4px; }
  .op-cancha-bloque{ }
  .op-cancha-titulo{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
  .op-cancha-grid{ display:flex; align-items:stretch; gap:0; background:rgba(17,23,38,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--border-soft); border-radius:14px; padding:12px; position:relative; }
  .op-cancha-lado{ flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
  .op-cancha-red{ width:2px; flex-shrink:0; margin:0 12px; background:repeating-linear-gradient(180deg, var(--border) 0, var(--border) 6px, transparent 6px, transparent 12px); }
  .op-cancha-slot{ display:flex; align-items:center; gap:8px; padding:8px; background:rgba(255,255,255,0.05); border-radius:10px; min-width:0; }
  .op-cancha-slot.is-vacio{ opacity:0.5; }
  .op-cancha-slot-avatar{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--lime); color:var(--lime); display:flex; align-items:center; justify-content:center; }
  .op-cancha-slot.is-vacio .op-cancha-slot-avatar{ border-color:var(--text-faint); color:var(--text-faint); }
  .op-cancha-slot-nombre{ font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .op-cancha-slot.is-vacio .op-cancha-slot-nombre{ color:var(--text-faint); font-weight:500; }

  /* Deporte + requisito de DUPR (2026-08-09, pedido explícito: "que en
     la version publica espetifique que los rangos de dupr son estos...
     y me gusta mucho la cancha que diseñamos" — mismo estilo "vidrio
     esmerilado" que .op-cancha-grid de arriba, misma paleta de esta
     página, nunca los colores de la captura de referencia que mandó
     el usuario). */
  .op-sport-badge{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--text); background:rgba(17,23,38,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--border-soft); border-radius:20px; padding:6px 14px; margin:0 0 16px; }
  .op-dupr-requisito-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:14px; padding:16px 18px; margin:0 0 16px; }
  .op-dupr-requisito-titulo{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin:0 0 12px; }
  .op-dupr-rango-valores{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .op-dupr-rango-valores strong{ font-family:'Barlow Condensed', sans-serif; font-size:22px; font-weight:800; color:var(--lime); }
  .op-dupr-rango-valores span{ font-size:12px; color:var(--text-faint); }
  .op-dupr-rango-track{ position:relative; height:6px; border-radius:3px; background:var(--border); margin-bottom:6px; }
  .op-dupr-rango-highlight{ position:absolute; top:0; bottom:0; border-radius:3px; background:var(--lime); }
  .op-dupr-rango-escala{ display:flex; justify-content:space-between; font-size:10px; color:var(--text-faint); margin-bottom:14px; }
  .op-info-row{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); padding:6px 0; border-top:1px solid var(--border-soft); }
  .op-info-row:first-of-type{ border-top:none; }
  .op-info-row svg{ flex-shrink:0; color:var(--lime); }