/* ══════════════════════════════════════════════════════════════
   ESTADÍSTICAS DEL PARTIDO
   I Memorial Urbano González Escapa · memorialurbano.com
   Diseño y desarrollo: INTDEA
   Se carga después de style.css y reutiliza sus variables.
   ══════════════════════════════════════════════════════════════ */

.sec--stats{background:linear-gradient(180deg,var(--carbon),#0E0E12 40%,var(--carbon))}
.sec--stats .lead{margin-bottom:clamp(2rem,4.5vw,3rem)}

/* ---------- 1. MARCADOR Y CUARTOS ---------- */
.board2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1rem,3vw,2.4rem);padding:clamp(1.2rem,3vw,2rem);border-radius:var(--r);
  border:1px solid rgba(201,162,39,.3);background:linear-gradient(150deg,#17171C,#0E0E11);
  box-shadow:0 34px 70px -50px #000}
.board2__side{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.board2__side img{width:clamp(46px,7vw,68px);height:auto;object-fit:contain;object-position:bottom}
.board2__side b{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-60);
  font-weight:700}
.board2__sc{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 88;color:var(--bone-40)}
.board2__sc--win{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent}

.qt{display:grid;grid-auto-flow:column;gap:.4rem}
.qt li{display:flex;flex-direction:column;align-items:center;gap:.2rem;
  min-width:clamp(3.1rem,7vw,4.4rem);padding:.6rem .35rem;border-radius:10px;
  border:1px solid var(--line);background:rgba(242,238,230,.03)}
.qt li.is-best{border-color:rgba(201,162,39,.45);background:rgba(201,162,39,.08)}
.qt__n{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-40);font-weight:800}
.qt__sc{display:flex;align-items:baseline;gap:.22rem;font-variant-numeric:tabular-nums}
.qt__sc b{font-size:clamp(.95rem,2.4vw,1.15rem);font-weight:900;color:var(--bone)}
.qt__sc i{font-style:normal;color:var(--bone-40);font-size:.8em}
.qt__run{font-size:.58rem;letter-spacing:.06em;color:var(--bone-40);font-variant-numeric:tabular-nums}

/* ---------- 2. DATOS DESTACADOS ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.6vw,1rem);
  margin:clamp(1rem,2.5vw,1.4rem) 0 0;text-align:center}
.facts li{padding:1.1rem .8rem;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(242,238,230,.05),rgba(242,238,230,.01))}
.facts b{display:block;font-size:clamp(1.3rem,3.6vw,1.9rem);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts span{display:block;margin-top:.5rem;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-40);line-height:1.4}

/* ---------- 3. GRÁFICO DE EVOLUCIÓN ---------- */
.chart{margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;padding:clamp(1.1rem,2.6vw,1.7rem);
  border-radius:var(--r);border:1px solid var(--line);background:var(--stone)}
.chart figcaption{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--gold);margin-bottom:1rem}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.ch__grid{stroke:rgba(242,238,230,.09);stroke-width:1}
.ch__sep{stroke:rgba(242,238,230,.14);stroke-width:1;stroke-dasharray:3 4}
.ch__ylab,.ch__xlab{fill:rgba(242,238,230,.4);font-family:var(--ff);font-size:10px;font-weight:700;
  letter-spacing:.08em}
