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

  :root{
    --bg: #0a0e16; --card: #111726; --card-soft: #141b2c;
    --border: #232b3d; --border-soft: #1a2132;
    --text: #f4f6fa; --text-muted: #8c93a6; --text-faint: #5c6478;
    --lime: #c8f51d; --lime-dark: #9bc212; --red: #f55b5b;
    --font-display: 'Barlow Condensed', sans-serif;
  }
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:'Barlow', sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; }
  a{ text-decoration:none; color:inherit; }
  .wrap{ max-width:480px; margin:0 auto; padding:24px; padding-top:calc(24px + env(safe-area-inset-top, 0px)); }

  .op-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:28px; }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo-mark{ width:32px; height:32px; border-radius:9px; background:linear-gradient(155deg, var(--lime) 0%, var(--lime-dark) 100%); display:flex; align-items:center; justify-content:center; color:#0a0e16; }
  .logo-text{ font-family:var(--font-display); font-weight:800; font-size:15px; }

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

  .card{ background:var(--card); border:1px solid var(--border-soft); border-radius:16px; padding:24px; }
  h1{ font-family:var(--font-display); font-size:26px; font-weight:800; margin-bottom:6px; }
  .info{ font-size:13px; color:var(--text-muted); margin-bottom:20px; }

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

  input{
    width:100%; padding:11px 14px; background:var(--card-soft); border:1px solid var(--border);
    border-radius:9px; color:var(--text); font-size:14px; font-family:'Barlow', sans-serif; margin-bottom:10px;
  }

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

  .error{ display:none; color:var(--red); font-size:13px; margin-bottom:14px; }
  .exito{ text-align:center; padding:20px 0; }
  .exito h2{ font-family:var(--font-display); font-size:22px; margin-bottom:8px; color:var(--lime); }
  .placeholder{ color:var(--text-muted); font-size:14px; text-align:center; padding:20px 0; }

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

  /* Menú inferior — mismo patrón que .rre-bottom-nav de
     round-robin-express.html (2026-07-27, primera vez que se replica
     en el Portal). */
  body{ padding-bottom:82px; }
  .rre-icon-solid{ fill:currentColor; stroke:none; }
  .rre-bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-around; align-items:center; background:var(--card-soft); border-top:1px solid var(--border-soft); padding:10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
  .rre-bottom-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; cursor:pointer; font-family:'Barlow', sans-serif; font-size:11px; font-weight:600; color:var(--text-faint); }
  .rre-bottom-nav-item.is-activa{ color:var(--lime); }

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