/* ============================================================
   smgr · css/pages/registros_historicos.css
   Estilos SOLO de registros_historicos.php (records de toda la
   historia ACB). Tokens en css/tokens.css; componentes base en
   css/rincon.css. Reutiliza .table / .card / .pos-badge globales.
   ============================================================ */

/* ---------- Cabecera de página ---------- */
.rh-head { margin-top: var(--sp-5); }
.rh-head h1 {
  font-family: var(--score); font-size: 26px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink); margin-top: 2px;
}
.rh-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.rh-head .sub strong { color: var(--ink); font-weight: 600; }

/* ---------- Selector de modo (segmented de submits) ---------- */
.rh-modes {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4);
}
.rh-mode {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r-pill);
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  white-space: nowrap;
}
.rh-mode:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }
.rh-mode.is-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.rh-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Barra de filtros ---------- */
.rh-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--sp-4); padding: var(--sp-4); margin-top: var(--sp-4);
}
.rh-filters .fgroup { display: flex; flex-direction: column; gap: 6px; }
.rh-filters .flabel {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.rh-filters select,
.rh-filters input[type="number"],
.rh-filters input[type="date"] {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background-color: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 6px 12px;
}
.rh-filters select {
  padding-right: 32px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6577' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.rh-filters input[type="number"] { width: 100px; }
.rh-filters select:focus-visible,
.rh-filters input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rh-filters .btn { padding: 7px 16px; font-size: 13px; }
.rh-filters__reset {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  align-self: center; white-space: nowrap;
}
.rh-filters__reset:hover { color: var(--down); }

/* Segmented de submits dentro del form (total/media, ámbito, tipo) */
.rh-seg {
  display: inline-flex; background: var(--ground);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px;
}
.rh-seg a {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: var(--r-pill);
  color: var(--muted); white-space: nowrap;
}
.rh-seg a:hover { color: var(--ink); text-decoration: none; }
.rh-seg a.is-active { background: var(--ink); color: #fff; }
.rh-seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Presets (chips-enlace) ---------- */
.rh-presets {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3);
}
.rh-preset {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--ground); border: 1px solid var(--line);
  white-space: nowrap;
}
.rh-preset:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }
.rh-preset.is-active {
  color: var(--ink); background: var(--accent-soft);
  border-color: var(--accent); font-weight: 700;
}
.rh-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Tabla de resultados ---------- */
.rh-section { margin-top: var(--sp-6); }
.rh-section .section-head h2 {
  font-family: var(--score); font-size: 19px; font-weight: 700; color: var(--ink);
}
.rh-wrap {
  position: relative; overflow: auto; max-height: 76vh;
  border-radius: var(--r-card);
}
.rh-table { min-width: 780px; }
.rh-table th.stick-1, .rh-table td.stick-1 {
  position: sticky; left: 0; min-width: 180px; max-width: 220px;
  box-shadow: 4px 0 8px -4px rgba(19, 28, 46, .14);
}
.rh-table th.stick-1 { z-index: 4; top: 0; background: var(--ink); }
.rh-table td.stick-1 { background: var(--surface); z-index: 2; }
.rh-table tbody tr:nth-child(even) td.stick-1 { background: var(--zebra); }
.rh-table tbody tr:hover td.stick-1 { background: var(--hover); }
.rh-table td.stick-1 .player-cell a { overflow: hidden; text-overflow: ellipsis; }

/* Filas top-3 resaltadas */
.rh-table tbody tr.is-top td { background: var(--up-tint); }
.rh-table tbody tr.is-top:nth-child(even) td.stick-1,
.rh-table tbody tr.is-top td.stick-1 { background: var(--up-tint); }

/* Valor principal destacado */
.rh-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Columna de ranking */
.rh-rk { font-weight: 700; color: var(--muted); font-size: 13px; }
.rh-rk-1 { color: var(--accent-deep); font-size: 15px; }
.rh-rk-2 { color: #7C8797; font-size: 14px; }
.rh-rk-3 { color: #B0733A; font-size: 14px; }

/* Celda de equipo (escudo + código) */
.rh-team { display: inline-flex; align-items: center; gap: 6px; }
.rh-team a { color: var(--ink); font-weight: 600; }
.rh-team a:hover { color: var(--accent-deep); text-decoration: none; }

/* Badge de jugador en activo */
.rh-active {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  border-radius: var(--r-pill); background: var(--up); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; vertical-align: middle;
}

/* Textos secundarios */
.rh-season { font-size: 11.5px; color: var(--muted); }
.rh-teams { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.rh-note { margin-top: var(--sp-3); }

/* Estados de carga / vacío */
.rh-state {
  text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px;
}
.rh-spinner {
  display: inline-block; width: 22px; height: 22px; margin-right: 8px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; vertical-align: middle; animation: rh-spin .8s linear infinite;
}
@keyframes rh-spin { to { transform: rotate(360deg); } }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .rh-head h1 { font-size: 22px; }
  .rh-filters { gap: var(--sp-3); }
  .rh-hide-sm { display: none; }
  .rh-table { min-width: 0; font-size: 12.5px; }
  .rh-table th, .rh-table td { padding: 7px 8px; }
  .rh-table th.stick-1, .rh-table td.stick-1 { min-width: 140px; max-width: 150px; }
}