/* css/openplay-listado.css — CSS de Open Play (portal/openplay-listado.html),
   extraído del <style> inline (2026-07-31, pedido explícito: "CSS
   externo y cacheable", continuando Landing/RRE/Club el mismo
   día — de paso, para poder precargarlo con <link rel="prefetch">
   desde round-robin-express.html, que enlaza acá) — no se cachea
   nunca yendo pegado al documento HTML. Página standalone — nadie
   más carga este archivo, así que no hay riesgo de romper otra
   pantalla. Ya cubierto por el Cache-Control de /css/:path* en
   vercel.json (agregado con la Landing).
*/

  :root{
    --bg: #0a0e16; --bg-soft: #0d1320; --card: #111726; --card-soft: #141b2c;
    --border: #232b3d; --border-soft: #1a2132;
    --text: #f4f6fa; --text-muted: #8c93a6; --text-faint: #5c6478;
    --lime: #c8f51d; --lime-dark: #9bc212; --lime-bg: #1b2310; --red: #f55b5b;
    --font-display: 'Barlow Condensed', sans-serif;
  }
  /* Tema RAQplay (2026-08-10) — mismo criterio que css/jugar.css/css/openplay.css:
     fondo negro sólido + tarjetas blancas con texto oscuro legible, botones
     lima intactos. Página con foto de fondo: no se toca --bg, se oscurece
     el overlay. Las variables de texto/borde se redefinen SOLO adentro de
     .opl-card/.opl-modal (bug real ya corregido 2 veces esta sesión en
     otras páginas: ponerlas en html[data-brand="raqplay"] directo deja el
     header/nav de afuera, sobre la foto oscura, con texto invisible). */
  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"] .opl-card,
  html[data-brand="raqplay"] .opl-modal{
    --border: #d8d8d8; --border-soft: #e2e2e2;
    --text: #0a0a0a; --text-muted: #55565c; --text-faint: #8a8a8a;
    background:rgba(255,255,255,0.94); color:#0a0a0a;
  }
  html[data-brand="raqplay"] .opl-modal input,
  html[data-brand="raqplay"] .opl-modal select,
  html[data-brand="raqplay"] .opl-modal textarea{
    background:#f0f0f0; color:#0a0a0a; border-color:#d8d8d8;
  }
  html[data-brand="raqplay"] .opl-modal select option{ background:#f0f0f0; color:#0a0a0a; }
  html[data-brand="raqplay"] .opl-modal .autocomplete-sugerencias-box{ background:#ffffff; border-color:#e2e2e2; }
  html[data-brand="raqplay"] .opl-modal .autocomplete-sugerencia:hover{ background:#f0f0f0; }
  /* .opl-foto-opcion/-vacia y los tracks de sliders seguían con
     background:var(--card)/var(--card-soft) (oscuro, sin tocar) mientras
     su texto/label ya heredaba --text-muted oscuro de .opl-modal de
     arriba — sin esto quedaban gris oscuro sobre azul oscuro, ilegible. */
  html[data-brand="raqplay"] .opl-modal .opl-foto-opcion{ background:#e4e4e4; }
  html[data-brand="raqplay"] .opl-modal .opl-foto-opcion-vacia{ background:#d8d8d8; }
  html[data-brand="raqplay"] .opl-modal .opl-slider-row input[type=range],
  html[data-brand="raqplay"] .opl-modal .opl-dupr-slider-track-bg{ background:#e4e4e4; border-color:#d8d8d8; }
  /* Lima sobre tarjeta blanca no se lee (mismo bug ya corregido en
     css/openplay.css/css/jugar.css) — estos 3 usos de color:var(--lime)
     como texto plano, sin fondo propio, quedaban sobre el fondo blanco
     de .opl-modal. --lime en sí no se toca (los botones lo necesitan
     intacto); .opl-badge-oficial/.opl-badge-comunidad-modal NO se tocan
     a propósito: tienen su propio fondo oscuro (--lime-bg/var(--card),
     sin cambiar), el lima ahí sigue siendo legible. */
  html[data-brand="raqplay"] .opl-modal .opl-sede-vinculo-activo,
  html[data-brand="raqplay"] .opl-modal .opl-slider-valor,
  html[data-brand="raqplay"] .opl-modal .opl-dupr-slider-valores{ color:#6b8200; }
  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:640px; margin:0 auto; padding:24px; }

  /* Foto de fondo de toda la página + tarjetas transparentes
     (2026-08-02, pedido explícito: "transparencia al 0,95" — mismo
     patrón que Landing/Inscripciones/Reservas/Round Robin Express).
     Dos capas fixed detrás de todo, y .opl-card pasa de un fondo
     sólido a semitransparente + blur. */
  .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%);
  }

  .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; }
  /* opl-header-row (2026-07-31, pedido explícito: "que filtre toda la
     data... por pais") — fila logo + selector de país. Antes el .logo
     era el único elemento acá arriba (con su propio margin-bottom); se
     conserva el mismo espaciado total moviéndolo a esta fila nueva. */
  .opl-header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
  .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); }

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

  .opl-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .opl-header h1{ font-family:var(--font-display); font-size:26px; font-weight:800; }
  /* Antes un cuadrado 38x38 SOLO con el ícono "+" — pill con texto
     "Crear" al lado (2026-08-05, pedido explícito: "deberiamos escribir
     algo como crear para que la gente sepa esto... donde comunidades
     pueden crear open") — nada indicaba qué hacía ese botón. */
  .opl-btn-crear{
    display:flex; align-items:center; gap:6px; height:38px; padding:0 16px 0 12px;
    border-radius:10px; background:var(--lime); color:#0a0e16; border:none; cursor:pointer; flex-shrink:0;
    font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.3px; text-transform:uppercase;
  }
  .opl-btn-crear:hover{ filter:brightness(1.08); }

  /* Estilo de tabs con subrayado — mismo patrón ya establecido en
     dashboard/torneo-pagina-publica.html (.pp-tab) y
     dashboard/torneo-tesoreria.html (.ts-tab), pedido explícito del
     usuario (2026-07-22) para reemplazar las pills sólidas de antes,
     respetando los mismos colores (--lime/--muted/--text) de siempre. */
  .opl-filtros{ display:flex; gap:4px; overflow-x:auto; padding-top:6px; border-bottom:1px solid var(--border-soft); margin-bottom:14px; }
  .opl-filtro{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.4px; text-transform:uppercase; padding:10px 16px; background:none; border:none; border-bottom:3px solid transparent; color:var(--text-muted); cursor:pointer; white-space:nowrap; }
  .opl-filtro:hover{ color:var(--text); }
  .opl-filtro.is-activo{ color:var(--lime); border-bottom-color:var(--lime); }

  /* "Cerca de mí" + buscador, un solo rectángulo (2026-08-03, pedido
     explícito: "boton de busqueda y cerca de mi que debe ser igual que
     en incripciones juntar ambos") — mismo patrón exacto que
     .insc-search-bar de portal/inscripciones.html. Antes cada uno tenía
     su propio fondo/borde, sueltos uno encima del otro; ahora el
     fondo/borde vive en .opl-search-bar (el contenedor común, ver el
     HTML — envuelve #opl-cerca-de-mi-row y .opl-buscador-wrap) y ambos
     hijos quedan transparentes por dentro, compartiendo esa única caja.
     .opl-cerca-de-mi-row usa display:contents a propósito — sigue
     siendo el mismo <div> que oplRenderCercaDeMi() reconstruye entero
     en cada toggle (portal/js/openplay-listado.js), pero visualmente
     no pinta su propia caja: dentro de un flex contenedor,
     display:contents hace que SUS HIJOS (el botón) se comporten como
     hijos directos de .opl-search-bar, sin una capa extra de layout.
     El buscador sigue siendo un <input> estático fuera de ese div (ver
     comentario en el HTML) — nunca pierde el foco al escribir.
     Colores oscuros/lima (2026-08-03, pedido explícito: "puede open
     play volver a los colores de la version de computo... para
     telefonos" — se vuelve al tema oscuro original, el mismo que ya
     tenía esta página antes de la conversión a crema/café de esta
     sesión; el rectángulo unificado se mantiene, solo cambia el color). */
  .opl-search-bar{
    display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:20px;
    background:var(--card-soft); border:1px solid var(--border); border-radius:10px; padding:4px;
  }
  .opl-cerca-de-mi-row{ display:contents; }
  .opl-cerca-de-mi-btn{
    display:inline-flex; align-items:center; gap:6px;
    flex-shrink:0; padding:8px 12px; background:transparent; border:none;
    border-radius:8px; color:var(--text-muted); font-size:13px; font-weight:700; cursor:pointer;
    font-family:'Barlow', sans-serif; white-space:nowrap;
  }
  .opl-cerca-de-mi-btn:hover{ color:var(--text); }
  .opl-cerca-de-mi-btn.is-activo{ color:var(--lime); background:var(--lime-bg); }

  /* Buscador (2026-07-31, pedido explícito: "un buscador que filtre
     sede o tambien por principiantes, avanzados, intermedios... que
     sea muy discreto") — mismo tamaño/tono que .opl-cerca-de-mi-btn,
     pero sin el peso visual de un botón (sin mayúsculas ni negrita) —
     discreto a propósito, se nota al usarlo, no antes. */
  .opl-buscador-wrap{ flex:1; min-width:200px; max-width:420px; }
  .opl-buscador-input{
    width:100%; padding:8px 12px; background:transparent; border:none;
    color:var(--text); font-size:13px; font-family:'Barlow', sans-serif;
  }
  .opl-buscador-input::placeholder{ color:var(--text-faint); }
  .opl-buscador-input:focus{ outline:none; }

  /* Grilla en vez de lista vertical (2026-08-03, pedido explícito: "las
     casillas que no esten tan estiradas" — mostrado en preview,
     aprobado con "si asi") — antes flex-direction:column, cada tarjeta
     ocupaba TODO el ancho disponible como una barra estirada de punta
     a punta; el mismo patrón que ya usa Torneos (.torneos-grid,
     portal/torneos.html). En celular sigue viéndose una sola columna
     (240px mínimo no entra dos veces en un viewport típico), pero cada
     tarjeta queda proporcionada en vez de estirada. */
  .opl-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
  .opl-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; overflow:hidden; }
  /* Foto de portada (2026-07-31, pedido explícito: "un contenedor mas
     pequeno que este [tarjeta de Torneos] con informacion asi y que
     pueda usar la misma foto url que la clone de ahi que tiene club en
     la pantalla principal de inicio de la pagina del club") — reusa
     directamente instalaciones/{id}.fotos[0] (mismo campo que pinta
     .club-hero en portal/club.html, _clubPintarPerfil(),
     portal/js/club.js), vía _oplSedesCatalogo (ya trae el documento
     completo de la sede, sin otra consulta — ver su comentario en
     portal/js/openplay-listado.js). Más chica que el banner de
     Torneos (.t-card-banner, 110px) a propósito — acá es solo un
     acento visual, no el elemento principal de la tarjeta. Solo un
     Oficial con sede e instalaciones/{id}.fotos cargada la tiene — un
     Oficial sin foto o un Comunidad (sin sede real) se ven exactamente
     igual que antes, sin esta franja. */
  .opl-card-foto{
    height:72px; position:relative;
    background:linear-gradient(160deg, var(--border-soft) 0%, var(--bg-soft) 100%);
    background-size:cover; background-position:center;
  }
  .opl-badge-on-foto{ position:absolute; top:8px; left:8px; }
  .opl-card-body{ padding:16px 18px; }
  .opl-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .opl-card-nombre{ font-weight:700; font-size:16px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .opl-badge{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; padding:2px 7px; border-radius:5px; flex-shrink:0; }
  .opl-badge-oficial{ background:var(--lime-bg); color:var(--lime); }
  .opl-badge-comunidad{ background:var(--card-soft); color:var(--text-muted); border:1px solid var(--border); }
  .opl-card-info{ font-size:12.5px; color:var(--text-muted); margin-bottom:12px; }
  /* Vínculo automático de sede (2026-08-09) — reemplaza el <select>
     con todas las sedes; este aviso pasa a lima cuando "Lugar"
     coincide con una sede real, ver _oplActualizarVinculoSedeComunidad(). */
  .opl-sede-vinculo-activo{ color:var(--lime); font-weight:600; }
  .opl-card-actions{ display:flex; gap:8px; }

  .btn{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:13px; border-radius:9px; border:none; padding:9px 14px; cursor:pointer; }
  .btn-lime{ background:var(--lime); color:#0a0e16; }
  .btn-outline{ background:transparent; border:1px solid var(--border); color:var(--text); flex:1; }
  .btn-danger{ background:transparent; border:1px solid var(--red); color:var(--red); }
  .btn:disabled{ opacity:0.5; cursor:default; }
  .btn-block{ width:100%; margin-bottom:10px; }

  .placeholder{ color:var(--text-muted); font-size:14px; text-align:center; padding:30px 0; }

  input, select, textarea, label{ display:block; }
  /* label/input/select/textarea vivien EXCLUSIVAMENTE dentro de
     .opl-modal en esta página (confirmado: el buscador y el selector de
     país tienen sus propias clases con estilo propio, no dependen de
     estas reglas genéricas) — se editan directo, sin necesidad de
     scopear. textarea sumado (2026-08-05) para el campo Descripción del
     formulario de Crear/Editar. */
  label{ font-size:12px; color:var(--text-muted); margin-bottom:6px; }
  input, select, textarea{ 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; }
  textarea{ resize:vertical; }
  select{ color-scheme:dark; }
  select option{ background:var(--card-soft); color:var(--text); }
  input[type=time]{ color-scheme:dark; }

  /* Hora de inicio/fin lado a lado (2026-08-06, "Crear Open Play" de
     Comunidad rediseñado: selectores/deslizadores en vez de texto
     escrito — ver el comentario largo en oplRenderFormularioCrear(),
     portal/js/openplay-listado.js). */
  .opl-horario-row{ display:flex; gap:10px; }
  .opl-horario-row > div{ flex:1; min-width:0; }

  /* Sliders de Cupo/Canchas/Monto — mismo criterio: nada para escribir,
     solo arrastrar. El valor en vivo va en el label (.opl-slider-valor),
     no hace falta un número al lado del track. */
  .opl-slider-row{ margin-bottom:18px; }
  .opl-slider-row label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .opl-slider-valor{ font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--lime); }
  /* Más grandes (2026-08-06, pedido explícito: "un poco mas grande
     todo los deslizadores") — track de 6px a 10px, thumb de 22px a
     30px, más fácil de agarrar con el dedo. */
  .opl-slider-row input[type=range]{
    width:100%; margin:0; padding:0; appearance:none; -webkit-appearance:none;
    height:10px; border-radius:5px; background:var(--card-soft); border:1px solid var(--border); outline:none;
  }
  .opl-slider-row input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%;
    background:var(--lime); border:2px solid var(--bg); cursor:pointer; margin-top:-10.5px;
    box-shadow:0 1px 4px rgba(0,0,0,0.4);
  }
  .opl-slider-row input[type=range]::-moz-range-thumb{
    width:30px; height:30px; border-radius:50%; background:var(--lime); border:2px solid var(--bg); cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.4);
  }
  .opl-slider-row input[type=range]::-moz-range-track{ height:10px; border-radius:5px; background:var(--card-soft); border:1px solid var(--border); }

  /* Rango de DUPR — deslizador doble (2026-08-09, pedido explícito: "un
     deslizador doble con puntos de donde a donde dupr"). Dos
     input[type=range] superpuestos sobre el mismo track: cada uno es
     transparente y pointer-events:none, solo su thumb recupera
     pointer-events:auto — así los dos knobs se agarran por separado
     aunque compartan el mismo ancho (técnica estándar, sin librería).
     Mismos tamaños/colores que .opl-slider-row de arriba (thumb 30px,
     track 10px) para que se vean parte de la misma familia visual.
     .opl-dupr-slider-fill arranca sin left/right en línea — con los
     dos thumbs en los extremos por default (ver _oplMarkupRangoDupr()),
     0/0 es exactamente el 100% del track, sin necesitar JS al pintar
     el formulario por primera vez. */
  .opl-dupr-slider-wrap{ margin-bottom:4px; }
  .opl-dupr-slider-valores{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--lime); margin-bottom:8px; }
  .opl-dupr-slider-track{ position:relative; height:30px; }
  .opl-dupr-slider-track-bg{ position:absolute; top:10px; left:0; right:0; height:10px; border-radius:5px; background:var(--card-soft); border:1px solid var(--border); }
  .opl-dupr-slider-fill{ position:absolute; top:10px; left:0; right:0; height:10px; border-radius:5px; background:var(--lime); }
  .opl-dupr-slider-input{
    position:absolute; top:0; left:0; width:100%; margin:0; padding:0; height:30px;
    background:transparent; appearance:none; -webkit-appearance:none; outline:none; pointer-events:none;
  }
  .opl-dupr-slider-input::-webkit-slider-runnable-track{ -webkit-appearance:none; background:transparent; height:30px; }
  .opl-dupr-slider-input::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%;
    background:var(--lime); border:2px solid var(--bg); cursor:pointer; pointer-events:auto;
    box-shadow:0 1px 4px rgba(0,0,0,0.4);
  }
  .opl-dupr-slider-input::-moz-range-track{ background:transparent; height:30px; border:none; }
  .opl-dupr-slider-input::-moz-range-thumb{
    width:30px; height:30px; border-radius:50%; background:var(--lime); border:2px solid var(--bg); cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.4); pointer-events:auto;
  }
  .opl-dupr-slider-escala{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-faint); margin-top:6px; }

  /* Autocompletado de texto (2026-07-25) — mismo patrón visual que ya
     usaba Round Robin Express para sugerir jugadores (.rre-sugerencias-box/
     .rre-sugerencia, round-robin-express.html), generalizado acá con
     nombre de clase propio porque esta página no comparte CSS con esa
     (mismo criterio ya usado en este archivo para otros estilos). */
  .autocomplete-wrap{ position:relative; }
  .autocomplete-sugerencias-box{ position:absolute; top:calc(100% - 10px); left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:9px; overflow:hidden; z-index:10; max-height:180px; overflow-y:auto; }
  .autocomplete-sugerencia{ padding:9px 14px; font-size:13px; cursor:pointer; }
  .autocomplete-sugerencia:hover{ background:var(--card-soft); }

  .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; }

  /* Modal — crear/editar/login, siempre dentro de la misma pantalla,
     nunca una navegación aparte. */
  .opl-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); align-items:center; justify-content:center; z-index:200; padding:20px; }
  .opl-modal-overlay.show{ display:flex; }
  /* overscroll-behavior:contain (2026-08-05, bug real reportado: "si
     deslizo y llego al final no puedo devolverme") — mismo fix ya
     aplicado a .rre-modal/#rre-modal-dupr-lista (css/round-robin-express.css):
     sin esto, al llegar al final del scroll interno y seguir deslizando,
     el navegador móvil encadenaba el gesto a la página de atrás
     (pull-to-refresh o scroll del body), dejando el modal como
     "trabado" sin poder volver a subir. */
  .opl-modal{ background:rgba(17,23,38,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--border); border-radius:16px; padding:24px; max-width:400px; width:100%; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; }
  .opl-modal h2{ font-family:var(--font-display); font-size:20px; font-weight:800; margin-bottom:6px; }
  .opl-badge-comunidad-modal{ display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; color:var(--lime); background:var(--card); border:1px solid var(--border); padding:3px 9px; border-radius:6px; margin-bottom:12px; }

  /* Pantalla "¿Qué querés jugar?" (2026-08-06, pedido explícito: "en
     open play crear en la parte de comunidad deberia salir una
     pantalla antes... para escoger entre un open play, entre un round
     robin, liga o un pozo") — primera pantalla del modal de Crear,
     antes del formulario. Mismos 4 sistemas que ya ofrece el Dashboard
     (dash-view-toggle, dashboard.css) — clase propia acá porque esta
     página no comparte esa hoja de estilo. Rediseño a tarjetas con foto
     (2026-08-06, mismo día, pedido explícito: "sigue con lo que
     construiste solo que en lugar de centrado el jugar partidos va de
     lado como esas fotos" — mockup de referencia: grid 2x2, cada
     tarjeta con foto de fondo, título y subtítulo alineados
     abajo-izquierda) — reemplaza los botones planos de solo texto
     (.opl-sistema-btn) de la primera versión de esta pantalla. */
  .opl-sistema-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  /* Fondo azul sólido en vez de foto (2026-08-07, pedido explícito:
     "en crear open que hay unas fotos ponga un fondo liso puede ser en
     azul solido") — sin background-image/gradiente de legibilidad, ya
     no hace falta con un fondo plano. var(--card) en vez de un azul
     propio (2026-08-07, pedido explícito: "los cuadros azules deberian
     ser mas oscuros siguiendo lo que ya tenemos en las partes sin
     transparencia") — mismo tono sólido/opaco que el resto de la app
     usa fuera de las capas translúcidas (.opl-modal, .opl-card, etc.),
     en vez de un azul más claro inventado para esta pantalla. */
  .opl-sistema-card{
    position:relative; height:118px; border-radius:12px; overflow:hidden; cursor:pointer;
    background:var(--card); border:2px solid transparent;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
    padding:10px; text-align:left; box-sizing:border-box;
  }
  .opl-sistema-card.is-activo{ border-color:var(--lime); }
  .opl-sistema-card-titulo, .opl-sistema-card-sub{ display:block; }
  .opl-sistema-card-titulo{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:16px; letter-spacing:0.3px; color:#fff; text-transform:uppercase; }
  .opl-sistema-card-sub{ font-size:11px; color:rgba(255,255,255,0.8); margin-top:2px; }

  /* Selector visual de foto de portada — Comunidad (2026-07-31, pedido
     explícito: "en open play... comunidad si coincide con sede usar el
     mismo criterio de fotos") — mismo patrón que ya usa el Dashboard
     para un Open Play Oficial (.dash-op-foto-opcion,
     dashboard/css/dashboard.css), namespaced opl-foto-* para esta
     página aparte (no comparte CSS con el Dashboard). Solo aparece si
     el texto de "Lugar" coincide EXACTO (slugify, mismo criterio que
     ya usa el autocompletado de este mismo campo) con una sede
     registrada que tenga logo y/o foto — ver
     oplActualizarSelectorFotoPortadaComunidad(), openplay-listado.js. */
  .opl-foto-selector{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
  .opl-foto-opcion{ width:74px; cursor:pointer; border:2px solid var(--border); border-radius:10px; padding:4px; text-align:center; background:var(--card); }
  .opl-foto-opcion:hover{ border-color:var(--border-soft); filter:brightness(1.15); }
  .opl-foto-opcion.is-activo{ border-color:var(--lime); }
  .opl-foto-opcion img{ width:100%; height:44px; object-fit:cover; border-radius:6px; background:var(--bg-soft); display:block; }
  .opl-foto-opcion-vacia{ width:100%; height:44px; border-radius:6px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--text-faint); }
  .opl-foto-opcion span{ display:block; font-size:9.5px; font-weight:600; color:var(--text-muted); margin-top:4px; }
  .opl-foto-opcion.is-activo span{ color:var(--lime); }

  /* Panel de gestión (dueño de un Open Play de Comunidad) — tres
     bloques fijos: Compartir / Participantes / Acciones. */
  .opl-gestion-titulo{ font-family:var(--font-display); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-faint); margin:20px 0 10px; }
  .opl-gestion-titulo:first-of-type{ margin-top:16px; }
  .opl-link-box{ display:flex; gap:8px; }
  .opl-link-box input{ margin-bottom:0; font-size:12px; color:var(--text-muted); }
  .opl-participantes-conteo{ font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--lime); margin-bottom:10px; }
  .opl-gestion-divider{ height:1px; background:var(--border-soft); margin-bottom:12px; }
  .opl-gestion-subtitulo{ font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:4px; }
  .opl-inscrito-fila{ font-size:13px; padding:7px 0; border-bottom:1px solid var(--border-soft); }
  .opl-inscrito-fila:last-child{ border-bottom:none; }

  /* Modal "Gestionar" — crema revertida (2026-08-03, pedido explícito:
     "y en open gestion tambien cambiar a azul") — había pasado a
     crema/café el mismo día ("solo el modal Gestionar"), mismo
     criterio que el resto de Open Play (listado/individual): vuelve al
     tema oscuro original de siempre. */

  .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; }

  /* Chip del logo oficial de DUPR + tarjeta del toggle "Evento DUPR" —
     MISMOS valores exactos que round-robin-express.html
     (.rre-dupr-logo-chip/.rre-dupr-config-card), copiados acá porque
     este archivo no comparte <style> con ese (mismo criterio ya usado
     arriba con .rre-icon). Fase 3 UX DUPR, 2026-07-20. Estado activo
     con clase explícita (.active) vía JS, no :has() — mismo criterio
     ya aplicado en Dashboard y Round Robin Express. */
  .rre-dupr-logo-chip{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; border-radius:6px; overflow:hidden; flex-shrink:0; }
  .rre-dupr-logo-img{ height:24px; width:24px; object-fit:cover; display:block; }
  .opl-dupr-toggle-card{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; margin-top:6px; background:var(--card-soft); border:1px solid var(--border-soft); border-radius:10px; cursor:pointer; transition:border-color .15s,background .15s; }
  .opl-dupr-toggle-card.active{ border-color:var(--lime); background:var(--lime-bg); }
  .opl-dupr-toggle-card input[type="checkbox"]{ width:18px; height:18px; flex-shrink:0; }
  .opl-dupr-toggle-texto{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .opl-dupr-toggle-texto strong{ font-size:13px; }
  .opl-dupr-toggle-texto small{ font-size:11px; color:var(--text-faint); }

  /* 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: "open play tambien hay que
     hacerlo" — 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. Los 3
     ítems (Puntos/Inicio/Mis Partidos) ya no incluían a Open Play a sí
     misma — no hay nada que sacar, solo el estilo visual cambia. */
  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); }