/* Ranking público de combinaciones históricas – estilos independientes del tema */
.history-results-section { margin-bottom: 28px; }
.history-top-section { margin-bottom: 70px; }
.history-top-shell { padding:32px; border:1px solid #dce4f1; border-radius:22px; background:#fff; box-shadow:0 12px 30px rgba(16,41,82,.06); }
.history-top-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; }
.history-top-heading h2 { font-size:clamp(23px,3vw,33px); letter-spacing:-.025em; color:#172d55; line-height:1.15; margin:10px 0; }
.history-top-heading p { max-width:720px; margin:0; color:#61738f; line-height:1.6; }
.history-top-symbol { display:grid; place-items:center; flex:0 0 68px; width:68px; height:68px; border-radius:19px; font-size:34px; color:#866018; background:#fff0c2; }
.history-top-controls { display:flex; flex-wrap:wrap; gap:20px 30px; padding:20px 22px; background:#f5f8fe; border:1px solid #e1eaf5; border-radius:16px; }
.history-top-filter { min-width:0; display:grid; gap:10px; }
.history-top-filter-label { font-size:13px; font-weight:800; color:#3b567b; }
.history-top-pills { display:flex; flex-wrap:wrap; gap:7px; }
.history-top-pill { appearance:none; border:1px solid #d2deee; background:#fff; color:#3c567b; padding:10px 13px; border-radius:9px; font-weight:750; font-size:13px; cursor:pointer; }
.history-top-pill:hover { border-color:#347fc6; }
.history-top-pill.is-active { background:#1e55a2; border-color:#1e55a2; color:#fff; }
.history-top-pill:focus-visible,.history-top-more:focus-visible { outline:3px solid #f3bc3d; outline-offset:2px; }
.history-top-meta { margin:24px 0 14px; color:#637793; font-size:13px; line-height:1.5; }
.history-top-list { display:grid; gap:10px; min-height:70px; }
.history-top-placeholder { background:#f4f8fd; border:1px dashed #d8e4f1; border-radius:13px; padding:24px; text-align:center; color:#547094; margin:0; }
.history-top-error { color:#9c322d; background:#fff5f3; }
.history-top-item { display:flex; gap:18px; align-items:center; border:1px solid #e0e8f4; border-radius:15px; padding:13px 18px; background:#fff; }
.history-top-item:nth-child(1) { border-color:#b8d0f2; background:#f8fbff; }
.history-top-position { flex:0 0 30px; width:30px; color:#7a8ca4; text-align:center; font-size:17px; font-weight:850; }
.history-top-position--medal { color:#1b59a9; }
.history-top-balls { flex:1; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.history-top-ball { display:inline-flex; align-items:center; justify-content:center; flex:0 0 35px; width:35px; height:35px; background:#1f5aaa; color:#fff; border-radius:50%; font-size:13px; font-weight:800; }
.history-top-ball--star { background:#ffdc71; color:#6a4e18; flex-direction:column; gap:0; line-height:1; font-size:10px; }
.history-top-ball--star span { font-size:10px; line-height:1; }
.history-top-separator { color:#8fa1b9; font-weight:800; margin:0 4px; }
.history-top-frequency { min-width:125px; display:grid; gap:3px; text-align:right; }
.history-top-frequency strong { color:#1c5197; font-size:17px; white-space:nowrap; }
.history-top-frequency small { font-size:12px; color:#73839a; }
.history-top-bottom { margin-top:18px; }
.history-top-bottom p { color:#75849a; font-size:13px; line-height:1.6; margin:20px 0 0; }
.history-top-more { border:1px solid #c4d7f1; background:#eef5ff; border-radius:11px; padding:12px 18px; font-weight:800; color:#1b549d; cursor:pointer; }
.history-top-more[hidden] { display:none; }
@media (max-width:640px) {
  .history-top-shell { padding:18px; border-radius:16px; }
  .history-top-heading { align-items:flex-start; }
  .history-top-symbol { flex-basis:46px; width:46px; height:46px; font-size:25px; border-radius:14px; }
  .history-top-controls { padding:14px; gap:17px; }
  .history-top-filter { width:100%; }
  .history-top-pill { flex:1; font-size:12px; padding:10px 8px; }
  .history-top-item { padding:13px 11px; gap:9px; align-items:flex-start; flex-wrap:wrap; }
  .history-top-position { flex:0 0 23px; text-align:left; padding-top:8px; }
  .history-top-ball { flex-basis:30px; width:30px; height:30px; font-size:12px; }
  .history-top-balls { gap:5px; }
  .history-top-frequency { text-align:left; padding-left:32px; width:100%; min-width:0; display:flex; justify-content:space-between; align-items:center; gap:6px; }
  .history-top-frequency strong { font-size:15px; }
  .history-top-frequency small { font-size:11px; }
}