/* ── Header sticky (estilo PICKCR) ── */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(10,14,22,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }
  .app-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 4px 6px;
    margin: 0 -6px;
    transition: background-color 0.15s, opacity 0.15s;
  }
  .app-header-brand:hover { background-color: rgba(200,245,29,0.08); }
  .app-header-brand:active { opacity: 0.75; }
  .app-header-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(155deg, var(--lime) 0%, var(--lime-dark) 100%);
    color: #0a0e16;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .app-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
  }
  .app-header-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-header-tagline {
    font-family: 'Barlow', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-faint);
    letter-spacing: 0.2px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auth-btn {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 20px;
    cursor: pointer;
    font-size: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .auth-btn:hover { border-color: var(--lime); color: var(--lime); }
  .auth-btn.active { background: var(--lime); color: #0a0e16; border-color: var(--lime); }

  /* ── Views ── */
  .view { display: block; }
  .view.hidden { display: none !important; }

  /* ── Tournament toolbar ── */
  .tournament-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
  }
  .back-btn {
    background: var(--card-soft);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--lime);
    cursor: pointer;
    white-space: nowrap;
  }
  .back-btn:hover { border-color: var(--lime); }
  .tournament-toolbar-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Bottom navigation ── */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(13,19,32,0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-soft);
    display: flex;
    z-index: 100;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
  }
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color 0.15s;
    padding: 8px 4px;
  }
  .bottom-nav-item .nav-icon { font-size: 20px; line-height: 1; }
  .bottom-nav-item.active { color: var(--lime); }
  .bottom-nav-item.active .nav-icon { transform: scale(1.1); }

  /* legacy header removed */
  header { display: none; }

  /* ── Filtro por sede — mismo lenguaje visual de "tabs con subrayado"
     que .tabs/.tab (tabs de día) y .cat-tabs/.cat-tab (categorías) en
     vez de pills sueltas con borde y gap (2026-07-25, pedido explícito
     del usuario: "se ven separados feos", pidiendo dejarlas
     "integradas" como el menú de Open Play). El color por sede
     (--sede-color) se conserva — ahora tiñe el subrayado en vez de
     rellenar todo el botón. ── */
  .sede-filter-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 12px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .sede-filter-bar::-webkit-scrollbar { display: none; }
  .sede-filter-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sede-pill {
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sede-pill:hover { color: var(--lime); }
  /* Fix visual (post Etapa 1, Fase 3.3): el color activo ya no depende de un
     style inline que solo se escribía en el botón activo al momento del
     render. Eso era lo que dejaba el color "pegado" en el botón anterior:
     setSedeFilter() (navigation.js) mueve la clase .active correctamente,
     pero nunca recalcula el inline style del botón que la pierde.
     Ahora renderSedeFilterBar() escribe --sede-color en TODOS los botones
     (activos o no) y es esta regla .active, puramente CSS, la única que
     decide si se pinta. El color y el estado activo dejan de depender uno
     del otro para "aparecer" — no puede quedar un color sin su .active.
     Fallback var(--lime) cubre el botón "Todas" (sin sede/color propio). */
  .sede-pill.active {
    color: var(--sede-color, var(--lime));
    border-bottom-color: var(--sede-color, var(--lime));
  }
  /* DEAD CODE — Desacoplamiento del Tournament Engine, Etapa 1 (Sedes).
     data-sede ahora contiene el sedeId generado (ej: "aB3xK9pQ"), no las
     claves legacy "punto"/"match"/"solis", así que estas 3 reglas nunca
     vuelven a aplicar. El color activo ya no se aplica vía inline condicional
     (ver fix visual arriba) sino vía --sede-color + la regla .active de
     arriba. Se dejan aquí sin borrar hasta confirmar en producción
     (ver riesgo 3.3 del diseño de Etapa 1) — no tienen efecto ni costo. */
  .sede-pill[data-sede="punto"].active  { background: var(--green); border-color: var(--green); color: #0a0e16; }
  .sede-pill[data-sede="match"].active  { background: var(--red); border-color: var(--red); color: #0a0e16; }
  .sede-pill[data-sede="solis"].active  { background: var(--sky); border-color: var(--sky); color: #0a0e16; }
  .group-block[data-sede-hidden="true"] { display: none; }
  .day { display: none; padding: 12px; }
  .day.active { display: block; }
  .cat-panel { display: none; }
  .cat-panel.active { display: block; }
  .cat-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--lime);
  }
  .group-block {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-h) + 52px);
  }
  .group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card-soft);
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .group-head-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .group-head h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .group-head .action-btns { display: flex; gap: 4px; }