/* css/round-robin-express.css — CSS de Round Robin Express
   (round-robin-express.html), extraído del <style> inline
   (2026-07-31, pedido explícito: "CSS externo y cacheable", tras
   confirmar que era el bloque más grande del sitio, 30.5KB) — no
   se cachea nunca yendo pegado al documento HTML, y esta es la
   pantalla donde la gente pasa más tiempo activo (un partido
   completo, con recargas de por medio). Página standalone — nadie
   más carga este archivo, así que no hay riesgo de romper otra
   pantalla. No se agregó a la lista de precarga explícita de
   sw-round-robin.js (RRE_APP_SHELL_CODIGO_RUTAS) a propósito —
   el fetch handler genérico de ese Service Worker ya lo cachea
   solo después de la primera carga exitosa, mismo criterio que
   ya usa para imágenes y cualquier otro recurso no listado ahí.
*/

  /* Mismos design tokens que el resto de PICKCR — página standalone, no
     vive dentro de dashboard/ ni portal/ (Arquitectura CONGELADA,
     sección 4: no puede exigir sesión de Firebase Auth para cargar,
     rompería "funciona sin Internet de punta a punta" si la persona
     nunca inició sesión antes con conexión). */
  :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;
    --orange: #f5a623; --orange-bg: #332210;
    --red: #f55b5b; --red-bg: #331414;
    --font-display: 'Barlow Condensed', sans-serif;
    /* Crema/café REVERTIDO a gris-negro sobrio + lima (2026-08-04,
       pedido explícito: "en round robin todo y al cambiar a azul lo
       que era cafe pasa a verde otra vez" + "usemos letras blancas")
       — el experimento crema (2026-08-02/03) queda atrás en TODO Round
       Robin Express, no solo Inicio. Los nombres de variable
       (--crema-* y --cafe) quedan iguales a propósito — decenas de
       reglas en este archivo, muchas de ellas arreglos reales de
       contraste (texto negro sobre fondo oscuro, botones lima
       invisibles sobre crema, etc.), ya referencian estos tokens en
       #rre-configuracion/#rre-jugadores/#rre-mis-sesiones/
       #rre-sincronizacion/#rre-juego/#rre-finalizada/los modales de
       DUPR/Login/Registro — remapear SOLO los valores acá hace que
       todas esas reglas se resuelvan solas contra la paleta nueva, sin
       tener que tocar ni una de ellas (y sin arriesgar reintroducir
       los bugs de contraste que motivaron cada una en su momento).
       --cafe -> --lime (mismo verde que ya usa el resto del sitio
       oscuro) porque el motivo original de inventar --cafe (el lima no
       se leía bien sobre el crema claro) ya no aplica sobre este fondo
       oscuro. --crema-text -> --text (blanco) por el mismo motivo. */
    --crema-bg: var(--bg); --crema-border: rgba(255,255,255,0.08); --crema-hover: rgba(255,255,255,0.06);
    --crema-text: var(--text); --crema-text-muted: var(--text-muted); --cafe: var(--lime);
    /* Mismo gris-negro sobrio y transparente que .rre-menu-window
       (Inicio) y que .card de /jugar — "debe ser mas gris o un negro
       mas... que se vea serio sobrio". */
    --crema-bg-90: rgba(15,20,32,0.6);
    --verde-cancha: #4c7a4a; --verde-claro: #8fbf6a;
  }
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  /* touch-action:manipulation (2026-08-04, bug real reportado: "en ios
     hay un zoom a veces cuando toco dos veces seguidas") — sin esto,
     Safari/WebView interpretan dos toques seguidos y rápidos (ej. tocar
     "+1" del marcador dos veces) como el gesto nativo de doble-tap-para-
     zoom. Esto NO desactiva el pinch-zoom (accesibilidad) ni toca el
     viewport meta — solo saca ese gesto de doble-tap puntual, que acá
     nunca se usa a propósito. */
  body{ font-family:'Barlow', sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; touch-action:manipulation; }
  a{ text-decoration:none; color:inherit; }
  /* Botones sin menú nativo de "Compartir/Copiar" al mantener presionado
     (2026-08-04, bug real reportado: "si dejo el boton de menu
     precionado me da compartir") — Android trata el ícono/texto de
     adentro de un <button> como cualquier otro texto: un press-and-hold
     dispara la selección de texto nativa del WebView (barra con
     Compartir/Copiar). Ningún botón real de esta página necesita eso —
     son acciones (abrir el menú "⋮", crear sesión, etc.), no contenido
     para seleccionar. Página standalone (ver comentario de cabecera),
     no hereda esto de theme.css — se repite acá a propósito. */
  button{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  .wrap{ max-width:720px; margin:0 auto; padding:0 20px 60px; }
  /* iPad horizontal (2026-08-10, pedido explícito: "en el ipad se ve
     grandisimo todo cuando es en horizontal") — .wrap normalmente
     llega a su tope de 720px en cualquier pantalla ancha, lo cual
     está bien en un iPad vertical (768px de ancho, 1024px de alto:
     hay mucho aire vertical para scrollear cómodo). En horizontal
     (~1024-1180px de ancho, pero solo ~768-820px de alto), ese mismo
     ancho de 720px da cuadros/texto igual de grandes que en vertical,
     pero en una pantalla mucho más BAJA — se siente gigante porque
     entra mucho menos por pantalla. Acá se lo achica a un ancho más
     angosto, parecido al de un celular, para que todo (header, saludo,
     stats, Acciones rápidas) se vea proporcionado también apaisado.
     orientation:landscape solo (no min-width a secas) para no afectar
     desktop/laptop en una ventana angosta por accidente — un iPad real
     virado siempre reporta landscape de verdad. */
  @media (orientation:landscape) and (min-width:700px){
    .wrap{ max-width:460px; }
  }

  /* Foto de fondo de toda la página + tarjetas transparentes
     (2026-08-02, pedido explícito: "vamos a ir replicando esto en
     todas las paginas pero con diferentes fotos" — "para round robin"
     — "es la pagina de rre donde vive todo", round-robin-express.html,
     no round-robin-inicio.html que es solo la pantalla de login).
     Mismo patrón que el resto: dos capas fixed detrás de todo, y
     .card/.rre-partido-card pasan de un fondo sólido a
     semitransparente + blur. .rre-bottom-nav (la barra fija de abajo)
     queda sólida a propósito, igual que el resto de los bottom-nav
     del sitio. */
  .page-bg-photo{
    position:fixed; inset:0; z-index:-2;
    background-image:url('/img/inscripciones-fondo.webp');
    background-size:cover; background-position:center;
    background-repeat:no-repeat;
    /* transition (2026-08-06, pedido explícito: "la imagen de rre de
       fondo se este cambiando... automaticamente cada cierto tiempo")
       — rreIniciarRotacionFondo() (round-robin-express-adapter.js) usa
       esto para un crossfade suave entre fotos, en vez de un salto
       brusco. */
    transition:opacity 1s ease;
  }
  /* Degradado actualizado (2026-08-06, Home v2 importado de Claude
     Design) — mismos 4 stops/colores exactos del mockup
     (PICKCR Home.dc.html, bgGradient), navy en vez del azul oscuro
     anterior — position:fixed (no absolute+height fijo como en el
     mockup) porque acá SÍ cubre todo el scroll de verdad: al estar
     fijo, nunca se desplaza aunque la página sea más alta que la
     pantalla. */
  .page-bg-overlay{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(8,11,20,0.32) 0%, rgba(8,11,20,0.4) 30%, rgba(8,11,20,0.52) 70%, rgba(8,11,20,0.62) 100%);
  }

  .site-header{ border-bottom:1px solid var(--border-soft); padding:16px 0; margin-bottom:24px; }
  .site-header .wrap{ padding-bottom:0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .logo{ display:flex; align-items:center; gap:10px; }
  /* margin-left:auto (2026-08-07) — con el logo oculto en round-robin-express.html
     (ver comentario ahí), .rre-quickmenu queda como único hijo de
     .site-header .wrap; justify-content:space-between por sí solo lo
     pega a la izquierda con un solo hijo. Esto lo fuerza a la derecha
     sin tocar ninguna otra página que sí muestra el logo (ahí ya
     queda a la derecha por el space-between normal, este margin no
     cambia nada visible). */
  .rre-quickmenu{ margin-left:auto; }
  .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; flex-shrink:0; font-weight:800; }
  /* line-height:1 (2026-08-07, pedido explícito: "menos esapaciado
     entre pickcr y la linea de abajo en el logo") — el line-height
     por defecto de esta fuente dejaba un espacio visible entre "PICKCR"
     y la fila de DUPR/LATAM debajo. */
  .logo-text .name{ font-family:var(--font-display); font-weight:800; font-size:17.5px; line-height:1; }
  /* .tag y #rre-btn-logout (más abajo en round-robin-express.html) NO
     usan var(--text-faint) acá — ese gris (#5c6478) funciona bien
     sobre las tarjetas oscuras sólidas del resto de la app, pero el
     header (.site-header) no tiene fondo propio: queda directo sobre
     la foto que rota (rreIniciarRotacionFondo()) + el degradado
     oscuro. Bug reportado (2026-08-06): "pickcr costa rica en gris
     casi no se ve" — con fotos más claras (cielo, cancha soleada) ese
     gris medio se pierde. Primer intento: gris más oscuro — se
     probó en el navegador contra una foto oscura (rre-fondo-hombre-
     verde-cerca.webp) y el texto directamente desaparecía (oscuro
     sobre oscuro). Con 11 fotos rotando de brillo muy distinto, ningún
     color plano funciona en las 11 — se usa el mismo patrón ya
     probado de .rre-saludo-estado (el texto "Sin iniciar sesión..."
     un poco más abajo, que sí se lee bien en cualquier foto): claro +
     sombra oscura marcada, que ancla el texto tanto en fotos claras
     como oscuras. */
  .logo-text .tag{ font-size:10px; font-weight:600; letter-spacing:1px; color:rgba(244,246,250,0.75); text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9); }

  /* Wordmark de RaqPlay (2026-08-11, mockup original) — "RAQPLAY" con
     "RAQ" blanco + "PLAY" lima, en vez del ícono+"PICKCR"/tag de
     arriba. Oculto por defecto (PICKCR nunca lo muestra); bajo
     html[data-brand="raqplay"] se oculta .logo-mark/.logo-text en su
     lugar (_pickcrAplicarMarcaAlLogo(), shared/js/brand-config.js,
     sigue corriendo igual sobre esos 2 elementos — solo que quedan
     ocultos acá, sin efecto visible). */
  .rre-header-wordmark-raqplay{ display:none; }
  html[data-brand="raqplay"] .logo-mark,
  html[data-brand="raqplay"] .logo-text{ display:none; }
  html[data-brand="raqplay"] .rre-header-wordmark-raqplay{
    display:block; font-family:var(--font-display); font-weight:800; font-size:22px;
    letter-spacing:0.3px; text-transform:uppercase; line-height:1;
  }
  html[data-brand="raqplay"] .rre-header-wordmark-raqplay .raq{ color:#fff; }
  html[data-brand="raqplay"] .rre-header-wordmark-raqplay .play{ color:var(--lime); }

  /* DUPR bajo el tagline (2026-08-06, Home v2) — mismo tamaño/sombra
     que .tag de arriba (mismo criterio: legible sobre cualquier foto),
     el número en lima como el resto de los valores destacados de esta
     pantalla (stats, botón). */
  .rre-logo-dupr{ font-size:10px; font-weight:600; letter-spacing:0.5px; color:rgba(244,246,250,0.75); text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9); margin-top:0; }
  .rre-logo-dupr-num{ color:var(--lime); font-weight:800; }
  /* .rre-logo-dupr-fila (2026-08-07, pedido explícito: "ese latam debe
     ir integrado a dupr") — DUPR y el tag de país en la misma fila en
     vez de apilados (el separador "·" vive dentro del HTML de DUPR,
     ver comentario ahí). */
  .rre-logo-dupr-fila{ display:flex; align-items:center; margin-top:0; }

  h1{ font-family:var(--font-display); font-size:28.5px; font-weight:800; margin-bottom:4px; }
  h2{ font-family:var(--font-display); font-size:18.5px; font-weight:700; margin-bottom:12px; }
  .subtitle{ color:var(--text-muted); font-size:14.5px; margin-bottom:20px; }

  .card{ background:rgba(20,27,44,0.98); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--border-soft); border-radius:14px; padding:18px; margin-bottom:16px; }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:15.5px; border-radius:9px; border:1.5px solid transparent; padding:11px 18px; cursor:pointer; transition:filter .12s ease, background .12s ease; }
  .btn:active{ transform:translateY(1px); }
  .btn-lime{ background:var(--lime); color:#0a0e16; }
  .btn-lime:hover{ filter:brightness(1.08); }
  .btn-lime:disabled{ background:var(--border-soft); color:var(--text-faint); cursor:not-allowed; }
  /* .btn-black — "Continuar con Apple" (2026-08-04, Sign in with Apple,
     regla 4.8 de la App Store) — negro/blanco, mismo criterio de color
     que exigen las Human Interface Guidelines de Apple para este botón
     (nunca un color de marca de terceros), mismo que ya se usa en
     round-robin-inicio.html. display:none por defecto — el script que
     lo muestra (junto a cada modal, round-robin-express.html) solo lo
     hace visible con puente nativo de iOS, mismo motivo que en
     round-robin-inicio.html: sin un Services ID/clave de Apple Developer
     cargados en Firebase, el camino de navegador normal (signInWithPopup)
     siempre falla, así que nunca se ofrece ahí. */
  .btn-black{ background:#000; color:#fff; }
  .btn-black:hover{ filter:brightness(1.2); }
  .btn-black:disabled{ background:var(--border-soft); color:var(--text-faint); cursor:not-allowed; }
  .btn-outline{ border-color:var(--border); color:var(--text); background:transparent; }
  .btn-outline:hover{ border-color:var(--lime); color:var(--lime); }
  .btn-sm{ padding:7px 12px; font-size:13px; border-radius:7px; }
  .btn-block{ width:100%; }

  label{ display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px; font-weight:600; }
  input[type=text], input[type=number], select{
    width:100%; padding:10px 12px; background:var(--bg-soft); border:1px solid var(--border);
    border-radius:8px; color:var(--text); font-size:15.5px; font-family:inherit;
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
  .form-group{ margin-bottom:14px; }
  .checkbox-row{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--text); }
  .checkbox-row input{ width:auto; }

  .rre-historial-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
  .rre-historial-item:last-child{ border-bottom:none; }
  .rre-badge-estado{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px; margin-left:6px; text-transform:uppercase; }
  .rre-badge-configurando{ background:var(--border-soft); color:var(--text-faint); }
  .rre-badge-jugando{ background:var(--orange-bg); color:var(--orange); }
  .rre-badge-finalizada{ background:var(--lime-bg); color:var(--lime); }
  .rre-badge-archivado{ background:var(--border-soft); color:var(--text-faint); }

  .rre-jugador-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--bg-soft); border:1px solid var(--border); border-radius:20px; padding:9px 12px 9px 16px; font-size:17px; font-weight:600; margin:0 6px 8px 0; }
  .rre-jugador-chip button{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:15.5px; padding:0 2px; }
  .rre-jugador-chip button:hover{ color:var(--red); }
  .rre-warn-dupr{ font-size:13px; }

  .rre-sugerencias-box{ position:absolute; top:calc(100% + 4px); left:0; right:70px; background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; z-index:10; max-height:180px; overflow-y:auto; }
  .rre-sugerencia{ padding:9px 12px; font-size:14.5px; cursor:pointer; }
  .rre-sugerencia:hover{ background:var(--card-soft); }

  /* Clasificación — tabla horizontalmente deslizable, columna de
     jugador fija a la izquierda (sticky) para que siempre se sepa de
     quién es cada fila aunque se deslice para ver Pts/Dif. */
  .rre-clasif-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rre-clasif-tabla{ width:100%; border-collapse:collapse; min-width:360px; }
  .rre-clasif-tabla th{ font-size:12px; color:var(--text-faint); text-transform:uppercase; text-align:left; padding:6px 10px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
  .rre-clasif-tabla td{ padding:10px; font-size:15.5px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
  .rre-clasif-tabla tbody tr:last-child td{ border-bottom:none; }
  .rre-clasif-tabla th:nth-child(2), .rre-clasif-tabla td:nth-child(2){ position:sticky; left:0; background:var(--card-soft); min-width:130px; }
  .rre-clasif-pos{ font-family:var(--font-display); font-weight:800; color:var(--text-faint); }
  .rre-clasif-tabla tr.is-top .rre-clasif-pos{ color:var(--lime); }
  .rre-clasif-tabla tr.is-top td:nth-child(2){ color:var(--lime); font-weight:700; }

  /* Carrusel de rondas — una ronda visible a la vez, deslizable con el
     dedo o con las flechas. 2026-07-22: flechas agrandadas (pedido
     explícito) para que el tap sea más fácil de acertar — se probó
     sacar el deslizar entero, pero el usuario prefirió conservarlo
     junto con el tamaño más grande. Pills R1/R2/... quitadas
     (2026-08-02, pedido explícito: navegación más simple, solo flechas
     + el título "Ronda 5" de .rre-ronda-titulo). Con solo 2 flechas,
     justify-content pasa de space-between (pensado para 3 elementos,
     las separaba a los extremos) a center con gap — juntas, como un
     stepper. */
  .rre-ronda-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
  .rre-ronda-flecha{ background:var(--card); border:1px solid var(--border); color:var(--text); font-size:48.5px; width:72px; height:72px; border-radius:14px; cursor:pointer; flex-shrink:0; line-height:1; }
  .rre-ronda-flecha:disabled{ opacity:.3; cursor:default; }
  .rre-ronda-viewport{ touch-action:pan-y; }

  .rre-ronda-titulo{ font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--lime); margin-bottom:14px; }
  .rre-partido-card{ background:rgba(17,23,38,0.98); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--border-soft); border-radius:14px; padding:16px; margin-bottom:14px; }
  .rre-partido-cancha{ font-size:13px; color:var(--text-faint); margin-bottom:8px; font-weight:700; }

  /* Fase 4E (2026-07-16) — badge de estado de sincronización DUPR por
     partido. Limpio para el uso diario (título + ID en 2 líneas, sin
     matchCode técnico visible) — el botón (ⓘ) revela el resto solo
     cuando el organizador lo necesita. */
  .rre-dupr-badge-fila{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
  .rre-dupr-badge{ display:flex; flex-direction:column; gap:2px; border-radius:10px; padding:6px 10px; }
  .rre-dupr-badge-titulo{ display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; }
  .rre-dupr-badge-id{ font-size:12px; font-weight:500; opacity:0.85; }
  .rre-dupr-pendiente{ background:var(--bg-soft); color:var(--text-muted); }
  .rre-dupr-enviando{ background:var(--bg-soft); color:var(--text-muted); }
  .rre-dupr-ok{ background:var(--lime-bg); color:var(--lime); }
  .rre-dupr-error{ background:var(--orange-bg); color:var(--orange); }
  .rre-dupr-eliminado{ background:var(--bg-soft); color:var(--text-faint); }
  .rre-dupr-info-btn{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:4px; display:flex; align-items:center; flex-shrink:0; }
  .rre-dupr-info-btn:hover{ color:var(--text-muted); }
  .rre-dupr-panel{ display:none; background:var(--card-soft); border:1px solid var(--border-soft); border-radius:10px; padding:10px 12px; margin:-4px 0 12px; }
  .rre-dupr-panel.rre-dupr-panel-abierto{ display:block; }
  .rre-dupr-panel-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; font-size:13px; border-bottom:1px solid var(--border-soft); }
  .rre-dupr-panel-fila:last-child{ border-bottom:none; }
  .rre-dupr-panel-fila > span:first-child{ color:var(--text-muted); }
  .rre-dupr-panel-fila > span:last-child{ color:var(--text); font-weight:600; text-align:right; }
  .rre-dupr-panel-tecnico{ font-family:monospace; font-weight:500 !important; color:var(--text-muted) !important; }
  .rre-dupr-panel-error{ color:var(--orange) !important; text-align:left !important; }
  .rre-dupr-panel-accion{ font-size:12px; color:var(--text-faint); margin-top:6px; font-style:italic; }
  /* Modal "DUPR" consolidado (Fase 5E, 2026-07-17) — lista de partidos.
     Deliberadamente sin fondo de color (a diferencia del badge de la
     tarjeta de partido, .rre-dupr-badge) — acá son muchas filas
     seguidas, un fondo por fila se vería recargado; solo el color de
     texto distingue el estado. */
  /* Cuadro con scroll propio para la lista de partidos (2026-08-04,
     bug grave: "cuando metemos muchos marcadores se vuelve muy largo
     el panel y no se puede mover... mejor que saque un cuadrado
     grande con todos los marcadores" — con 50 partidos, la lista sola
     ya no entra en pantalla; ahora vive en su propio cuadro de altura
     fija que scrollea puertas adentro, mientras el resumen y los
     botones "Enviar"/"Actualizar"/"Cerrar" de #rre-modal-dupr quedan
     siempre visibles arriba y abajo, sin moverse con la lista).
     overscroll-behavior:contain (2026-08-04, bug real reportado:
     "cuando estoy viendo los marcadores subidos, cuando voy hacia
     arriba carga la página y no deja volver a subir") — sin esto, al
     llegar al tope del scroll interno y seguir deslizando hacia abajo
     con el dedo, el navegador móvil interpretaba ese gesto como
     "pull-to-refresh" y recargaba TODA la página, perdiendo el modal
     abierto. Mismo fix aplicado a .rre-modal en general, más abajo. */
  /* 280px -> min(55vh, 460px) (2026-08-04, pedido explícito: "hay
     mucho azul arriba para ver mas marcadores" — la caja de partidos
     se quedaba chica en relación al resto del modal, con el resumen y
     los botones de arriba ocupando más espacio del necesario). Con
     tope en vh (no solo un píxel fijo) para que en pantallas más
     grandes muestre bastante más, y en un celular chico nunca empuje
     el resto del modal fuera de la pantalla. */
  /* Modal más ancho + fondo a 0.90 de opacidad (2026-08-04, pedido
     explícito: "esa pantalla puede ser mas ancha y transparencia a
     0,90") — .rre-modal es compartida por TODOS los modales de RRE
     (login, configurar DUPR, etc.), nunca se toca esa regla global;
     acá se pisa solo con el selector con más especificidad, mismo
     criterio ya usado para #rre-modal-configurar-dupr más abajo. */
  #rre-modal-dupr .rre-modal{ max-width:520px; background:rgba(20,27,44,0.90); }
  #rre-modal-dupr-lista{ max-height:min(55vh, 460px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border-soft); border-radius:10px; padding:0 12px; }
  .rre-dupr-lista-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
  .rre-dupr-lista-fila:last-child{ border-bottom:none; }
  .rre-dupr-lista-info{ flex:1; min-width:0; }
  .rre-dupr-lista-nombres{ font-size:13px; color:var(--text); margin-bottom:2px; }
  .rre-dupr-lista-estado{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--text-muted); }
  .rre-dupr-lista-estado.rre-dupr-ok{ color:var(--lime); }
  .rre-dupr-lista-estado.rre-dupr-error{ color:var(--orange); }
  /* Logo real de DUPR (img/dupr-logo.jpg) — versión con fondo propio
     (degradé azul), pensada para verse bien sobre tema oscuro sin
     chapita blanca de por medio. Cuadrada de origen — se recorta a un
     ícono redondeado chico, mismo tratamiento visual que un ícono de
     app. */
  .rre-dupr-logo-chip{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; border-radius:6px; overflow:hidden; }
  .rre-dupr-logo-img{ height:20px; width:20px; object-fit:cover; display:block; }
  .rre-dupr-logo-img-modal{ height:32px; width:32px; border-radius:8px; }
  /* Tarjeta "Configurar DUPR" — único punto de entrada a la
     configuración de DUPR de la sesión (Fase 5E, consolidado
     2026-07-17), mismo trato visual que el resto de las tarjetas
     clicables de PICKCR (ver ROUND ROBIN/OPEN PLAY/MIS SESIONES en la
     pantalla de inicio). */
  .rre-dupr-config-card{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; margin-top:10px; background:var(--card-soft); border:1px solid var(--border-soft); border-radius:10px; color:var(--text); cursor:pointer; text-align:left; }
  /* .active — F7 (Fase 3 UX DUPR, 2026-07-20): resalta la tarjeta
     "Evento DUPR" cuando está activada. Clase explícita vía JS
     (_rreActualizarVisibilidadTipoEvento()), no :has() — mismo criterio
     ya aplicado en dashboard/index.html para Open Play. */
  /* Café en vez de lima (2026-08-03, pedido explícito: "evento dupr eso
     debe ser de color cafe igual que generar round robin") — mismo
     criterio DUPR-a-café ya aplicado en Perfil/Open Play. El texto
     también pasa a oscuro acá: el fondo activo deja de ser oscuro
     (lima-bg) para ser claro (crema-hover), así que color:var(--text)
     (heredado de .rre-dupr-config-card, pensado para SU fondo oscuro
     por defecto) dejaría de leerse. */
  .rre-dupr-config-card.active{ border-color:var(--cafe); background:var(--crema-hover); color:var(--crema-text); }
  .rre-dupr-config-card.active .rre-dupr-config-card-subtitulo{ color:var(--crema-text-muted); }
  .rre-dupr-config-card-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .rre-dupr-config-card-titulo{ font-size:14.5px; font-weight:700; }
  .rre-dupr-config-card-subtitulo{ font-size:12px; color:var(--text-faint); }
  .rre-partido-encabezado{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .rre-partido-equipo-col{ flex:1; min-width:0; text-align:center; }
  .rre-partido-equipo-nombre{ font-size:16.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
  .rre-set-bloque{ margin-bottom:14px; }
  .rre-set-bloque:last-child{ margin-bottom:0; }
  .rre-set-titulo{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-muted); margin-bottom:8px; }
  .rre-set-editar{ background:none; border:none; color:var(--lime); font-size:13px; cursor:pointer; padding:2px 6px; }
  .rre-set-locked{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--lime-bg); border:1px solid var(--lime-dark); border-radius:10px; padding:14px; font-family:var(--font-display); font-weight:800; font-size:24px; }
  .rre-set-locked .rre-lock-icon{ font-size:15.5px; }
  .rre-stepper-fila{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .rre-stepper{ flex:1; min-width:0; text-align:center; }
  .rre-stepper-nombre{ font-size:12px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
  .rre-vs-divider{ flex-shrink:0; font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--lime); background:var(--bg-soft); border:1.5px solid var(--border); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
  .rre-stepper-fila .rre-vs-divider{ margin-bottom:34px; }
  .rre-stepper-control{ display:flex; align-items:center; justify-content:center; gap:12px; }
  .rre-stepper-btn{ width:42px; height:42px; border-radius:11px; background:var(--bg-soft); border:1.5px solid var(--border); color:var(--lime); font-size:24px; font-weight:700; cursor:pointer; line-height:1; }
  .rre-stepper-btn:active{ background:var(--card-soft); }
  .rre-stepper-num{ font-family:var(--font-display); font-weight:800; font-size:28.5px; min-width:36px; }
  /* Marcador táctil (julio 2026) — reemplaza el <input type="range">
     anterior. El deslizador nativo daba problemas reales con dedos
     sudados (el "agarre" del thumb fallaba, y arrastrar de punta a
     punta era lento). Ahora: un círculo limpio con el número grande
     (estado de reposo) que, al tocarlo, despliega un dial circular en
     overlay semitransparente — tocar un número lo selecciona y cierra
     al toque, sin arrastre. */
  .rre-score-circle{
    width:100px; height:100px; border-radius:50%; margin:0 auto;
    background:var(--card-soft); border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:border-color .15s, transform .1s;
  }
  .rre-score-circle:active{ transform:scale(.96); border-color:var(--lime); }
  .rre-score-num{ font-family:var(--font-display); font-weight:800; font-size:46px; color:var(--lime); }
  .rre-score-hint{ font-size:11px; color:var(--text-faint); margin-top:6px; }

  .rre-dial-overlay{
    position:fixed; inset:0; background:rgba(10,14,22,.86); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:500;
  }
  .rre-dial-overlay.show{ display:flex; }
  .rre-dial-ring{ position:relative; border-radius:50%; border:2px solid var(--border-soft);
    background:radial-gradient(circle, var(--card) 0%, var(--bg-soft) 100%); }
  .rre-dial-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:var(--font-display); font-weight:800; font-size:61.5px; color:var(--lime);
    pointer-events:none;
  }
  .rre-dial-label{
    position:absolute; top:26%; left:50%; transform:translate(-50%,-50%);
    font-size:13px; color:var(--text-faint); pointer-events:none; white-space:nowrap;
  }
  .rre-dial-num{
    position:absolute; width:34px; height:34px; transform:translate(-50%,-50%);
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; border:none; font-family:var(--font-display); font-weight:700;
    font-size:16.5px; color:var(--text-muted); background:transparent; cursor:pointer;
  }
  .rre-dial-num:active{ background:var(--lime); color:var(--bg); }
  .rre-dial-num.actual{ color:var(--lime); font-weight:800; }
  .rre-dial-close-hint{ position:absolute; bottom:-34px; left:50%; transform:translateX(-50%);
    font-size:12px; color:var(--text-faint); white-space:nowrap; }
  .rre-confirmar-set{ margin-top:32px; padding-top:16px; border-top:1px solid var(--border); }

  .rre-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); align-items:center; justify-content:center; z-index:100; padding:20px; }
  .rre-modal-overlay.show{ display:flex; }
  /* Bug grave reportado (2026-08-04): "en dupr cuandom metemos muchos
     marcadores se vuelve muy largo el panel y no se puede mover... no
     lo permite" — .rre-modal no tenía max-height ni overflow-y: con
     muchos partidos (ej. 50) el modal crecía más alto que la pantalla
     y, como .rre-modal-overlay tampoco scrollea, el botón "Cerrar"
     quedaba literalmente fuera de la pantalla, sin forma de tocarlo.
     Ahora el modal entero nunca excede el viewport y scrollea si hace
     falta — aplica a TODOS los modales de RRE (clase compartida),
     no solo a DUPR. Ver también #rre-modal-dupr-lista más abajo, que
     además le da su propio cuadro con scroll independiente a la lista
     de partidos, para que el resumen y los botones de arriba no se
     vayan con ella. */
  .rre-modal{ background:var(--card-soft); border:1px solid var(--border); border-radius:14px; padding:22px; max-width:340px; width:100%; max-height:calc(100vh - 40px); overflow-y:auto; overscroll-behavior:contain; }


  /* Sistema de iconos Round Robin Express (aprobado) — trazo único,
     redondeado, sin emojis. El acento lima solo vive en el isotipo
     (rreIcon('express')); el resto hereda currentColor. */
  .rre-icon{ display:inline-block; vertical-align:-4px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
  .rre-icon-dot{ fill:var(--lime); stroke:none; }
  .rre-icon-solid{ fill:currentColor; stroke:none; }
  .btn-lime .rre-icon-dot{ fill:currentColor; } /* el acento lima se perdería sobre fondo lima */
  .rre-status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; background:var(--text-faint); }
  /* Pulso (2026-08-06, Home v2 importado de Claude Design) — mismo
     keyframe "livepulse" del mockup, solo con sesión iniciada
     (.is-on) — sin sesión, el punto queda quieto, no hay nada "en
     vivo" que indicar todavía. */
  .rre-status-dot.is-on{ background:var(--lime); animation:rre-livepulse 1.8s infinite; }
  @keyframes rre-livepulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

  /* Navegador discreto — acceso rápido a otras pantallas del jugador
     (Mis Partidos, Registrarse, Mi Perfil) sin volver al sitio completo.
     Antes un botón de 3 líneas; ahora el mismo panel se abre desde el
     ícono de perfil circular (.rre-profile-btn) o desde "Más" en la
     barra de navegación inferior. */
  .rre-quickmenu{ position:relative; }
  .rre-quickmenu-panel{ display:none; position:absolute; top:calc(100% + 8px); 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); }
  .rre-quickmenu-panel.show{ display:block; }
  .rre-quickmenu-panel a{ display:block; padding:9px 12px; font-size:14.5px; font-weight:600; color:var(--text); border-radius:7px; }
  .rre-quickmenu-panel a:hover{ background:var(--bg-soft); color:var(--lime); }
  /* Toggle de idioma (i18n RRE) — fila propia arriba del panel; los
     .idioma-btn son el mismo patrón visual que la Landing (index.html). */
  .rre-quickmenu-idioma{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; font-size:13px; color:var(--text-faint); }
  .idioma-btn{ background:none; border:1px solid var(--border); color:var(--text-faint); font:inherit; font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; cursor:pointer; }
  .idioma-btn.is-activo{ background:var(--lime); border-color:var(--lime); color:#0a0e16; }
  .idioma-btn:not(.is-activo):hover{ color:var(--text); }

  /* Home rediseñado (auditoría julio 2026 + revisión julio 2026 v2, ver
     referencia de mockup) — misma información y mismos IDs/onclick de
     siempre, solo reorganizados en: saludo + estado de sesión, dos
     accesos apilados de ancho completo (Round Robin / Open Play),
     sección "Mis sesiones" con barra de acento + pestañas con ícono, y
     una barra de navegación inferior fija — siguiendo el sistema de
     iconos ya aprobado (un solo ícono nuevo, "arrow-right", misma
     grilla/trazo que el resto — no se tocó ninguna regla ni lógica). */
  body{ padding-bottom:82px; } /* espacio para la barra de navegación inferior fija */

  .rre-profile-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:none; border:1.5px solid var(--lime); color:var(--lime); cursor:pointer; flex-shrink:0; }
  .rre-profile-btn:hover{ background:var(--lime-bg); }

  .rre-saludo{ margin-bottom:20px; }
  .rre-saludo-titulo{ font-family:var(--font-display); font-weight:800; font-size:31px; margin-bottom:6px; }
  /* Antes var(--text-muted) (gris) — pedido explícito (2026-08-02):
     "el correo y dupr deben ser de un blanco mas intenso para que se
     lea" — este texto (email + "· DUPR X.XX", ver _rreActualizarBadgeDupr(),
     round-robin-express-online.js) queda directo sobre la foto de
     fondo, sin ningún respaldo opaco propio, así que necesita más
     contraste que el resto de los textos secundarios. */
  .rre-saludo-estado{ font-size:14.5px; color:rgba(244,246,250,0.92); }

  /* RaqPlay Home v3 (2026-08-10, mockup adjunto por el usuario) — "Hola,
     {Nombre}" + tagline + DUPR + glifo "R" en neón de fondo, ver
     comentario junto al HTML (.rre-saludo, más arriba en este archivo).
     Ocultos por defecto acá: PICKCR sigue mostrando SOLO
     #rre-estado-sesion de siempre, sin ningún cambio — reactivados más
     abajo, bajo html[data-brand="raqplay"] exclusivamente. */
  .rre-saludo-raqplay-r,
  .rre-saludo-raqplay-nombre,
  .rre-saludo-raqplay-tag,
  .rre-saludo-raqplay-rule,
  .rre-dupr-raqplay-wrap{ display:none; }

  /* Reactivados SOLO para raqplay. .rre-saludo pasa a ser el
     contenedor relativo del glifo "R" de fondo (position:relative +
     overflow:hidden para que el glifo, bien más grande que la caja,
     no empuje el layout ni desborde la página). #rre-estado-sesion
     (email + "· DUPR X.XX" de siempre) se oculta acá — el mockup de
     raqplay no lo muestra, reemplazado por el bloque nuevo de abajo;
     PICKCR sigue mostrándolo, sin tocar su regla base. */
  /* display:flex + justify-content:flex-end (2026-08-11, mockup
     original) — antes el saludo era chico y flotaba arriba, con la
     foto como una cajita aparte a la derecha. El mockup real tiene la
     foto grande ocupando casi toda la mitad superior de la pantalla,
     con "Hola, {Nombre}" + tagline + DUPR superpuestos ABAJO de esa
     foto, no al lado. Los hijos en flujo normal (nombre/tag/rule/
     dupr-wrap/fila2 — #rre-estado-sesion está display:none acá abajo,
     .rre-saludo-raqplay-r es position:absolute, ninguno de los dos
     participa del flex) se apilan solos contra el borde inferior del
     contenedor con justify-content:flex-end, sin tocar su HTML ni su
     orden. min-height define qué tan grande es la foto. */
  html[data-brand="raqplay"] .rre-saludo{
    position:relative; overflow:hidden; padding-top:2px;
    display:flex; flex-direction:column; justify-content:flex-end; min-height:58vh;
  }
  /* !important necesario acá — #rre-estado-sesion trae
     style="display:block" inline desde el HTML (rreActualizarEstadoConexion()/
     _rreActualizarBadgeDupr(), round-robin-express-online.js, solo
     tocan su innerHTML/cursor, nunca su display), que le gana a
     cualquier regla externa sin !important, sea cual sea su
     especificidad. */
  html[data-brand="raqplay"] #rre-estado-sesion{ display:none !important; }
  /* Foto real de fondo (2026-08-10, pedido explícito con foto adjunta:
     "quiero esa foto que se vea igual... fondo negro y la foto tal
     cual que subi") — reemplaza el glifo de texto "R" en
     -webkit-text-stroke de la iteración anterior (bug real reportado:
     "esa R quedo mal puesta en apple no se ve igual" — text-stroke
     renderiza distinto/inconsistente entre navegadores, sobre todo
     Safari/WebKit de iOS). raqplay/assets/rre-home-hero.jpg es un
     recorte de la foto real que mandó el usuario (versión "jugador",
     confirmada) — solo la parte de la jugador+"R" de neón, sin el
     texto "Hola"/DUPR que la foto original traía superpuesto (ese
     texto es HTML de verdad, los elementos de abajo). Fondo de la
     imagen ya es negro sólido, se funde con --bg de la página sin
     necesitar overlay/gradiente encima. */
  html[data-brand="raqplay"] .rre-saludo-raqplay-r{
    display:block; position:absolute; inset:0; z-index:0;
    background-image:url('/raqplay/assets/rre-home-hero.jpg');
    background-size:cover; background-position:top center; background-repeat:no-repeat;
    opacity:0.92; pointer-events:none; user-select:none;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  }
  html[data-brand="raqplay"] .rre-saludo-raqplay-nombre{
    position:relative; z-index:1; display:block; font-family:var(--font-display); font-weight:800;
    font-size:31px; color:#fff; text-shadow:none; margin:0 0 2px;
  }
  html[data-brand="raqplay"] .rre-saludo-raqplay-tag{
    position:relative; z-index:1; display:block; font-size:15px; font-weight:600; color:var(--lime);
    margin:0 0 14px; text-shadow:none;
  }
  html[data-brand="raqplay"] .rre-saludo-raqplay-rule{
    position:relative; z-index:1; display:block; width:46px; height:2px; background:var(--lime);
    margin:0 0 14px; border-radius:2px;
  }
  /* .is-visible (no un simple display:flex acá) — la clase la agrega/
     saca _rreActualizarSaludoRaqplay() (round-robin-express-online.js)
     con classList, nunca con style.display inline. El selector completo
     ya exige html[data-brand="raqplay"] + la clase — no hay ningún
     display:none externo que un estilo inline pudiera pisar, así que
     no puede reaparecer en PICKCR bajo ninguna condición. */
  html[data-brand="raqplay"] .rre-dupr-raqplay-wrap.is-visible{
    position:relative; z-index:1; display:flex; flex-direction:column; gap:2px;
  }
  html[data-brand="raqplay"] .rre-dupr-raqplay{ font-size:15px; font-weight:700; color:#fff; text-shadow:none; }
  html[data-brand="raqplay"] .rre-dupr-raqplay strong{ color:var(--lime); font-weight:800; }
  html[data-brand="raqplay"] .rre-dupr-raqplay-link{
    font-size:12.5px; color:rgba(255,255,255,0.55); text-decoration:none; margin-top:2px; text-shadow:none;
  }
  html[data-brand="raqplay"] .rre-dupr-raqplay-link:hover{ color:var(--lime); }

  /* Fondo sólido negro real (2026-08-11, bug reportado tras el deploy:
     "antes la foto negra el fondo era negro" — con el mockup original,
     TODA la pantalla era negro sólido, con la foto del jugador+"R" de
     neón de arriba como única foto visible. .page-bg-photo/
     .page-bg-overlay (más arriba en este archivo) son la foto rotativa
     genérica + degradado que usa TODO round-robin-express.html,
     compartida con PICKCR — nunca se habían apagado acá, así que
     seguían mostrándose detrás del "Hola" y tapando la intención
     original. --bg/--bg-soft se redefinen acá al negro real de RaqPlay
     (mismo valor que raqplay/assets/raqplay.css --bg:#050505 — "negro
     real, sin tinte azul", a diferencia del navy #0a0e16 que usa el
     resto de este archivo para PICKCR) para que cualquier otro lugar
     que ya usa var(--bg) en esta página (body, tarjetas, etc.) tome
     el negro correcto sin tener que tocar cada selector uno por uno. */
  html[data-brand="raqplay"]{ --bg:#050505; --bg-soft:#0c0c0c; }
  html[data-brand="raqplay"] .page-bg-photo{ display:none; }
  html[data-brand="raqplay"] .page-bg-overlay{ background:var(--bg); }

  /* Rediseño de Home v2 (2026-08-06, importado desde Claude Design —
     proyecto "PICKCR Home", archivo PICKCR Home.dc.html) — reemplaza el
     grid de tarjetas (.rre-home-card*, rediseño anterior del mismo día)
     por minimalismo total: nada de cards/recuadros, todo el contenido
     flota directo sobre la foto de fondo. Decisión de diseño clave del
     spec: "para que no se vea genérico/IA". Colores mapeados a los
     tokens ya existentes (--lime/--text/--text-muted) en vez de
     hardcodear los hex del mockup — #c6f24d del mockup ya ES var(--lime)
     en este proyecto; el celeste del stat "Win rate" usa var(--sky)
     (#5b9bf5, el azul de marca más cercano ya existente) en vez del
     #5ec8ff exacto del mockup. */
  /* Alineado a la izquierda (2026-08-06, pedido explícito: "el crear
     match pasa al lado izquierdo" — antes centrado, como el mockup
     original) — mismo ancho/posición del bloque que .rre-stats-row/
     .rre-quick-list de abajo (max-width + margin auto), para que las
     3 secciones queden alineadas por el mismo borde izquierdo; solo
     cambia la alineación del CONTENIDO adentro. */
  /* margin:...0 0 (SIN "auto") — bug real encontrado al revisar por
     qué este bloque (y stats-row/quick-titulo/quick-list, mismo
     patrón, más abajo) se veía centrado en vez de pegado a la
     izquierda pese a text-align:left/align-items:flex-start: al ser
     hijos directos de .rre-historial-centro (flex column), un margin
     horizontal "auto" los saca del stretch por defecto del flex y los
     encoge a su contenido, centrándolos como bloque completo — quedaba
     "PICKCR" corrido ~100px de la izquierda real de la pantalla, pese
     a que el TEXTO adentro sí estaba alineado a la izquierda de su
     propia caja encogida. Pedido explícito tras verlo así: "falta que
     este lateral como izquierdo como la foto". -->
  /* margin-top subido de 56px a 96px (2026-08-07, pedido explícito:
     "bajar un poco la idea es que la parte superior quede libre para
     que se vea las fotos") — más foto de fondo visible antes de que
     arranque el bloque de marca. */
  /* margin-top bajado de 96px a 72px (2026-08-07) — "Nuevo partido"
     pasó a ser un ítem más de Quick Actions (debajo de "Mi Perfil",
     ver HTML), agregando una fila; se compensa achicando el espacio
     de arriba para que Quick Actions no quede más abajo que antes
     (pedido explícito: "subir un poquito quick action para que quede
     a la misma altura que esta my profile ahoritaa"). */
  /* max-width sacado (2026-08-10, pedido explícito: "se ven cuadros muy
     pequenos solo a un lado de la pantalla" — bug real: en cualquier
     pantalla más ancha que un celular angosto, este tope de 340/360px
     (repetido en .rre-stats-row/.rre-resume-panel/.rre-quick-panel más
     abajo) dejaba TODO este bloque pegado a la izquierda con un hueco
     vacío a la derecha — confirmado achicando la ventana a 1280px. El
     tope real de ancho de página ya lo pone .wrap arriba
     (max-width:720px), este de acá era redundante y, en pantallas
     anchas, activamente dañino. */
  /* margin-top bajado de 72px a 40px (2026-08-10, junto con
     .rre-stats-row/.rre-quick-panel más abajo — ver comentario largo
     en .rre-quick-list, más abajo en este archivo). */
  .rre-hero{ margin:40px 0 0; text-align:left; display:flex; flex-direction:column; align-items:flex-start; }
  /* .rre-quick-item-fila-cta (2026-08-07) — "New match" ya no vive
     dentro de .rre-hero (se probó al lado de PICKCR primero, después
     abajo de PICKCR: ninguna quedó); pedido final: "pero abajo como
     por donde esta round robin" — el botón flota a la derecha de la
     fila "Round Robin" de Quick Actions, aprovechando el espacio
     vacío de esa lista alineada a la izquierda. */
  .rre-quick-item-fila-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .rre-hero-label{ font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:2px; color:var(--lime); text-transform:uppercase; text-shadow:0 1px 4px rgba(0,0,0,0.6); }
  .rre-hero-title{ font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.05; color:#fff; margin-top:4px; text-shadow:0 2px 8px rgba(0,0,0,0.6); }
  /* .rre-hero-marca* (2026-08-07) — "PICKCR / LATAM / DUPR" a escala de
     hero, mismo lugar donde antes iba .rre-hero-label/.rre-hero-title
     (ver comentario en el HTML). Tamaños/sombras del name y del tag
     escalados desde .logo-text .name/.tag (antes 17.5px/10px en el
     header) al tamaño que tenía .rre-hero-title (30px) para el nombre,
     y un poco más grande que el tag de header para el tagline/DUPR,
     conservando el mismo criterio de sombra oscura marcada (legible
     sobre cualquier foto rotando de fondo, mismo bug ya resuelto en
     .logo-text .tag). -->
  /* "Barlow" ancha/normal (no Barlow Condensed, var(--font-display)) —
     pedido explícito tras ver el resultado: "no es la misma letra
     grande que esta de moda" — Barlow Condensed a este tamaño se ve
     angosta/alta; Barlow normal (ya cargada en el <link> de Google
     Fonts de este archivo, 400-700, junto a Barlow Condensed) da el
     trazo ancho/redondeado del mockup. font-weight:700 es el máximo
     que trae ese import (no hay 800/900 de Barlow normal cargado). */
  /* font-size bajado de 52px a 42px (2026-08-07, pedido explícito:
     "puede bajar un poco el tamano de pickcr pegarlo mas a los score
     para subir quick actions sin subir lo demas") — el margin-top de
     .rre-hero (arriba de todo, controla cuánta foto queda libre) NO
     se toca, solo se compacta el bloque en sí para que Quick Actions
     suba sin mover el punto donde arranca la marca. */
  .rre-hero-marca-name{ font-family:'Barlow', sans-serif; font-weight:700; font-size:30px; line-height:0.95; letter-spacing:-0.5px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.6); }
  /* Fila 2: LATAM y DUPR lado a lado (pedido explícito: "no esta
     lateral el dupr al lado de latam") — antes apilados, uno debajo
     del otro. margin-top bajado de 6px a 2px (2026-08-07, pedido
     explícito: "menos espaciado entre el pickcr y el reglon de
     abajo"). */
  .rre-hero-marca-fila2{ display:flex; align-items:center; gap:10px; margin-top:2px; }
  /* .rre-hero-marca-tag repite font-weight/color/text-shadow acá en vez
     de heredar de ".logo-text .tag" (selector con ancestro, ver arriba)
     porque este .tag ya no vive dentro de .logo-text — mismo criterio
     de legibilidad, solo el tamaño/tracking cambia. */
  .rre-hero-marca-tag{ font-size:13px; font-weight:600; letter-spacing:1.5px; color:rgba(244,246,250,0.75); text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9); }
  .rre-hero-marca-dupr{ font-size:13px; margin-top:0; }
  /* Botón achicado (2026-08-07, pedido explícito: "el boton de new
     match debe ser mas pequeno") — padding/font-size bajados, mismo
     estilo/comportamiento. */
  .rre-hero-cta{
    margin-top:0; flex-shrink:0; background:var(--lime); color:#0a0e16; border:none; padding:8px 16px;
    border-radius:999px; font-weight:700; font-size:12.5px; display:inline-flex; align-items:center;
    gap:6px; cursor:pointer; text-decoration:none; font-family:inherit;
  }
  .rre-hero-cta:hover{ filter:brightness(1.06); }
  .rre-hero-cta-plus{ font-size:14px; line-height:1; }

  /* margin-top bajado de 44px a 26px, luego a 16px, luego a 10px
     (2026-08-07, pedido explícito: "unir mas la proporcion entre los
     score y el segmento pickcr latam dupr" → "un poco mas cerca" →
     "pegarlo mas a los score") — acerca la fila de stats al bloque de
     marca/CTA de arriba. */
  /* margin-top subido de 4px a 48px (2026-08-07) — .rre-stats-row
     quedó como primer bloque de .rre-historial-centro al borrarse
     #rre-hero-marca (ver comentario en el HTML); el 4px era el
     espacio pegado al botón que ya no existe ahí. */
  /* margin-top subido de 48px a 110px (2026-08-07, pedido explícito:
     "la barra de score tambien un poco mas que quede a la mitad de la
     pantalla"). */
  /* margin-top recalculado (2026-08-07, mockup final) — ya no empuja
     este bloque hacia la mitad de la pantalla a mano: .rre-panel-azul
     (arriba, top:480px) define dónde empieza la zona sólida, este
     valor solo deja el aire correcto ENTRE el inicio del panel y los
     números (ajustado a ojo contra el mockup, mismo criterio que el
     resto de esta pantalla en toda la sesión). */
  /* margin-top vuelto a 110px (2026-08-07) — se había subido a 366px
     probando el panel azul fixed que se descartó (pedido explícito:
     "elimine el fondo azul... deje los contenedores como estan"),
     mismo valor ya validado antes de esa prueba. */
  /* margin-top bajado de 110px a 50px (2026-08-10, ver comentario
     largo en .rre-quick-list, más abajo). */
  .rre-stats-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:50px 0 0; }
  .rre-stats-panel{ background:none; }
  .rre-stat-item{ text-align:center; }
  .rre-stat-value{ display:block; font-family:var(--font-display); font-weight:800; font-size:28px; }
  .rre-stat-label{ font-size:10px; color:rgba(255,255,255,0.55); font-weight:700; letter-spacing:0.8px; margin-top:3px; text-transform:uppercase; }

  /* margin-top bajado de 44px a 28px (2026-08-07, pedido explícito:
     "subir un poco el quick actions") — y sin "auto" (mismo bug de
     centrado que .rre-hero/.rre-stats-row arriba, "mas lateral
     tambien"). */
  /* margin-top bajado de 44px→28px→16px (2026-08-07, pedidos
     sucesivos: "subir un poco el quick actions" → "subir mas el
     quick actions"). */
  /* .rre-quick-panel (2026-08-07, pedido explícito: "se ven botones
     muy sueltos ahi... hay que pensar en las personas que no
     entienden" — la sección completa de Quick Actions ahora vive
     dentro de una tarjeta con fondo sólido, mismo criterio visual que
     .card en el resto de la app, en vez de píldoras flotando directo
     sobre la foto). */
  /* Sin panel/fondo propio (2026-08-07, pedido explícito: "no quiero
     un rectangulo sobre otro rectangulo... sin panel, tarjetas directo
     sobre la foto") — vuelve a flotar directo sobre la foto, sin la
     tarjeta con degradado azul que envolvía todo esto. */
  /* margin-top subido de 16px a 32px, luego a 48px (2026-08-07,
     pedidos sucesivos: "baje un poco todo quick actions" → "bajar un
     poquito mas el quick actions"). */
  /* .rre-resume-panel (2026-08-08, pedido explícito: "si se sale esta
     costando encontrar ese round robin... si se sale y se esta jugando
     un open debe volver al partido que esta en curso") — aviso de
     "reanudar" en el Home de RRE, mismo lenguaje visual que
     .rre-quick-item (tarjeta con blur), pero con borde lima para que
     se note como lo primero a mirar. Oculto por defecto — solo
     rreMostrarAvisoReanudar() (round-robin-express-adapter.js) lo
     muestra, cuando hay algo real que reanudar. */
  .rre-resume-panel{ display:none; margin:20px 0 0; }
  .rre-resume-item{
    display:flex; align-items:center; gap:10px; text-decoration:none; text-align:left;
    cursor:pointer; font-family:inherit; border:1.5px solid var(--lime); border-radius:14px;
    padding:12px 14px; background:rgba(200,245,29,0.08); backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px); margin-bottom:8px; width:100%;
  }
  .rre-resume-item:last-child{ margin-bottom:0; }
  .rre-resume-item-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
  .rre-resume-item-titulo{ font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--lime); text-transform:uppercase; letter-spacing:0.3px; }
  .rre-resume-item-sub{ font-size:12.5px; color:rgba(255,255,255,0.75); margin-top:2px; }
  .rre-resume-item-chevron{ flex-shrink:0; font-size:19px; font-weight:700; line-height:1; color:var(--lime); }

  /* margin-top bajado de 48px a 24px (2026-08-10, junto con
     .rre-hero/.rre-stats-row más arriba — ver comentario largo en
     .rre-quick-list, más abajo). */
  .rre-quick-panel{ margin:24px 0 0; }
  .rre-quick-titulo{ margin:0 4px; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:2px; color:rgba(255,255,255,0.5); text-transform:uppercase; }
  /* Layout modular (2026-08-10, pedido explícito: "en el ipad se ve
     enorme y se sale de pantalla y se ve muy grande tambien en el
     celular los cuadros... modular" — el grid uniforme de 2 columnas ×
     4 filas de antes (todo aspect-ratio:1) daba cuadros de ~355px en
     pantallas anchas tipo iPad (.wrap llega a su tope de 720px), y ya
     se sentía grande incluso en celular. .rre-quick-list deja de ser
     UN grid — pasa a ser una columna (flex) de "filas" (.rre-quick-row)
     independientes, cada una con su propia cantidad de columnas y
     forma de tarjeta:
       1) .rre-quick-row-2 con Reserva/Eventos — cuadrados, MISMO
          tamaño de siempre (pedido explícito: "reservas que se quede
          asi mismo tamano").
       2) .rre-quick-row-2 con Mis Partidos/Sesiones — .is-rect
          (rectángulos anchos, aspect-ratio 2.4:1 en vez de 1:1, mucho
          más bajos que un cuadrado).
       3) .rre-quick-row-3 con Nuevo partido/Fast Robin/Open Match —
          3 columnas en vez de 2 ya los achica solos (cuadrados, pero
          un tercio del ancho en vez de la mitad).
       4) Mi Perfil, .is-full — vive SUELTO en .rre-quick-list (no
          dentro de ningún .rre-quick-row), así que el flex column lo
          estira solo a todo el ancho disponible (align-items:stretch,
          default de flex) — "un rectangulo largo que cubra todo el
          ancho de pantalla". */
  .rre-quick-list{ display:flex; flex-direction:column; gap:10px; margin:14px 0 0; }
  .rre-quick-row{ display:grid; gap:10px; }
  .rre-quick-row-2{ grid-template-columns:1fr 1fr; }
  .rre-quick-row-3{ grid-template-columns:1fr 1fr 1fr; }
  /* Cuadros azules (2026-08-10, pedido explícito: "lo queria en azul
     lo mismo pero cuadros azules") — vidrio translúcido azul,
     rgba(17,23,38,0.4) + blur, el mismo "azul bonito" que ya
     mencionaban los comentarios viejos de este archivo y el patrón
     real de .opl-card/.card en jugar.css. Cuadrado real por defecto
     (aspect-ratio:1, texto anclado abajo, sin flechita ›) — no hacía
     falta en un tile grande, toda la tarjeta ya es el botón. .is-rect/
     .is-full (arriba) pisan el aspect-ratio para las filas que no son
     cuadradas. */
  .rre-quick-item{
    display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
    aspect-ratio:1; text-decoration:none; text-align:left; cursor:pointer; font-family:inherit;
    border:1px solid var(--border-soft); border-radius:16px; padding:14px;
    background:rgba(17,23,38,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .rre-quick-item.is-rect{ aspect-ratio:2.4/1; }
  .rre-quick-item.is-full{ aspect-ratio:auto; min-height:64px; }
  .rre-quick-item-text{ display:flex; flex-direction:column; }
  .rre-quick-item-title{ font-family:var(--font-display); font-weight:800; font-size:20px; text-transform:uppercase; letter-spacing:0.2px; color:#fff; line-height:1.05; text-shadow:0 2px 6px rgba(0,0,0,0.7); }
  .rre-quick-item.is-lima .rre-quick-item-title{ color:var(--lime); }
  .rre-quick-item-sub{ display:block; font-size:11px; color:rgba(255,255,255,0.6); margin-top:2px; line-height:1.25; text-shadow:0 1px 4px rgba(0,0,0,0.8); }
  .rre-quick-item-chevron{ display:none; }
  .rre-quick-item-icon{ display:none; }
  /* .is-featured (2026-08-10, pedido explícito: mockup con "Reserva"
     en lima sólido como primera acción) — a diferencia de .is-lima
     (solo tiñe texto sobre el mismo vidrio oscuro/blanco de siempre),
     acá el fondo entero de la tarjeta es lima con texto oscuro —
     mismo contraste que ya usa .raq-btn-primary (raqplay/assets/
     raqplay.css) para su CTA principal. Un solo ítem lo usa (Reserva),
     nunca combinado con .is-lima en la misma tarjeta. */
  .rre-quick-item.is-featured{ background:var(--lime); border-color:var(--lime); }
  .rre-quick-item.is-featured .rre-quick-item-title{ color:#0a0a0a; text-shadow:none; }
  .rre-quick-item.is-featured .rre-quick-item-sub{ color:#3a4400; text-shadow:none; }
  .rre-quick-item.is-featured .rre-quick-item-chevron{ color:#0a0a0a; text-shadow:none; }

  /* RaqPlay Home v3 (2026-08-10, mockup adjunto por el usuario) —
     reemplaza el intento anterior de vidrio blanco 2 columnas (ver
     historial git) por el diseño real del mockup: lista apilada
     VERTICALMENTE (1 columna, ancho completo), cada fila en horizontal
     (ícono en círculo | texto | flecha ›), tarjeta con fondo OSCURO
     translúcido (no blanco). PICKCR no se toca — sigue con el grid de
     2 columnas/cuadros azules de arriba, tal cual estaba. Scopeado
     SIEMPRE a .rre-quick-list/.rre-quick-item, nunca al root
     html[data-brand="raqplay"] directo — bug real ya encontrado antes
     en este archivo: texto que vive AFUERA de la tarjeta, como
     .rre-saludo/.rre-quick-titulo, sigue sobre la foto oscura y
     necesita seguir claro. */
  /* .rre-quick-list (las 8 tarjetas de PICKCR) se OCULTA del todo para
     raqplay (2026-08-11) — el mockup original de raqplay usa una lista
     propia y más corta, .rre-quick-list-raqplay (más abajo). Las reglas
     de acá abajo (hasta el cierre de este bloque "RaqPlay Home v3")
     quedan inertes para raqplay al vivir todas dentro de
     .rre-quick-list/.rre-quick-item — no se borran para no perder el
     historial de por qué se ven así, por si algún día PICKCR necesita
     este mismo tratamiento de lista. */
  html[data-brand="raqplay"] .rre-quick-list{ display:none; }
  /* .rre-quick-row (2026-08-10, layout modular de PICKCR) rompía esto:
     agrupa las tarjetas en sub-contenedores de 2-3 columnas, así que
     los hijos DIRECTOS de .rre-quick-list dejaron de ser las 8
     .rre-quick-item — ahora son 3 .rre-quick-row (cada uno display:grid
     de la regla base) + Mi Perfil suelto. El flex-column de arriba
     terminaba apilando esas FILAS agrupadas, no las tarjetas — RaqPlay
     heredaba por accidente la misma grilla de 2-3 columnas de PICKCR
     en vez de su lista de 1 columna. display:contents saca el
     .rre-quick-row del árbol de cajas (sin tocar el HTML): sus hijos
     (.rre-quick-item) pasan a ser hijos directos "de verdad" de
     .rre-quick-list para efectos de layout, así vuelve a apilarlos de
     a uno como espera el resto de las reglas de acá abajo. */
  html[data-brand="raqplay"] .rre-quick-row{ display:contents; }
  html[data-brand="raqplay"] .rre-quick-item{
    aspect-ratio:auto; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px;
    padding:16px 18px; border-radius:16px;
    background:rgba(20,20,20,0.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-color:#2a2a2a;
  }
  html[data-brand="raqplay"] .rre-quick-item-icon{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:40px; height:40px; border-radius:50%; background:rgba(200,245,29,0.12); color:var(--lime);
  }
  html[data-brand="raqplay"] .rre-quick-item-text{ flex:1; min-width:0; }
  html[data-brand="raqplay"] .rre-quick-item-title{ color:#fff; text-shadow:none; font-size:16px; }
  html[data-brand="raqplay"] .rre-quick-item-sub{ color:rgba(255,255,255,0.55); text-shadow:none; font-size:12px; margin-top:2px; }
  html[data-brand="raqplay"] .rre-quick-item-chevron{ display:block; color:rgba(255,255,255,0.4); font-size:20px; text-shadow:none; }
  /* Lima directo sobre este fondo oscuro nuevo SÍ se lee bien (a
     diferencia del vidrio blanco del intento anterior, que necesitaba
     un lima oscurecido #6b8200 para tener contraste real, mismo
     criterio que css/jugar.css/css/openplay.css) — el ítem destacado
     en lima (.is-lima: Nuevo partido/Fast Robin/Open Match) usa
     var(--lime) tal cual, sin oscurecer. */
  html[data-brand="raqplay"] .rre-quick-item.is-lima .rre-quick-item-title,
  html[data-brand="raqplay"] .rre-quick-item.is-lima .rre-quick-item-chevron{ color:var(--lime); }
  html[data-brand="raqplay"] .rre-quick-item.is-lima .rre-quick-item-icon{ background:rgba(200,245,29,0.18); }
  /* .is-featured (Reserva/Booking) — mismo fondo lima sólido que
     PICKCR. Bug real encontrado al verificar en navegador: la regla
     base ".rre-quick-item.is-featured{ background:var(--lime); }" (0,2,0
     de especificidad) queda por DEBAJO de
     "html[data-brand=raqplay] .rre-quick-item" de arriba (0,2,1: el
     "html" del selector cuenta como elemento, no como clase — suma un
     punto más que dos clases solas) y perdía contra el fondo oscuro
     nuevo, dejando Reserva oscura en vez de lima sólido. Hace falta
     reafirmarlo acá explícitamente, con la misma especificidad que ya
     usaba esta regla antes de este rediseño. */
  html[data-brand="raqplay"] .rre-quick-item.is-featured{ background:var(--lime); border-color:var(--lime); }
  html[data-brand="raqplay"] .rre-quick-item.is-featured .rre-quick-item-icon{ background:rgba(10,10,10,0.15); color:#0a0a0a; }

  /* Acciones rápidas propias de RaqPlay (2026-08-11, mockup original) —
     3 filas en vez de las 8 de PICKCR de arriba (ver .rre-quick-list-raqplay
     en round-robin-express.html). Mismo tratamiento visual EXACTO que
     ya usaba .rre-quick-item para raqplay arriba (tarjeta oscura +
     ícono circular lima + flecha), solo que acá es el único selector
     — no hace falta convivir con el layout de PICKCR ni con
     .rre-quick-row. Oculto por defecto (PICKCR nunca la muestra). */
  .rre-quick-list-raqplay{ display:none; }
  html[data-brand="raqplay"] .rre-quick-list-raqplay{
    display:flex; flex-direction:column; gap:10px; margin-top:14px;
  }
  html[data-brand="raqplay"] .rre-quick-item-rq{
    display:flex; align-items:center; gap:14px; width:100%;
    padding:16px 18px; border-radius:16px; border:1px solid #2a2a2a;
    background:rgba(20,20,20,0.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    text-decoration:none; text-align:left; cursor:pointer; font:inherit; color:inherit;
  }
  html[data-brand="raqplay"] .rre-quick-item-rq-icon{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:40px; height:40px; border-radius:50%; background:rgba(200,245,29,0.12); color:var(--lime);
  }
  html[data-brand="raqplay"] .rre-quick-item-rq-text{ flex:1; min-width:0; }
  html[data-brand="raqplay"] .rre-quick-item-rq-title{
    display:block; font-family:var(--font-display); font-weight:800; font-size:16px;
    text-transform:uppercase; letter-spacing:0.2px; color:#fff;
  }
  html[data-brand="raqplay"] .rre-quick-item-rq-sub{ display:block; font-size:12px; color:rgba(255,255,255,0.55); margin-top:2px; }
  html[data-brand="raqplay"] .rre-quick-item-rq-chevron{ flex-shrink:0; color:rgba(255,255,255,0.4); font-size:20px; }

  /* Acordeón de "Sesiones" (Tus sesiones en nube / Mis Sesiones en
     dispositivo) — vive FUERA de .rre-home-grid a propósito (ver
     comentario en el HTML): dentro de una celda de Grid,
     align-items:stretch estiraría toda la fila al abrirse. Ahora es
     una tarjeta propia, ancho completo, con su propio fondo/borde en
     vez de heredarlo de la vieja .rre-menu-window (ya removida). */
  /* Fondo transparente (2026-08-07, pedido explícito: "cuando abre
     sesiones el contenedor es azul dejelo solo las letras en
     transparente") — antes tenía su propio rectángulo de fondo
     (rgba azul) + cada opción con su propio fondo también; ahora solo
     queda el texto, sin ningún rectángulo detrás. */
  .rre-menu-sesiones-opciones{
    padding:8px 0 0; margin-bottom:16px;
  }
  .rre-menu-sesiones-opcion{
    display:block; width:100%; text-align:left; padding:10px 12px; margin-top:2px;
    background:none; border:none; border-radius:9px;
    color:var(--text); font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit;
  }
  .rre-menu-sesiones-opcion:first-child{ margin-top:0; }
  .rre-menu-sesiones-opcion:active{ background:rgba(255,255,255,0.06); }

  /* Fila 2 de la línea de cuenta — "Cerrar sesión" como link subrayado
     (antes botón con borde). La campanita decorativa que iba acá se
     sacó (2026-08-06, "eliminar el boton de campana que no hace
     nada"). Mismo combo ya establecido en .logo-text .tag para texto
     directo sobre la foto: claro translúcido + text-shadow marcado,
     legible sin importar qué tan clara/oscura sea la foto que esté
     rotando en ese momento (ver rreIniciarRotacionFondo()). */
  .rre-saludo-fila2{ display:flex; align-items:center; gap:8px; margin-top:6px; }
  .rre-signout-link{
    background:none; border:none; padding:0; cursor:pointer; font-family:'Barlow', sans-serif;
    font-size:11px; font-weight:600; color:rgba(244,246,250,0.75);
    text-decoration:underline; text-underline-offset:2px;
    text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9);
  }

  /* Mis Sesiones / Sincronización / Configuración a crema (2026-08-02,
     pedido explícito: "la página de sincronización, mis sesiones,
     configuración del round robin las páginas dentro... igual") —
     mismo tratamiento que Inicio y Perfil, ahora dentro de las 3
     pantallas siguientes de la app. Deliberadamente NO se toca la
     regla base de .card/.btn-outline/label/input — esas mismas clases
     viven también en #rre-juego (marcador en vivo, nunca pedido) y
     #rre-finalizada, así que todo acá abajo va SCOPEADO por id de
     sección. Los acentos interactivos (badges de estado, botón +/-
     del stepper, pill activo, tarjeta "Rotativo" en lima) se dejan
     igual que siempre — mismo criterio que Inicio/Perfil: solo cambian
     los contenedores, no cada elemento lima. */
  #rre-mis-sesiones .card,
  #rre-sincronizacion .card,
  #rre-configuracion .rre-paso-card,
  #rre-jugadores .rre-paso-card{
    background:var(--crema-bg-90); border:1px solid var(--crema-border); color:var(--crema-text);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  #rre-mis-sesiones h2, #rre-sincronizacion h2{ color:var(--crema-text); }
  #rre-mis-sesiones .rre-historial-item,
  #rre-sincronizacion .rre-historial-item{ border-bottom-color:var(--crema-border); }

  #rre-mis-sesiones .card .btn-outline,
  #rre-sincronizacion .card .btn-outline,
  #rre-configuracion .rre-paso-card .btn-outline,
  #rre-jugadores .rre-paso-card .btn-outline{ border-color:var(--crema-border); color:var(--crema-text); }
  #rre-mis-sesiones .card .btn-outline:hover,
  #rre-sincronizacion .card .btn-outline:hover,
  #rre-configuracion .rre-paso-card .btn-outline:hover,
  #rre-jugadores .rre-paso-card .btn-outline:hover{ border-color:var(--cafe); color:var(--cafe); }

  #rre-configuracion .rre-paso-hint,
  #rre-jugadores .rre-paso-hint{ color:var(--crema-text-muted); }
  #rre-configuracion .rre-paso-card label,
  #rre-configuracion .rre-config-juego-grid label,
  #rre-jugadores .rre-paso-card label{ color:var(--crema-text-muted); }
  #rre-configuracion .rre-paso-card input[type=text],
  #rre-configuracion .rre-paso-card input[type=number],
  #rre-configuracion .rre-paso-card select,
  #rre-jugadores .rre-paso-card input[type=text],
  #rre-jugadores .rre-paso-card select{
    background:var(--crema-hover); border-color:var(--crema-border); color:var(--crema-text);
  }
  #rre-configuracion .rre-stepper-mini{ background:var(--crema-hover); border-color:var(--crema-border); }
  #rre-configuracion .rre-stepper-mini input{ color:var(--crema-text); }
  #rre-configuracion .rre-pill-group{ background:var(--crema-hover); border-color:var(--crema-border); }
  #rre-configuracion .rre-pill-btn{ color:var(--crema-text-muted); }
  /* Sistema de puntuación — "Side Out" activo (bug real reportado
     2026-08-03: "side out lo verde... cuando se marca pasar a color
     cafe") — a diferencia de Puntos por set/Formato (que quedan en
     lima, acento interactivo normal), acá se pide específicamente
     café. Scopeado por el atributo data-rre-scoretype-pill, no por
     .rre-pill-btn.is-activa en general — eso SÍ seguiría afectando a
     Puntos/Formato. */
  #rre-configuracion .rre-pill-group [data-rre-scoretype-pill].is-activa{ background:var(--cafe); color:var(--crema-bg); }
  /* .rre-pill-btn.is-activa (lima) queda igual para el resto — acento
     interactivo normal. .rre-tipo-card.btn-lime (Rotativo) SÍ se
     corrige acá abajo (bug
     real reportado 2026-08-03: "rotativo el cuadro esta en color
     verde") — mismo criterio café ya aplicado a Evento DUPR/Generar
     Round Robin: el verde desentonaba solo, en una pantalla que ya es
     crema+café en todo lo demás. */
  #rre-configuracion .rre-paso-card .btn-outline.rre-tipo-card .rre-tipo-card-icono{ color:var(--crema-text-muted); }
  #rre-configuracion .rre-paso-card .btn-outline.rre-tipo-card .rre-tipo-card-sub{ color:var(--crema-text-muted); }
  #rre-configuracion .rre-tipo-card.btn-lime{ background:var(--cafe); color:var(--crema-bg); }
  #rre-configuracion .rre-tipo-card.btn-lime .rre-tipo-card-icono{ color:var(--crema-bg); }
  /* Bug real reportado (2026-08-04): "en rotativo hay letras abajo en
     color gris o blanco que no se leen" — .rre-tipo-card-sub usaba
     var(--crema-hover), pensado como un fondo translúcido chico (input
     hover), no como color de TEXTO — sobre el lima de esta tarjeta
     quedaba casi invisible. Ahora usa el mismo tono oscuro que el
     ícono/título de arriba, con un poco de transparencia para que siga
     leyéndose como texto secundario. */
  #rre-configuracion .rre-tipo-card.btn-lime .rre-tipo-card-sub{ color:rgba(10,14,22,0.75); }

  /* Jugadores (2026-08-03, pedido explícito: "apartado 3 de players no
     se le cambió el color al módulo") — mismo criterio que
     Configuración: .rre-jugador-chip queda igual (chip oscuro
     autocontenido, ya legible contra cualquier fondo, mismo criterio
     que los badges/chips de otras pantallas). */
  #rre-jugadores .rre-agregarme-card{ border-color:var(--crema-border); color:var(--crema-text); }
  #rre-jugadores .rre-agregarme-card-sub{ color:var(--crema-text-muted); }
  /* Bug real reportado (2026-08-03): "en agregarme como jugador debe
     ser cafe que no se ve" — .rre-agregarme-card-titulo (línea ~550)
     es lima por defecto (pensado para fondo oscuro); sobre el
     dashed-border crema quedaba con muy poco contraste. Mismo criterio
     café que el resto de acentos de esta pantalla. El botón "+" de
     agregar jugador (.rre-add-jugador-btn) también era lima de fondo
     — "el boton de jugador debe ser color cafe igual que el cuadro". */
  #rre-jugadores .rre-agregarme-card-titulo{ color:var(--cafe); }
  #rre-jugadores .rre-add-jugador-btn{ background:var(--cafe); color:var(--crema-bg); }
  #rre-jugadores .checkbox-row{ color:var(--crema-text); }
  #rre-jugadores .rre-opciones-avanzadas-toggle{ color:var(--crema-text); }
  #rre-jugadores .rre-opciones-avanzadas-toggle .rre-icon-chevron{ color:var(--crema-text-muted); }
  #rre-jugadores .rre-opciones-avanzadas-panel{ border-top-color:var(--crema-border); }
  /* Bug real reportado (2026-08-03): "en jugadores el autollenado sale
     con fondo azul no se lee" — .rre-sugerencias-box (autocompletado al
     agregar jugador) tiene fondo oscuro fijo (var(--card)), nunca
     scopeado a crema; el texto de adentro, en cambio, SÍ heredaba
     color:var(--crema-text) (negro) de .rre-paso-card — negro sobre
     azul oscuro, ilegible. Se le da su propio fondo/borde crema acá. */
  #rre-jugadores .rre-sugerencias-box{ background:var(--crema-bg-90); border-color:var(--crema-border); }
  #rre-jugadores .rre-sugerencia{ color:var(--crema-text); }
  #rre-jugadores .rre-sugerencia:hover{ background:var(--crema-hover); }
  /* Bug real reportado (2026-08-03): "dupr en configuracion de round
     robin muestra el crema solo si esta marcado" — .rre-dupr-config-card
     (línea ~194) solo tenía fondo crema vía .active (agregada por JS
     cuando el checkbox "Evento DUPR" está marcado); sin marcar, y
     también el botón "Configurar DUPR" (misma clase, .active nunca se
     le aplica a él — ver _rreActualizarVisibilidadTipoEvento(),
     round-robin-express-adapter.js), quedaban con el fondo oscuro
     global de la clase. Acá se fija el crema como base DENTRO de
     #rre-jugadores para los dos casos — .active (arriba) sigue
     agregando el borde café encima, ahora como un realce sutil sobre
     el mismo crema, no como el único momento en que se ve crema.
     Bug real reportado de nuevo (2026-08-03): "en configuracion de
     dupr la version de ipad se ve en azul" — el intento anterior lo
     dejó scopeado a @media (max-width:1024px) porque en su momento se
     pidió así ("para las version ipad y movil"), pero un iPad real en
     horizontal mide MÁS de 1024px de ancho CSS (iPad Mini apaisado ya
     roza el límite, Air/Pro superan 1180-1366px) — el @media nunca
     llegaba a aplicarse ahí, y sin él el botón volvía al fondo oscuro
     de siempre ("azul"). Se saca el @media del todo: ahora es
     unconditional, igual que el resto de #rre-jugadores — no hay una
     versión de escritorio real de esta pantalla que valga la pena
     preservar (es una app, no una página del Portal con layout ancho
     propio). Incluye también el modal "Configurar DUPR" completo
     (#rre-modal-configurar-dupr), que hasta ahora se quedaba con el
     fondo oscuro de .rre-modal (clase compartida por TODOS los
     modales de RRE — nunca se toca esa regla global, solo se pisa acá
     adentro con el selector de más especificidad). Los estilos inline
     del modal (border/color en var(--border-soft)/var(--text-faint)/
     var(--card-soft)/var(--border)/var(--text)) se resuelven solos
     redefiniendo esas mismas variables DENTRO de
     #rre-modal-configurar-dupr .rre-modal — no hace falta tocar cada
     línea de estilo inline ni usar !important en ningún lado. */
  #rre-jugadores .rre-dupr-config-card{ background:var(--crema-bg-90); border-color:var(--crema-border); color:var(--crema-text); }
  #rre-jugadores .rre-dupr-config-card-subtitulo{ color:var(--crema-text-muted); }
  #rre-modal-configurar-dupr .rre-modal{
    background:var(--crema-bg-90); border-color:var(--crema-border); color:var(--crema-text);
    --border-soft: var(--crema-border);
    --border: var(--crema-border);
    --text: var(--crema-text);
    /* Bug real reportado (2026-08-03): "en configuracion dupr las
       letras deben ser negras" — las etiquetas de los radios (DUPR
       Estándar/Premium, Heredar/Partner/Club) son <label> sin color
       propio: heredaban el `label{ color:var(--text-muted); }`
       global (gris azulado, línea ~86), que NO estaba cubierto por
       este bloque de variables — solo --text/--text-faint. Acá se
       agrega --text-muted para que esas etiquetas también salgan en
       negro (--crema-text), no solo el texto que ya usaba --text. */
    --text-muted: var(--crema-text);
    --text-faint: var(--crema-text-muted);
    --card-soft: var(--crema-hover);
  }
  #rre-modal-configurar-dupr .btn-outline{ border-color:var(--crema-border); color:var(--crema-text); }
  #rre-modal-configurar-dupr .btn-outline:hover{ border-color:var(--cafe); color:var(--cafe); }
  /* Bug real reportado (2026-08-03): "cuando le doy validar dupr me
     sale una pantalla... esta en azul no veo quien es el jugador" —
     .rre-jugador-chip (la fila de cada jugador rechazado en "Validar
     participantes DUPR") usa var(--bg-soft) de fondo, una variable que
     el bloque de arriba NUNCA redefine (solo --border/--text/
     --card-soft/etc.) — se queda en el azul oscuro global de siempre,
     mientras el texto de adentro sí hereda negro (--text ya
     redefinido acá) — negro sobre azul oscuro, mismo patrón ya
     corregido antes en #rre-jugadores .rre-jugador-chip. */
  #rre-modal-configurar-dupr .rre-jugador-chip{ background:var(--crema-hover); border-color:var(--crema-border); color:var(--crema-text); }
  .rre-login-crear-cuenta-link{ color:var(--lime); }

  /* Modales de Iniciar sesión / Crear cuenta a crema (2026-08-03,
     pedido explícito: "cuando salgo de sesion y vuelvo a abrir sale
     una pantalla que se llama sign in continuar con google o crear
     acount esa pantalla en version de celular debe ser crema y cuidar
     que lo verde de crear acount pase a color blanco") — mismo patrón
     que el modal Configurar DUPR: .rre-modal es compartida por TODOS
     los modales de RRE, nunca se toca esa regla global, se redefinen
     las variables CSS DENTRO de estos dos selectores para que los
     estilos inline del modal (que ya referencian esas mismas
     variables) se resuelvan solos. Sin @media a propósito, igual que
     el modal Configurar DUPR (ace8661) — un iPad real en horizontal
     supera 1024px de ancho CSS, así que scoparlo a un @media dejaba
     esta misma pantalla rota ahí; no hay una versión de escritorio de
     RRE que valga la pena preservar aparte. El link "Creá tu cuenta"
     (antes lima, .rre-login-crear-cuenta-link) pasa a blanco, pedido
     explícito — es el único texto de acento de este modal, todo lo
     demás (botones, labels) sigue el mismo negro/café que el resto de
     los modales crema de RRE. */
  #rre-login-modal .rre-modal,
  #rre-registro-modal .rre-modal{
    background:var(--crema-bg-90); border-color:var(--crema-border); color:var(--crema-text);
    --border-soft: var(--crema-border);
    --border: var(--crema-border);
    --text: var(--crema-text);
    --text-muted: var(--crema-text-muted);
    --text-faint: var(--crema-text-muted);
    --card-soft: var(--crema-hover);
  }
  #rre-login-modal .btn-outline,
  #rre-registro-modal .btn-outline{ border-color:var(--crema-border); color:var(--crema-text); }
  #rre-login-modal .btn-outline:hover,
  #rre-registro-modal .btn-outline:hover{ border-color:var(--cafe); color:var(--cafe); }
  /* Blanco -> amarillo (2026-08-03, pedido explícito: "en color
     amarillo seria perfecto") — el blanco quedaba con poco contraste
     sobre el fondo crema, ver comentario del commit anterior. */
  #rre-login-modal .rre-login-crear-cuenta-link{ color:#b8901e; }
  /* "Evento DUPR"/"Generar Round Robin" a café (2026-08-03, pedido
     explícito: "evento dupr eso debe ser de color cafe igual que
     generar round robin") — .btn-lime se usa en TODA la app (Confirmar
     Set, tarjeta Rotativo, etc.), así que esto va scopeado por ID, no
     por clase. El estado disabled (sin jugadores todavía) se
     reescribe explícito para no perder el gris apagado de siempre —
     un ID le gana en especificidad a .btn-lime:disabled y lo hubiera
     pisado. */
  #rre-btn-generar.btn-lime{ background:var(--cafe); color:var(--crema-bg); }
  /* Bug real reportado (2026-08-03): "el boton de generar round robin
     esta en color azul" — var(--border-soft) es #1a2132, un gris
     pensado para el fondo OSCURO de siempre; sobre la tarjeta crema
     de #rre-jugadores se ve como un azul marino evidente. Se
     reemplaza por el gris/borde propios de la paleta crema. */
  #rre-btn-generar.btn-lime:disabled{ background:var(--crema-border); color:var(--crema-text-muted); }

  /* Wizard de Configuración — 3 pasos (2026-08-03, mockup aprobado:
     "debe verse homogenio del mismo tamano todo estar en el centro").
     rre-wizard-topbar (flecha atrás + puntitos) es compartido por
     Jugadores/Configuración del juego/Datos de la sesión —
     rreWizardIrAPaso()/rreWizardAtras() (round-robin-express-adapter.js)
     lo actualizan. Mismos tonos café/crema que el resto de esta
     pantalla, nunca el azul oscuro de siempre (--border-soft) —
     mismo motivo que el fix de #rre-btn-generar de arriba. */
  .rre-wizard-flecha{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    border:1px solid var(--crema-border); background:var(--crema-hover);
    color:var(--crema-text); font-size:20px; line-height:1;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .rre-wizard-flecha:hover{ border-color:var(--cafe); color:var(--cafe); }
  .rre-wizard-dots{ display:flex; align-items:center; gap:6px; }
  .rre-wizard-dot{ width:7px; height:7px; border-radius:50%; background:var(--crema-border); transition:background 0.15s, width 0.15s; }
  /* --lime, no --cafe (bug real visto en preview, 2026-08-03) — el
     topbar vive sobre la foto de fondo oscura de Inicio, no sobre la
     tarjeta crema; un punto café ahí queda casi invisible. Mismo verde
     lima que ya se usa para "activo" en el resto de esta pantalla
     sobre foto (ej. la pestaña activa del bottom-nav). */
  .rre-wizard-dot.is-activo{ background:var(--lime); width:18px; border-radius:4px; }
  /* Mismo alto mínimo en los 3 pasos (2026-08-03, pedido explícito:
     "debe verse homogenio del mismo tamano") — Jugadores/Configuración
     del juego tienen bastante más contenido que Datos de la sesión;
     sin esto, ese último paso se veía como una tarjeta chica y suelta
     al lado de las otras dos. El contenido real de cada paso puede
     seguir creciendo más allá de esto (una lista larga de jugadores,
     por ejemplo) — es un mínimo, no un tope. */
  #rre-jugadores .rre-paso-card,
  #rre-configuracion .rre-paso-card{ min-height:420px; display:flex; flex-direction:column; }
  /* "Siguiente" — mismo tratamiento café que "Generar Round Robin"
     (arriba), por la misma razón: son la misma clase de CTA dentro de
     esta secuencia, deben verse homogéneas entre sí. */
  .rre-wizard-siguiente.btn-lime{ background:var(--cafe); color:var(--crema-bg); }

  .rre-seccion-titulo{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:15.5px; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:12px; }
  .rre-seccion-barra{ width:4px; height:15px; background:var(--lime); border-radius:2px; flex-shrink:0; }

  /* Más fina (2026-08-04, pedido explícito: "esta muy gruesa la barra
     de navegacion de abajo") — de 10px a 6px de padding vertical, y el
     ícono baja de 20 a 18px (ver los <svg> del HTML) para acompañar. */
  .rre-bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-around; align-items:center; background:var(--card-soft); border-top:1px solid var(--border-soft); padding:6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); }
  .rre-bottom-nav-item{ display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; cursor:pointer; font-family:'Barlow', sans-serif; font-size:11px; font-weight:600; color:var(--text-faint); }
  .rre-bottom-nav-item.is-activa{ color:var(--lime); }

  /* Dock de 3 ítems, exclusivo de Home (rediseño 2026-08-06, ver
     comentario en el HTML) — a diferencia de .rre-bottom-nav (fondo
     sólido), este queda totalmente transparente sobre la foto que
     rota: sin fondo, sin borde, sin blur. Legibilidad vía text-shadow
     marcado, mismo criterio que .rre-signout-link/.logo-text .tag. */
  .rre-dock{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; align-items:center; gap:56px; padding:12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background:transparent; border:none; }
  .rre-dock-item{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer; text-decoration:none; font-family:'Barlow', sans-serif; font-size:11px; font-weight:700; 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-dock-item .rre-icon{ filter:drop-shadow(0 1px 3px rgba(0,0,0,0.8)); }
  .rre-dock-item.is-activa{ color:var(--lime); }
  .rre-dock-item.is-activa .rre-icon{ stroke:var(--lime); filter:drop-shadow(0 0 7px rgba(198,255,61,0.85)) drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }

  /* Pantalla de Configuración rediseñada (revisión julio 2026, ver
     mockup de referencia) — mismos ids/onclick/lógica de siempre
     (_rreGuardarConfigDesdeFormulario, rreCambiarTipoSesion,
     rreRenderJugadores, etc.), solo reorganizados en tarjetas
     numeradas + selectores tipo pill/card, siguiendo el sistema de
     iconos ya aprobado (un solo ícono nuevo, "chevron-down", mismo
     trazo que el resto). */
  .rre-paso-card{ background:rgba(20,27,44,0.98); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--border-soft); border-radius:14px; padding:18px; margin-bottom:16px; }
  .rre-paso-header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .rre-paso-numero{ width:24px; height:24px; border-radius:50%; background:var(--lime); color:#0a0e16; font-family:var(--font-display); font-weight:800; font-size:14.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .rre-paso-titulo{ font-family:var(--font-display); font-weight:800; font-size:17.5px; margin:0; }
  .rre-paso-hint{ font-size:12px; color:var(--text-faint); margin-left:auto; }

  .rre-input-wrap{ position:relative; }
  .rre-input-wrap .rre-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }
  .rre-input-wrap input{ padding-left:36px; }

  /* Los 3 contenedores del mismo tamaño (2026-08-06, pedido explícito:
     "tenemos 3 contenedores de diferente tamaño... del mismo tamano
     que points per set... del mismo tamano que format") — antes
     1.05fr/1.15fr/0.9fr, ligeramente distinto entre sí (Formato el más
     angosto). Ahora los 3 son el mismo ancho exacto. */
  .rre-config-juego-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:18px; }
  .rre-config-juego-grid label{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.3px; font-weight:700; margin-bottom:7px; }

  /* Canchas del mismo alto que Puntos por set/Formato (2026-08-06, bug
     real encontrado: mismo ANCHO ya desde la corrección anterior
     — grid-template-columns:1fr 1fr 1fr, línea ~810 — pero distinto
     ALTO: .rre-stepper-mini medía 34px de alto contra 41px de
     .rre-pill-group, medido en producción — el botón fijo de 24x24
     quedaba más chico que el pill (padding vertical 7px, texto 14px).
     min-height:41px iguala el alto exacto; los botones también crecen
     a 30x30 para que el "+"/"−" no quede desproporcionado dentro de
     la caja ahora más alta.) */
  .rre-stepper-mini{ display:flex; align-items:center; gap:5px; background:var(--bg-soft); border:1px solid var(--border); border-radius:9px; padding:4px; min-height:41px; box-sizing:border-box; }
  .rre-stepper-mini-btn{ width:30px; height:30px; flex-shrink:0; border-radius:6px; background:var(--card); border:1px solid var(--border); color:var(--lime); font-size:18.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
  .rre-stepper-mini input{ flex:1; min-width:18px; text-align:center; background:none; border:none; color:var(--text); font-family:var(--font-display); font-weight:800; font-size:17px; padding:0; }
  .rre-stepper-mini input::-webkit-inner-spin-button,
  .rre-stepper-mini input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  .rre-stepper-mini input{ -moz-appearance:textfield; }

  .rre-pill-group{ display:flex; gap:5px; background:var(--bg-soft); border:1px solid var(--border); border-radius:9px; padding:4px; min-height:41px; box-sizing:border-box; }
  .rre-pill-btn{ flex:1; text-align:center; font-family:var(--font-display); font-weight:700; font-size:14px; padding:7px 4px; border-radius:6px; background:none; border:none; color:var(--text-faint); cursor:pointer; }
  .rre-pill-btn.is-activa{ background:var(--lime); color:#0a0e16; }

  /* 1 sola columna (2026-08-05, antes 1fr 1fr) — con 3 tarjetas
     (Rotativo/Parejas fijas/Sencillos) y subtítulos largos, 2 o 3
     columnas dejaban el texto apretado en celular; apiladas se leen
     bien sin importar cuántas tarjetas haya. */
  .rre-tipo-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
  .rre-tipo-card{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:7px; padding:16px; }
  .rre-tipo-card-icono{ color:var(--text-muted); }
  .rre-tipo-card.btn-lime .rre-tipo-card-icono{ color:var(--lime); }
  .rre-tipo-card-titulo{ display:block; font-family:var(--font-display); font-weight:700; font-size:16.5px; }
  .rre-tipo-card-sub{ display:block; font-size:12.5px; color:var(--text-muted); line-height:1.4; font-weight:400; }

  .rre-opciones-avanzadas-toggle{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; color:var(--text); font-family:var(--font-display); font-weight:700; font-size:15.5px; padding:0; cursor:pointer; }
  .rre-opciones-avanzadas-toggle .rre-icon-chevron{ margin-left:auto; transition:transform .15s; color:var(--text-faint); }
  .rre-opciones-avanzadas-toggle.is-abierto .rre-icon-chevron{ transform:rotate(180deg); }
  .rre-opciones-avanzadas-panel{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft); }
  .rre-opciones-avanzadas-panel.show{ display:block; }

  .rre-agregarme-card{ display:flex; flex-direction:row; align-items:center; justify-content:center; text-align:center; gap:8px; width:100%; background:none; border:1.5px dashed var(--border); border-radius:12px; padding:10px 14px; cursor:pointer; margin-bottom:12px; color:var(--text); }
  .rre-agregarme-card:hover{ border-color:var(--lime); }
  .rre-agregarme-card-titulo{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--lime); }
  .rre-agregarme-card-sub{ font-size:12px; color:var(--text-faint); }

  /* Variante chica (2026-08-06, pedido explícito: "puede ponerlo en
     pequeno muy pequeno") — usada solo junto al campo "Agregar
     jugador" (round-robin-express.html), no reemplaza la tarjeta
     normal en ningún otro lugar. */
  .rre-agregarme-card-chica{ gap:4px; padding:3px 8px; border-radius:6px; margin-bottom:0; width:auto; flex:none !important; align-self:flex-end; }
  .rre-agregarme-card-chica .rre-agregarme-card-titulo{ font-size:10px; gap:3px; }

  .rre-add-jugador-btn{ flex-shrink:0; width:44px; height:44px; border-radius:9px; background:var(--lime); color:#0a0e16; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }

  .rre-aviso-generar{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--orange); margin-top:10px; }
  .rre-aviso-generar:empty{ display:none; }

  .rre-info-row{ display:flex; align-items:center; gap:12px; padding:13px 4px; }
  .rre-info-row + .rre-info-row{ border-top:1px solid var(--border-soft); }
  .rre-info-row-icono{ width:32px; height:32px; border-radius:9px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0; }
  .rre-info-row-texto{ flex:1; min-width:0; }
  .rre-info-row-titulo{ font-size:14.5px; font-weight:600; }
  .rre-info-row-sub{ font-size:12px; color:var(--text-faint); }
  .rre-info-row-flecha{ color:var(--text-faint); font-size:20px; flex-shrink:0; }

  /* Antes un banner grande (foto + botón "Conectar mi DUPR →") — pedido
     explícito (2026-08-02): "eliminar el barner de dupr conectar
     porque ahora se debe hacer desde la otra pagina y solo poner DUPR
     PARNER... pero en letras" (conectar DUPR ahora vive en el Paso 2
     de round-robin-inicio.html, antes de llegar acá). Solo texto,
     centrado, sin CTA. */
  /* Antes var(--text-faint) (gris apagado) — pedido explícito
     (2026-08-02): "si pero mas blaco" — este texto queda directo
     sobre la foto de fondo, sin ningún respaldo opaco propio, mismo
     motivo que .rre-saludo-estado un poco más arriba. */
  .rre-dupr-partner-texto{
    text-align:center; margin-top:16px; font-family:var(--font-display);
    font-weight:700; font-size:13px; letter-spacing:1.5px; color:rgba(244,246,250,0.85);
  }

  /* .rre-historial-centro — sin centrado vertical (2026-08-07, probado
     un panel azul fixed detrás de todo esto — pedido explícito
     "elimine el fondo azul", se sacó por completo — el flujo normal
     de arriba hacia abajo se queda tal cual estaba con ese panel). */
  .rre-historial-centro{ display:block; }

  /* Header de "Mis Sesiones" — pantalla propia (antes vivía embebida en
     Home). Mismo patrón visual que el resto (h1 + subtitle ya
     definidos arriba), solo se agrega la flecha de volver. */
  .rre-header-volver{ display:flex; align-items:center; gap:12px; margin-bottom:2px; }
  .rre-header-volver-btn{ background:none; border:none; color:var(--text); cursor:pointer; padding:4px; display:flex; flex-shrink:0; }
  .rre-header-volver h1{ margin-bottom:0; }

  /* #rre-juego (marcadores/rondas/clasificación) a crema — mockup
     aprobado (2026-08-03, pedido explícito: "el round robin donde
     estan los marcadores deben verse... con el crema, la idea es que
     parezca una libreta electronica tipo apple simple"). Hasta ahora
     esta era la única pantalla de la app que se había dejado
     deliberadamente fuera del crema (ver comentario "nunca pedido",
     más arriba) — ahora sí se pidió. Mismo criterio que el resto de
     RRE: sin @media, unconditional (no hay una versión de escritorio
     de esta app que valga la pena preservar aparte). A diferencia de
     Configuración/Jugadores (donde los acentos interactivos se dejaban
     en lima), acá el número del marcador y el título de ronda pasan a
     café — es contenido principal tipo "tinta sobre papel", no un
     acento de estado, así que café encaja mejor con "libreta". */
  #rre-juego .card{ background:var(--crema-bg-90); border:1px solid var(--crema-border); color:var(--crema-text); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  /* Bug real reportado (2026-08-03): "el titulo que dice liga por
     ejemplo open play lunes esta en negro" — #rre-juego-titulo (h1,
     nombre de la sesión) vive ARRIBA de la tarjeta de Ronda, directo
     sobre la foto de fondo oscura, igual que "Copiar link"/"Compartir
     sesión" (mismo bug, ver comentario más abajo) — texto negro ahí
     queda invisible. Se saca del scope crema, vuelve a heredar el
     blanco por defecto (h1 base, sin color propio). h2 SÍ se deja en
     café — el único h2 de esta pantalla ("Clasificación") vive DENTRO
     de una tarjeta crema. */
  #rre-juego .card h2{ color:var(--crema-text); }
  #rre-juego .rre-ronda-flecha{ background:var(--crema-hover); border-color:var(--crema-border); color:var(--cafe); }
  #rre-juego .rre-ronda-titulo{ color:var(--cafe); }
  #rre-juego .rre-partido-card{ background:var(--crema-bg-90); border:1px solid var(--crema-border); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  #rre-juego .rre-partido-cancha{ color:var(--crema-text-muted); }
  #rre-juego .rre-partido-equipo-nombre{ color:var(--crema-text); }
  #rre-juego .rre-vs-divider{ background:var(--crema-hover); border-color:var(--crema-border); color:var(--cafe); }
  #rre-juego .rre-set-titulo{ color:var(--crema-text-muted); }
  #rre-juego .rre-set-editar{ color:var(--cafe); }
  #rre-juego .rre-stepper-nombre{ color:var(--crema-text-muted); }
  #rre-juego .rre-score-circle{ background:var(--crema-hover); border-color:var(--crema-border); }
  #rre-juego .rre-score-num{ color:var(--cafe); }
  #rre-juego .rre-score-hint{ color:var(--crema-text-muted); }
  #rre-juego .rre-set-locked{ background:var(--crema-hover); border-color:var(--cafe); color:var(--cafe); }
  #rre-juego .btn-lime.rre-confirmar-set{ background:var(--cafe); color:var(--crema-bg); }
  #rre-juego .btn-lime.rre-finalizar-sesion{ background:var(--cafe); color:var(--crema-bg); }
  #rre-juego .rre-clasif-tabla th{ color:var(--crema-text-muted); border-color:var(--crema-border); }
  #rre-juego .rre-clasif-tabla td{ color:var(--crema-text); border-color:var(--crema-border); }
  #rre-juego .rre-clasif-tabla th:nth-child(2), #rre-juego .rre-clasif-tabla td:nth-child(2){ background:var(--crema-hover); }
  #rre-juego .rre-clasif-pos{ color:var(--crema-text-muted); }
  #rre-juego .rre-clasif-tabla tr.is-top .rre-clasif-pos,
  #rre-juego .rre-clasif-tabla tr.is-top td:nth-child(2){ color:var(--cafe); }
  /* Bug real reportado (2026-08-03): "el link de copiar link y
     compartir sesion estan trasparentes no se ven, seria ponerlos en
     blanco" — "Copiar link para ver en vivo"/"Compartir sesión"/"DUPR"
     viven ARRIBA de la tarjeta de Ronda, directo sobre la foto de
     fondo oscura (no dentro de .card) — a diferencia del resto de
     #rre-juego, que sí quedó dentro de tarjetas crema. Ponerles texto
     café ahí los dejaba casi invisibles (negro sobre foto oscura,
     mismo bug que ya se vio con los puntitos del wizard). Se sacan del
     scope crema — vuelven al blanco/borde clarito original
     (.btn-outline base), que es justo lo pedido. */

  /* Jugadores en Jugadores (2026-08-03, pedido explícito: "los
     jugadores en jugadores estan en azul y no se ven") —
     .rre-jugador-chip tiene fondo oscuro fijo (var(--bg-soft)) sin
     color de texto propio; heredaba color:var(--crema-text) (negro) de
     .rre-paso-card — negro sobre azul oscuro, mismo patrón que el bug
     ya corregido de .rre-sugerencias-box. Acá SÍ se le da su propio
     crema, a diferencia de la política original ("chip autocontenido,
     ya legible en cualquier fondo") — esa premisa ya no valía apenas
     el fondo de alrededor pasó a ser crema. */
  #rre-jugadores .rre-jugador-chip{ background:var(--crema-hover); border-color:var(--crema-border); color:var(--crema-text); }
  #rre-jugadores .rre-jugador-chip button{ color:var(--crema-text-muted); }

  /* Letras más grandes en Jugadores (2026-08-06, pedido explícito:
     "quiero que el contenedor tenga la misma proporcionalidad que
     configuracion del juego... se puede diseñar mas grande para que
     se lea mejor las letras") — Configuración del juego se ve "lleno"
     porque tiene mucho contenido (grid de 3 columnas + 3 tarjetas de
     tipo de sesión); Jugadores, con poco contenido, quedaba con el
     mismo alto mínimo (min-height:420px, ya compartido por ambos
     pasos, línea ~760) pero con letra chica flotando en espacio
     vacío. Acá se agranda la tipografía propia de este paso
     específicamente — no toca Configuración, que ya se leía bien. */
  #rre-jugadores label{ font-size:15.5px; }
  #rre-jugadores input[type=text]{ font-size:17.5px; padding-top:12px; padding-bottom:12px; }
  #rre-jugadores .rre-dupr-config-card-titulo{ font-size:16px; }
  #rre-jugadores .rre-dupr-config-card-subtitulo{ font-size:13.5px; }
  #rre-jugadores .rre-agregarme-card-titulo{ font-size:16px; }
  #rre-jugadores .rre-agregarme-card-sub{ font-size:13px; }
  #rre-jugadores .rre-add-jugador-btn{ width:48px; height:48px; }
  /* Gana sobre la regla "letras más grandes" de arriba (misma
     especificidad ID+clase, pero declarada después) — variante chica
     de "Agregarme" pedida explícitamente pequeña, no debe heredar el
     agrandado general de este paso. */
  #rre-jugadores .rre-agregarme-card-chica .rre-agregarme-card-titulo{ font-size:11.5px; }

  /* #rre-finalizada (2026-08-03, pedido explícito: "el contenedor de
     finales para esta en azul") — mismo criterio recién aplicado a
     #rre-juego: única tarjeta de esta pantalla, sin @media. El borde
     lima (ya puesto inline, "border-color:var(--lime)") se deja igual
     — es el acento de "sesión completada con éxito", no un color de
     fondo — solo el FONDO de la tarjeta y el texto pasan a crema. */
  #rre-finalizada .card{ background:var(--crema-bg-90); color:var(--crema-text); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  #rre-finalizada .subtitle{ color:var(--crema-text-muted); }
  #rre-finalizada .btn-outline{ border-color:var(--crema-border); color:var(--crema-text); }
  #rre-finalizada .btn-outline:hover{ border-color:var(--cafe); color:var(--cafe); }