/*
 * BocaStats — historial-hub.css
 * CSS exclusivo para /historial/ (hub de rivales)
 * Sistema de tokens idéntico a fixture-v2.css / historial-v2.css
 * 11/03/2026
 */
:root {
  --bg:     #0b0e17;
  --bg2:    #111520;
  --bg3:    #161b2a;
  --card:   #1a2035;
  --border: #252d45;
  --gold:   #f5c518;
  --green:  #22c55e;
  --red:    #ef4444;
  --slate:  #8b9cbf;
  --white:  #e8edf8;
  --dim:    #5a6480;
  --r:      10px;
  --f:      'Montserrat', sans-serif;
}
body { background:var(--bg); color:var(--white); font-family:var(--f); font-size:14px; }

/* ── HERO ── */
.ht-hero { position:relative; min-height:150px; display:flex; align-items:flex-end; overflow:hidden; border-bottom:2px solid var(--gold); background:linear-gradient(135deg,#060a14 0%,#0d1526 60%,#060a14 100%); }
.ht-hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(245,197,24,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(245,197,24,.03) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.ht-hero::before { content:''; position:absolute; right:3%; top:50%; transform:translateY(-50%); width:160px; height:160px; background:url('/assets/escudos/boca.webp') center/contain no-repeat; opacity:.04; pointer-events:none; }
.ht-hero-inner { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:1.5rem 1.75rem 1.25rem; width:100%; }
.ht-eyebrow { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); margin-bottom:.4rem; }
.ht-h1 { font-family:'Oswald',sans-serif; font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; color:var(--white); line-height:1; text-transform:uppercase; margin-bottom:.5rem; }
.ht-h1 em { color:var(--gold); font-style:normal; }
.ht-hero-sub { font-size:.82rem; color:var(--slate); }
.ht-hero-sub strong { color:var(--white); }

/* ── KPI STRIP ── */
.ht-kpi-wrap { background:var(--bg2); border-bottom:1px solid var(--border); }
.ht-kpi-strip { max-width:1440px; margin:0 auto; padding:.75rem 1.75rem; display:flex; gap:2rem; flex-wrap:wrap; }
.ht-kpi { text-align:center; }
.ht-kpi-num { font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:700; color:var(--white); line-height:1; }
.ht-kpi-num.gold { color:var(--gold); }
.ht-kpi-num.green { color:var(--green); }
.ht-kpi-num.red { color:var(--red); }
.ht-kpi-lbl { font-size:.58rem; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); margin-top:.2rem; }

/* ── CONTROL BAR ── */
.ht-control-bar { background:var(--bg2); border-bottom:1px solid var(--border); padding:.6rem 1.75rem; }
.ht-control-inner { max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.ht-search-box { display:flex; align-items:center; gap:.5rem; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:.35rem .75rem; }
.ht-search-icon { color:var(--dim); flex-shrink:0; }
.ht-search-input { background:none; border:none; outline:none; color:var(--white); font-family:var(--f); font-size:.78rem; width:200px; }
.ht-search-input::placeholder { color:var(--dim); }
.ht-sep { width:1px; height:20px; background:var(--border); }
.ht-filter-btn { font-family:var(--f); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); background:var(--bg3); border:1px solid var(--border); border-radius:5px; padding:.3rem .7rem; cursor:pointer; transition:all .15s; }
.ht-filter-btn:hover { color:var(--white); border-color:var(--slate); }
.ht-filter-btn.active { color:var(--gold); border-color:var(--gold); background:rgba(245,197,24,.07); }
.ht-sort { background:var(--bg3); border:1px solid var(--border); color:var(--slate); font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .75rem; height:30px; border-radius:5px; outline:none; font-family:var(--f); cursor:pointer; }
.ht-count { font-size:.65rem; color:var(--dim); margin-left:auto; }
.ht-hint { font-size:.65rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.65rem; }

/* ── LAYOUT ── */
.ht-layout { max-width:1440px; margin:0 auto; padding:1.25rem 1.75rem 3rem; display:grid; grid-template-columns:1fr 270px; gap:1.5rem; align-items:start; }

/* ── GRID DE RIVALES ── */
.ht-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.75rem; }
.ht-grid .hidden { display:none !important; }
.ht-loading { text-align:center; padding:3rem; color:var(--dim); font-size:.85rem; grid-column:1/-1; }
.ht-no-results { display:none; text-align:center; padding:3rem; color:var(--dim); font-size:.85rem; grid-column:1/-1; }

