/* Navegación del sitio (fase 4): barra de arriba, barra de juego, pestañas de Cancha,
   barra de abajo en el cel y cuadrícula de juegos. Usa las variables de estilo.css. */

.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--oro); color: #1A1206; font-weight: 700; text-decoration: none; }
.saltar:focus { top: calc(10px + var(--sat)); }

/* ═════════════ barra de arriba ═════════════ */
.barra .envoltura.barra__fila { flex-wrap: nowrap; min-height: 64px; gap: 8px; }
.barra .marca { margin-right: 10px; flex: none; }
.barra--cancha { border-bottom: 2px solid color-mix(in srgb, var(--cancha, var(--oro)) 70%, transparent); }

.nav-principal { margin-right: auto; display: flex; gap: 2px; flex-wrap: nowrap !important; }
.barra .nav-principal a { position: relative; color: var(--tenue); font-weight: 600; padding: 9px 14px; }
.barra .nav-principal a[aria-current="page"] { color: var(--hueso); background: rgba(255,255,255,.08); }
.barra .nav-principal a[aria-current="page"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -12px; height: 3px; border-radius: 3px;
  background: var(--oro);
}
.barra__lado { display: flex; align-items: center; gap: 8px; flex: none; }
.barra__entrar { color: var(--hueso); text-decoration: none; font-weight: 600; padding: 9px 12px; border-radius: 999px; }
.barra__entrar:hover { background: rgba(255,255,255,.06); }

/* menús desplegables (cuenta y cambiar de juego) */
.menu-cuenta, .menu-juegos { position: relative; }
.menu-cuenta > summary, .menu-juegos > summary {
  list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--raya2);
  background: rgba(255,255,255,.05); color: var(--hueso); font-weight: 600; font-size: .9rem;
}
.menu-cuenta > summary::-webkit-details-marker, .menu-juegos > summary::-webkit-details-marker { display: none; }
.menu-cuenta > summary b { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cuenta > summary i, .menu-juegos > summary i { font-style: normal; color: var(--tenue); font-size: .72rem; }
.menu-cuenta[open] > summary, .menu-juegos[open] > summary, .cancha-sel[open] > summary { background: rgba(255,255,255,.12); }
.menu-caja {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 120; min-width: 240px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel2); border: 1px solid var(--raya2); border-radius: var(--r-md); box-shadow: var(--alza);
}
.menu-caja--der { left: auto; right: 0; }
.menu-caja__titulo { padding: 6px 10px 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.menu-caja a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--hueso); text-decoration: none; font-size: .94rem; font-weight: 500;
}
.menu-caja a:hover { background: rgba(255,255,255,.07); }
.menu-caja a[aria-current="page"] { background: color-mix(in srgb, var(--oro) 16%, transparent); color: var(--oro); font-weight: 700; }
.menu-caja a span { font-size: 1.2rem; width: 26px; text-align: center; }
.menu-caja__mas, .menu-caja__salir { margin-top: 4px; border-top: 1px solid var(--raya); border-radius: 0 0 10px 10px !important; justify-content: center; color: var(--tenue) !important; }
.menu-caja__salir:hover { color: var(--sandia) !important; }

/* ═════════════ barra de juego ═════════════ */
.barra--juego .envoltura.barra__fila { min-height: 56px; gap: 10px; }
.salir-juego {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px;
  border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--raya2);
  color: var(--hueso); text-decoration: none; font-weight: 700; font-size: .92rem;
}
.salir-juego svg { width: 18px; height: 18px; }
.salir-juego:hover { background: rgba(255,255,255,.15); }
.menu-juegos { flex: 1; min-width: 0; }
.menu-juegos > summary { max-width: 100%; padding: 6px 12px; background: transparent; border-color: transparent; }
.menu-juegos > summary:hover { background: rgba(255,255,255,.06); }
.menu-juegos > summary b { font-family: Unbounded, sans-serif; font-size: .95rem; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-juegos__emoji { font-size: 1.3rem; }
.cancha-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--raya2); color: var(--hueso); text-decoration: none; font-size: .85rem; font-weight: 600; max-width: 170px;
}
.cancha-chip span {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--cc, var(--oro)) 30%, transparent);
}
.cancha-chip span img { width: 100%; height: 100%; object-fit: cover; }
.cancha-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.barra--juego .saldo { flex: none; }

