/* 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{
    /* Paleta oficial de marca (2026-08-20, pedido explícito: mockup de
       guía de marca — "Indigo Pickcr Primario #3B36C9", "Lima Pickcr
       Acento #C6FF00") — mismo criterio ya aplicado en portal/torneo.html
       y portal/inscripcion.html. --bg-soft/--card-soft se recalculan
       manteniendo la misma relación de brillo que tenían con --bg
       antes (delta +26/+27/+30 en --card-soft), para que sigan
       sintiéndose parte de la misma familia índigo. --card se lleva a
       #111111 (el "Negro Botones/Texto fuerte" del mockup) porque acá
       se usa como chip/superficie oscura sobre el fondo de color
       (autocompletado, badge "Comunidad" del modal, selector de foto),
       nunca como tarjeta blanca. */
    --bg: #1446e1; --bg-soft: #0c3ec3; --card: #111111; --card-soft: #2f5ce0;
    --border: #565dc4; --border-soft: #4d54ba;
    --text: #f4f6fa; --text-muted: #c7cbe8; --text-faint: #a8adcf;
    --lime: #C6FF00; --lime-dark: #9ecc00; --lime-bg: #1b2310; --red: #f55b5b;
    --font-display: 'Poppins', 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).
     --bg SÍ se toca ahora (2026-08-19, bug real reportado: "en open
     match el color de fondo... no es negro es azul oscuro" — el modal
     de pantalla completa de New Match usa background:var(--bg) directo
     (.opl-modal-overlay.is-pantalla-completa, más abajo), sin foto
     detrás que disimule el azul marino de PICKCR — mismo valor negro
     que ya usa css/round-robin-express.css para RaqPlay. */
  html[data-brand="raqplay"]{ --card-soft:#181818; --bg:#050505; --bg-soft:#0c0c0c; }
  /* Restaura los tonos apagados/bordes originales SOLO para RaqPlay
     (2026-08-20, pedido explícito: "raqplay se queda con sus tonos
     negro y blanco") — ver mismo comentario en portal/inscripcion.html. */
  html[data-brand="raqplay"]{ --text-muted: #8c93a6; --text-faint: #5c6478; --border: #232b3d; --border-soft: #1a2132; }
  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,
  html[data-brand="raqplay"] .opl-modal .opl-participantes-conteo{ color:#6b8200; }
  /* .opl-card (arriba, línea ~29) también pasa a fondo blanco — mismo
     bug, misma corrección: distancia "Cerca de mí" y "Cómo llegar" en
     las tarjetas de la lista, no solo en el modal. 2026-08-13, bug real
     reportado: "en cerca de mi... se ve los km de distancia... y no se
     lee". */
  html[data-brand="raqplay"] .opl-card .opl-distancia-valor{ 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; }
  /* Selector de país + búsqueda/"Cerca de mí" en RaqPlay (2026-08-16,
     mismo hallazgo/pedido que portal/instalaciones.html el 2026-08-13:
     "el selector... y el de cerca de mí... fondo azul deberia ser
     blanco... letras legibles") — .pais-filtro-select y .opl-search-bar
     (el pill que envuelve el botón y el buscador) usan var(--card-soft),
     que nunca se redefine para RaqPlay (queda el #141b2c oscuro de
     PICKCR) sobre el fondo claro. .opl-cerca-de-mi-btn.is-activo NO se
     toca a propósito — su fondo lima oscuro (--lime-bg) ya es legible
     por sí solo, mismo criterio que los demás badges de este archivo. */
  html[data-brand="raqplay"] .pais-filtro-select,
  html[data-brand="raqplay"] .opl-search-bar{
    background:#ffffff; border-color:#d8d8d8; color:#0a0a0a;
  }
  html[data-brand="raqplay"] .opl-cerca-de-mi-btn{ color:#55565c; }
  html[data-brand="raqplay"] .pais-filtro-select:hover,
  html[data-brand="raqplay"] .opl-cerca-de-mi-btn:hover{ color:#0a0a0a; }
  html[data-brand="raqplay"] .opl-buscador-input{ color:#0a0a0a; }
  html[data-brand="raqplay"] .opl-buscador-input::placeholder{ color:#8a8a8a; }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:'Poppins', 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(20,70,225,0.6) 0%, rgba(20,70,225,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:#111111; }
  .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-frozen-top — cabecera + título + pestañas + buscador
     congelados arriba (2026-08-17, pedido explícito: "hace falta hacer
     con open play lo de la portada" — mismo tratamiento ya hecho en
     inscripciones/instalaciones/reserva tu cancha). Esta página no
     tenía un &lt;header&gt; propio — .opl-header-row + .opl-header +
     #opl-filtros + .opl-search-bar (las 4 filas de arriba) son las que
     se envuelven en el nuevo contenedor sticky; #opl-lista sigue en el
     flujo normal de main.wrap, scrolleando por detrás. Ya NO es un
     fondo brand-agnostic (2026-08-19, bug real reportado: "todos los
     portales perdieron el negro al azul de pickcr, y ese azul no debe
     ir en raqplay solo en pickcr") — el tono #2c3178 es explícitamente
     de PICKCR, RaqPlay necesita su propio override acá abajo. */
  .opl-frozen-top{
    position:sticky; top:0; z-index:50;
    background:rgba(47,92,224,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  html[data-brand="raqplay"] .opl-frozen-top{ background:rgba(5,5,5,0.94); }
  /* Achicado (2026-09-04, pedido explícito: "en open play hay mucha
     distancia en lo de cerca de mi y arriba y lo mas importante
     deberia ser ver open" — capturas de celular circulando el bloque
     de arriba) — menos aire entre header/tabs/buscador y menos padding
     abajo del bloque congelado, para que la primera tarjeta real
     aparezca antes sin scrollear. */
  .opl-frozen-top .wrap{ padding:8px 24px 6px; }
  .opl-header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; }
  .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:#111111; }
  .idioma-btn:not(.is-activo):hover{ color:var(--text); }

  .opl-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
  .opl-header h1{ font-family:var(--font-display); font-size:20px; 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:#111111; 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:4px; border-bottom:1px solid var(--border-soft); margin-bottom:6px; }
  .opl-filtro{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.4px; text-transform:uppercase; padding:7px 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:0;
    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:'Poppins', 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. */
  /* height:36px explícito acá (2026-09-04, pedido explícito: "en open
     play aun se ve grande el contenedor en celular para cerca de mi")
     — bug real confirmado en el navegador: .opl-buscador-wrap medía
     50px de alto con auto/flex/lo que fuera, aunque su único hijo real
     (el &lt;input&gt;, con el mismo padding:8px 12px que ya usa
     .opl-cerca-de-mi-btn) mide exactamente 36px — una altura mínima
     intrínseca del propio &lt;input&gt; como ítem flex (quirk conocido de
     Chromium con controles de formulario) que ningún ajuste de
     display/min-height sobre el input lograba anular. Fijar la altura
     acá, igual a la del botón "Cerca de mí" al lado, es lo único que
     de verdad la saca — probado en vivo antes de aplicarlo. */
  .opl-buscador-wrap{ height:36px; 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:'Poppins', 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. */
  /* main.wrap (2026-09-04, pedido explícito: "en open play hay mucha
     distancia en lo de cerca de mi y arriba y lo mas importante
     deberia ser ver open") — el .wrap genérico de arriba trae 24px de
     padding por los 4 lados; acá arriba ya viene justo después del
     bloque congelado (que tiene su propio padding-bottom), así que ese
     mismo 24px de arriba solo suma aire de más antes del deslizador de
     fecha y la primera tarjeta. Los costados/abajo quedan igual.
     Sin tocar la regla genérica .wrap — la usan otros bloques de esta
     misma página (el modal) que si necesitan el padding completo. */
  main.wrap{ padding-top:6px; }
  .opl-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }

  /* Deslizador de fecha + agrupado por horario (2026-09-03, pedido
     explícito: "deslizador de fechas y horarios... la forma de
     presentar", inspirado en capturas de otra app — luego "la idea es
     que funcione en todos": aplica a las 4 pestañas por igual, no solo
     Comunidad). Mismo patrón visual que .agenda-dia-chip de
     css/club.css (chip con nombre de día + número, estado activo en
     lima) pero con sus propias clases acá — esta página no carga
     css/club.css, y así queda desacoplada de esa otra pantalla. */
  .opl-fecha-tira{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
  .opl-fecha-chip{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--card-soft); border:1px solid var(--border-soft); border-radius:9px; padding:6px 2px; cursor:pointer; color:var(--text-muted); }
  .opl-fecha-chip.is-activo{ background:var(--lime); border-color:var(--lime); color:#111111; }
  .opl-fecha-dia-nombre{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
  .opl-fecha-dia-numero{ font-family:var(--font-display); font-weight:800; font-size:16px; }
  .opl-fecha-punto{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:0.7; }

  /* Encabezado de grupo por hora ("6:00 pm · 8 encuentros") — hijo
     DIRECTO de #opl-lista (que es CSS grid, ver arriba), así que
     necesita grid-column:1/-1 para ocupar la fila entera en vez de
     quedar apretado en una sola columna de tarjeta. */
  .opl-hora-header{ grid-column:1/-1; font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:0.3px; text-transform:uppercase; color:var(--text); margin:18px 0 2px; }
  .opl-hora-header:first-child{ margin-top:0; }

  .opl-card{ background:rgba(47,92,224,0.6); 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-precio-on-foto{ position:absolute; top:8px; right:8px; font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:5px; background:rgba(0,0,0,0.55); color:#fff; backdrop-filter:blur(2px); }
  .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; }
  /* flex-wrap:wrap (2026-08-11, bug real reportado con captura: "en la
     version celular se ve perfecto en la de ipad el boton de borrar se
     pierde") — .opl-lista usa grid-template-columns:repeat(auto-fill,
     minmax(240px,1fr)) (más abajo): en celular (<640px) esa grilla cae
     a 1 sola columna, tarjeta ancha, entran los 4 botones (Editar/
     Compartir/Gestionar/Borrar) sin problema. En iPad (≥~640px, dentro
     del .wrap de 640px máximo) ya entran 2 columnas — la tarjeta se
     angosta bastante más que en celular — y sin flex-wrap acá, Borrar
     quedaba empujado fuera de la tarjeta en vez de bajar de línea.
     Mismo patrón ya usado para este mismo problema en
     dashboard/css/dashboard.css (.manage-entity-row/-actions). */
  .opl-card-actions{ display:flex; flex-wrap:wrap; 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:#111111; }
  .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:'Poppins', 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; }

  /* "Generar con IA" (2026-08-19, pedido explícito: "veo que la
     competencia tiene una ia para crear opens" / "si") — caja propia
     arriba del formulario de Crear, separada visualmente (borde +
     fondo distinto) para que se lea como un atajo opcional, nunca
     parte obligatoria del formulario. Ver oplGenerarConIa()/
     _oplAplicarBorradorIA() en portal/js/openplay-listado.js. */
  .opl-ia-box{ background:var(--card-soft); border:1px solid var(--border-soft); border-radius:12px; padding:14px; margin-bottom:20px; }
  .opl-ia-box label{ font-size:12px; font-weight:700; color:var(--lime); text-transform:uppercase; letter-spacing:0.4px; display:block; margin-bottom:8px; }
  .opl-ia-box textarea{ width:100%; resize:vertical; margin-bottom:10px; }
  .opl-ia-box .error{ margin-top:8px; margin-bottom:0; }

  /* "Chat Pickcr IA" flotante (2026-08-20, pedido explícito: "para la
     ia esta muy oculto hagamos un chat pickcr ia que se despliegue
     centralizado") — botón fijo siempre visible sobre .rre-bottom-nav
     (z-index mayor), abre el panel con el mismo textarea+Generar que
     ya tenía .opl-ia-box, solo que reubicado. Ver oplAbrirChatIA()/
     oplGenerarConIaFlotante() en portal/js/openplay-listado.js. */
  .opl-ia-flotante-btn{ position:fixed; right:16px; bottom:calc(90px + env(safe-area-inset-bottom, 0px)); z-index:50; width:52px; height:52px; border-radius:50%; background:var(--lime); border:none; box-shadow:0 4px 16px rgba(0,0,0,0.35); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .opl-ia-flotante-btn-texto{ font-family:'Poppins', sans-serif; font-weight:800; font-size:14px; letter-spacing:0.3px; color:var(--lime-bg); }
  .opl-ia-flotante-panel{ position:fixed; right:16px; left:16px; bottom:calc(150px + env(safe-area-inset-bottom, 0px)); z-index:50; max-width:420px; margin-left:auto; background:var(--card-soft); border:1px solid var(--border-soft); border-radius:16px; padding:14px; box-shadow:0 8px 28px rgba(0,0,0,0.4); flex-direction:column; gap:10px; }
  .opl-ia-flotante-header{ display:flex; align-items:center; justify-content:space-between; font-family:'Poppins', sans-serif; font-weight:700; font-size:14px; color:var(--lime); text-transform:uppercase; letter-spacing:0.4px; }
  .opl-ia-flotante-cerrar{ background:none; border:none; cursor:pointer; color:var(--text-soft, inherit); padding:4px; display:flex; }
  .opl-ia-flotante-panel textarea{ width:100%; resize:vertical; }
  .opl-ia-flotante-panel .error{ margin:0; }
  html[data-brand="raqplay"] .opl-ia-flotante-btn-texto{ color:#050505; }

  /* 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:22px; }
  .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, otra vez (2026-08-17, pedido explícito: "podemos hacer
     mas grandes los contenedores que a veces los de manos grandes les
     cuesta moverlos" — al sacar Link de ubicación y Requisito de DUPR
     del formulario de Crear, sobra espacio para agrandar lo que queda)
     — track de 10px a 14px, thumb de 30px a 38px. Ya se habían
     agrandado una vez antes (2026-08-06: 6px→10px, 22px→30px) — esta
     es la segunda vuelta. margin-top del thumb webkit recalculado para
     seguir centrado: -(38-14)/2 - 0.5 = -12.5px. */
  .opl-slider-row input[type=range]{
    width:100%; margin:0; padding:0; appearance:none; -webkit-appearance:none;
    height:14px; border-radius:7px; 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:38px; height:38px; border-radius:50%;
    background:var(--lime); border:2px solid var(--bg); cursor:pointer; margin-top:-12.5px;
    box-shadow:0 1px 4px rgba(0,0,0,0.4);
  }
  .opl-slider-row input[type=range]::-moz-range-thumb{
    width:38px; height:38px; 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:14px; border-radius:7px; 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 38px,
     track 14px, agrandado 2026-08-17 — ver comentario grande ahí) para
     que se vean parte de la misma familia visual. La altura del
     contenedor .opl-dupr-slider-track (antes 30px, igual al thumb de
     esa época) sube a 38px por la misma razón — el thumb no puede ser
     más alto que su contenedor sin recortarse.
     .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:38px; }
  .opl-dupr-slider-track-bg{ position:absolute; top:12px; left:0; right:0; height:14px; border-radius:7px; background:var(--card-soft); border:1px solid var(--border); }
  .opl-dupr-slider-fill{ position:absolute; top:12px; left:0; right:0; height:14px; border-radius:7px; background:var(--lime); }
  .opl-dupr-slider-input{
    position:absolute; top:0; left:0; width:100%; margin:0; padding:0; height:38px;
    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:38px; }
  .opl-dupr-slider-input::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:38px; height:38px; 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:38px; border:none; }
  .opl-dupr-slider-input::-moz-range-thumb{
    width:38px; height:38px; 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. */
  /* overflow-x:hidden (2026-08-11, bug real reportado con captura en
     iPad: "el reocurrente salido de pantalla" — un <label> largo sin
     min-width:0 dentro de una fila flex podía empujar el ancho del
     modal más allá de max-width en vez de recortarse/bajar de línea,
     saliendo como una tira vertical de texto cortado fuera del modal.
     Se arregla también en el origen (min-width:0 + overflow-wrap en el
     label de #opl-recurrente), esto es el resguardo general para
     cualquier otro contenido similar dentro del modal). */
  .opl-modal{ background:rgba(47,92,224,0.6); 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; overflow-x:hidden; 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 completa para "¿Qué querés jugar?"/"¿Qué tipo de
     pozo?"/"¿Cómo se juega?" (2026-08-19, pedido explícito: "en new
     match vamos a hacer lo mismo un contenedor completo... tenemos mas
     espacio para acomodar la informacion de los cuadros" — mismo
     criterio ya aplicado al wizard de Round Robin Express el mismo
     día). oplModalPantallaCompleta() (portal/js/openplay-listado.js)
     agrega/quita esta clase en el overlay compartido SOLO mientras se
     muestra una de esas 3 pantallas — el resto del modal (login,
     formulario largo, gestión, editar) sigue siendo el popup chico de
     siempre, sin tocar nada de esas reglas. */
  .opl-modal-overlay.is-pantalla-completa{ background:var(--bg); padding:0; align-items:stretch; justify-content:stretch; }
  .opl-modal-overlay.is-pantalla-completa .opl-modal{
    max-width:none; width:100%; max-height:none; height:100dvh;
    border-radius:0; border:none; background:var(--bg);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:24px 20px calc(120px + env(safe-area-inset-bottom,0px));
  }
  /* opl-modal-bottombar (2026-08-19, pedido explícito: "hay unos
     contenedores mas grandes que otro cuando doy next en pozos...
     algunos next estan mas altos que otros") — mismo criterio que
     #rre-wizard-bottombar en css/round-robin-express.css: fixed, fuera
     del contenido que scrollea, así que queda en el mismo lugar de la
     pantalla en las 3 pantallas de tarjetas, sin importar cuánto texto
     tenga cada una. El padding-bottom de arriba (120px) le deja aire
     para no quedar tapado por esta barra al scrollear hasta el final. */
  .opl-modal-bottombar{
    position:fixed; left:0; right:0; bottom:0; z-index:210;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top, var(--bg) 65%, transparent);
    display:flex; flex-direction:column; gap:10px;
  }

  /* 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-soft); 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:'Poppins', 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; }
  /* Tipo de pozo aún no diseñado (2026-08-12, pedido explícito: "mete
     el que falta por hacer y le pones proximamente") — misma tarjeta
     .opl-sistema-card, deshabilitada y atenuada en vez de escondida. */
  .opl-sistema-card.is-proximamente{ cursor:not-allowed; opacity:0.45; }
  .opl-sistema-card.is-proximamente .opl-sistema-card-titulo{ color:rgba(255,255,255,0.7); }

  /* Tarjetas más grandes en pantalla completa (2026-08-19, pedido
     explícito: "tenemos mas espacio para acomodar la informacion de
     los cuadros") — grid de 1 sola columna en vez de 2x2 (antes
     118px de alto apretados abajo-izquierda, ahora una fila alta por
     tarjeta con el título/subtítulo con más aire). Mismas clases de
     siempre (.opl-sistema-card/-grid), scopeadas por
     .is-pantalla-completa — la versión chica del modal (si alguna vez
     vuelve a necesitarse en popup) no cambia. */
  .opl-modal-overlay.is-pantalla-completa .opl-sistema-grid{ grid-template-columns:1fr; gap:12px; }
  .opl-modal-overlay.is-pantalla-completa .opl-sistema-card{
    height:auto; min-height:96px; padding:18px 20px; justify-content:center; gap:4px;
  }
  .opl-modal-overlay.is-pantalla-completa .opl-sistema-card-titulo{ font-size:20px; }
  .opl-modal-overlay.is-pantalla-completa .opl-sistema-card-sub{ font-size:13px; }
  /* .opl-tipopozo-card en pantalla completa ya tiene lugar de sobra —
     el subtítulo puede quedar siempre visible, sin el toggle de
     "i" pensado para el grid 2x2 chico y apretado. */
  .opl-modal-overlay.is-pantalla-completa .opl-tipopozo-card{ min-height:80px; justify-content:center; }
  .opl-modal-overlay.is-pantalla-completa .opl-tipopozo-card .opl-sistema-card-sub{ display:block; }
  .opl-modal-overlay.is-pantalla-completa .opl-tipopozo-card-info{ display:none; }

  /* .opl-tipopozo-card (2026-08-12, pedido explícito: "la informacion
     se ve muy recargada de los diferentes tipo quiero solo el nombre
     en el contenedor y una i de informacion que cuando se toque
     despliegue toda la informacion") — SOLO la pantalla "Tipo de pozo"
     (oplRenderSeleccionTipoPozo()); la pantalla anterior "Sistema"
     (Open Play/Round Robin/Liga/Pozos) sigue con .opl-sistema-card tal
     cual, sin este modificador — no fue motivo de la queja. Altura
     auto (no la fija de 118px) porque ahora casi siempre solo hay
     título — CSS Grid igual estira la fila entera si UNA tarjeta se
     despliega (comportamiento esperado, no un bug). */
  .opl-tipopozo-card{ height:auto; min-height:56px; justify-content:center; gap:2px; }
  .opl-tipopozo-card-fila{ display:flex; align-items:center; gap:6px; width:100%; }
  .opl-tipopozo-card .opl-sistema-card-sub{ display:none; }
  .opl-tipopozo-card.is-info-abierta .opl-sistema-card-sub{ display:block; }
  .opl-tipopozo-card-info{
    flex:none; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.9); font-size:11px; font-weight:800; font-style:italic;
    font-family:Georgia, serif; display:flex; align-items:center; justify-content:center;
    cursor:pointer; margin-left:auto;
  }
  .opl-tipopozo-card.is-info-abierta .opl-tipopozo-card-info{ background:var(--lime); color:#111111; }
  .opl-tipopozo-card.is-proximamente .opl-tipopozo-card-info{ pointer-events:none; opacity:0.6; }

  /* 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-distancia-valor (2026-08-13) — distancia "Cerca de mí" y el
     link "Cómo llegar" dentro de .opl-card, mismo lima que el resto del
     texto en la tarjeta oscura de PICKCR — bug reportado en RaqPlay, ver
     override abajo. */
  .opl-distancia-valor{ color:var(--lime); }
  .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; accent-color:var(--lime); }
  .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); }

  /* "Estándar"/"Premium" del panel de tipo de evento DUPR (dentro de
     #opl-tipo-evento-panel, oplMarkupEventoDupr() en
     portal/js/openplay-listado.js) — bug real reportado (2026-08-14):
     "cuando creamos match la parte de dupr sale en azul a la par de
     crear open play y las letras casi no se leen". Estos 2 radios
     nunca tuvieron accent-color propio (a diferencia del checkbox de
     arriba, que tampoco lo tenía hasta ahora) — el navegador los
     pintaba con su azul nativo, fuera de lugar en una pantalla 100%
     lima/oscura y con poco contraste contra el fondo. */
  #opl-tipo-evento-panel input[type="radio"]{ accent-color:var(--lime); }

  /* 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; }
  /* Azul translúcido (2026-08-19, pedido explícito: "el navegador de
     abajo es de color negro, y debería ser transparente en pickcr") —
     reemplaza el fondo sólido negro de 2026-08-13 (ver css/openplay.css
     para el detalle completo). RaqPlay mantiene el negro sólido de
     siempre (ver override más abajo). */
  .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:rgba(47,92,224,0.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--border-soft); padding:12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
  html[data-brand="raqplay"] .rre-bottom-nav{ background:rgba(5,5,5,0.94); border-top-color:rgba(255,255,255,0.08); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .rre-bottom-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; cursor:pointer; font-family:'Poppins', 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; }
  /* background: #1446e1 literal, no var(--card-soft) (2026-08-21,
     pedido explícito: "ese morado donde esta torneo y demas hay que
     cambiarlo por un azul que ya tenemos vivo") — --card-soft en este
     archivo (#5551e6, morado) también alimenta otras 15 reglas fuera
     de alcance de este pedido; el override de RaqPlay para este panel
     (html[data-brand="raqplay"] .rre-quickmenu-panel, más arriba en
     este archivo) no se toca — sigue funcionando igual, no depende de
     esta variable. */
  .rre-quickmenu-panel{ display:none; position:absolute; bottom:calc(100% + 10px); right:0; background:#1446e1; 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); }