/* ═══════════════════════════════════════════════════════
   tst-hub-torneos.css — v6.0
   Mobile-first · Bracket ATP · Mobile UX mejorado
   ═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --tst-navy:        #1E3A5F;
  --tst-navy-light:  #2A4E7E;
  --tst-navy-dark:   #152d4a;
  --tst-lime:        #E1FA59;
  --tst-clay:        #C87941;
  --tst-clay-bg:     #F5DEC8;
  --tst-hard:        #305180;
  --tst-hard-bg:     #D6E3F0;
  --tst-grass:       #5D9E3A;
  --tst-grass-bg:    #D8EFC8;
  --tst-text:        #1A1A1A;
  --tst-muted:       #777570;
  --tst-border:      #E4E3DC;
  --tst-bg:          #F7F7F5;
  --tst-white:       #FFFFFF;
  --tst-red:         #E63946;
  --tst-red-bg:      #FDECEA;
  --tst-gold:        #C8922A;
  --tst-gold-bg:     #FDF3DC;
  --tst-r-sm:        6px;
  --tst-r-md:        10px;
  --tst-r-lg:        14px;
  --tst-shadow:      0 2px 12px rgba(0,0,0,.08);
  --tst-shadow-lg:   0 8px 32px rgba(0,0,0,.16);
  --tst-font:        "DM Sans","Helvetica Neue",Arial,sans-serif;
  --tst-transition:  .18s ease;
  /* Bracket */
  --tst-match-w:     200px;
  --tst-match-h:     70px;
  --tst-col-gap:     32px;
}

/* ── Reset ── */
.tst-hub *, .tst-hub *::before, .tst-hub *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.tst-hub {
  font-family: var(--tst-font);
  color: var(--tst-text);
  background: var(--tst-bg);
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0 48px;
  -webkit-text-size-adjust: 100%;
}