/* ── RIVAL CARD ── */
.rival-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:1rem; display:flex; flex-direction:column; gap:.7rem; transition:transform .15s,border-color .2s; text-decoration:none; }
.rival-card:hover { transform:translateY(-2px); border-color:rgba(245,197,24,.3); }
.rival-header { display:flex; align-items:center; gap:.75rem; }
.rival-escudo { width:42px; height:42px; object-fit:contain; flex-shrink:0; }
.rival-info { flex:1; min-width:0; }
.rival-nombre { font-family:'Oswald',sans-serif; font-weight:700; font-size:.95rem; line-height:1.1; color:var(--white); text-transform:uppercase; letter-spacing:.03em; }
.rival-total { font-size:.65rem; color:var(--dim); margin-top:.15rem; }
.rival-pct { text-align:right; flex-shrink:0; }
.pct-num { font-family:'Oswald',sans-serif; font-size:1.4rem; font-weight:700; color:var(--gold); line-height:1; }
.pct-label { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
.rival-barra { display:flex; height:3px; border-radius:2px; overflow:hidden; gap:1px; }
.barra-v { background:var(--green); }
.barra-e { background:#ca8a04; }
.barra-d { background:var(--red); flex:1; }
.rival-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; }
.stat-item { text-align:center; padding:.4rem .2rem; background:var(--bg3); border-radius:5px; border:1px solid var(--border); }
.stat-num { font-family:'Oswald',sans-serif; font-weight:700; font-size:.9rem; line-height:1; color:var(--white); }
.stat-num.green { color:var(--green); }
.stat-num.red   { color:var(--red); }
.stat-num.gray  { color:var(--slate); }
.stat-num.blue  { color:var(--slate); font-size:.82rem; }
.stat-label { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--dim); margin-top:.15rem; }
.rival-forma { display:flex; align-items:center; gap:.35rem; }
.forma-label { font-size:.6rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
.forma-dot { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--f); font-weight:700; font-size:.55rem; color:#fff; opacity:.9; }
.forma-w { background:var(--green); }
.forma-e { background:#ca8a04; }
.forma-l { background:var(--red); }

/* ── SIDEBAR ── */
.ht-sidebar { display:flex; flex-direction:column; gap:.75rem; position:sticky; top:1.5rem; }
.ht-sb-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:1rem 1.15rem; }
.ht-sb-title { font-family:var(--f); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:.85rem; display:flex; align-items:center; gap:.45rem; }
.ht-sb-title::before { content:""; display:inline-block; width:3px; height:.65rem; background:var(--gold); border-radius:2px; }
.ht-sb-rival { font-family:'Oswald',sans-serif; font-size:.95rem; font-weight:700; color:var(--white); }
.ht-sb-fecha { font-size:.68rem; color:var(--dim); margin-top:.15rem; }
.ht-sb-hora  { font-size:.72rem; color:var(--gold); font-weight:700; margin-top:.1rem; }
.ht-sb-link { display:block; font-family:var(--f); font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--slate); padding:.5rem 0; border-bottom:1px solid var(--border); transition:color .15s; text-transform:uppercase; text-decoration:none; }
.ht-sb-link:last-child { border-bottom:none; padding-bottom:0; }
.ht-sb-link:hover { color:var(--gold); }
.ht-sb-link.gold { color:var(--gold); }
.ht-sb-escudo { width:32px; height:32px; object-fit:contain; }
.ht-sb-stat-row { display:flex; justify-content:space-between; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--border); font-size:.75rem; }
.ht-sb-stat-row:last-child { border-bottom:none; }
.ht-sb-stat-row span { color:var(--dim); }
.ht-sb-stat-row strong { color:var(--white); font-weight:700; }
.ht-sb-stat-row strong.green { color:var(--green); }
.ht-sb-stat-row strong.red   { color:var(--red); }

/* ── SIDEBAR NOTICIAS ── */
.ht-noticia { display:flex; flex-direction:column; gap:.25rem; padding:.6rem 0; border-bottom:1px solid var(--border); text-decoration:none; transition:color .15s; }
.ht-noticia:last-child { border-bottom:none; padding-bottom:0; }
.ht-noticia:hover .ht-noticia-title { color:var(--gold); }
.ht-noticia-cat { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gold); }
.ht-noticia-title { font-size:.78rem; font-weight:700; color:var(--white); line-height:1.35; }
.ht-noticia-fecha { font-size:.62rem; color:var(--dim); }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .ht-layout { grid-template-columns:1fr; }
  .ht-sidebar { display:none; }
}
@media(max-width:600px) {
  .ht-layout { padding:1rem 1rem 2.5rem; }
  .ht-grid { grid-template-columns:1fr; }
  .ht-kpi-strip { gap:1rem; }
}

/* ── PAGINACIÓN ── */
.ht-pag-btn {
  font-family:var(--f); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.55rem 1.4rem; border-radius:6px; cursor:pointer;
  transition:all .15s; border:1px solid var(--gold);
  color:var(--gold); background:rgba(245,197,24,.07);
}
.ht-pag-btn:hover { background:rgba(245,197,24,.15); }
.ht-pag-less {
  border-color:var(--border); color:var(--dim);
  background:var(--bg3);
}
.ht-pag-less:hover { color:var(--white); border-color:var(--slate); background:var(--bg2); }

/* ── PAGINACIÓN ── */
.ht-pag-btn {
  font-family:var(--f); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.55rem 1.4rem; border-radius:6px; cursor:pointer;
  transition:all .15s; border:1px solid var(--gold);
  color:var(--gold); background:rgba(245,197,24,.07);
}
.ht-pag-btn:hover { background:rgba(245,197,24,.15); }
.ht-pag-less {
  border-color:var(--border); color:var(--dim);
  background:var(--bg3);
}
.ht-pag-less:hover { color:var(--white); border-color:var(--slate); background:var(--bg2); }

/* ── Bloque SEO hub ───────────────────────────────────────────── */
.ht-seo-text {
  background: var(--ink2, #0e0e1e);
  border-bottom: 1px solid var(--edge, #1e1e2e);
}
.ht-seo-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ht-seo-inner p {
  font-size: .93rem;
  line-height: 1.75;
  color: var(--slate, #8888aa);
  margin: 0;
}
.ht-seo-inner strong {
  color: var(--ice, #e0e0f0);
  font-weight: 600;
}
@media (max-width: 768px) {
  .ht-seo-inner { padding: 1rem; }
}