/* Historial público (Small Leagues y Big Leagues) con la piel de la web: va después de /assets/sp.css y usa sus colores, letras y
   medidas (auditoría 19-oct: antes, otra paleta con acento cian, otra cabecera y una barra «Volver a sharpspicks.io»). */
.hist { padding: 0 0 72px; }
.hist .ic { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.hist .ic-grande { width: 22px; height: 22px; }

/* periodo */
.period-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.period-btn, .chart-btn { font: 500 13px/1 var(--f-text); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--ink-2); cursor: pointer; }
.period-btn:hover, .chart-btn:hover { color: var(--ink); border-color: var(--ink); }
.period-btn.active, .chart-btn.active { background: var(--ink); color: #0d0d0d; border-color: var(--ink); }

/* tarjetas */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stat-card { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.stat-label { font: 600 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stat-value { font: 700 1.55rem/1.15 var(--f-display); color: var(--ink); margin-top: 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
/* (no .red: en sp.css es la píldora de las redes de pago) */
.sube { color: var(--up) !important; } .baja { color: var(--down) !important; } .medio { color: var(--amber) !important; }
.glosario { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.glosario b { color: var(--ink); font-weight: 600; }

/* pestañas */
.tabs { display: flex; gap: 2px; margin: 28px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: 600 14.5px/1.2 var(--f-text); color: var(--ink-3); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--acc); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* tabla */
.tabla-hist { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); }
.hist table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hist th { text-align: left; font: 600 11px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.hist td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.hist tr:last-child td { border-bottom: 0; }
.hist td strong { color: var(--ink); font-weight: 600; }
.hist .liga { color: var(--ink-3); }
.hist .col-dep { width: 1%; }
.hist td.pl { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.odds-val { font: 600 13.5px/1 var(--f-mono); color: var(--ink); }
.pick-pill { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--s2); color: var(--ink); font-size: 13px; }
.pick-desde { font-size: 12px; opacity: .8; white-space: nowrap; }   /* (4-nov) «(from 1-0)»: hándicap asiático en vivo */
.badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font: 600 11.5px/1.3 var(--f-text); white-space: nowrap; }
.badge-cat { margin-left: 4px; font-size: 10px; padding: 1px 5px; }
.badge-win { background: rgba(63, 196, 63, .16); color: var(--up); }
.badge-loss { background: rgba(240, 122, 122, .16); color: var(--down); }
.badge-half-win { background: rgba(63, 196, 63, .08); color: var(--up); border: 1px dashed rgba(63, 196, 63, .45); }
.badge-half-loss { background: rgba(240, 122, 122, .08); color: var(--down); border: 1px dashed rgba(240, 122, 122, .45); }
.badge-void { background: rgba(163, 161, 153, .16); color: var(--ink-3); }
.badge-pending { background: var(--acc-bg); color: var(--acc); }
.sport-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font: 600 11px/1.3 var(--f-text); white-space: nowrap; border: 1px solid var(--line-2); color: var(--ink-2); }
.sport-futbol { color: #7fd68a; } .sport-basket { color: #f3a96a; } .sport-tennis { color: #e7dc73; } .sport-baseball { color: #9fc2ff; }
.sport-hockey { color: #8fd8e6; } .sport-mma { color: #f08f8f; } .sport-nfl { color: #c9a6ff; } .sport-cycling { color: #b7e08a; } .sport-esports { color: #f2a6e0; }
.cargar-mas { margin-top: 16px; }
.cargar-mas[hidden] { display: none; }
.empty { padding: 28px; text-align: center; color: var(--ink-3); }
.empty[hidden] { display: none; }
.desliza { display: none; }

/* por deporte y mercado */
.sports-grid h3 { font: 600 1.05rem/1.3 var(--f-display); margin: 6px 0 14px; }
.sports-grid h3 + .breakdown-cards + h3 { margin-top: 28px; }
.breakdown-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.sport-card { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.sport-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sport-icon { display: inline-flex; color: var(--ink-2); }
.sport-icon .ic { width: 20px; height: 20px; }
.sport-name { font: 600 13px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--ink); }
.sport-stats { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.sport-record { font-size: 14px; font-weight: 600; color: var(--ink); }
.sport-wr { font-size: 13px; color: var(--ink-3); }
.sport-pl { font-size: 15px; font-weight: 700; }
.sport-bar-multi { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--s3); }
.sport-bar-w { background: var(--up); } .sport-bar-l { background: var(--down-bar); } .sport-bar-v { background: #6b6b66; }

/* gráfica */
.chart-container { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.chart-buttons { display: flex; gap: 6px; margin-bottom: 12px; }
#pl-chart { display: block; max-width: 100%; }

@media (max-width: 768px) {
  .desliza { display: block; margin: 0 0 8px; font: 600 12.5px/1.3 var(--f-text); color: var(--ink-3); }
  .tabla-hist table { width: max-content; min-width: 100%; }
  .tabla-hist td:nth-child(4) { min-width: 210px; max-width: 260px; white-space: normal; }
  .tabla-hist td:nth-child(5) { min-width: 150px; }
  .stat-value { font-size: 1.3rem; }
}