:root{
  --bg: #0a0a0b;
  --bg-soft: #131315;
  --card: #17171a;
  --card-2: #1c1c1f;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text: #f4f3f0;
  --text-dim: #9b9a9c;
  --gold: #e2b23c;
  --gold-soft: rgba(226,178,60,.14);
  --gold-strong: #f4cf6e;
  --win: #4caf7d;
  --loss: #d9614f;
  --medal-silver: #c7cad1;
  --medal-bronze: #cd8a52;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,.65);
  --maxw: 1040px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

html{
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(6,7,11,.5) 0%, rgba(6,7,11,.72) 45%, rgba(6,7,11,.9) 100%),
    url("../assets/stadium-podium.jpg");
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
@media (max-width: 640px){
  html{ background-attachment: scroll, scroll; }
}

body{
  margin: 0;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,h2,h3{ font-family: "Oswald", "Inter", sans-serif; margin: 0; letter-spacing: .02em; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,11,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo{
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.brand-text h1{
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text h1 span{ color: var(--gold); }
.brand-text p{
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ---------- Nav tabs ---------- */
.tabs-nav{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 20px 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar{ display: none; }
.tab-btn{
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s ease;
}
.tab-btn:hover{ color: var(--text); border-color: var(--border-strong); }
.tab-btn.is-active{
  background: linear-gradient(135deg, var(--gold-strong), var(--gold));
  border-color: var(--gold);
  color: #14110a;
  font-weight: 700;
}

/* ---------- Layout ---------- */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 60px; }
.panel{ display: none; animation: fadeIn .35s ease; }
.panel.is-active{ display: block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform: translateY(0);} }

.panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.panel-head h2{
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pill{
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 999px;
}
.jornada-label{
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.sub-toggle{ display: flex; gap: 6px; background: var(--card); padding: 4px; border-radius: 999px; border: 1px solid var(--border); }
.sub-btn{
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 7px 16px;
  border-radius: 999px;
  font-family: "Oswald", sans-serif;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.sub-btn.is-active{ background: var(--gold); color: #14110a; font-weight: 700; }
.sub-panel{ display: none; }
.sub-panel.is-active{ display: block; }

/* ---------- Table ---------- */
.table-wrap{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
}
.table-wrap::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-strong) 50%, var(--gold) 75%, transparent);
  opacity: .8;
}
table.standings{ width: 100%; border-collapse: collapse; }
table.standings thead th{
  background: linear-gradient(180deg, var(--card-2), var(--card));
  color: var(--text-dim);
  font-family: "Oswald", sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  padding: 14px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border-strong);
}
table.standings thead th.col-club{ text-align: left; padding-left: 20px; }
table.standings thead th.col-equipo{ text-align: left; padding-left: 20px; }
table.standings thead th.col-pos{ padding-left: 20px; text-align: left; width: 54px; }
table.standings thead th.col-last{ padding-right: 20px; }

table.standings tbody td{
  padding: 13px 8px;
  text-align: right;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
table.standings tbody td.pts{ padding-right: 20px; }
table.standings tbody tr:last-child td{ border-bottom: none; }
table.standings tbody tr{ transition: background .15s ease; position: relative; }
table.standings tbody tr:nth-child(even){ background: rgba(255,255,255,.014); }
table.standings tbody tr:hover{ background: rgba(226,178,60,.05); }

td.col-pos{ text-align: left; padding-left: 20px; }
td.col-club{ text-align: left; padding-left: 20px; letter-spacing: .01em; }
td.col-equipo{ text-align: left; padding-left: 20px; color: var(--text-dim); }
td.pts{ text-align: right; }
.gd-pos{ color: var(--win); }
.gd-neg{ color: var(--loss); }

.club-cell{ display: flex; align-items: center; gap: 11px; }
.club-avatar{
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--card-2), var(--bg-soft));
  border: 1px solid var(--border-strong);
  color: var(--gold);
  font-family: "Oswald", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.club-name{ font-weight: 600; color: #fff; }
.club-logo{
  object-fit: cover;
  background: var(--bg-soft);
}

.stat-pill{
  display: inline-block;
  min-width: 42px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.stat-pill.gd-pos{ background: rgba(76,175,125,.12); color: var(--win); }
.stat-pill.gd-neg{ background: rgba(217,97,79,.12); color: var(--loss); }
.stat-pill.gd-zero{ background: rgba(255,255,255,.05); color: var(--text-dim); }

.pts-pill{
  display: inline-block;
  min-width: 36px;
  padding: 5px 12px;
  border-radius: 7px;
  background: var(--gold-soft);
  color: var(--gold-strong);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
}

.pos-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px; height: 27px;
  border-radius: 50%;
  font-family: "Oswald", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
}
.pos-badge.tier-1{ background: linear-gradient(145deg, var(--gold-strong), var(--gold)); border-color: var(--gold); color: #241c07; box-shadow: 0 0 0 3px var(--gold-soft); }
.pos-badge.tier-2{ background: linear-gradient(145deg, #e2e5ea, var(--medal-silver)); border-color: var(--medal-silver); color: #23262b; }
.pos-badge.tier-3{ background: linear-gradient(145deg, #dba36c, var(--medal-bronze)); border-color: var(--medal-bronze); color: #2a1a0d; }

tr.zona-semis{ background: linear-gradient(90deg, var(--gold-soft), transparent 75%); }
tr.zona-semis:nth-child(even){ background: linear-gradient(90deg, var(--gold-soft), rgba(255,255,255,.014) 75%); }
tr.zona-semis::after{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}

.legend{ margin: 14px 4px 0; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-gold{ background: var(--gold); }

/* ---------- Matches ---------- */
.matches-list{ display: flex; flex-direction: column; gap: 10px; }

.jornada-heading{
  font-size: 13px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  margin: 22px 2px 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.jornada-heading:first-child{ margin-top: 2px; }

.match-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.match-tags{ display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.match-liga{
  font-family: "Oswald", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  background: var(--gold-soft);
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
  text-align: center;
}
.match-cancha{
  font-family: "Inter", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 5px;
  text-align: center;
}
.match-teams{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  font-family: "Oswald", sans-serif;
  font-size: 14.5px;
  color: #fff;
  flex-wrap: wrap;
}
.match-team{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 92px;
  flex-shrink: 0;
}
.match-avatar{
  width: 38px;
  height: 38px;
  font-size: 12.5px;
}
.match-team-name{
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.match-score{
  font-weight: 700;
  color: var(--gold);
  font-size: 16px;
  padding: 2px 10px;
  background: var(--bg-soft);
  border-radius: 6px;
  flex-shrink: 0;
  align-self: center;
}
.match-when{
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  color: var(--text-dim);
  min-width: 70px;
}
.match-when strong{ display: block; color: var(--text); font-size: 13px; }

@media (max-width: 560px){
  .match-card{ flex-wrap: wrap; }
  .match-teams{ order: 3; flex: 1 1 100%; width: 100%; justify-content: space-between; }
  .match-when{ text-align: left; }
}

/* ---------- Footer ---------- */
.site-footer{
  text-align: center;
  padding: 26px 20px 40px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: .06em;
  border-top: 1px solid var(--border);
}
.site-footer p{ margin: 0 0 8px; }
.site-footer p:last-child{ margin-bottom: 0; }
.footer-credit{ font-size: 11.5px; opacity: .8; }
.footer-credit a{
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s ease;
}
.footer-credit a:hover{ color: var(--gold-strong); text-decoration: underline; }

/* ---------- Mobile table: horizontal scroll, pos+club pinned (compact) ---------- */
@media (max-width: 640px){
  .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.standings{ min-width: 420px; }
  table.standings.scorers{ min-width: 440px; }

  /* pin position + club/jugador so context stays visible while stats scroll */
  table.standings thead th.col-pos,
  table.standings thead th.col-club,
  table.standings tbody td.col-pos,
  table.standings tbody td.col-club{
    position: sticky;
    background: var(--card);
  }
  table.standings thead th.col-pos,
  table.standings tbody td.col-pos{ left: 0; z-index: 2; width: 40px; padding-left: 8px !important; padding-right: 4px !important; }
  table.standings thead th.col-club,
  table.standings tbody td.col-club{ left: 40px; z-index: 2; width: 120px; max-width: 120px; padding-left: 8px !important; padding-right: 8px !important; }
  table.standings thead th.col-pos,
  table.standings thead th.col-club{ background: var(--card-2); z-index: 3; }

  /* compact stat columns so more of them are visible before scrolling */
  table.standings thead th:not(.col-pos):not(.col-club):not(.col-admin){ padding-left: 5px; padding-right: 5px !important; font-size: 9.5px; }
  table.standings tbody td:not(.col-pos):not(.col-club):not(.col-admin){ padding-left: 5px; padding-right: 5px !important; font-size: 13px; }
  table.standings thead th.col-last{ padding-right: 12px !important; }
  table.standings tbody td.pts{ padding-right: 12px !important; }

  .pos-badge{ width: 24px; height: 24px; font-size: 11px; }
  .club-cell{ gap: 7px; }
  .club-avatar{ width: 24px; height: 24px; font-size: 9px; }
  .club-name{
    display: inline-block;
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13.5px;
  }
  .stat-pill{ min-width: 34px; padding: 3px 6px; font-size: 11.5px; }
  .pts-pill{ min-width: 28px; padding: 4px 8px; font-size: 13px; }

  table.standings tbody tr:nth-child(even) td.col-pos,
  table.standings tbody tr:nth-child(even) td.col-club{ background: var(--card-2); }

  tr.zona-semis td.col-pos,
  tr.zona-semis td.col-club{ background: #221c10; }
  tr.zona-semis:nth-child(even) td.col-pos,
  tr.zona-semis:nth-child(even) td.col-club{ background: #251f13; }
  tr.zona-semis::after{ display: none; }

  /* subtle divider + fade hint so it reads as scrollable, not cut off */
  table.standings tbody td.col-club{ border-right: 1px solid var(--border); }
  table.standings thead th.col-club{ border-right: 1px solid var(--border); }
  table.standings tbody td.col-club::after{
    content: "";
    position: absolute;
    top: 0; right: -16px; bottom: 0;
    width: 16px;
    background: linear-gradient(90deg, rgba(0,0,0,.3), transparent);
    pointer-events: none;
  }
}