/* 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{
    /* Paleta oficial de marca (2026-08-20, pedido explícito: "expande
       este paleta de color de muestra a todo round robin los sistemas
       de round robin marcadores") — mismos tonos exactos que Home 3a/
       portal/torneo.html/portal/inscripcion.html: Índigo Primario
       #3B36C9, Lima Acento #C6FF00, Negro #111111, grises #C7CBE8/
       #A8ADCF. Alcance confirmado en el pedido anterior de Home 3a:
       SOLO color, --font-display se queda en Barlow Condensed (el
       resto de RRE — wizard/sesiones/marcadores — nunca usó Inter,
       tipografía fuera de alcance acá). */
    --bg: #1446e1; --bg-soft: #0c3ec3; --card: #111111; --card-soft: #2f5ce0;
    --border: #4a44b0; --border-soft: #423cab;
    --text: #f4f6fa; --text-muted: #c7cbe8; --text-faint: #a8adcf;
    --lime: #c6ff00; --lime-dark: #9ecc00; --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);
    /* Azul del mockup de referencia (2026-08-19, pedido explícito: "es
       que es este nuevo color de fondo es diferente" — comparando
       contra Pickleball Config.dc.html, --color-surface:#2c3178) —
       reemplaza el gris-negro sobrio anterior (2026-08-02: "debe ser
       mas gris o un negro mas... que se vea serio sobrio"), pedido más
       reciente y explícito. Mismo criterio de siempre: alpha 0.6 se
       mantiene (vidrio translúcido sobre la foto rotando de fondo),
       solo cambia el tono. */
    --crema-bg-90: rgba(47,92,224,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.
     rgb pasa de 59,54,201 (#3B36C9 exacto) a 20,70,225 (2026-08-21,
     reportado de nuevo: "todavia siento el RRE el fondo morado y no
     azul") — esta capa vive DETRÁS de toda la pantalla (z-index:-1,
     sin scope de .rre-home3, por eso el rgb va hardcodeado acá en vez
     de var(--h3-bg-rgb)) y se ve, semitransparente sobre la foto real,
     en CUALQUIER pantalla de RRE, no solo Home — el mismo índigo
     exacto que ya se había identificado como "se ve morado" en la capa
     de arriba de Home (.rre-home3-gradient) seguía sin tocarse acá.
     Mismos % de opacidad de siempre, solo cambia el tono. */
  .page-bg-overlay{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(20,70,225,0.32) 0%, rgba(20,70,225,0.4) 30%, rgba(20,70,225,0.52) 70%, rgba(20,70,225,0.62) 100%);
  }

  /* margin-bottom 24px->16px (2026-08-17, pedido explícito en la
     pantalla de Juego: "subimos un poco el nombre... podriamos hacer
     mas grande el contenedor de rondas") — .site-header es la misma
     barra en TODAS las pantallas de RRE (Inicio, Configuración,
     Jugadores, Juego, Finalizada), así que este ajuste es parejo en
     toda la app, no solo Juego; el resto del margen extra para
     "Ronda X" se recorta puntual en #rre-juego más abajo. */
  .site-header{ border-bottom:1px solid var(--border-soft); padding:16px 0; margin-bottom:16px; }
  .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); }

  /* Logo de RaqPlay 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). Monograma "RP" (raqplay/assets/rq-logo.png,
     el mismo que ya usa round-robin-inicio.html) en vez del wordmark
     completo "RAQPLAY" (2026-08-13, pedido explícito: "no me gustó, muy
     grande, queda este mejor" — el wordmark completo se sentía
     desproporcionado acá). */
  .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; height:15px; width:auto;
  }

  /* 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í). */

  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(47,92,224,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-badge-falta-registrar (2026-08-21, pedido explícito: "como
     hacemos para que no vuelva a pasar esto" — bug real reportado:
     jugadores nuevos de una fecha ya jugada y sincronizada nunca
     aparecieron en el Ranking porque "Registrar en Ranking" es una
     acción manual del organizador, nunca automática, y nadie se
     acordó de apretarla) — mismo naranja que .rre-badge-jugando
     (estado "pendiente de algo"), para que salte a la vista en "Mis
     sesiones" cuando una sesión ya tiene TODOS los resultados
     cargados pero todavía no se registró. */
  .rre-badge-falta-registrar{ background:var(--orange-bg); color:var(--orange); display:inline-flex; align-items:center; gap:4px; }

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

  /* Lista numerada de #rre-lista-jugadores (2026-08-16, pedido
     explícito: "como muestra a los jugadores cuando uno los add debe
     ser mas ordenado") — reemplaza los .rre-jugador-chip de acá (que
     se acomodaban solos en fila, sin número ni orden fijo visible) por
     una fila completa por jugador, numerada. .rre-jugador-chip NO se
     toca: sigue siendo la de #rre-lista-parejas y la del panel
     "Validar participantes DUPR" (ver más abajo), ninguna de las dos
     es esta lista. */
  .rre-jugador-fila{ display:flex; align-items:center; gap:10px; width:100%; background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
  .rre-jugador-num{ flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:12.5px; color:var(--lime); }
  .rre-jugador-nombre{ flex:1; min-width:0; font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rre-jugador-fila button{ flex-shrink:0; background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:15.5px; padding:2px; }
  .rre-jugador-fila button:hover{ color:var(--red); }

  /* Botones de género "H"/"M" por jugador (2026-08-23, modo Mixtos) —
     más específico que ".rre-jugador-fila button" de arriba (que los
     dejaría como íconos sueltos sin fondo/borde), pill chica igual de
     criterio que el resto de togglés chicos de RRE (is-activo = lima). */
  .rre-genero-btn{ flex-shrink:0; width:26px; height:26px; border-radius:8px; background:var(--card); border:1px solid var(--border); color:var(--text-faint); font-family:var(--font-display); font-weight:800; font-size:12px; cursor:pointer; padding:0; }
  .rre-genero-btn:hover{ color:var(--text); border-color:var(--text-faint); }
  .rre-genero-btn.is-activo{ background:var(--lime); border-color:var(--lime); color:#0a0e16; }

  /* Filas seleccionables del modal "Colaborador" (2026-08-16) — misma
     .rre-jugador-fila de arriba, reusada tal cual como base. Una fila
     habilitada (con [role="button"], puesto por _rreFilaColaborador(),
     js/round-robin-express-online.js) se puede tocar para elegir a esa
     persona; .is-disabled cubre los tres motivos por los que NO se
     puede (sin cuenta vinculada / sos vos / ya es colaborador) — nunca
     se ocultan esas filas, solo quedan grises y sin click (pedido
     explícito, elegido entre 3 opciones ofrecidas). */
  .rre-jugador-fila[role="button"]{ cursor:pointer; }
  .rre-jugador-fila[role="button"]:hover{ border-color:var(--lime); }
  .rre-jugador-fila.is-disabled{ opacity:.55; cursor:not-allowed; }
  /* Nombre + aviso apilados (en vez de lado a lado) — un aviso largo no
     le come el ancho al nombre en una fila angosta. */
  .rre-jugador-fila-col{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .rre-jugador-fila-aviso{ font-size:12px; color:var(--text-faint); }

  .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(47,92,224,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(47,92,224,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; margin-bottom:8px; }
  /* "Set N" más grande y en lima (2026-08-16, pedido explícito: "cuando
     hay mas set es entendible que son columnas solo poner set 1 set 2
     un poco mas grande y llamativo puede ser en verde") — mismo verde
     lima de acento que ya usa el resto de la pantalla (rre-set-editar,
     rre-score-num, etc.), no un color nuevo. Apunta solo al <span> del
     texto: el botón "Editar" de al lado ya trae su propio color/
     font-size explícitos (.rre-set-editar, debajo), así que no se ve
     afectado ni se rompe el layout de la fila. */
  .rre-set-titulo > span{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--lime); }
  .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-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; }
  /* 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(20,70,225,.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); }

  /* Modo compacto — 2 canchas por ronda (2026-08-16). Pedido explícito:
     que las 2 tarjetas de partido entren completas en la pantalla sin
     tener que bajar para ver la cancha 2. rreRenderRondaContenido()
     agrega esta clase a #rre-ronda-contenido solo cuando
     ronda.partidos.length === 2 (nunca con 1 o 3+ canchas). */
  #rre-ronda-contenido.rre-ronda-2canchas .rre-partido-card{ padding:10px; margin-bottom:8px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-partido-cancha{ font-size:11.5px; margin-bottom:4px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-partido-encabezado{ margin-bottom:6px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-partido-equipo-nombre{ font-size:14px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-set-bloque{ margin-bottom:8px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-set-titulo{ margin-bottom:4px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-set-titulo > span{ font-size:15px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-set-locked{ padding:9px; font-size:18px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-stepper-fila{ margin-bottom:6px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-stepper-fila .rre-vs-divider{ margin-bottom:16px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-vs-divider{ width:22px; height:22px; font-size:12px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-score-circle{ width:64px; height:64px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-score-num{ font-size:26px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-score-hint{ font-size:9px; margin-top:3px; }
  #rre-ronda-contenido.rre-ronda-2canchas .rre-confirmar-set{ margin-top:10px; padding-top:8px; }
  #rre-ronda-contenido.rre-ronda-2canchas .btn.rre-confirmar-set{ padding:8px 16px; font-size:14px; }
  /* Verificado en navegador (2026-08-16, viewport 375x812): con las
     flechas de ronda a tamaño normal (72x72px) + su padding de sobra,
     la Cancha 2 quedaba con su botón "Confirmar Set" tapado detrás de
     la barra de navegación inferior fija (#rre-bottom-nav, position
     fixed) — ni siquiera hacía falta scroll para taparlo, ya estaba
     fuera del viewport visible. #rre-ronda-card (ver el id nuevo en
     round-robin-express.html) recibe la MISMA clase de modo compacto
     que #rre-ronda-contenido, para poder achicar acá las flechas y el
     padding de la tarjeta que las envuelve — esto es lo que faltaba
     para que las 2 canchas entraran completas y sin scroll. */
  #rre-ronda-card.rre-ronda-2canchas{ padding:12px; }
  #rre-ronda-card.rre-ronda-2canchas .rre-ronda-nav{ gap:10px; margin-bottom:6px; }
  #rre-ronda-card.rre-ronda-2canchas .rre-ronda-flecha{ width:44px; height:44px; font-size:26px; border-radius:10px; }
  #rre-ronda-card.rre-ronda-2canchas .rre-ronda-titulo{ margin-bottom:8px; }

  .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; }
  /* background: #1446e1 literal, no var(--card-soft) (2026-08-21,
     pedido explícito: "ese morado donde esta torneo y demas hay que
     cambiarlo por un azul que ya tenemos vivo") — --card-soft en este
     archivo (#6c66d6, morado) también alimenta otras 11 reglas que no
     se tocan acá (paneles/filas de Home 3a, fuera de alcance de este
     pedido); el panel "Más" pasa al mismo azul ya validado en vivo
     para RRE/Perfil sin arrastrar al resto. */
  .rre-quickmenu-panel{ display:none; position:absolute; top:calc(100% + 8px); right:0; background:#1446e1; border:1px solid var(--border); border-radius:10px; padding:6px; min-width:170px; z-index:50; box-shadow:0 10px 28px rgba(0,0,0,.4); }
  /* RaqPlay se queda negro (2026-08-21) — el background de arriba ya
     no lee var(--card-soft) (ver el comentario de esa línea), así que
     pierde sola la sustitución a #181818 que --card-soft ya hacía acá
     para RaqPlay (html[data-brand="raqplay"]{ --card-soft:#181818; },
     más abajo en este archivo) — se repone tal cual, mismo valor. */
  html[data-brand="raqplay"] .rre-quickmenu-panel{ background:#181818; }
  .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); }

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

  /* 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; }
  /* .rre-dial-overlay (2026-08-20, auditoría de consistencia) — usa un
     rgba() hardcodeado, no var(--bg), así que nunca se enteró del negro
     de arriba; se restaura acá para que el dial de puntaje no muestre
     índigo en RaqPlay. */
  html[data-brand="raqplay"] .rre-dial-overlay{ background:rgba(0,0,0,.86); }
  /* Restaura los tonos apagados/bordes originales SOLO para RaqPlay
     (2026-08-20, pedido explícito: "raqplay se queda con sus tonos
     negro y blanco") — ver mismo comentario en portal/inscripcion.html.
     Antes de este fix, RaqPlay compartía --text-muted/--text-faint/
     --border/--border-soft con PICKCR (nunca los redefinía acá), así
     que el aclarado nuevo para leerse sobre el índigo se filtraba
     también acá. */
  html[data-brand="raqplay"]{ --text-muted: #8c93a6; --text-faint: #5c6478; --border: #232b3d; --border-soft: #1a2132; }
  html[data-brand="raqplay"] .page-bg-photo{ display:none; }
  html[data-brand="raqplay"] .page-bg-overlay{ background:var(--bg); }
  /* body.rre-wizard-activo (2026-08-19) — mismo apagado de la foto
     rotativa que ya usa RaqPlay arriba, pero scopeado por esta clase
     (rreMostrarPasoConfiguracion()/round-robin-express-adapter.js) en
     vez de por marca — aplica en las dos marcas mientras se está en el
     wizard de Configuración/Jugadores/Datos de la sesión, para que las
     tarjetas se vean como un solo bloque sobre fondo plano, no
     flotando sobre una foto.
     body.rre-fondo-plano (2026-08-19, mismo día, pedido explícito: "el
     azul de los contenedores no es el mismo que en round robin" —
     comparando Mis Sesiones contra el wizard) — mismo apagado, sumado
     por _rreRenderMisSesiones()/_rreRenderSincronizacion(): esas 2
     pantallas ya usaban el mismo var(--crema-bg-90) que el wizard para
     sus tarjetas, pero con la foto todavía detrás la transparencia las
     hacía ver turbias/distintas. Clase separada de rre-wizard-activo
     (no son parte del wizard: no tienen bottombar ni puntitos), pero
     mismo efecto visual de fondo. */
  body.rre-wizard-activo .page-bg-photo,
  body.rre-fondo-plano .page-bg-photo{ display:none; }
  body.rre-wizard-activo .page-bg-overlay,
  body.rre-fondo-plano .page-bg-overlay{ background:var(--bg); }
  /* Aire extra abajo mientras el wizard está activo (2026-08-19) — el
     padding-bottom:60px normal de .wrap no alcanza para que el final
     de un paso largo (Configuración, con su grid + 3 tarjetas de tipo
     de sesión) no quede tapado por #rre-wizard-bottombar (fixed,
     ~74px de alto). Bug real encontrado en preview: ".wrap" a secas
     también matcheaba el <div class="wrap"> INTERNO del header
     (.site-header .wrap, misma clase reusada ahí) — con más
     especificidad que ".site-header .wrap{padding-bottom:0}" (line
     142), le pegaba 120px de más y agrandaba el header entero, dejando
     una franja negra enorme arriba de la tarjeta ("Fast Robin... me
     sale una parte negra al inicio... todas las páginas empiezan como
     hasta la mitad"). "main.wrap" en vez de ".wrap" — el wrap
     principal es un <main>, el del header es un <div>, así que este
     selector ya no puede matchear el del header por más específico
     que sea. */
  body.rre-wizard-activo main.wrap{ padding-bottom:120px; }
  /* Wizard de Configuración con el azul del mockup (2026-08-19) — solo
     para PICKCR. RaqPlay conserva sus propios colores oscuros de
     siempre — el pedido explícito fue "para raqplay debe ser igual [la
     estructura] pero conservar los colores de raqplay y para pickcr
     estos colores [el azul nuevo]".
     Negro real, no azul marino (2026-08-19, mismo día, bug real
     reportado: "en sesiones el fondo es azul oscuro en raqplay y
     deberia ser negro") — el valor "de siempre" de arriba (#141b2c)
     resultó ser el MISMO azul marino que se estaba justamente sacando
     de PICKCR, solo que más oscuro — nunca fue negro puro. Mismo tono
     #181818 que ya usa el resto de RaqPlay hoy (Portal, dock inferior,
     etc.) para que quede consistente en todo el sitio. */
  html[data-brand="raqplay"]{ --crema-bg-90:rgba(24,24,24,0.6); --card-soft:#181818; }
  html[data-brand="raqplay"] .card,
  html[data-brand="raqplay"] #rre-modal-dupr .rre-modal,
  html[data-brand="raqplay"] .rre-paso-card,
  html[data-brand="raqplay"] .rre-partido-card{ background:rgba(24,24,24,0.98); }
  html[data-brand="raqplay"] #rre-modal-dupr .rre-modal{ background:rgba(24,24,24,0.90); }

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

  /* 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). */

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

  /* 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). */
  /* 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". */
  /* 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. */
  /* .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. */

  /* 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) — pedido explícito
     revertido (2026-08-11: "en rre solo de raqplay dejando los mismos
     tonos deberia tener los botones de acceso directo que tiene picker
     iguales aunque sea para abajo") — hasta hoy se ocultaba del todo
     para raqplay a favor de una lista propia más corta,
     .rre-quick-list-raqplay (3 ítems, más abajo, ahora deshabilitada).
     Ya NO se oculta: las reglas de acá abajo (hasta el cierre de este
     bloque "RaqPlay Home v3") ya traían el tratamiento visual completo
     para .rre-quick-list/.rre-quick-item bajo raqplay (tarjeta oscura +
     ícono circular lima + flecha) — estaban listas desde el diseño
     anterior, solo inertes por este display:none. Mismos tonos que
     PICKCR (var(--lime) es idéntico en los dos, ver comentario de
     .is-featured más abajo), mismas 8 acciones, misma posición en la
     página — "aunque sea para abajo" queda cubierto solo (el layout
     modular de PICKCR de acá abajo ya la deja larga, más abajo que la
     versión corta de 3 ítems que tenía raqplay). */
  /* .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. */
  /* 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. */
  /* .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. */


  /* 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()). */

  /* 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); }
  /* 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 .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); }
  /* Barras de progreso, no puntitos (2026-08-19, pedido explícito
     comparando con Pickleball Config.dc.html: "veo que en estos no
     está esas tres líneas que representan la opción uno, dos y tres,
     y que se van marcando dependiendo donde usted esté") — 3 barras de
     ancho IGUAL (flex:1) que se rellenan de forma acumulativa
     (i<=paso, ver rreWizardIrAPaso()), no solo la actual. Mismos ids
     (rre-wizard-dot-1/2/3) y misma clase .is-activo de siempre — solo
     cambia la forma, cero cambios de JS más allá de la condición de
     acumulado. */
  .rre-wizard-dots{ display:flex; align-items:center; gap:6px; width:100%; max-width:280px; }
  .rre-wizard-dot{ flex:1; height:4px; border-radius:2px; background:var(--crema-border); transition:background 0.15s; }
  .rre-wizard-dot.is-activo{ background:var(--lime); }
  /* rre-wizard-bottombar (2026-08-19) — ver el comentario largo junto
     al HTML: Atrás/Siguiente/Generar en una barra fija compartida,
     misma posición de pantalla en los 3 pasos. position:fixed, mismo
     criterio que #rre-dock/#rre-bottom-nav de este archivo — fuera del
     flujo normal, a sangre completa. Degradado (no un fondo sólido)
     para que el borde de arriba de la barra no corte feo el contenido
     que scrollea detrás. */
  .rre-wizard-bottombar{
    position:fixed; left:0; right:0; bottom:0; z-index:30;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top, var(--bg) 65%, transparent);
  }
  .rre-wizard-bottombar-fila{ display:flex; gap:10px; align-items:center; max-width:640px; margin:0 auto; }
  /* Mismo alto mínimo en los 3 pasos (2026-08-03, pedido explícito:
     "debe verse homogenio del mismo tamano" — extendido 2026-08-19:
     "el contenedor azul llega hasta la mitad y luego hay un espacio
     negro... debería ser un solo contenedor azul nuevo hasta next
     aunque sobre espacio") — antes 420px fijo, insuficiente ahora que
     Atrás/Siguiente/Generar viven en #rre-wizard-bottombar (fixed)
     fuera de la tarjeta: Jugadores/Datos de la sesión (poco contenido)
     dejaban ver el fondo negro entre el borde de la tarjeta y la barra
     de botones. calc(100dvh - 200px) — 200px es la suma fija,
     independiente del alto real de pantalla, de header (~71px) +
     topbar de puntitos (~34px) + alto de #rre-wizard-bottombar
     (~74px) + un margen de aire (~20px) antes de la barra; calibrado
     a ojo contra el mockup en viewport real (375×812), no una cuenta
     exacta — si algún día cambia el alto del header o del bottombar,
     este número hay que recalibrarlo igual. 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,
  #rre-wizard-paso-3 .rre-paso-card{ min-height:calc(100dvh - 200px); 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); }


  /* 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(47,92,224,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); }

  /* 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-aviso-generar{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--orange); margin-top:10px; }
  .rre-aviso-generar:empty{ display:none; }


  /* 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-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). */

  /* 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-editar{ color:var(--cafe); }
  /* "Set N" (el <span> de .rre-set-titulo) es la ÚNICA excepción a
     "acá los acentos van en café, no en lima" (ver el comentario largo
     arriba) — pedido explícito 2026-08-16 puntual para este texto
     ("puede ser en verde"), así que se deja en var(--lime) tal cual
     está definido en la regla base (.rre-set-titulo > span, más
     arriba), sin override acá. */
  #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); }
  #rre-jugadores .rre-jugador-fila{ background:var(--crema-hover); border-color:var(--crema-border); color:var(--crema-text); }
  #rre-jugadores .rre-jugador-num{ background:var(--crema-bg); border-color:var(--crema-border); color:var(--cafe); }
  #rre-jugadores .rre-jugador-fila 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:calc(100dvh - 200px), 2026-08-19,
     ya compartido por los 3 pasos) 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; }
  /* 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); }

  /* ═══════════════════════════════════════════════════════════════
     Home 3a (2026-08-11) — rediseño de #rre-historial, SOLO PICKCR.
     Handoff de diseño "design_handoff_pickcr_home", variante id="t3"/
     opción "3a" del prototipo (el propio README se contradecía sobre
     si era "2a" o "3a" — confirmado con el usuario: 3a). RaqPlay sigue
     con su propio Home v3 (los bloques .rre-saludo-raqplay-*/
     .rre-quick-list-raqplay más arriba en este archivo) sin ningún
     cambio — todo lo de acá abajo vive bajo .rre-home3, que solo
     existe en el HTML cuando la marca activa es pickcr (ver
     round-robin-express.html).

     Paleta nueva (azul/violeta) — no existe en los design tokens
     compartidos del resto de PICKCR (--bg/--card/etc., más arriba en
     este archivo), así que se declaran acá como variables PROPIAS,
     scopeadas a .rre-home3 — nunca se filtran a ninguna otra pantalla
     ni sección de RRE (Juego, Configuración, Jugadores...). Tipografía
     Inter (cargada en el <head> junto con Barlow/Barlow Condensed) —
     el resto de la app sigue en Barlow, esto es la única excepción. ═══ */

  /* min-height:100vh acá (no en .rre-home3, que es position:fixed y
     por eso NUNCA aporta altura a su ancestro en flujo normal, sea
     cual sea su propio tamaño) — sin esto, #rre-historial con
     .rre-home3 adentro colapsa a la altura de su contenido EN FLUJO
     (nada, .rre-home3 es fixed) y <body> queda bajito, aunque
     .rre-home3 se siga viendo bien (pintado aparte, relativo al
     viewport). 100vh evita esa ambigüedad de raíz. */
  #rre-historial{ min-height:100vh; }

  /* Home 3a para las dos marcas (2026-08-11, "repliquemoslo a
     raqplay... todo igual") — .rre-home-raqplay (el Home viejo,
     independiente, de RaqPlay) se borró del HTML; ya no hace falta
     ningún toggle acá, .rre-home3 se muestra siempre. El logo/wordmark
     de adentro (.rre-home3-logo-mark/.rre-home3-wordmark) se resuelve
     en runtime por marca vía _pickcrAplicarMarcaAlLogo()
     (shared/js/brand-config.js) — mismo mecanismo que ya usan las
     demás 37 páginas del sitio, nunca uno nuevo. */
  /* #rre-dock (el dock viejo de 3 ítems, toggleado por JS vía
     style.display desde varios lugares de round-robin-express-adapter.js,
     Home Y el paso "Configuración" del wizard) — Home 3a trae su propio
     nav de 4 pestañas DENTRO de .rre-home3, así que #rre-dock ya no
     debe mostrarse nunca en Home, para ninguna marca. 2026-08-11
     ("repliquemoslo a raqplay... todo igual"): antes esto solo se
     forzaba para pickcr (RaqPlay seguía con su propio Home viejo, que
     sí dependía de #rre-dock) — con .rre-home-raqplay borrado, las dos
     marcas quedan igual: se extiende sin condición de marca. El paso
     de Configuración queda igual que ya estaba en pickcr (sin dock ni
     bottom-nav, transición limpia) — mismo criterio para las dos
     marcas ahora. !important necesario: el JS sigue escribiendo
     style.display='flex' sin saber de esto (no hacía falta tocarlo,
     mismo criterio ya usado en #rre-estado-sesion más arriba en este
     archivo) — sin !important esa inline style le ganaría a esta regla
     externa. */
  #rre-dock{ display:none !important; }

  .rre-home3{
    /* Paleta oficial de marca (2026-08-20, pedido explícito: "usemos
       esta paleta de color en rre inicio", con el PDF de identidad
       visual adjunto — Índigo Pickcr Primario #3B36C9, Lima Pickcr
       Acento #C6FF00, Blanco #FFFFFF, Negro #111111, Gris claro
       #F2F4F8, Gris medio #8A92A6). Alcance confirmado tras preguntar:
       SOLO los colores base — mismo criterio de escalón que la versión
       anterior (panel/panel-hover/row/row-hover progresivamente más
       claros que --h3-bg), sin tocar estructura de paneles ni
       tipografía. --h3-on-accent pasa a #111111 (el "Negro" oficial,
       texto sobre el nuevo lima). --h3-text, --h3-border, --h3-focus-ring,
       --h3-chevron NO se tocan — siguen siendo legibles sobre el nuevo
       índigo, más claro que el navy original.

       BUG REAL ENCONTRADO ACÁ (2026-08-22, mientras se investigaba "aqui
       hay que hacer lo mismo con el morado" tras el cambio de --h3-bg de
       hoy) — la línea de arriba antes separaba esos 4 nombres con barras
       en vez de comas, y entre el segundo y el tercero llevaba un
       asterisco pegado a la barra por error de tipeo. Esa combinación de
       dos caracteres es exactamente la secuencia que CIERRA un comentario
       CSS — cerraba este comentario ahí mismo, a la mitad, dejando el
       resto de esa oración como CSS inválido suelto que el parser tenía
       que recuperar, y en esa recuperación se comía la declaración
       --h3-bg:#1446e1 de la línea de abajo (confirmado con getComputedStyle
       real: --h3-panel/--h3-bg-rgb/todo lo demás de esta regla SÍ llegaban
       al elemento, --h3-bg era el ÚNICO ausente). Bug de fondo desde el
       commit original (7cc3a35, 2026-08-20) — .rre-home3-solidbg nunca
       pintó el índigo de marca en NINGÚN momento desde entonces; el
       "fondo" que se veía siempre fue body{background:var(--bg)} (el
       índigo/morado viejo, sin relación con --h3-bg) asomando por detrás,
       nunca el propio de Home 3a. */
    /* --h3-panel/--h3-panel-hover/--h3-row/--h3-row-hover/--h3-nav-bg
       (2026-08-22, pedido explícito: "esos contenedores siguen morados
       rre", con foto de "Jugar hoy" desplegado: Fast Robin/New Match/
       Open Match/etc.) — estos 5 tonos eran una escalera de morados
       progresivamente más claros, calculada a partir del --h3-bg VIEJO
       (#3b36c9); ahora que --h3-bg de verdad es azul (recién arreglado
       el bug del comentario que lo tenía siempre desactivado), esta
       escalera quedaba huérfana del morado original y quedaba pegada
       encima de un fondo azul — misma escalera de claridad, recalculada
       sobre el azul nuevo. */
    --h3-bg:#1446e1; --h3-panel:#2f5ce0; --h3-panel-hover:#3f6ce8;
    --h3-row:#5079f0; --h3-row-hover:#6690f5; --h3-nav-bg:#113bbf;
    --h3-lime:#c6ff00; --h3-lime-hover:#d4ff40; --h3-lime-pressed:#aedb00;
    --h3-text:#e9e9ed; --h3-text-secondary:#cfd3e5; --h3-text-faint:#b2b6ca;
    --h3-text-inactive:#9397ab; --h3-chevron:#75798c;
    --h3-border:rgba(233,233,237,.10); --h3-on-accent:#111111;
    --h3-focus-ring:#9184d9;
    /* --h3-bg-rgb (2026-08-21, pedido explícito: "en rre lo que se ve
       morado creo que es un fondo que tiene transparencia si ese color
       de transparencia lo ponemos en azul mejor con la misma
       transparencia") — usado por .rre-home3-gradient (más abajo), el
       degradado semitransparente sobre la foto de fondo real de Jugar
       hoy/Home. El índigo de marca exacto (59,54,201, antes también
       --h3-bg) mezclado en baja opacidad sobre una foto con tonos
       cálidos (piel, cancha) se percibía corrido hacia el morado —
       probado en vivo contra la foto real antes de este cambio. Mismos
       % de opacidad de siempre en el degradado.
       Ampliado (2026-08-21, reportado de nuevo: "todavia siento el RRE
       el fondo morado y no azul", con foto de Home adjunta) — el
       primer intento solo tocaba la franja semitransparente de la
       foto, pero --h3-bg en sí (el sólido de .rre-home3-solidbg desde
       236px hacia abajo, el remate al 100% del propio degradado, Y el
       panel "Jugar hoy" — que usaba este mismo rgb hardcodeado en vez
       de la variable) seguía siendo el índigo viejo (#3b36c9) — la
       franja de arriba quedaba azul pero todo lo de abajo volvía a
       verse morado. --h3-bg pasa a #1446e1 (mismo tono que este rgb,
       ya probado en vivo) para que todo el panel sea un solo color
       consistente, no dos. */
    --h3-bg-rgb:20,70,225;
    /* position:fixed + inset:0 (no relative/min-height:100vh) — Home 3a
       vive adentro de <main class="wrap"> (max-width:720px,
       padding:0 20px 60px, compartido por TODAS las secciones de RRE)
       — un layout normal en flujo hereda ese padding lateral y el
       padding-bottom, quedando angosto y con espacio de más abajo del
       nav. fixed lo saca del todo de esa caja, a sangre completa en
       cualquier viewport, con scroll PROPIO (overflow-y:auto) para
       cuando un panel abierto no entra completo — mismo criterio que
       .page-bg-photo, más arriba en este archivo, para escapar de
       .wrap. z-index:1 — por debajo de la hoja de club (60/61, ver
       abajo) y de .rre-modal-overlay (z-index:100, login) que puede
       abrirse desde acá adentro. */
    position:fixed; inset:0; z-index:1; overflow-y:auto;
    display:flex; flex-direction:column;
    /* background ya NO va acá (2026-08-20, ver .rre-home3-solidbg más
       abajo y el comentario en el HTML) — antes era var(--h3-bg) sólido
       de punta a punta, tapando la foto rotativa real del sitio detrás
       de TODA la pantalla, incluida la franja de arriba. */
    color:var(--h3-text); font-family:'Poppins', sans-serif;
  }
  /* RaqPlay (2026-08-12, pedido explícito: "solo en raqplay estas
     pagina de rre las partes azules deberian ser en negro") — Home 3a
     usa su propia paleta local (--h3-*, arriba), sin pasar por
     html[data-brand="raqplay"]{ --bg:#050505; ... } de más arriba en
     este archivo (esa paleta es de shared/js/theme.css, no de estas
     variables locales). Redefine SOLO los tonos azules (paneles/filas/
     nav) a negro/gris muy oscuro — lima, texto y bordes quedan
     intactos. Mismo negro #050505 ya usado en el resto de RaqPlay. */
  html[data-brand="raqplay"] .rre-home3{
    --h3-bg:#050505; --h3-bg-rgb:5,5,5; --h3-panel:#111214; --h3-panel-hover:#1a1c1f;
    --h3-row:#141518; --h3-row-hover:#1e2024; --h3-nav-bg:#0a0a0a;
  }
  .rre-home3 *{ box-sizing:border-box; }
  .rre-home3 button{ font-family:inherit; }
  /* Foco visible (README, accesibilidad) — 2px solid #9184d9, offset
     2px, en TODO elemento tocable de esta pantalla. */
  .rre-home3 button:focus-visible, .rre-home3 a:focus-visible{
    outline:2px solid var(--h3-focus-ring); outline-offset:2px;
  }

  /* ── Foto de fondo del header (236px, bleeds sobre el header Y el
       arranque del contenido) + degradado de 5 paradas que muere justo
       debajo del título — capa compartida entre Header y el arranque
       de Contenido, position:absolute relativo a .rre-home3 (no al
       header, que por sí solo mide solo 112px). Sin foto
       (heroPhotoUrl null): la capa ni se renderiza, .rre-home3 ya
       queda legible sobre el fondo sólido. ── */
  .rre-home3-photobg{ position:absolute; top:0; left:0; right:0; height:236px; z-index:0; overflow:hidden; }
  .rre-home3-photo{ width:100%; height:100%; object-fit:cover; display:block; }
  /* PICKCR (2026-08-20, pedido explícito: "quitando la foto de arriba
     dejando la misma foto de fondo solamente con un degradado") — ya
     no muestra su propia foto fija de héroe acá, deja ver la foto
     rotativa real del sitio (#rre-bg-a/#rre-bg-b, position:fixed
     detrás de todo) a través de esta franja. RaqPlay NO se toca —
     sigue mostrando su propia foto de héroe (rre-inicio3-hero-raqplay.webp,
     shared/js/brand-config.js), nunca la foto rotativa genérica. */
  html[data-brand="pickcr"] .rre-home3-photo{ display:none; }
  .rre-home3-gradient{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(var(--h3-bg-rgb),.12) 0%, rgba(var(--h3-bg-rgb),.34) 32%, rgba(var(--h3-bg-rgb),.66) 60%,
      rgba(var(--h3-bg-rgb),.92) 84%, var(--h3-bg) 100%);
  }
  /* rre-home3-solidbg — reemplaza el background:var(--h3-bg) que antes
     tenía .rre-home3 completo (ver comentario ahí y en el HTML):
     arranca justo donde termina la franja de la foto (236px) y llega
     hasta abajo, para que paneles/lista/nav sigan legibles sobre
     var(--h3-bg) como siempre — solo la franja de arriba queda libre
     para dejar ver la foto real de fondo. */
  .rre-home3-solidbg{ position:absolute; top:236px; left:0; right:0; bottom:0; z-index:0; background:var(--h3-bg); }

  /* ── Header: 112px, marca + avatar, z-index:2 encima de la foto ── */
  .rre-home3-header{
    position:relative; z-index:2; flex:none; height:112px;
    padding:50px 20px 0; display:flex; align-items:center; justify-content:space-between;
  }
  .rre-home3-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
  .rre-home3-logo-mark{
    width:38px; height:38px; border-radius:11px; background:var(--h3-lime);
    display:flex; align-items:center; justify-content:center; color:var(--h3-on-accent); flex-shrink:0;
  }
  .rre-home3-logo-mark svg{ width:21px; height:21px; }
  .rre-home3-wordmark{ font-family:'Poppins', sans-serif; font-weight:700; font-size:20px; line-height:1; letter-spacing:.02em; color:var(--h3-text); }
  /* Logo real de RaqPlay en vez del ícono "R" + texto "RAQplay".
     Oculto por defecto (PICKCR nunca lo muestra); bajo
     html[data-brand="raqplay"] se ocultan .rre-home3-logo-mark/
     .rre-home3-wordmark en su lugar, mismo criterio que
     .rre-header-wordmark-raqplay más arriba en este archivo. Monograma
     "RP" (rq-logo.png) en vez del wordmark completo "RAQPLAY"
     (2026-08-13, pedido explícito: "no me gustó, muy grande, queda
     este mejor"). */
  .rre-home3-wordmark-raqplay{ display:none; }
  html[data-brand="raqplay"] .rre-home3-logo-mark,
  html[data-brand="raqplay"] .rre-home3-wordmark{ display:none; }
  html[data-brand="raqplay"] .rre-home3-wordmark-raqplay{ display:block; height:18px; width:auto; }
  .rre-home3-avatar{
    width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(233,233,237,.45);
    background:none; display:flex; align-items:center; justify-content:center; color:var(--h3-text);
    cursor:pointer; flex-shrink:0;
  }
  .rre-home3-avatar svg{ width:21px; height:21px; }

  /* ── Contenido: título + DUPR + paneles + eventos, z-index:2 ── */
  .rre-home3-content{
    position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
    gap:16px; padding:0 20px 20px;
  }
  .rre-home3-titulo{
    font-family:'Poppins', sans-serif; font-weight:600; font-size:31px; line-height:1.15;
    letter-spacing:-.025em; color:var(--h3-text); margin:0;
    text-shadow:0 1px 12px rgba(22,24,38,.45);
  }
  .rre-home3-dupr{
    display:flex; align-items:center; gap:8px; margin-top:-6px; background:none; border:none;
    padding:0; cursor:pointer; text-align:left; font-family:'Poppins', sans-serif;
    font-weight:500; font-size:15px; line-height:1.3; color:var(--h3-text-faint);
  }
  .rre-home3-dupr-dot{ width:8px; height:8px; border-radius:50%; background:var(--h3-lime); flex-shrink:0; }

  /* ── Aviso "reanudar" (2026-08-11, mockup aprobado) — mismo
       contenido/destino real que #rre-resume-panel de raqplay, con la
       forma/paleta de Home 3a. Punto lima = guardado sin terminar;
       punto rojo con pulso = en vivo AHORA. ── */
  .rre-home3-resume{
    display:flex; flex-direction:column; gap:8px; border-radius:18px; padding:6px;
    background:var(--h3-panel); border:1px solid rgba(198,255,0,.22);
  }
  .rre-home3-resume-item{
    display:flex; align-items:center; gap:12px; padding:12px; border-radius:13px;
    background:none; border:none; width:100%; text-align:left; cursor:pointer;
    font-family:inherit; color:inherit; text-decoration:none;
  }
  .rre-home3-resume-item:hover{ background:var(--h3-panel-hover); }
  .rre-home3-resume-dot{ width:8px; height:8px; border-radius:50%; background:var(--h3-lime); flex-shrink:0; box-shadow:0 0 0 3px rgba(198,255,0,.18); }
  .rre-home3-resume-dot.is-live{ background:#ff6a6a; box-shadow:0 0 0 3px rgba(255,106,106,.18); animation:rre-home3-resume-pulso 1.6s infinite; }
  @keyframes rre-home3-resume-pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
  .rre-home3-resume-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .rre-home3-resume-titulo{ font-family:'Poppins', sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--h3-lime); }
  .rre-home3-resume-sub{ font-family:'Poppins', sans-serif; font-weight:600; font-size:14.5px; color:var(--h3-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rre-home3-resume-chevron{ flex-shrink:0; color:var(--h3-chevron); }
  /* rre-home3-resume-ocultar (2026-08-17) — botón "ocultar" chico,
     entre el texto y la flecha — mismo criterio visual discreto que el
     chevron (color apagado por default, no compite con el título), se
     resalta recién al pasar el mouse. stopPropagation() en el onclick
     (ver el HTML) evita que tocarlo también navegue a "en vivo". */
  .rre-home3-resume-ocultar{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:none; border:none; color:var(--h3-chevron); cursor:pointer; }
  .rre-home3-resume-ocultar:hover{ background:var(--h3-panel-hover); color:var(--h3-text); }

  /* ── Paneles (acordeón, uno solo abierto — estado real en JS,
       data-open toggleado por round-robin-express-adapter.js). El alto
       del body en la transición lo calcula JS (scrollHeight real, no
       un max-height fijo adivinado) — acá solo la mecánica de
       overflow/transition. ── */
  .rre-home3-panel{ border-radius:22px; padding:26px 22px 24px; text-align:left; width:100%; border:none; font-family:inherit; }
  .rre-home3-panel-head{ display:flex; align-items:center; gap:12px; background:none; border:none; padding:0; width:100%; cursor:pointer; font-family:inherit; text-align:left; }
  .rre-home3-panel-label{ flex:1; font-family:'Poppins', sans-serif; font-weight:600; font-size:24px; line-height:1.1; letter-spacing:-.03em; }
  .rre-home3-panel-chevron{ flex-shrink:0; transition:transform 180ms ease-out; }
  .rre-home3-panel[data-open="true"] .rre-home3-panel-chevron{ transform:rotate(180deg); }
  .rre-home3-panel-body{ overflow:hidden; max-height:0; transition:max-height 200ms ease-out; }

  /* Jugar hoy (secundario) — vidrio esmerilado azul (2026-08-20,
     pedido explícito: "esto en rre deberia ser el azul... el mismo
     #3B36C9 exacto de la marca", ajustado después: "menos opacidad y
     del color azul" — el primer intento usaba var(--h3-bg) SÓLIDO al
     100%, y esta pantalla tiene una FOTO real de fondo (no un índigo
     plano como el resto de RRE) — el panel se mezclaba con la foto y
     perdía el recuadro por completo. rgba(...) + blur, mismo patrón ya
     usado en .rl-window/.rank-window (escalera-ranking.html/
     round-robin-liga.html) — semitransparente así se distingue de la
     foto de fondo sin ser un bloque opaco.
     Pasa a var(--h3-bg-rgb) (2026-08-21, "todavia siento el RRE el
     fondo morado y no azul") — antes era el rgb hardcodeado
     59,54,201 (#3B36C9 exacto), el MISMO índigo viejo que ya se había
     identificado como "se ve morado" en otro punto de este archivo;
     al no usar la variable, se había quedado afuera de ese cambio.
     Ahora sigue automáticamente a --h3-bg-rgb si vuelve a ajustarse.
     Scopeado a ESTE panel puntual — var(--h3-panel) en sí no se toca,
     lo siguen usando .rre-home3-resume-item/.rre-home3-sheet-club sin
     cambios. Las filas de adentro (Fast Robin/New Match/etc., var(--h3-row))
     tampoco se tocan — necesitan su propio tono para leerse como
     botones tocables. */
  .rre-home3-panel.is-jugar{
    background:rgba(var(--h3-bg-rgb),.6); border:1px solid var(--h3-border);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .rre-home3-panel.is-jugar:hover{ background:rgba(var(--h3-bg-rgb),.72); }
  /* RaqPlay se queda negro/blanco (2026-08-20, mismo criterio de
     siempre) — el rgba de arriba es índigo PICKCR fijo, así que acá
     se pisa con negro semitransparente en vez de dejar que el azul se
     cuele en RaqPlay. */
  html[data-brand="raqplay"] .rre-home3-panel.is-jugar{ background:rgba(10,10,10,.6); }
  html[data-brand="raqplay"] .rre-home3-panel.is-jugar:hover{ background:rgba(10,10,10,.72); }
  .rre-home3-panel.is-jugar .rre-home3-panel-label{ color:var(--h3-text); }
  .rre-home3-panel.is-jugar .rre-home3-panel-chevron{ color:var(--h3-chevron); }
  .rre-home3-jugar-filas{ display:flex; flex-direction:column; gap:10px; padding-top:18px; }
  .rre-home3-jugar-fila{
    display:flex; align-items:center; height:68px; border-radius:14px; background:var(--h3-row);
    padding:0 20px; border:none; width:100%; cursor:pointer; font-family:inherit; text-align:left; text-decoration:none; color:inherit;
  }
  .rre-home3-jugar-fila:hover{ background:var(--h3-row-hover); }
  .rre-home3-jugar-fila-label{ font-family:'Poppins', sans-serif; font-weight:600; font-size:18px; color:var(--h3-text); }
  .rre-home3-jugar-fila-meta{ margin-left:auto; font-family:'Poppins', sans-serif; font-weight:500; font-size:13.5px; color:var(--h3-text-faint); }

  /* Reservar cancha (primario, lima sólido) */
  .rre-home3-panel.is-reservar{ background:var(--h3-lime); color:var(--h3-on-accent); }
  .rre-home3-panel.is-reservar:hover{ background:var(--h3-lime-hover); }
  /* clamp, no 24px fijo (README: "fontScale hasta 1.3x sin recortes...
     el panel verde baja de tamaño antes de quebrarse") — única
     etiqueta de la pantalla con white-space:nowrap obligatorio, así
     que es la única que necesita este resguardo. */
  .rre-home3-panel.is-reservar .rre-home3-panel-label{ font-weight:700; white-space:nowrap; font-size:clamp(16px, 5.6vw, 24px); }
  .rre-home3-panel.is-reservar .rre-home3-panel-chevron{ color:rgba(22,24,38,.5); }
  .rre-home3-reservar-body{ padding-top:16px; }
  .rre-home3-club-fila{
    display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px;
    background:rgba(22,24,38,.10);
  }
  .rre-home3-club-nombre{ flex:1; min-width:0; font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rre-home3-club-cambiar{
    height:44px; padding:0 16px; border-radius:11px; background:var(--h3-on-accent); color:var(--h3-lime);
    font-family:'Poppins', sans-serif; font-weight:600; font-size:16px; border:none; cursor:pointer; flex-shrink:0;
  }
  .rre-home3-club-cambiar:hover{ background:var(--h3-row); }
  .rre-home3-kicker{
    margin-top:18px; font-family:'Poppins', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.1em;
    text-transform:uppercase; color:rgba(22,24,38,.62);
  }
  .rre-home3-horarios{ display:flex; gap:10px; margin-top:12px; }
  .rre-home3-horario-chip{
    flex:1; height:64px; border-radius:14px; background:var(--h3-on-accent); color:var(--h3-text);
    font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; display:flex; align-items:center;
    justify-content:center; border:none; cursor:pointer;
  }
  .rre-home3-horario-chip:hover{ background:var(--h3-row); }
  .rre-home3-horario-mas{
    flex:none; width:64px; height:64px; border-radius:14px; background:none; color:var(--h3-on-accent);
    border:1.5px solid rgba(22,24,38,.35); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .rre-home3-horario-mas:hover{ background:rgba(22,24,38,.10); }
  .rre-home3-horario-mas svg{ width:24px; height:24px; }
  .rre-home3-sin-horarios{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
  .rre-home3-sin-horarios-msg{ font-family:'Poppins', sans-serif; font-weight:600; font-size:15px; color:rgba(22,24,38,.7); }
  .rre-home3-ver-otros-dias{
    height:56px; width:100%; border-radius:14px; border:1.5px solid rgba(22,24,38,.35);
    background:none; color:var(--h3-on-accent); font-family:'Poppins', sans-serif; font-weight:600; font-size:16px; cursor:pointer;
  }
  .rre-home3-ver-otros-dias:hover{ background:rgba(22,24,38,.10); }

  /* ── Fila de Eventos (fuera de los paneles, mismo margen lateral) ── */
  .rre-home3-eventos{ display:flex; flex-direction:column; }
  .rre-home3-eventos-fila{
    display:flex; align-items:center; height:62px; padding:0 4px; background:none; border:none;
    width:100%; cursor:pointer; text-align:left; font-family:inherit;
  }
  .rre-home3-eventos-fila:hover{ opacity:.75; }
  .rre-home3-eventos-label{ flex:1; min-width:0; font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; color:var(--h3-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rre-home3-eventos-badge{
    margin-left:auto; min-width:26px; height:26px; padding:0 8px; border-radius:13px; background:var(--h3-lime);
    color:var(--h3-on-accent); font-family:'Poppins', sans-serif; font-weight:700; font-size:14px; line-height:26px; text-align:center; flex-shrink:0;
  }
  /* Botón con borde en vez de fila de texto suelto (2026-08-21, pedido
     explícito: "deberia ser un boton como estilo apple que la gente no
     sabe" — como texto plano de ancho completo, sin borde ni fondo, se
     leía igual que un renglón inerte, no como algo tocable). Mismo
     patrón "pill" con borde ya usado en .rre-home3-ver-otros-dias más
     arriba (ahí sobre fondo claro, acá sobre el fondo oscuro de Home,
     por eso el borde es blanco translúcido en vez de negro). Ancho
     propio (no 100%) + align-self:flex-start para que se vea como un
     botón chico, no como otra fila de la lista. */
  .rre-home3-eventos-todos{
    display:inline-flex; align-items:center; align-self:flex-start;
    height:38px; padding:0 16px; margin-top:6px;
    border-radius:19px; border:1.5px solid rgba(255,255,255,.24); background:none;
    cursor:pointer; text-decoration:none;
    font-family:'Poppins', sans-serif; font-weight:600; font-size:14.5px; color:var(--h3-text-secondary);
  }
  .rre-home3-eventos-todos:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); color:var(--h3-text); }

  /* ── Hoja de selección de club (bottom sheet) — no existía este
       patrón en el resto del repo (todos los modales acá son overlay
       centrado, .rre-modal-overlay); se arma desde cero. ── */
  .rre-home3-sheet-scrim{
    position:fixed; inset:0; z-index:60; background:rgba(11,12,20,.72); display:none;
  }
  .rre-home3-sheet-scrim.show{ display:block; }
  .rre-home3-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--h3-panel);
    border-radius:26px 26px 0 0; border-top:1px solid rgba(233,233,237,.12);
    padding:26px 20px 22px; max-height:80vh; overflow-y:auto; overscroll-behavior-y:contain;
    transform:translateY(100%); transition:transform 220ms ease-out;
  }
  .rre-home3-sheet-scrim.show .rre-home3-sheet{ transform:translateY(0); }
  .rre-home3-sheet-head{ display:flex; align-items:center; justify-content:space-between; }
  .rre-home3-sheet-titulo{ font-family:'Poppins', sans-serif; font-weight:600; font-size:25px; line-height:1.15; letter-spacing:-.02em; color:var(--h3-text); margin:0; }
  .rre-home3-sheet-cerrar{ background:none; border:none; font-family:'Poppins', sans-serif; font-weight:600; font-size:16px; color:var(--h3-text-faint); cursor:pointer; }
  .rre-home3-sheet-cerrar:hover{ color:var(--h3-text); }
  .rre-home3-sheet-kicker{
    font-family:'Poppins', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--h3-chevron); margin:20px 0 10px;
  }
  .rre-home3-sheet-kicker.is-cerca{ margin-top:22px; }
  .rre-home3-sheet-club{
    display:flex; align-items:center; gap:14px; height:76px; border-radius:16px; padding:0 20px;
    background:var(--h3-row); border:none; width:100%; cursor:pointer; text-align:left; margin-top:8px; font-family:inherit;
  }
  .rre-home3-sheet-club:hover{ background:var(--h3-row-hover); }
  .rre-home3-sheet-club.is-cerca{ background:var(--h3-panel-hover); }
  .rre-home3-sheet-club.is-cerca:hover{ background:var(--h3-row-hover); }
  .rre-home3-sheet-club-info{ flex:1; min-width:0; }
  .rre-home3-sheet-club-nombre{ font-family:'Poppins', sans-serif; font-weight:600; font-size:19px; line-height:1.25; color:var(--h3-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rre-home3-sheet-club-sub{ font-family:'Poppins', sans-serif; font-weight:400; font-size:14.5px; line-height:1.3; color:var(--h3-text-secondary); margin-top:2px; }
  .rre-home3-sheet-club-dot{ width:12px; height:12px; border-radius:50%; background:var(--h3-lime); flex-shrink:0; display:none; }
  .rre-home3-sheet-club.is-selected .rre-home3-sheet-club-dot{ display:block; }
  .rre-home3-sheet-mapa{
    margin-top:20px; width:100%; height:60px; border-radius:14px; border:1.5px solid rgba(198,255,0,.55);
    background:none; color:var(--h3-lime); font-family:'Poppins', sans-serif; font-weight:600; font-size:17px; cursor:pointer;
  }
  .rre-home3-sheet-mapa:hover{ background:rgba(198,255,0,.12); }

  /* ── Bottom nav (84px, 4 pestañas — Inicio/Clubes/Comunidad/Perfil,
       SIN botón central elevado de "Reservar", decisión explícita del
       cliente). Reemplaza .rre-dock (3 ítems) SOLO cuando la marca
       activa es pickcr — raqplay sigue usando .rre-dock tal cual. ── */
  .rre-home3-nav{
    position:relative; z-index:2; flex:none; display:flex; background:var(--h3-nav-bg);
    border-top:1px solid rgba(233,233,237,.10); padding:0 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .rre-home3-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 0 0;
    background:none; border:none; color:var(--h3-text-inactive); text-decoration:none; cursor:pointer; font-family:inherit;
  }
  .rre-home3-nav-item svg{ width:27px; height:27px; }
  .rre-home3-nav-item span{ font-family:'Poppins', sans-serif; font-weight:500; font-size:13px; line-height:1; }
  .rre-home3-nav-item.is-activa{ color:var(--h3-lime); }
  .rre-home3-nav-item.is-activa span{ font-weight:600; }

  /* ── Skeletons (README: nunca bloquear los 2 paneles con la data
       todavía en vuelo — misma geometría, sin spinners centrados) ── */
  .rre-home3-skeleton{ background:var(--h3-row); border-radius:8px; animation:rreHome3Skeleton 1.4s ease-in-out infinite; }
  @keyframes rreHome3Skeleton{ 0%,100%{ opacity:.5; } 50%{ opacity:.9; } }

  /* Pantallas cortas (README: "permitir scroll vertical si hace
     falta") — ya cubierto arriba por .rre-home3{position:fixed;
     overflow-y:auto}, ninguna regla adicional hace falta acá. */

  /* "Pickcr IA" — chat conversacional a pantalla completa (2026-08-20,
     ver js/rre-chat-ia.js). Botón flotante mismo offset que
     .opl-ia-flotante-btn (css/openplay-listado.css) sobre la barra
     inferior; el overlay usa el mismo patrón fixed+inset:0 que
     .opl-modal-overlay, con el mismo fix overscroll-behavior:contain
     ya probado en ese archivo/en .rre-modal. */
  .rre-chat-ia-flotante-btn{
    position:fixed; right:16px; bottom:calc(90px + env(safe-area-inset-bottom, 0px)); z-index:50;
    width:52px; height:52px; border-radius:50%; background:var(--lime); border:none;
    box-shadow:0 4px 16px rgba(0,0,0,0.35); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:0.3px; color:#0a0e16;
  }
  html[data-brand="raqplay"] .rre-chat-ia-flotante-btn{ color:#050505; }

  .rre-chat-ia-overlay{
    display:none; position:fixed; inset:0; z-index:300;
    background:var(--bg); flex-direction:column;
  }
  .rre-chat-ia-overlay.show{ display:flex; }
  .rre-chat-ia-header{
    flex:none; display:flex; align-items:center; justify-content:space-between;
    padding:calc(16px + env(safe-area-inset-top, 0px)) 18px 14px; border-bottom:1px solid var(--border-soft);
    font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--lime);
  }
  .rre-chat-ia-cerrar{ background:none; border:none; cursor:pointer; color:var(--text); padding:4px; display:flex; }
  .rre-chat-ia-mensajes{
    flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 18px; display:flex; flex-direction:column; gap:10px;
  }
  /* white-space:pre-wrap (2026-08-22, junto con la regla de "separar en
     párrafos" del prompt del asistente, functions/ia-chat/asistenteIaChatHandler.js)
     — sin esto, un \n\n que el modelo sí manda se colapsa a un espacio
     en el HTML final (innerHTML normal), y el párrafo nunca se ve
     separado aunque el texto lo traiga bien. escHtml() (shared/js/utils.js)
     ya escapa <>&" pero preserva los \n literales, así que alcanza con
     el CSS — no hace falta convertir \n a <br> a mano en JS. */
  .rre-chat-ia-msg{ max-width:82%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.4; white-space:pre-wrap; }
  .rre-chat-ia-msg.es-usuario{ align-self:flex-end; background:var(--lime); color:#0a0e16; border-bottom-right-radius:4px; }
  html[data-brand="raqplay"] .rre-chat-ia-msg.es-usuario{ color:#050505; }
  .rre-chat-ia-msg.es-asistente{ align-self:flex-start; background:var(--card-soft); border:1px solid var(--border-soft); color:var(--text); border-bottom-left-radius:4px; }
  .rre-chat-ia-msg.es-asistente a{ color:var(--lime); text-decoration:underline; word-break:break-all; }
  .rre-chat-ia-confirmar-barra{ flex:none; display:flex; gap:10px; padding:0 18px 14px; }
  .rre-chat-ia-confirmar-barra .btn{ margin:0; }
  .rre-chat-ia-input-barra{
    flex:none; display:flex; gap:10px; align-items:flex-end;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--border-soft);
  }
  .rre-chat-ia-input-barra textarea{
    flex:1; resize:none; max-height:96px; margin:0; background:var(--card-soft); border:1px solid var(--border);
    border-radius:12px; color:var(--text); font-family:Barlow, sans-serif; font-size:14px; padding:10px 14px;
  }
  .rre-chat-ia-input-barra .btn{ flex:none; margin:0; }

  /* Dictado por voz en "Pickcr IA" (2026-08-20, pedido explícito: "si en
     android sirve el comando de voz podria incluirse solo para android")
     — mismo patrón visual que .opl-ia-mic-btn (css/openplay-listado.css),
     mostrado solo si rreMostrarBotonMicChatIaSiCorresponde() (js/rre-chat-ia.js)
     confirma soporte de Web Speech API Y plataforma Android. */
  .rre-chat-ia-mic-btn{
    flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-soft);
    background:var(--card-soft); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s, color .15s;
  }
  .rre-chat-ia-mic-btn:hover{ color:var(--text); }
  .rre-chat-ia-mic-btn.is-grabando{ background:var(--red); border-color:var(--red); color:#fff; animation:rre-chat-ia-mic-pulso 1.2s ease-in-out infinite; }
  @keyframes rre-chat-ia-mic-pulso{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,91,91,0.5); } 50%{ box-shadow:0 0 0 8px rgba(245,91,91,0); } }

  /* Ubicación en "Pickcr IA" (2026-08-22) — mismo estilo base que
     .rre-chat-ia-mic-btn, is-activo/is-buscando en vez de is-grabando
     (nunca pulsa/anima al buscar, solo cambia de color — buscar
     ubicación tarda como máximo unos segundos, un pulso constante ahí
     se sentiría como que algo se rompió). */
  .rre-chat-ia-ubicacion-btn{
    flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-soft);
    background:var(--card-soft); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s, color .15s;
  }
  .rre-chat-ia-ubicacion-btn:hover{ color:var(--text); }
  .rre-chat-ia-ubicacion-btn.is-buscando{ opacity:.6; cursor:default; }
  .rre-chat-ia-ubicacion-btn.is-activo{ background:var(--lime); border-color:var(--lime); color:#0a0e16; }
  html[data-brand="raqplay"] .rre-chat-ia-ubicacion-btn.is-activo{ color:#050505; }