.ch__ylab{text-anchor:end}
.ch__xlab{text-anchor:middle;letter-spacing:.16em}
.ch__area{fill:rgba(201,162,39,.1)}
.ch__line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ch__line--mad{stroke:var(--gold)}
.ch__line--bas{stroke:#8C93A8}
.ch__dot{stroke:#0E0E11;stroke-width:1.5}
.ch__dot--mad{fill:var(--gold-lt)}
.ch__dot--bas{fill:#AEB4C6}
.chart__key{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0 0;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.chart__k{display:inline-flex;align-items:center;gap:.45rem;color:var(--bone-60)}
.chart__k::before{content:"";width:16px;height:3px;border-radius:2px;background:currentColor}
.chart__k--mad{color:var(--gold-lt)}
.chart__k--bas{color:#AEB4C6}

/* ---------- 4. CARA A CARA ---------- */
.cmp{margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;padding:clamp(1.2rem,2.8vw,1.9rem);
  border-radius:var(--r);border:1px solid var(--line);background:var(--stone)}
.cmp__title{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--gold);margin:0 0 1.2rem}
.cmp__list{display:grid;gap:1rem}
.cmp__row{display:grid;grid-template-columns:4.2rem 1fr 4.2rem;align-items:center;gap:.8rem}
.cmp__side{font-size:clamp(.8rem,2vw,.95rem);font-weight:800;font-variant-numeric:tabular-nums}
.cmp__side--mad{text-align:right;color:var(--gold-lt)}
.cmp__side--bas{text-align:left;color:#AEB4C6}
.cmp__bars{display:grid;gap:.24rem}
.cmp__label{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-40);
  text-align:center;font-weight:700;margin-bottom:.1rem}
.cmp__bar{display:block;height:6px;border-radius:3px;background:rgba(242,238,230,.07);overflow:hidden}
.cmp__fill{display:block;height:100%;border-radius:3px;
  transform-origin:left center;animation:cmpIn .9s var(--ease) both}
.cmp__fill--mad{background:var(--grad-gold)}
.cmp__fill--bas{background:linear-gradient(90deg,#5C6478,#AEB4C6)}
@keyframes cmpIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 5. TABLAS ---------- */
.st{margin:clamp(1.8rem,4vw,2.6rem) 0 0}
.st__tabs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem}
.st__tab{padding:.62rem 1.15rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  background:rgba(242,238,230,.04);color:var(--bone-60);font-family:var(--ff);
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s,background .25s,border-color .25s}
.st__tab:hover{color:var(--bone)}
.st__tab.is-on{background:var(--grad-gold);color:#14100A;border-color:transparent}
.st__all{margin-left:auto;padding:.55rem .9rem;border:1px dashed var(--line);border-radius:999px;
  cursor:pointer;background:none;color:var(--bone-40);font-family:var(--ff);
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s,border-color .25s}
.st__all:hover{color:var(--gold-lt);border-color:rgba(201,162,39,.5)}
.st__all[aria-pressed="true"]{color:var(--gold-lt);border-style:solid;border-color:rgba(201,162,39,.5)}

.st__panel{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r);border:1px solid var(--line);background:var(--stone)}
.st__panel.is-hidden{display:none}

.st__table{width:100%;border-collapse:collapse;font-size:.86rem;
  font-variant-numeric:tabular-nums;min-width:100%}
.st__table th,.st__table td{padding:.62rem .5rem;text-align:right;white-space:nowrap}
.st__table thead th{position:sticky;top:0;z-index:2;cursor:pointer;user-select:none;
  background:#15151A;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--bone-40);border-bottom:1px solid var(--line);
  transition:color .2s,background .2s}
.st__table thead th:hover{color:var(--gold-lt);background:#1B1B21}
.st__table thead th.is-sorted{color:var(--gold)}
.st__table thead th.is-sorted::after{content:" ▾";font-size:.9em}
.st__table thead th.is-sorted.is-asc::after{content:" ▴"}
.st__num{width:2.4rem;text-align:center!important;color:var(--bone-40);font-size:.72rem}
.st__name{text-align:left!important;font-weight:600;color:var(--bone);white-space:nowrap;
  padding-left:.85rem!important}
.st__star{font-style:normal;color:var(--gold);font-size:.72em;margin-left:.25rem;vertical-align:.1em}
.st__table tbody tr{border-bottom:1px solid rgba(242,238,230,.05);transition:background .2s}
.st__table tbody tr:hover{background:rgba(201,162,39,.06)}
.st__table tbody tr.is-starter .st__name{color:var(--bone)}
.st__pts{font-weight:800;color:var(--bone)}
.st__val{font-weight:900;color:var(--gold-lt);padding-right:.85rem!important}
.st__team td,.st__team th{color:var(--bone-40);font-style:italic;font-weight:600;
  border-top:1px solid var(--line)}
.st__totals td,.st__totals th{background:rgba(201,162,39,.08);font-weight:900;color:var(--bone);
  border-top:1px solid rgba(201,162,39,.3)}
.st__totals .st__val{color:var(--gold)}
.st__coach{margin:.9rem 0 0;font-size:.72rem;letter-spacing:.06em;color:var(--bone-40);
  padding-left:.2rem}
.st__coach b{color:var(--bone-60);font-weight:700}
.st__source{margin:1.4rem 0 0;font-size:.7rem;line-height:1.6;color:rgba(242,238,230,.32)}

/* la vista compacta esconde las columnas secundarias */
.st:not(.is-full) .st__opt{display:none}

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width:900px){
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .board2{grid-template-columns:1fr 1fr;gap:1rem 1.4rem}
  .qt{grid-column:1/-1;grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}
  .board2__side img{width:44px}
  .cmp__row{grid-template-columns:3.4rem 1fr 3.4rem;gap:.5rem}
  .st__all{margin-left:0;width:100%;text-align:center}
  .st__table{font-size:.8rem}
  .st__table th,.st__table td{padding:.55rem .38rem}
}
@media (max-width:480px){
  .qt li{min-width:0;padding:.5rem .2rem}
  .qt__run{font-size:.54rem}
  .st__name{max-width:8.5rem;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-motion:reduce){
  .cmp__fill{animation:none}
}