/* ── Skeleton ── */
.tst-hub__skeleton { padding: 16px; }
.tst-skeleton-header { display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.tst-skeleton-logo   { width:64px; height:64px; border-radius:var(--tst-r-md); background:#e0e0e0; flex-shrink:0; }
.tst-skeleton-info   { flex:1; display:flex; flex-direction:column; gap:9px; padding-top:6px; }
.tst-skeleton-line   { height:13px; border-radius:5px; background:#e0e0e0; }
.tst-skeleton-line--sm { width:28%; }
.tst-skeleton-line--md { width:52%; }
.tst-skeleton-line--lg { width:78%; height:19px; }
.tst-skeleton-tabs  { height:52px; border-radius:var(--tst-r-md); background:#e0e0e0; margin-bottom:16px; }
.tst-skeleton-body  { display:flex; flex-direction:column; gap:10px; }
.tst-skeleton-card  { height:80px; border-radius:var(--tst-r-md); background:#e0e0e0; }
@keyframes pulse-anim { 0%,100%{opacity:1} 50%{opacity:.42} }
.pulse { animation: pulse-anim 1.6s ease-in-out infinite; }

/* ── Header ── */
.tst-hub__header {
  background: var(--tst-navy);
  padding: 20px 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.tst-hub__header-logo-wrap {
  width: 64px; height: 64px;
  background: rgba(255,255,255,.1);
  border-radius: var(--tst-r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.tst-hub__logo { width:58px; height:58px; object-fit:contain; display:none; }
.tst-hub__logo-fb {
  display:none; align-items:center; justify-content:center;
  width:100%; height:100%;
  font-size:20px; font-weight:900; color:var(--tst-white);
  background:var(--tst-navy-light); border-radius:var(--tst-r-md);
}
.tst-hub__header-body { flex:1; min-width:180px; }
.tst-hub__category {
  display:inline-block; font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border-radius:20px; margin-bottom:5px;
  background:rgba(255,255,255,.15); color:rgba(255,255,255,.8);
}
.tst-hub__category--atp { background:rgba(225,250,89,.2); color:var(--tst-lime); }
.tst-hub__category--wta { background:rgba(230,57,70,.2);  color:#FFB3B8; }
.tst-hub__name { font-size:22px; font-weight:900; color:var(--tst-white); line-height:1.15; margin-bottom:4px; }
.tst-hub__meta { font-size:12px; color:rgba(255,255,255,.55); margin-bottom:8px; }
.tst-hub__dates { font-size:11px; color:rgba(255,255,255,.5); margin-top:4px; }
.tst-hub__surface-badge {
  display:inline-block; font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px;
}
.tst-hub__surface-badge--clay  { background:var(--tst-clay-bg);  color:#7A3D10; }
.tst-hub__surface-badge--hard  { background:var(--tst-hard-bg);  color:var(--tst-navy); }
.tst-hub__surface-badge--grass { background:var(--tst-grass-bg); color:#2A5010; }

/* ── Tabs — Mobile mejorado ── */
.tst-hub__tabs {
  display: flex;
  background: var(--tst-white);
  border-bottom: 2px solid var(--tst-border);
  position: sticky; top: 0; z-index: 100;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tst-hub__tabs::-webkit-scrollbar { display:none; }
.tst-hub__tab {
  flex: 1; min-width: 60px;
  background: none; border: none;
  padding: 10px 6px 8px;
  font-family: var(--tst-font); font-size: 10px; font-weight: 700;
  color: var(--tst-muted); cursor: pointer;
  white-space: nowrap; text-align: center;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color var(--tst-transition), border-color var(--tst-transition);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  touch-action: manipulation;
}
.tst-tab-icon { font-size: 18px; line-height: 1; }
.tst-tab-label { display: block; }
.tst-hub__tab:hover { color: var(--tst-navy); }
.tst-hub__tab--active { color: var(--tst-navy); border-bottom-color: var(--tst-navy); }

/* ── Panels ── */
.tst-hub__panel { padding: 12px; display: none; }
.tst-hub__panel--active { display: block; }

/* ── Date Nav — Mobile mejorado ── */
.tst-hub__date-nav {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:12px; background:var(--tst-white);
  border:1px solid var(--tst-border); border-radius:var(--tst-r-md); padding:10px 12px;
}
.tst-hub__date-btn {
  background:none; border:1px solid var(--tst-border); border-radius:var(--tst-r-sm);
  min-width:40px; height:40px; cursor:pointer; font-size:20px; color:var(--tst-navy);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--tst-transition); flex-shrink:0; touch-action:manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tst-hub__date-btn:hover, .tst-hub__date-btn:active {
  background:var(--tst-navy); color:var(--tst-white); border-color:var(--tst-navy);
}
.tst-hub__date-label { font-size:13px; font-weight:700; color:var(--tst-text); text-align:center; flex:1; text-transform:capitalize; }

/* ── Match List ── */
.tst-hub__match-list { display:flex; flex-direction:column; gap:8px; }

/* ── Match Card ── */
.tst-hub__match-card {
  background:var(--tst-white); border:1px solid var(--tst-border);
  border-radius:var(--tst-r-md); padding:12px 14px;
  transition:box-shadow var(--tst-transition);
}
.tst-hub__match-card:hover { box-shadow:var(--tst-shadow); }
.tst-hub__match-card--live { border-left:3px solid var(--tst-red); background:var(--tst-red-bg); }
.tst-hub__match-card--finished { opacity:.92; }
.tst-hub__match-meta {
  display:flex; align-items:center; gap:7px; margin-bottom:8px; flex-wrap:wrap;
}
.tst-hub__status-icon { font-size:14px; line-height:1; }
.tst-hub__match-time { font-size:11px; font-weight:700; color:var(--tst-muted); text-transform:uppercase; letter-spacing:.05em; }
.tst-hub__match-time--live { color:var(--tst-red); font-weight:800; }
.tst-hub__match-round {
  font-size:10px; font-weight:600; background:var(--tst-bg); color:var(--tst-muted);
  padding:2px 7px; border-radius:10px; border:1px solid var(--tst-border);
}
.tst-hub__match-body { display:flex; align-items:center; gap:10px; }
.tst-hub__match-players { flex:1; display:flex; flex-direction:column; gap:7px; }
.tst-hub__player { display:flex; align-items:center; gap:5px; }
.tst-hub__player-name { font-size:14px; font-weight:600; color:var(--tst-text); line-height:1.2; }
.tst-hub__player--winner .tst-hub__player-name { font-weight:800; color:var(--tst-navy); }
.tst-hub__player-trophy { font-size:12px; }
.tst-match-stats-btn {
  margin-left:auto; background:none; border:1px solid var(--tst-border);
  border-radius:var(--tst-r-sm); padding:5px 9px; font-size:14px; cursor:pointer;
  color:var(--tst-muted); transition:all var(--tst-transition); flex-shrink:0;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.tst-match-stats-btn:hover { border-color:var(--tst-navy); color:var(--tst-navy); background:var(--tst-hard-bg); }

/* ── Score ── */
.tst-score-cols { display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex-shrink:0; }
.tst-score-row { display:flex; gap:3px; align-items:center; min-height:22px; }
.tst-set {
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  min-width:22px; height:22px; border-radius:4px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.tst-set sup { font-size:8px; font-weight:700; vertical-align:super; margin-left:1px; }
.tst-set--won  { background:var(--tst-navy); color:var(--tst-white); }
.tst-set--lost { background:var(--tst-bg); color:var(--tst-muted); border:1px solid var(--tst-border); }

/* ── Round Tabs ── */
.tst-hub__round-tabs {
  display:flex; flex-wrap:nowrap; gap:6px; margin-bottom:14px;
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.tst-hub__round-tabs::-webkit-scrollbar { display:none; }
.tst-hub__round-tab {
  background:var(--tst-white); border:1.5px solid var(--tst-border); border-radius:20px;
  padding:6px 14px; font-family:var(--tst-font); font-size:12px; font-weight:700;
  color:var(--tst-muted); cursor:pointer; transition:all var(--tst-transition);
  display:flex; align-items:center; gap:5px; white-space:nowrap; touch-action:manipulation;
  flex-shrink:0;
}
.tst-hub__round-tab:hover { border-color:var(--tst-navy); color:var(--tst-navy); }
.tst-hub__round-tab--active { background:var(--tst-navy); border-color:var(--tst-navy); color:var(--tst-white); }
.tst-hub__round-tab-count {
  font-size:9px; font-weight:800; background:rgba(255,255,255,.25);
  padding:1px 5px; border-radius:10px; min-width:16px; text-align:center;
}
.tst-hub__round-tab:not(.tst-hub__round-tab--active) .tst-hub__round-tab-count {
  background:var(--tst-bg); color:var(--tst-muted);
}

/* ══════════════════════════════════════════════
   BRACKET — Estilo ATP
   Scroll horizontal, partidos alineados en columnas
══════════════════════════════════════════════ */

/* Tabs draw */
.tst-draw-tabs { display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; scrollbar-width:none; }
.tst-draw-tabs::-webkit-scrollbar { display:none; }
.tst-draw-tab {
  background:var(--tst-white); border:1.5px solid var(--tst-border); border-radius:20px;
  padding:7px 16px; font-family:var(--tst-font); font-size:12px; font-weight:700;
  color:var(--tst-muted); cursor:pointer; transition:all var(--tst-transition);
  white-space:nowrap; flex-shrink:0; touch-action:manipulation;
}
.tst-draw-tab:hover { border-color:var(--tst-navy); color:var(--tst-navy); }
.tst-draw-tab--active { background:var(--tst-navy); border-color:var(--tst-navy); color:var(--tst-white); }

/* Wrapper con scroll */
.tst-hub__draw-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  /* Indicador visual de scroll */
  background: linear-gradient(to right, var(--tst-bg) 0%, transparent 24px),
              linear-gradient(to left, var(--tst-bg) 0%, transparent 24px);
  background-attachment: local, local;
}
#tst-draw-bracket { min-width: max-content; }

/* Bracket wrapper individual */
.tst-bracket-wrap { display:inline-flex; flex-direction:column; gap:0; min-width:max-content; }

/* Header de rondas */
.tst-bracket-header {
  display:flex;
  border-bottom: 2px solid var(--tst-border);
  background: var(--tst-navy);
  border-radius: var(--tst-r-md) var(--tst-r-md) 0 0;
  overflow: hidden;
}
.tst-bracket-header__cell {
  min-width: var(--tst-match-w);
  padding: 10px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.8);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
}
.tst-bracket-header__cell:last-child { border-right: none; }

/* Grid de columnas */
.tst-bracket-grid {
  display: flex;
  align-items: flex-start;
  background: var(--tst-white);
  border: 1px solid var(--tst-border);
  border-top: none;
  border-radius: 0 0 var(--tst-r-md) var(--tst-r-md);
  padding: 16px 8px;
  gap: 0;
}

/* Columna de ronda */
.tst-bracket-col {
  min-width: var(--tst-match-w);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 6px;
  padding: 0 4px;
  position: relative;
}
/* Separador vertical entre columnas */
.tst-bracket-col + .tst-bracket-col {
  border-left: 1px solid var(--tst-border);
}

/* Partido individual */
.tst-b-match {
  background: var(--tst-bg);
  border: 1px solid var(--tst-border);
  border-radius: var(--tst-r-sm);
  overflow: hidden;
  min-width: calc(var(--tst-match-w) - 8px);
  transition: box-shadow var(--tst-transition);
}
.tst-b-match:hover { box-shadow: var(--tst-shadow); }
.tst-b-match--final {
  border-color: var(--tst-gold);
  box-shadow: 0 0 0 2px var(--tst-gold-bg);
  min-width: calc(var(--tst-match-w) - 8px);
}

/* Jugador en bracket */
.tst-b-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  min-height: 30px;
  gap: 4px;
  transition: background var(--tst-transition);
}
.tst-b-player--w {
  background: var(--tst-hard-bg);
}
.tst-b-player--w .tst-b-player__name {
  font-weight: 800;
  color: var(--tst-navy);
}
.tst-b-player--l .tst-b-player__name {
  color: var(--tst-muted);
}
.tst-b-player--l .tst-b-score {
  color: var(--tst-muted);
}

.tst-b-player__left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.tst-b-player__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tst-b-player__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tst-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tst-b-seed {
  font-size: 9px;
  font-weight: 700;
  color: var(--tst-muted);
  background: var(--tst-white);
  border: 1px solid var(--tst-border);
  border-radius: 3px;
  padding: 0 3px;
  line-height: 14px;
  flex-shrink: 0;
}
.tst-b-flag {
  width: 16px;
  height: 12px;
  border-radius: 1px;
  flex-shrink: 0;
  object-fit: cover;
}
.tst-b-score {
  font-size: 11px;
  font-weight: 700;
  color: var(--tst-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tst-b-trophy {
  font-size: 11px;
  flex-shrink: 0;
}
.tst-b-divider {
  height: 1px;
  background: var(--tst-border);
}

/* Estado vacío del bracket */
.tst-hub__empty--draw { display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 20px; text-align:center; }
.tst-draw-pending-icon { font-size:40px; }
.tst-draw-pending-title { font-size:16px; font-weight:800; color:var(--tst-navy); }
.tst-draw-pending-sub { font-size:13px; color:var(--tst-muted); }

/* ══════════════════════════════════════════════
   COMPETITORS — Grid + Tabs
══════════════════════════════════════════════ */
.tst-comp-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tst-comp-tab {
  background: var(--tst-white);
  border: 1.5px solid var(--tst-border);
  border-radius: 20px;
  padding: 8px 18px;
  font-family: var(--tst-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--tst-muted);
  cursor: pointer;
  transition: all var(--tst-transition);
  touch-action: manipulation;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tst-comp-tab:hover { border-color:var(--tst-navy); color:var(--tst-navy); }
.tst-comp-tab--active { background:var(--tst-navy); border-color:var(--tst-navy); color:var(--tst-white); }
.tst-comp-tab__count {
  font-size: 10px;
  font-weight: 800;
  background: rgba(255,255,255,.25);
  padding: 1px 6px;
  border-radius: 10px;
}
.tst-comp-tab:not(.tst-comp-tab--active) .tst-comp-tab__count {
  background: var(--tst-bg);
  color: var(--tst-muted);
}

.tst-hub__competitors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.tst-competitor-card {
  background:var(--tst-white); border:1px solid var(--tst-border); border-radius:var(--tst-r-md);
  padding:14px 10px 12px; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:9px; transition:box-shadow var(--tst-transition), transform var(--tst-transition);
}
.tst-competitor-card:hover { box-shadow:var(--tst-shadow); transform:translateY(-2px); }
.tst-competitor-photo-wrap { position:relative; width:64px; height:64px; flex-shrink:0; }
.tst-competitor-photo {
  width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:top center;
  background:var(--tst-hard-bg); border:2px solid var(--tst-border);
  display: block;
}
.tst-competitor-initials {
  width:64px; height:64px; border-radius:50%; background:var(--tst-hard-bg);
  border:2px solid var(--tst-border); display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; color:var(--tst-navy);
}
.tst-competitor-seed {
  position:absolute; bottom:0; right:-4px; background:var(--tst-navy); color:var(--tst-lime);
  font-size:9px; font-weight:800; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--tst-white);
}
.tst-competitor-info { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.tst-competitor-name { font-size:12px; font-weight:700; color:var(--tst-text); line-height:1.2; word-break:break-word; }
.tst-competitor-meta { display:flex; align-items:center; justify-content:center; gap:4px; }
.tst-competitor-flag { border-radius:2px; vertical-align:middle; }
.tst-competitor-country { font-size:10px; color:var(--tst-muted); }
.tst-competitor-ranking { font-size:10px; font-weight:700; color:var(--tst-navy); background:var(--tst-hard-bg); padding:2px 8px; border-radius:10px; }

/* ── INFO ── */
.tst-info-section-title {
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tst-muted); margin-bottom:12px; margin-top:4px;
}
.tst-info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
.tst-info-card {
  background:var(--tst-white); border:1px solid var(--tst-border); border-radius:var(--tst-r-md);
  padding:14px 12px; display:flex; flex-direction:column; gap:5px;
}
.tst-info-card__title { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--tst-muted); }
.tst-info-card__value { font-size:14px; font-weight:800; color:var(--tst-navy); line-height:1.2; }

.tst-info-venues { margin-bottom:20px; }
.tst-venues-grid { display:flex; flex-wrap:wrap; gap:8px; }
.tst-venue-chip {
  background:var(--tst-white); border:1px solid var(--tst-border); border-radius:20px;
  padding:6px 13px; display:flex; flex-direction:column; gap:1px;
}
.tst-venue-name { font-size:12px; font-weight:700; color:var(--tst-navy); }
.tst-venue-city { font-size:10px; color:var(--tst-muted); }

.tst-info-champions {
  background:var(--tst-white); border:1px solid var(--tst-border); border-radius:var(--tst-r-lg); overflow:hidden;
}
.tst-info-champions__title {
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:13px 18px; background:var(--tst-navy); color:var(--tst-white);
}
.tst-info-champions__list { padding:6px 0; }
.tst-champion-row {
  display:flex; align-items:center; gap:10px; padding:11px 18px;
  border-bottom:1px solid var(--tst-border); transition:background var(--tst-transition);
}
.tst-champion-row:last-child { border-bottom:none; }
.tst-champion-row:hover { background:var(--tst-bg); }
.tst-champion-year { font-size:13px; font-weight:800; color:var(--tst-muted); min-width:44px; }
.tst-champion-name { flex:1; font-size:13px; font-weight:700; color:var(--tst-navy); }
.tst-champion-badge {
  font-size:10px; font-weight:800; background:var(--tst-gold-bg); color:var(--tst-gold);
  padding:2px 7px; border-radius:10px; flex-shrink:0;
}
.tst-info-multi-champs {
  background:var(--tst-white); border-bottom:1px solid var(--tst-border);
  padding:14px 16px;
}
.tst-info-multi-champs__title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--tst-muted); margin-bottom:10px; }
.tst-info-multi-champs__grid { display:flex; flex-wrap:wrap; gap:7px; }
.tst-multi-champ-item {
  display:flex; align-items:center; gap:7px; background:var(--tst-bg);
  border:1px solid var(--tst-border); border-radius:20px; padding:5px 12px;
}
.tst-multi-champ-name { font-size:12px; font-weight:700; color:var(--tst-navy); }
.tst-multi-champ-count { font-size:12px; font-weight:800; color:var(--tst-clay); }

/* ══════════════════════════════════════════════
   STATS MODAL — Rediseño con header de jugadores
══════════════════════════════════════════════ */
.tst-stats-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center; }
.tst-stats-modal[hidden] { display:none; }
.tst-stats-modal__backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.5); cursor:pointer;
}
.tst-stats-modal__box {
  position:relative; z-index:1; background:var(--tst-white);
  width:100%; max-width:540px; max-height:88vh; overflow-y:auto;
  border-radius:var(--tst-r-lg) var(--tst-r-lg) 0 0;
  padding:0 0 32px;
  box-shadow: var(--tst-shadow-lg);
  -webkit-overflow-scrolling: touch;
}
.tst-stats-modal__close {
  position:absolute; top:14px; right:14px; background:rgba(255,255,255,.15); border:none;
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px;
  color:var(--tst-white); display:flex; align-items:center; justify-content:center;
  z-index:2; touch-action:manipulation;
}

/* Header de stats con jugadores */
.tst-stats-modal__header {
  background: var(--tst-navy);
  padding: 18px 16px 14px;
  border-radius: var(--tst-r-lg) var(--tst-r-lg) 0 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.tst-stats-modal__title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  text-align: center;
  grid-column: 1 / -1;
  margin-bottom: 6px;
}
.tst-stats-p-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--tst-white);
  text-align: center;
}
.tst-stats-p-name--home { text-align: right; }
.tst-stats-p-name--away { text-align: left; }
.tst-stats-vs {
  font-size: 10px;
  font-weight: 900;
  color: var(--tst-lime);
  background: rgba(255,255,255,.1);
  padding: 3px 8px;
  border-radius: 20px;
}

.tst-stats-modal__content { padding: 16px 16px 0; }
.tst-stats-container { display:flex; flex-direction:column; gap:20px; }
.tst-stats-group {}
.tst-stats-group__title {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tst-muted); margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--tst-border);
}
.tst-stat-row { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:6px; margin-bottom:12px; }
.tst-stat-val { font-size:13px; font-weight:800; color:var(--tst-navy); }
.tst-stat-val--home { text-align:right; }
.tst-stat-val--away { text-align:left; }
.tst-stat-info { display:flex; flex-direction:column; gap:4px; }
.tst-stat-name { font-size:10px; font-weight:600; color:var(--tst-muted); text-align:center; }
.tst-stat-bar { display:flex; height:5px; border-radius:3px; overflow:hidden; background:var(--tst-bg); }
.tst-stat-bar__home { background:var(--tst-navy); transition:width .4s; }
.tst-stat-bar__away { background:var(--tst-clay); transition:width .4s; }

/* ── Estados ── */
.tst-hub__loading, .tst-hub__empty {
  text-align:center; padding:28px 14px; font-size:13px; color:var(--tst-muted);
  background:var(--tst-white); border:1px solid var(--tst-border); border-radius:var(--tst-r-md);
}
.tst-hub__error-banner {
  margin:14px; padding:13px 16px; background:var(--tst-red-bg); border:1px solid var(--tst-red);
  border-radius:var(--tst-r-md); color:var(--tst-red); font-size:13px; font-weight:600;
}

/* ══════════════════════════════════════════════
   TABLET — 600px+
══════════════════════════════════════════════ */
@media (min-width: 600px) {
  :root { --tst-match-w: 210px; }
  .tst-hub__header { padding:24px 28px; border-radius:0 0 var(--tst-r-lg) var(--tst-r-lg); gap:20px; }
  .tst-hub__header-logo-wrap { width:80px; height:80px; }
  .tst-hub__logo { width:72px; height:72px; }
  .tst-hub__name { font-size:26px; }
  .tst-hub__tab { padding:12px 10px; font-size:11px; min-width:72px; }
  .tst-tab-icon { font-size:18px; }
  .tst-hub__panel { padding:18px 16px; }
  .tst-hub__match-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
  #tst-schedule-list { grid-template-columns:1fr; }
  .tst-info-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .tst-hub__competitors-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .tst-competitor-photo, .tst-competitor-initials { width:72px; height:72px; }
  .tst-competitor-photo-wrap { width:72px; height:72px; }
  .tst-stats-modal { align-items:center; }
  .tst-stats-modal__box { border-radius:var(--tst-r-lg); max-height:80vh; }
}

/* ══════════════════════════════════════════════
   DESKTOP — 768px+
══════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --tst-match-w: 220px; --tst-col-gap: 36px; }
  .tst-hub { padding:0 0 64px; }
  .tst-hub__header { padding:32px 36px; border-radius:var(--tst-r-lg); margin:20px 0 0; gap:28px; }
  .tst-hub__header-logo-wrap { width:96px; height:96px; }
  .tst-hub__logo { width:88px; height:88px; }
  .tst-hub__name { font-size:30px; }
  .tst-hub__tab { flex-direction:row; gap:6px; padding:14px 18px; font-size:13px; }
  .tst-tab-icon { font-size:15px; }
  .tst-hub__panel { padding:24px 20px; }
  .tst-skeleton-logo { width:80px; height:80px; }
}

/* ══════════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --tst-bg:      #111827;
    --tst-white:   #1F2937;
    --tst-text:    #F3F4F6;
    --tst-muted:   #9CA3AF;
    --tst-border:  #374151;
    --tst-navy:    #3B82F6;
    --tst-navy-light: #2563EB;
    --tst-hard-bg: rgba(30,58,95,.3);
  }
  .tst-bracket-header { background: #152d4a; }
  .tst-b-player--w { background: rgba(59,130,246,.15); }
  .tst-stats-modal__close { color: var(--tst-text); }
}