/* --------------------------------------------------------------------------
   TORNEOS (val-tournaments.php)
   --------------------------------------------------------------------------
   UI de calendario/resultados/equipos. Datos de ejemplo por ahora; la
   estructura esta pensada para mapear con PandaScore mas adelante.
   -------------------------------------------------------------------------- */

.tourn-body { background: var(--bg-dark); min-height: 100vh; }

.tourn-main {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--sp-11) var(--sp-9) 80px;
}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.tourn-header { margin-bottom: 28px; }
.tourn-header h1 {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-white);
    margin-bottom: var(--sp-2);
}
.tourn-header h1 span { color: var(--brand-accent); }
.tourn-subtitle { font-size: var(--fs-sm); color: var(--text-muted); }

/* ── Filtros: tabs + selector ─────────────────────────────────────── */
.tourn-filters {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-9);
    flex-wrap: wrap;
}

.tourn-tabs { display: flex; gap: var(--sp-2); }

.tourn-tab {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px var(--sp-6);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-gray);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.tourn-tab:hover { background: var(--bg-input); color: var(--text-white); }
.tourn-tab.active { color: var(--brand-accent); background: rgba(255, 70, 85, .08); }

.tourn-league { margin-left: auto; }

/* ── Layout 66 / 34 ───────────────────────────────────────────────── */
.tourn-layout { display: flex; gap: 16px; align-items: flex-start; }
.tourn-col-main { flex: 0 0 66%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tourn-col-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ── Etiqueta de dia ──────────────────────────────────────────────── */
.tourn-daylabel {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: var(--sp-3) 0 2px;
}
.tourn-daylabel-live { color: var(--brand-accent); }

/* ── Tarjeta de partido ───────────────────────────────────────────── */
.tourn-match {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-3);
    transition: border-color var(--t-fast);
}
.tourn-match-live { border-color: rgba(255, 70, 85, .4); }

.tourn-match-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
}
.tourn-match-league { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-gray); }

.tourn-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-3xs);
    font-weight: var(--fw-extrabold);
    color: var(--brand-accent);
    letter-spacing: .04em;
}
.tourn-live-dot {
    width: 7px; height: 7px;
    border-radius: var(--radius-circle);
    background: var(--brand-accent);
    animation: tourn-pulse 1.4s ease-in-out infinite;
}
@keyframes tourn-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.tourn-match-body { display: flex; align-items: center; justify-content: space-between; }

.tourn-team { display: flex; align-items: center; gap: var(--sp-4); flex: 1; min-width: 0; }
.tourn-team-right { justify-content: flex-end; }
.tourn-team-name {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tourn-team-logo {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extrabold);
    color: var(--text-gray);
    overflow: hidden;
}
.tourn-team-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}
.tourn-empty { color: var(--text-gray); font-size: .9rem; padding: 16px 2px; }
.tourn-score-ff { gap: var(--sp-2); }
.tourn-ff-badge { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--text-gray);
    background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: var(--radius-xs); letter-spacing: .04em; }

/* Roster desplegable por equipo */
.tourn-team-toggle { cursor: pointer; border-radius: var(--radius-sm); }
.tourn-team-toggle:hover { background: rgba(255,255,255,.04); }
.tourn-team-chev { margin-left: auto; color: var(--text-gray); transition: transform var(--t-fast, .12s); }
.tourn-team-toggle.open .tourn-team-chev { transform: rotate(180deg); }
.tourn-roster { padding: var(--sp-2) 0 var(--sp-3) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.tourn-pl { display: flex; align-items: center; gap: var(--sp-3); }
.tourn-pl-img { width: 30px; height: 30px; border-radius: var(--radius-circle, 50%); object-fit: cover; background: var(--bg-input); flex-shrink: 0; }
.tourn-pl-img-ph { background: var(--bg-input); }
.tourn-pl-info { display: flex; flex-direction: column; min-width: 0; }
.tourn-pl-name { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-white); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tourn-pl-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.tourn-pl-role { font-size: var(--fs-3xs); color: var(--text-gray); text-transform: uppercase; letter-spacing: .04em; }
.tourn-pl-loading { color: var(--text-gray); font-size: var(--fs-xs); padding: 4px 0; }

/* Marcador (en vivo / resultado) */
.tourn-score {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-white);
    padding: 0 var(--sp-6);
}
.tourn-score-sep { color: var(--text-muted); font-size: var(--fs-lg); }
.tourn-score-win { color: var(--green); }

/* Hora (proximo partido) */
.tourn-time { text-align: center; min-width: 76px; padding: 0 var(--sp-5); }
.tourn-time-val { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--text-white); }
.tourn-time-bo { font-size: var(--fs-3xs); color: var(--text-muted); }

/* ── Paneles laterales ────────────────────────────────────────────── */
.tourn-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-7);
}
.tourn-panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    margin-bottom: var(--sp-5);
}
.tourn-panel-title svg { color: var(--brand-accent); }
.tourn-panel-divider { height: 1px; background: var(--border); margin: var(--sp-4) 0; }

.tourn-event-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-white); }
.tourn-event-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

.tourn-rank-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }
.tourn-rank-num { width: 14px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); }
.tourn-rank-row .tourn-team-logo { width: 26px; height: 26px; font-size: var(--fs-3xs); }
.tourn-rank-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-white); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tourn-layout { flex-direction: column; }
    .tourn-col-main, .tourn-col-side { flex: 1 1 auto; width: 100%; }
}