/**
 * match-badges.css  (Batch 2.5 + 3.2.1)
 *
 * Prediction badges shown on /partidos.html match cards. Tells the user
 * which matches they've predicted in Oficial mode, in Completa mode, or both.
 *
 * Isolated in its own file (not in style.css) so it ships cleanly and is
 * easy to remove or restyle later.
 *
 * 3.2.1 additions: countdown status badge (replaces "Programado" with
 * "En 5d 3h" / "En 25 min" etc. for scheduled matches).
 */

/* ============================================================================
 * Countdown status badge — used for scheduled matches that haven't started
 * ============================================================================ */

.match-status--countdown {
    background: rgba(125, 211, 252, 0.10);
    color: rgba(125, 211, 252, 1);
    border: 1px solid rgba(125, 211, 252, 0.25);
    font-variant-numeric: tabular-nums;
}

/* "Empezando…" — past kickoff but Cloud Function hasn't marked as live yet */
.match-status--starting {
    background: rgba(251, 191, 36, 0.12);
    color: rgba(253, 224, 71, 1);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

/* ============================================================================
 * Sort toggle (4.1.4) — sits inline at the section divider
 * ============================================================================ */

.match-section-divider--with-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sp-4, 16px) 0 var(--sp-3, 12px);
    border: none;
    background: none;
}

.matches-sort-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.matches-sort-toggle__btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    padding: 7px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.02em;
}

.matches-sort-toggle__btn:hover {
    color: var(--text-primary, #fff);
}

.matches-sort-toggle__btn:focus-visible {
    outline: 2px solid rgba(125, 211, 252, 0.55);
    outline-offset: 2px;
}

.matches-sort-toggle__btn.is-active {
    background: rgba(125, 211, 252, 0.15);
    color: rgba(125, 211, 252, 1);
}

.match-card__pred-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, 6px);
    padding: var(--sp-2, 6px) var(--sp-3, 12px) var(--sp-3, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: var(--sp-2, 6px);
}

.match-pred-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Oficial: cool blue/teal — matches the standard mode visual identity */
.match-pred-badge--official {
    background: rgba(56, 189, 248, 0.14);
    color: rgba(125, 211, 252, 1);
    border: 1px solid rgba(56, 189, 248, 0.28);
}

/* Completa: warm violet — matches the full-prediction mode visual identity */
.match-pred-badge--full {
    background: rgba(192, 132, 252, 0.14);
    color: rgba(216, 180, 254, 1);
    border: 1px solid rgba(192, 132, 252, 0.28);
}

/* Light mode fallback (unlikely to apply with our current dark theme but harmless) */
@media (prefers-color-scheme: light) {
    .match-card__pred-footer {
        border-top-color: rgba(0, 0, 0, 0.06);
    }

    .match-pred-badge--official {
        background: rgba(14, 165, 233, 0.10);
        color: rgba(2, 132, 199, 1);
        border-color: rgba(14, 165, 233, 0.30);
    }

    .match-pred-badge--full {
        background: rgba(168, 85, 247, 0.10);
        color: rgba(126, 34, 206, 1);
        border-color: rgba(168, 85, 247, 0.30);
    }
}

/* Small phones: keep badges readable but a touch smaller */
@media (max-width: 380px) {
    .match-pred-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}