/* ==========================================================================
   BUTTONS / TABS
   .btn  = boton/pill individual
   .seg  = contenedor segmentado con .seg-btn (+ .seg-btn.active)
   Migrar aqui poco a poco: val-filter-btn, val-cat-btn, sort-tab, tourn-tab,
   stats-period-btn, agentes/mapas-sort-btn, banner-btn...
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: 14px 50px;
    background: var(--brand-accent);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-black);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn:hover  { 
    background: var(--brand-accent-hover);
    transform: translateY(-1px);
    color: var(--text-white)
}
.btn.active { background: var(--brand-accent); color: var(--text-white); border-color: var(--brand-accent); }

.seg {
    display: inline-flex;
    gap: var(--sp-1);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-1);
    flex-wrap: wrap;   /* en pantallas estrechas las pestañas bajan de fila */
}
.seg-btn {
    background: none;
    border: none;
    color: var(--text-gray);
    padding: var(--sp-2) var(--sp-6);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.seg-btn:hover  { color: var(--brand-accent); }
.seg-btn.active { background: var(--bg-input); color: var(--text-white); }

/* --------------------------------------------------------------------------
   Variante "toggle" de .seg — mismo estilo que el switch Round/Match del
   modal de partida y el sort-tab de lineups: contenedor translúcido y botón
   ACTIVO con fondo de acento (rojo) y texto blanco.
   Uso:  <div class="seg seg-toggle">
             <button class="seg-btn active">Round</button>
             <button class="seg-btn">Match</button>
         </div>
   -------------------------------------------------------------------------- */
.seg.seg-toggle {
    background: var(--border);
    border: none;
    padding: 2px;
}
.seg.seg-toggle .seg-btn {
    padding: 4px 12px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background var(--t-fast), color var(--t-fast);
}
.seg.seg-toggle .seg-btn:not(.active):hover { color: var(--text-white); }
.seg.seg-toggle .seg-btn.active { background: var(--brand-accent); color: var(--text-white); }

/* ==========================================================================
   INDICADOR DESLIZANTE (pildora que sigue a la pestaña activa)
   --------------------------------------------------------------------------
   Compartido por: controles segmentados (.seg/.seg-btn), el sort-tab de
   lineups (.sort-tabs/.sort-tab), las pestañas de torneos (.tourn-tabs/
   .tourn-tab) y las del modal de partida (.match-detail-tabs/.match-detail-tab).
   Progressive enhancement: solo se activa cuando js/seg-tabs.js marca el
   contenedor con .has-slider y le inyecta el .seg-slider; sin JS, cada boton
   activo conserva su fondo de siempre.
   Se mueve EN pantalla -> ease-in-out; usa transform (+width/height del propio
   indicador), no toca el layout de los botones.
   ========================================================================== */
.seg,
.match-detail-tabs { position: relative; }

.seg-btn,
.match-detail-tab { position: relative; z-index: 1; }   /* texto sobre la pildora */

/* Con slider activo, el fondo lo pinta la pildora, no el boton */
.seg.has-slider .seg-btn.active,
.seg.seg-toggle.has-slider .seg-btn.active,
.seg.seg--accent.has-slider .seg-btn.active,
.match-detail-tabs.has-slider .match-detail-tab.active { background: transparent; }

.seg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: var(--radius-sm);
    z-index: 0;
    pointer-events: none;
    transition: transform var(--t-normal) var(--ease-in-out),
                width var(--t-normal) var(--ease-in-out),
                height var(--t-normal) var(--ease-in-out);
}

/* Color y radio segun la variante, para igualar el .active de cada control */
.seg .seg-slider               { background: var(--bg-input); }
.seg.seg-toggle .seg-slider    { background: var(--brand-accent); border-radius: var(--radius-xs); }
.seg.seg--accent .seg-slider   { background: var(--brand-accent); }
/* El modal usa un tinte tenue (no pildora solida): replicamos ese fondo */
.match-detail-tabs .seg-slider { background: rgba(255, 70, 85, .08); }

/* Variante acento: pildora de acento con texto blanco (lineups / torneos).
   Mismo tamano que .seg normal, solo cambia el color del activo. El fallback
   sin JS pinta el fondo en el boton; con slider lo hace la pildora. */
.seg.seg--accent .seg-btn.active { background: var(--brand-accent); color: var(--text-white); }

@media (prefers-reduced-motion: reduce) {
    .seg-slider { transition: none; }
}