/* ═════════════ pestañas de una Cancha ═════════════ */
.pestanas {
  position: sticky; top: calc(66px + var(--sat)); z-index: 60;
  background: color-mix(in srgb, var(--noche) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--raya);
}
.pestanas__fila { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pestanas__fila::-webkit-scrollbar { display: none; }
.pestanas a {
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px;
  color: var(--tenue); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.pestanas a svg { width: 20px; height: 20px; }
.pestanas a:hover { color: var(--hueso); }
.pestanas a[aria-current="page"] { color: var(--hueso); }
.pestanas a[aria-current="page"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--oro);
}

/* ═════════════ cuadrícula de juegos ═════════════ */
.rejilla-juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.rejilla-juegos .ficha .lamina { aspect-ratio: 16 / 9; font-size: clamp(3rem, 5vw, 4rem); }
.rejilla-juegos .ficha .cuerpo { padding: 14px 16px 16px; }
.rejilla-juegos .ficha h3 { font-size: 1.05rem; }
.rejilla-juegos .ficha p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rejilla-juegos .ficha .jugar {
  display: inline-flex; margin-top: 12px; padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 700;
  background: color-mix(in srgb, var(--oro) 16%, transparent); color: var(--oro);
}
.rejilla-juegos a.ficha:hover .jugar { background: var(--oro); color: #1A1206; }
.rejilla-juegos .ficha--proxima .jugar { background: rgba(255,255,255,.06); color: var(--tenue); }
.juegos-contexto {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--raya);
}
.juegos-contexto p { margin: 0; flex: 1; min-width: 200px; color: var(--tenue); font-size: .92rem; }
.juegos-contexto p b { color: var(--hueso); }
.juegos-contexto form { margin: 0; }
.juegos-busca { max-width: 320px; margin: 0 0 18px; }

/* ═════════════ barra de abajo (solo cel) ═════════════ */
.tabbar { display: none; }

@media (max-width: 1080px) {
  .menu-cuenta > summary b { display: none; }
  .menu-cuenta > summary { padding-right: 10px; }
  .cancha-sel > summary { max-width: 150px; }
  .barra .nav-principal a { padding: 9px 11px; }
}
@media (max-width: 760px) {
  .nav-principal { display: none !important; }
}
@media (max-width: 760px) {
  body.con-pestanas { padding-bottom: calc(66px + var(--sab)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 4px calc(6px + var(--sab));
    background: color-mix(in srgb, var(--noche) 88%, transparent);
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--raya2);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; border-radius: 12px;
    color: var(--tenue); text-decoration: none; font-size: .68rem; font-weight: 600; position: relative;
  }
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--oro); }
  .tabbar a[aria-current="page"]::before {
    content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--oro);
  }
  .menu-cuenta { display: none; }          /* en el cel, la cuenta está en la barra de abajo ("Yo") */
  .barra .envoltura.barra__fila { min-height: 58px; }
  .pestanas { top: calc(60px + var(--sat)); }
  .pestanas a { padding: 12px 12px; font-size: .88rem; }
  .pie { margin-top: 30px; }
}
@media (max-width: 560px) {
  .barra .marca { font-size: 0; gap: 0; margin-right: auto; }   /* solo el cuadrito */
  .barra .marca span { display: none; }
  .barra__lado { gap: 6px; }
  .barra .saldo { padding: 6px 11px; font-size: .84rem; }
  .cancha-sel > summary { max-width: 140px; padding: 5px 10px 5px 5px; }
  .salir-juego span { display: none; }
  .salir-juego { padding: 8px 10px; }
  .cancha-chip { padding: 4px; }
  .cancha-chip b { display: none; }
  .menu-juegos > summary { padding: 6px 6px; }
  .menu-juegos > summary b { font-size: .86rem; }
  .barra--juego .envoltura.barra__fila { min-height: 52px; gap: 6px; }
  .menu-juegos .menu-caja { position: fixed; left: 10px; right: 10px; top: calc(58px + var(--sat)); min-width: 0; }

  .pestanas__fila { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .pestanas a { flex-direction: column; gap: 3px; padding: 9px 2px 10px; font-size: .72rem; justify-content: center; }
  .pestanas a svg { width: 21px; height: 21px; }
  .pestanas a[aria-current="page"]::after { left: 22%; right: 22%; }
  .rejilla-juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rejilla-juegos .ficha .lamina { aspect-ratio: 4 / 3; font-size: 2.6rem; }
  .rejilla-juegos .ficha .cuerpo { padding: 10px 12px 12px; }
  .rejilla-juegos .ficha h3 { font-size: .9rem; }
  .rejilla-juegos .ficha p { font-size: .78rem; }
  .rejilla-juegos .ficha .jugar { display: none; }
  .rejilla-juegos .ficha .sello { top: 8px; left: 8px; font-size: .66rem; padding: 3px 8px; }
}

.cancha-escudo--mini { width: 40px; height: 40px; border-radius: 13px; font-size: 1.3rem; flex: none; }

/* que los saltos a #ancla no queden debajo de la barra y las pestañas */
[id] { scroll-margin-top: 130px; }