/* ============================================================
   smgr · rincon.css — design system del rediseño "Foco" (E2)
   Extraído de prototipos/direccion-e2.html con la skin CLARA
   aprobada aplicada por defecto a hero / stat-cards / equipo
   ideal. Drawer y banda de registro siguen oscuros SIEMPRE.
   Requiere tokens.css cargado antes.

   Índice:
     1. Base y tipografía
     2. Utilidades y átomos (chips, escudos, racha, tarjeta)
     3. Header + drawer + tira de equipos
     4. Tarjetas y tablas (card-bar, card-foot, table, gamelog)
     5. Componentes de portada
     6. Componentes de ficha de jugador
     7. Share sheet
     8. Footer
     9. Responsive
   ============================================================ */

/* ---------- 1. BASE Y TIPOGRAFÍA ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* El atributo [hidden] debe ganar siempre: si no, un display:grid/flex de autor
   lo anula y los paneles con toggle (Tarjetas/Tabla, tabs…) no se ocultan. */
[hidden] { display: none !important; }

/* Autocompletado general de jugadores (rincon.js módulo 11; p.ej. comparador). */
.ac-pop {
  position: absolute; z-index: 600; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input);
  box-shadow: var(--shadow-pop); max-height: 280px; overflow-y: auto; min-width: 200px;
}
.ac-pop[hidden] { display: none; }
.ac-pop__item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.ac-pop__item.is-active, .ac-pop__item:hover { background: var(--hover); }
.ac-pop__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-pop__sub { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-pop__price { color: var(--ink); }
.ac-pop__tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); flex: none; }
.ac-pop__crest { width: 18px; height: 18px; object-fit: contain; flex: none; }
.ac-pop__hicon { flex: none; width: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.ac-pop__item .pos-badge { flex: none; }
/* Separador de categoría "Jugadores históricos" */
.ac-pop__cat {
  padding: 6px 10px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--line); margin-top: 3px;
}
.ac-pop li:first-child.ac-pop__cat { border-top: none; margin-top: 0; }

/* Tooltip flotante de gráficas (lo posiciona rincon.js, módulo 10). */
.chart-tip {
  position: fixed; z-index: 600; pointer-events: none;
  max-width: 240px; padding: 6px 9px; border-radius: 8px;
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3;
  box-shadow: var(--shadow-pop); white-space: nowrap;
}
/* El elemento con data-tip debe indicar que es interactivo. */
[data-tip] { cursor: default; }
svg .chart-hit rect { cursor: default; }

/* ---------- Modal de detalle de jugador (GLOBAL) ----------
   Shell impreso por footer.php con $show_player_modal; lo abre rincon.js.
   Usado por directo, tuequipo y records — por eso vive aquí, no en una page CSS. */
.player-modal-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(19,28,46,.55);
  display: none; align-items: flex-start; justify-content: center;
  padding: var(--sp-4); overflow-y: auto;
}
body.player-modal-open .player-modal-overlay { display: flex; }
.player-modal {
  background: var(--surface); border-radius: var(--r-focus);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 640px; margin: auto;
}
.player-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface);
  border-radius: var(--r-focus) var(--r-focus) 0 0; z-index: 1;
}
.player-modal__head h3 { font-family: var(--score); font-size: 19px; font-weight: 700; }
.player-modal__close { padding: 6px; border-radius: 8px; display: flex; color: var(--muted); }
.player-modal__close:hover { background: var(--hover); color: var(--ink); }
.player-modal__body { padding: var(--sp-5); }
.player-modal__loading, .player-modal__error {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center; color: var(--muted); padding: var(--sp-6) var(--sp-4);
}
.player-modal__error { color: var(--down); }
.player-modal__spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: pm-spin .8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player-modal__spinner { animation: none; } }
/* Acota el HTML legacy (Bootstrap 3) del endpoint get_player_info.php. */
.player-modal__legacy .row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.player-modal__legacy [class^="col-"], .player-modal__legacy [class*=" col-"] {
  padding-left: 8px; padding-right: 8px; box-sizing: border-box;
}
.player-modal__legacy .col-md-12 { width: 100%; }
.player-modal__legacy .col-md-6 { width: 50%; }
.player-modal__legacy .col-xs-6 { width: 50%; }
.player-modal__legacy .col-xs-4 { width: 33.333%; }
.player-modal__legacy .col-xs-3 { width: 25%; }
.player-modal__legacy img { max-width: 100%; }
.player-modal__legacy .badge { display: inline-block; color: #fff; }
@media (max-width: 560px) {
  .player-modal__legacy .col-md-6 { width: 100%; }
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ground);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.num { font-variant-numeric: tabular-nums; }
.mt-6 { margin-top: var(--sp-6); }
.txt-down-dark { color: var(--down); }
.score-num { font-family: var(--score); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.up { color: var(--up); }
.down { color: var(--down); }
.nowrap { white-space: nowrap; }

.label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.label--amber { color: var(--accent); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }

h1, h2, h3 { letter-spacing: -0.01em; }
h2 { font-family: var(--score); font-size: 26px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 600; }

.section { margin-top: var(--sp-7); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.more {
  font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--ink);
  border-bottom: 2px solid var(--accent); padding-bottom: 1px;
}
.more:hover { text-decoration: none; color: var(--accent); }

.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon--sm { width: 14px; height: 14px; }

/* ---------- 2. UTILIDADES Y ÁTOMOS ---------- */

/* Tarjeta clara base */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* Superficie de foco (oscura): drawer y banda de registro */
.focus-surface {
  background: var(--court);
  color: #fff;
  border-radius: var(--r-focus);
  border: 1px solid rgba(255,255,255,.06);
}
.focus-surface .label { color: var(--muted-dark); }
.focus-surface .label--amber { color: var(--accent); }

/* Chips ▲/▼ */
.chip-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap;
}
.chip-delta--up { background: var(--up-tint); color: var(--up); }
.chip-delta--down { background: var(--down-tint); color: var(--down); }

/* Chip de estado (bajas: confirmada / duda) */
.chip-status {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.chip-status--out { background: var(--down-tint); color: var(--down); }
.chip-status--duda { background: var(--accent-soft); color: #8F5E12; }

/* Badge de posición (B / A / P) — DEFINICIÓN GLOBAL ÚNICA.
   Hues bien separados y AA: texto del color pleno sobre su tinte al 12%. */
.pos-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  font-family: var(--score); font-size: 12px; font-weight: 700;
  background: var(--zebra); color: var(--muted);
}
.pos-badge--b { background: var(--pos-b-tint); color: var(--pos-b); }
.pos-badge--a { background: var(--pos-a-tint); color: var(--pos-a); }
.pos-badge--p { background: var(--pos-p-tint); color: var(--pos-p); }
.pos-badge--sm { width: 18px; height: 18px; border-radius: 6px; font-size: 10.5px; }

/* Bandera de cupo (banderitas translúcidas del sitio clásico) — marca sutil
   a la derecha de la celda del nombre. El contenedor debe ser position:relative. */
.flag-cupo {
  position: absolute; right: 0; top: 0; bottom: 0; width: 26px;
  opacity: .3; pointer-events: none;
  background-repeat: no-repeat; background-position: right center; background-size: 20px 20px;
}
.flag-cupo--nac { background-image: url("/smgr/images/bnac.gif"); }
.flag-cupo--extra { background-image: url("/smgr/images/bextra.gif"); }
/* Banderas de origen (país nacimiento/nacionalidad) — helper bandera_pais().
   Imágenes flagcdn (las mismas que los mapas de visualización). inline-flex +
   flex:none: se quedan en una fila (no se apilan) y no encogen dentro de la
   celda flex del jugador. */
.flag-orig {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  margin-left: 6px; cursor: default; vertical-align: middle;
}
.flag-orig__img {
  display: block; height: 12px; width: auto; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(19,28,46,.12);
}
/* La celda sticky es contenedor de la bandera; deja aire a la derecha */
td.has-flag .player-cell { padding-right: 22px; }
/* Variante nítida dentro de un chip (hero de la ficha de jugador) */
.flag-cupo--inline {
  position: static; display: inline-block;
  width: 18px; height: 13px; opacity: 1; vertical-align: -1px;
  background-position: center;
}

/* Racha: cuadraditos estilo forma */
.form-squares { display: inline-flex; gap: 3px; align-items: center; }
.form-squares i {
  width: 10px; height: 10px; border-radius: 2.5px;
  background: var(--line); display: inline-block;
}
.form-squares i.on { background: var(--accent); }
.form-squares .n {
  font-family: var(--score); font-weight: 700; font-size: 15px;
  margin-left: 6px; font-variant-numeric: tabular-nums;
}

/* Escudos y avatares */
.shield { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.shield--sm { width: 18px; height: 18px; }
.team-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.team-code { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.avatar-initials {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #26344F; color: var(--accent);
  font-family: var(--score); font-weight: 700; flex-shrink: 0;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; padding: 9px 18px;
  border-radius: var(--r-pill); white-space: nowrap; transition: opacity .15s;
  border: 1px solid transparent;
}
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { opacity: .88; text-decoration: none; }
.btn--amber { background: var(--accent); color: var(--court-a); }
.btn--amber:hover { opacity: .9; text-decoration: none; }
.btn--ghost-light { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn--ghost-light:hover { background: var(--hover); text-decoration: none; }
.btn--ghost-dark { border-color: rgba(255,255,255,.35); color: #fff; background: transparent; }
.btn--ghost-dark:hover { background: rgba(255,255,255,.08); text-decoration: none; }

/* ---------- 3. HEADER + DRAWER + TIRA DE EQUIPOS ---------- */

/* Topbar sticky (clara) */
.site-header {
  position: sticky; top: 0; z-index: 300;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(19,28,46,.10); }
.site-header__row {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5);
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-4);
}
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 10px 9px;
  border-radius: 10px; flex-shrink: 0;
}
.burger:hover { background: var(--hover); }
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); }
.burger span:nth-child(2) { width: 72%; }
/* Punto de aviso (consejos nuevos) sobre la hamburguesa */
.burger { position: relative; }
.burger.has-dot::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}
/* Punto de aviso junto a un enlace del drawer */
.new-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); vertical-align: middle; margin-left: 2px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 38px; width: auto; }
/* Emblema «20 AÑOS» — chip de cabecera (el 0 es un balón) */
.mark20 { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.mark20__2 { font-family: var(--score); font-weight: 800; font-size: 26px; line-height: 1; color: var(--accent-deep); }
.mark20__anos { font-family: var(--score); font-weight: 700; font-size: 12px; letter-spacing: .05em; color: var(--ink); margin-left: 5px; }
.mark20__ball { display: block; }
/* Colores del balón vía tokens (sin estilo inline) */
.mark20__fill { fill: var(--accent); }
.mark20__seam { stroke: var(--ink); }
.mark20--chip .mark20__fill { fill: var(--accent-deep); }
.mark20--chip .mark20__seam { stroke: var(--ground); }
.mark20--hero-light .mark20__fill { fill: var(--accent-deep); }
.mark20--hero-light .mark20__seam { stroke: var(--ground); }

.search-pill {
  flex: 1; min-width: 0; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 14px;
  color: var(--muted);
}
.search-pill input {
  border: none; background: none; outline: none; width: 100%;
  font: inherit; font-size: 14px; color: var(--ink);
}
.search-pill input::placeholder { color: var(--muted); }

.auth { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.link-enter { font-size: 14px; font-weight: 600; }

.user-pill {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font-size: 14px; font-weight: 600;
}
.user-pill:hover { background: var(--hover); }
.user-pill .avatar-initials { width: 30px; height: 30px; font-size: 14px; background: var(--ink); color: var(--accent); }
.user-pill .avatar-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Tira de equipos (menu_equipos modernizado) — no sticky, scrollea con la página */
.teamstrip { background: var(--surface); border-bottom: 1px solid var(--line); }
.teamstrip__row {
  max-width: var(--container); margin: 0 auto; padding: 8px var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.teamstrip__row::-webkit-scrollbar { display: none; }
.teamstrip__row a {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; scroll-snap-align: start;
  padding: 3px; border-radius: 8px;
  transition: transform .12s ease;
}
.teamstrip__row a:hover { transform: translateY(-2px) scale(1.08); }
.teamstrip__row img { width: 28px; height: 28px; object-fit: contain; }

/* Drawer (momento de foco oscuro — SIEMPRE oscuro) */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 349;
  background: rgba(19,28,46,.5);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 350;
  width: 344px; max-width: 100%;
  background: var(--court); color: #fff;
  transform: translateX(-105%); transition: transform .25s ease;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop);
}
body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-dark);
}
.drawer__head img { height: 32px; width: auto; }
.drawer__close { color: #fff; padding: 8px; border-radius: 8px; display: flex; }
.drawer__close:hover { background: rgba(255,255,255,.1); }

.drawer__body { overflow-y: auto; flex: 1; padding: var(--sp-2) var(--sp-5) var(--sp-5); }
.drawer__group { border-bottom: 1px solid var(--line-dark); }
.drawer__acc {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 2px; color: #fff; text-align: left; border-radius: 8px;
}
.drawer__acc:hover { background: rgba(255,255,255,.05); }
.drawer__acc .g-icon {
  width: 19px; height: 19px; stroke: var(--accent); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.drawer__acc .label--amber { flex: 1; }
.drawer__acc .chev {
  width: 16px; height: 16px; stroke: var(--muted-dark);
  transition: transform .2s ease;
}
.drawer__group.is-open .chev { transform: rotate(180deg); }
.drawer__items { display: none; padding: 0 0 var(--sp-3); }
.drawer__group.is-open .drawer__items { display: block; }
.drawer__items a {
  display: block; color: #fff; font-size: 15px; font-weight: 500;
  padding: 8px 10px 8px 33px; border-radius: 8px;
}
.drawer__items a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.drawer__items a .soft { color: var(--muted-dark); font-size: 13px; margin-left: 6px; }

.drawer__foot {
  border-top: 1px solid var(--line-dark);
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.drawer__foot .row { display: flex; gap: var(--sp-2); }
.drawer__foot .row .btn { flex: 1; }
.drawer__20 { font-size: 12.5px; color: var(--muted-dark); }
.drawer__20 a { color: inherit; }
.drawer__20 a:hover { color: var(--accent); }
.drawer__20 strong { color: var(--accent); font-weight: 600; }
.drawer__user { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.drawer__user .avatar-initials { width: 34px; height: 34px; font-size: 15px; background: rgba(255,255,255,.1); }
.drawer__user .avatar-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.drawer__user small { display: block; font-weight: 400; font-size: 12px; color: var(--muted-dark); }
.drawer__user-actions { margin-left: auto; display: flex; gap: 6px; }
.icon-btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25); color: #fff;
}
.icon-btn-dark:hover { background: rgba(255,255,255,.1); }

/* Bloque de cuenta dentro del drawer (form de login del menu.php actual) */
.drawer-login { display: flex; flex-direction: column; gap: 10px; }
.drawer-login form { display: flex; flex-direction: column; gap: 8px; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #fff; color: var(--court-a);
  border-radius: var(--r-input); padding: 9px 14px;
  font-size: 14px; font-weight: 600;
}
.google-btn:hover { opacity: .92; text-decoration: none; }
.google-btn svg { flex-shrink: 0; }
.drawer-login__divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted-dark); font-size: 12px;
}
.drawer-login__divider::before,
.drawer-login__divider::after { content: ""; flex: 1; height: 1px; background: var(--line-dark); }
.drawer-login__input {
  background: rgba(255,255,255,.07); border: 1px solid var(--line-dark);
  border-radius: var(--r-input); padding: 9px 12px;
  color: #fff; font: inherit; font-size: 14px; width: 100%;
}
.drawer-login__input::placeholder { color: var(--muted-dark); }
.drawer-login__links { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: 13px; }
.drawer-login__links a { color: var(--muted-dark); }
.drawer-login__links a:hover { color: var(--accent); }
.login-error {
  background: rgba(192,58,46,.18); border: 1px solid rgba(240,133,120,.4);
  color: var(--down-dark); font-size: 13px; padding: 8px 12px; border-radius: 10px;
}

/* ---------- 4. TARJETAS Y TABLAS ---------- */

/* Cabecera de tarjeta sólida (ink, texto blanco uppercase) */
.card-bar {
  background: var(--ink); color: #fff;
  padding: 10px var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.card-bar h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #fff; }
.card-bar .sub { font-size: 11px; color: var(--muted-dark); font-weight: 500; white-space: nowrap; }

/* Footer de tarjeta */
.card-foot {
  background: var(--zebra); border-top: 1px solid var(--line);
  padding: 9px var(--sp-4); font-size: 12.5px; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}

/* Toggle segmented pequeño (Visitas/Fichados, Suben/Bajan, SM/Ring…) */
.mini-toggle { display: inline-flex; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.mini-toggle button {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  color: var(--muted); white-space: nowrap;
}
.mini-toggle button.is-active { background: var(--ink); color: #fff; }

/* Scroll interno con degradado de corte */
.card-scroll-wrap { position: relative; flex: 1; }
.card-scroll { max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.card-scroll-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface));
  pointer-events: none;
  border-radius: 0 0 var(--r-card) var(--r-card);
}

/* Tabla base: cabecera ink sticky, zebra, hover */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ink); color: #fff;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  text-align: left; padding: 8px 12px; white-space: nowrap;
}
.table th.r, .table td.r { text-align: right; }
.table td { padding: 8px 12px; border-bottom: 1px solid transparent; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tbody tr:nth-child(even) td { background: var(--zebra); }
.table tbody tr:hover td { background: var(--hover); }
.table .player-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Nombre de jugador responsive (sin JS): completo en escritorio, "N. Apellido"
   en móvil. La variante corta se activa en el @media (max-width:640px) de más
   abajo. Global: aplica en todas las tablas y listas de jugador. */
.pname-abbr { display: none; }

/* Ordenación por clic/tap en cabecera (módulo sortableTables de rincon.js).
   No fijamos position aquí: .table th ya es sticky y sobreescribirla la rompería. */
.table th[data-sort-key] { cursor: pointer; user-select: none; }
.table th[data-sort-key]:hover { color: var(--accent); }
.table th[data-sort-key]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table th[data-sort-key][aria-sort="ascending"]::after { content: "\25B2"; font-size: 8px; margin-left: 4px; color: var(--accent); }
.table th[data-sort-key][aria-sort="descending"]::after { content: "\25BC"; font-size: 8px; margin-left: 4px; color: var(--accent); }
/* Broker: al tomar el control el cliente, oculta la flecha server-side (.arr)
   para no mostrar doble indicador; el enlace sigue como fallback sin JS. */
.table.is-client-sorted thead .arr { display: none; }

/* Variante sin cabecera sticky (tablas completas sin scroll interno) */
.table--flat th { position: static; }

/* Zonas de clasificación */
.table tr.z-po td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table tr.z-desc td:first-child { box-shadow: inset 3px 0 0 var(--down); }
.table td.pos { color: var(--muted); font-weight: 600; width: 34px; }
.form5 { display: inline-flex; gap: 3px; }
.form5 i { width: 10px; height: 10px; border-radius: 2.5px; background: #D6D9DE; display: inline-block; }
.form5 i.w { background: var(--up); }
.zones-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.zones-leg .zl { width: 10px; height: 10px; border-radius: 2.5px; display: inline-block; }
.zones-leg .zl--po { background: var(--accent); }
.zones-leg .zl--desc { background: var(--down); margin-left: 8px; }

/* Game-log: doble columna sticky J + Rival */
.gamelog-wrap { position: relative; overflow: auto; max-height: 560px; border-radius: var(--r-card); }
.gamelog { min-width: 860px; }
.gamelog th { z-index: 3; }
.gamelog th.stick-1, .gamelog td.stick-1 { position: sticky; left: 0; }
.gamelog th.stick-2, .gamelog td.stick-2 { position: sticky; left: 52px; box-shadow: 4px 0 8px -4px rgba(19,28,46,.14); }
.gamelog th.stick-1, .gamelog th.stick-2 { z-index: 4; top: 0; background: var(--ink); }
.gamelog td.stick-1, .gamelog td.stick-2 { background: var(--surface); z-index: 2; }
.gamelog tbody tr:nth-child(even) td.stick-1, .gamelog tbody tr:nth-child(even) td.stick-2 { background: var(--zebra); }
.gamelog tbody tr:hover td.stick-1, .gamelog tbody tr:hover td.stick-2 { background: var(--hover); }
.gamelog th.stick-1, .gamelog td.stick-1 { min-width: 52px; width: 52px; }
.gamelog td.stick-1 { font-weight: 700; font-family: var(--score); }
.gamelog tfoot td {
  position: sticky; bottom: 0; background: var(--zebra); font-weight: 600;
  border-top: 2px solid var(--line); z-index: 2;
}
.gamelog tfoot td.stick-1, .gamelog tfoot td.stick-2 { z-index: 3; background: var(--zebra); }
.chip-vd { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.chip-vd--v { background: var(--up-tint); color: var(--up); }
.chip-vd--d { background: var(--down-tint); color: var(--down); }
.court-tag { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ---------- 5. COMPONENTES DE PORTADA ---------- */

/* Tus equipos (solo con sesión) */
.myteams { margin-top: var(--sp-5); }
.myteams .section-head { margin-bottom: var(--sp-3); }
.myteams__rail {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
}
.myteam-card {
  scroll-snap-align: start;
  flex: 0 0 200px; width: 200px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-card);
  padding: var(--sp-3) var(--sp-4);
  position: relative;
  display: block;
}
.myteam-card:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(19,28,46,.12); }
.myteam-card__name {
  font-weight: 600; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding-right: 34px;
}
.myteam-card__pts { font-family: var(--score); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.myteam-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.myteam-card__rank { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge-top {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--score); font-weight: 700; font-size: 10px; letter-spacing: .08em;
  background: var(--accent); color: var(--court-a);
  padding: 2px 7px; border-radius: var(--r-pill);
}

/* Lead: agenda + mercado + equipo ideal */
.lead { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-4); margin-top: var(--sp-5); align-items: stretch; }
.lead-left { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.lead-left .agenda { flex: 1; }

/* Agenda próxima jornada (clara) */
.agenda { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; }
.agenda__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.agenda__title { font-family: var(--score); font-size: 20px; font-weight: 700; }
.agenda__list { list-style: none; flex: 1; }
.agenda__list li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 10px; border-radius: 10px;
}
.agenda__list li:nth-child(even) { background: var(--zebra); }
.agenda__list li:hover { background: var(--hover); }
.agenda__match { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.agenda__match .vs { color: var(--muted); font-weight: 400; font-size: 12px; }
.agenda__when { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Mercado (compacta, bajo la agenda) */
.mercado { overflow: hidden; }
.mercado__head { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.mercado__head h3 { font-family: var(--score); font-size: 18px; font-weight: 700; }
.mercado__cierre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 8px var(--sp-4); background: var(--zebra);
  font-size: 12.5px; color: var(--muted); font-weight: 500;
}
.mercado__count {
  font-family: var(--score); font-weight: 700; font-size: 18px;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mercado__label { display: block; padding: 10px var(--sp-4) 4px; }
.bajas-list { list-style: none; }
.bajas-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 7px var(--sp-4);
}
.bajas-list li:nth-child(even) { background: var(--zebra); }
.bajas-list li:hover { background: var(--hover); }
.bajas-list .name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; min-width: 0; }

/* Equipo ideal — skin CLARA aprobada (tarjeta blanca, números ámbar profundo) */
.ideal {
  padding: var(--sp-5); position: relative; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-focus);
  box-shadow: var(--shadow-card);
}
/* Cancha volteada en vertical: la canasta/zona queda ABAJO, donde se colocan
   los pívots (los bases arriba suben el balón). El SVG tiene la línea de fondo
   y la zona en y=30 (arriba), así que scaleY(-1) la lleva abajo. */
.ideal__court { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .05; pointer-events: none; transform: scaleY(-1); }
.ideal__court g { stroke: var(--ink); }
.ideal__inner { position: relative; }
.ideal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ideal__title { font-family: var(--score); font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.ideal .label--amber { color: var(--accent-deep); }
.ideal__total { font-family: var(--score); font-weight: 700; font-size: 30px; color: var(--accent-deep); font-variant-numeric: tabular-nums; line-height: 1.1; text-align: right; }
.ideal__total small { display: block; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ideal__actions { display: flex; align-items: center; gap: var(--sp-2); }
.ideal .icon-btn-dark { border-color: var(--line); color: var(--ink); }
.ideal .icon-btn-dark:hover { background: var(--hover); }

.ideal__group { margin-top: var(--sp-3); }
.ideal__group > .label--amber { display: block; margin-bottom: var(--sp-2); }
/* Acento de posición en el label de cada grupo del equipo ideal (Fix 3) */
.ideal__group > .label--pos-b { color: var(--pos-b); }
.ideal__group > .label--pos-a { color: var(--pos-a); }
.ideal__group > .label--pos-p { color: var(--pos-p); }
.ideal__row { display: grid; gap: var(--sp-2); }
.ideal__row--2 { grid-template-columns: repeat(4, 1fr); }
.ideal__row--2 .ideal-player { grid-column: span 2; }
.ideal__row--4 { grid-template-columns: repeat(4, 1fr); }
.ideal-player {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 10px 6px;
  background: var(--zebra);
  border: 1px solid transparent; border-radius: 12px;
  position: relative;
}
.ideal-player img, .ideal-player .avatar-initials { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ideal-player .avatar-initials { font-size: 16px; }
.ideal .avatar-initials { background: rgba(19,28,46,.08); color: var(--ink); }
.ideal-player__name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ideal-player__team { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.ideal-player__sm { font-family: var(--score); font-weight: 700; font-size: 18px; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ideal-player--mvp { border-color: rgba(240,162,60,.6); box-shadow: var(--glow); background: rgba(240,162,60,.10); }
.ideal-player--mvp img { outline: 2px solid var(--accent); outline-offset: 1px; }
.badge-mvp {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-family: var(--score); font-weight: 700; font-size: 9.5px; letter-spacing: .1em;
  background: var(--accent); color: var(--court-a); padding: 1px 7px; border-radius: var(--r-pill);
}

/* Tarjetas de datos con scroll interno */
.data-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.data-card { display: flex; flex-direction: column; overflow: hidden; }
.data-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.data-card__head h3 { font-family: var(--score); font-size: 18px; font-weight: 700; }

/* Última jornada: resultados + suben/bajan + clasificación */
.last-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.last-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.last-grid .card { overflow: hidden; }

/* Resultados: filas de marcador. Cada fila puede ser un enlace
   (portada → página de jornada): el grid vive en el hijo directo. */
.results-list { list-style: none; }
.results-list li > a,
.results-list li > span.row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-4);
}
.results-list li > a:hover { text-decoration: none; }
.results-list li:nth-child(even) { background: var(--zebra); }
.results-list li:hover { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
.results-list .home { justify-content: flex-end; }
.results-list .score {
  font-family: var(--score); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 15px; color: var(--muted);
  background: #E8EBF1; border-radius: 7px; padding: 2px 9px; white-space: nowrap;
}
.results-list .score .w { color: var(--ink); font-weight: 700; }

/* Suben / bajan (movimientos broker) */
.movers-list { list-style: none; }
.movers-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 8px var(--sp-4);
}
.movers-list li:nth-child(even) { background: var(--zebra); }
.movers-list li:hover { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
.movers-list .player-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; min-width: 0; }

/* Artículos */
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.article-card { overflow: hidden; display: flex; flex-direction: column; }
.article-card:hover { box-shadow: 0 6px 20px rgba(19,28,46,.12); }
.article-card__ph { aspect-ratio: 16/8.5; background: var(--zebra); position: relative; overflow: hidden; }
.article-card__ph svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Las portadas mezclan fotos apaisadas y gráficos más anchos que el marco. Con
   cover los gráficos perdían las etiquetas de los bordes. Se muestran completas
   (contain) sobre un fondo hecho con la propia imagen desenfocada, que rellena el
   marco: no se recorta nada y la rejilla queda uniforme. --ph-bg lo pone
   article_card_ph() en helpers.php. */
.article-card__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.article-card__ph.has-img::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--ph-bg); background-size: cover; background-position: center;
  filter: blur(16px); transform: scale(1.2); opacity: .5;
}
.article-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.article-card__meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.article-card__title { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.article-card a:hover { text-decoration: none; color: inherit; }

/* Guiño 20 aniversario */
.band20 {
  margin-top: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent);
}
.band20 .yr { font-family: var(--score); font-weight: 700; font-size: 22px; color: var(--accent); }
.band20 p { font-size: 14px; color: var(--muted); }
.band20 p strong { color: var(--ink); font-weight: 600; }
.band20 .more { margin-left: auto; }

/* Banda de registro (foco oscuro SIEMPRE; las páginas solo la
   incluyen cuando no hay sesión) */
.register-band {
  padding: var(--sp-6) var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
}
.register-band__txt { flex: 1; min-width: 260px; }
.register-band h2 { color: #fff; font-size: 30px; }
.register-band p { color: var(--muted-dark); margin-top: 6px; max-width: 52ch; }
.register-band__cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.register-band__cta a.alt { color: #fff; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* Explora también */
.explore { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.explore-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: 4px; }
.explore-card:hover { box-shadow: 0 6px 20px rgba(19,28,46,.12); text-decoration: none; }
.explore-card .dot {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 6px;
  background: var(--accent-soft); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.explore-card .dot .icon { stroke: var(--accent); }
.explore-card h3 { font-size: 15.5px; }
.explore-card p { font-size: 13px; color: var(--muted); }
.explore-card .go { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* ---------- 6. COMPONENTES DE FICHA DE JUGADOR ---------- */

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: var(--sp-4); flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

/* Hero jugador — skin CLARA aprobada (tarjeta blanca, precio ámbar profundo) */
.player-hero {
  margin-top: var(--sp-3); padding: var(--sp-6);
  display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap;
  position: relative; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-focus);
  box-shadow: var(--shadow-card);
}
.player-hero__spot { display: none; } /* el foco radial era de la skin oscura */
.player-hero__id { display: flex; gap: var(--sp-5); align-items: center; flex: 1; min-width: 300px; position: relative; }
.player-hero__photo {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  outline: 3px solid var(--accent); outline-offset: 3px;
  background: #26344F;
}
.player-hero__name {
  font-family: var(--score); font-weight: 700; font-size: 48px; line-height: 1;
  color: var(--ink); text-transform: uppercase; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.player-hero__name .dorsal { font-size: 22px; color: var(--muted); font-weight: 600; }
.player-hero__mrow { display: none; align-items: center; gap: 8px; margin-bottom: 4px; }
.player-hero__mrow .dorsal { font-family: var(--score); font-size: 15px; color: var(--muted); font-weight: 600; }
.player-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.chip-dark {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: var(--zebra); border: 1px solid var(--zebra);
  border-radius: var(--r-pill);
  padding: 4px 11px; white-space: nowrap;
}
.chip-dark .shield--sm { width: 16px; height: 16px; }
/* Chip con bandera (nacionalidad / lugar de nacimiento del hero), enlazado al mapa */
.chip-dark--flag .flag-orig__img { height: 13px; box-shadow: 0 0 0 1px rgba(19,28,46,.15); }
a.chip-dark--flag:hover { border-color: var(--line); text-decoration: none; }
.chip-dark--pos { background: var(--accent); border-color: var(--accent); color: var(--court-a); font-weight: 700; font-family: var(--score); font-size: 13px; }
/* Posición del hero coloreada con la paleta global de posiciones (Fix 3) */
.chip-dark--pos-b { background: var(--pos-b-tint); border-color: var(--pos-b-tint); color: var(--pos-b); }
.chip-dark--pos-a { background: var(--pos-a-tint); border-color: var(--pos-a-tint); color: var(--pos-a); }
.chip-dark--pos-p { background: var(--pos-p-tint); border-color: var(--pos-p-tint); color: var(--pos-p); }

.player-hero__broker { text-align: right; position: relative; margin-left: auto; }
.player-hero .label--amber { color: var(--muted); }
.player-hero__price {
  font-family: var(--score); font-weight: 700; font-size: 44px; line-height: 1.05;
  color: var(--accent-deep); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.player-hero__var { font-size: 14px; font-weight: 600; color: var(--down); margin-top: 2px; font-variant-numeric: tabular-nums; }
.player-hero__broker .btn { margin-top: var(--sp-3); }
/* El botón Compartir del hero pasa a sólido ink sobre tarjeta clara */
.player-hero .btn--ghost-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.player-hero .btn--ghost-dark:hover { background: var(--ink); opacity: .88; }

/* Sub-nav sticky de anclas (clara) */
.subnav {
  position: sticky; top: var(--header-h); z-index: 250;
  background: rgba(248,247,243,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  margin-top: var(--sp-4);
}
.subnav__row {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5);
  display: flex; gap: 2px; height: var(--subnav-h); align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
}
.subnav__row::-webkit-scrollbar { display: none; }
.subnav__row a {
  display: flex; align-items: center; padding: 0 14px;
  font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.subnav__row a:hover { color: var(--ink); text-decoration: none; }
.subnav__row a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* Secciones ancladas: dejan hueco para header + subnav pegajosos */
.anchor-sec { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }

/* Stat-cards — skin CLARA aprobada (tarjetas blancas) */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.stat-card {
  padding: var(--sp-4); border-radius: var(--r-focus);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.stat-card .label { margin-bottom: 2px; color: var(--muted); }
.stat-card__big {
  font-family: var(--score); font-weight: 700; font-size: 38px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-card__big .unit { font-size: 16px; color: var(--muted); font-weight: 600; }
.stat-card__big--amber { color: var(--accent-deep); font-size: 27px; }
.stat-card__sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-card__sub strong { color: var(--ink); font-weight: 600; }
.stat-card__foot { margin-top: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-leader {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: var(--accent); border-radius: var(--r-pill); padding: 2px 8px;
}
.tag-reg { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent-deep); }

/* Barra de rango broker (−15% … +15%) */
.range-bar { margin-top: 8px; }
.range-bar__track { position: relative; height: 6px; border-radius: 3px; background: #E9E7DF; }
.range-bar__marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid var(--surface);
  box-shadow: 0 0 8px rgba(240,162,60,.6);
}
.range-bar__labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* Mini-barras "Últimos 5" — 3 zonas de altura fija por columna:
   rival arriba en línea, barras sobre base común, J abajo */
.minibars { display: flex; gap: 8px; margin-top: 6px; position: relative; }
.minibars::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 142px; height: 1px;
  background: var(--line); pointer-events: none;
}
.minibars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.minibars .rv { display: flex; align-items: center; justify-content: center; gap: 4px; height: 22px; }
.minibars .rv .shield { width: 18px; height: 18px; }
.minibars .rv .loc {
  font-style: normal; font-size: 10px; font-weight: 600;
  color: var(--muted); letter-spacing: .02em;
}
.minibars .stack {
  height: 120px; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
}
.minibars .v { font-size: 11px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.minibars .bar { width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px; background: var(--accent); flex-shrink: 0; }
.minibars .bar--bad { background: var(--down); }
.minibars .j { font-size: 10px; color: var(--muted); letter-spacing: .04em; margin-top: 6px; }

/* Próximos partidos (claro) */
.next-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.next-game { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; }
.next-game__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.next-game__rival { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.next-game__rival .at { color: var(--muted); font-weight: 500; }
.next-game__prev { display: flex; align-items: baseline; gap: 8px; }
.next-game__prev .p { font-family: var(--score); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; }
.pill-difficulty { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); }
.pill-difficulty--fav { background: var(--up-tint); color: var(--up); }
.pill-difficulty--hard { background: var(--down-tint); color: var(--down); }
.pill-difficulty--mid { background: var(--zebra); color: var(--muted); }

/* Tabs estadísticas (temporada / rival / históricas / playoff / pretemporada) */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.tabs button {
  font-size: 13.5px; font-weight: 600; padding: 8px 15px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.tabs button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabs button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Detalle broker */
.broker-card { overflow-x: auto; }
.broker-detail { min-width: 640px; }
.broker-detail .row-current td { background: var(--accent-soft) !important; font-weight: 700; }
.broker-detail .row-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Gráficas (SVG server-rendered; altura uniforme) */
.charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: start; }
.chart-card { padding: var(--sp-4); display: flex; flex-direction: column; }
.chart-card h3 { font-family: var(--score); font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.chart-card .chart-sub { font-size: 12px; color: var(--muted); margin-bottom: var(--sp-3); }
.chart-card svg { width: 100%; height: 226px; display: block; flex: 1; }
.chart-legend { display: flex; gap: var(--sp-4); font-size: 12px; color: var(--muted); margin-top: var(--sp-2); flex-wrap: wrap; }
.chart-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 14px; height: 3px; border-radius: 2px; background: var(--ink); display: inline-block; }
.chart-legend .swatch--faint { background: #C9CDD6; }
.chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* Avanzado: compañeros + comparador */
.mates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.mates .data-card__head { padding-bottom: var(--sp-2); }
.mates .table th { position: static; }

.compare { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.compare__inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.compare__inputs input {
  font: inherit; font-size: 14px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--ground); color: var(--ink); width: 100%;
}
.compare__inputs input::placeholder { color: var(--muted); }
.compare .btn { align-self: flex-start; }

/* ---------- 7. SHARE SHEET ---------- */
.share-overlay {
  position: fixed; inset: 0; z-index: 380;
  background: rgba(19,28,46,.55);
  display: none; align-items: center; justify-content: center; padding: var(--sp-4);
}
body.share-open .share-overlay { display: flex; }
.share-sheet {
  background: var(--surface); border-radius: var(--r-focus);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 460px; padding: var(--sp-5);
}
.share-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.share-sheet__head h3 { font-family: var(--score); font-size: 20px; font-weight: 700; }
.share-sheet__close { padding: 6px; border-radius: 8px; display: flex; color: var(--muted); }
.share-sheet__close:hover { background: var(--hover); color: var(--ink); }
.share-url {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 10px 12px; margin-bottom: var(--sp-4);
}
.share-url code { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--ink); }
.share-url .btn { padding: 6px 12px; font-size: 13px; }
.share-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.share-actions .btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r-input); padding: 10px; font-size: 13.5px; }
.share-actions .btn:hover { background: var(--hover); }

/* ---------- 8. FOOTER ---------- */
.site-footer { margin-top: var(--sp-8); background: var(--court-a); color: var(--muted-dark); }
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: var(--sp-6) var(--sp-5); }
.site-footer__top { display: flex; gap: var(--sp-6); flex-wrap: wrap; justify-content: space-between; }
.site-footer__brand img { height: 36px; width: auto; margin-bottom: var(--sp-3); }
.site-footer__brand p { font-size: 13px; max-width: 34ch; }
.site-footer nav { display: grid; grid-template-columns: repeat(2, auto); gap: 6px var(--sp-6); }
.site-footer nav a { color: #E7EBF2; font-size: 14px; font-weight: 500; }
.site-footer nav a:hover { color: var(--accent); text-decoration: none; }
.site-footer__bottom {
  border-top: 1px solid var(--line-dark); margin-top: var(--sp-5); padding-top: var(--sp-4);
  display: flex; gap: var(--sp-3); justify-content: space-between; flex-wrap: wrap;
  font-size: 12.5px;
}
.site-footer__bottom .y20 { color: var(--accent); font-weight: 600; }
.site-footer__x { color: #E7EBF2; font-weight: 600; }

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .charts { grid-template-columns: 1fr 1fr; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .explore { grid-template-columns: repeat(2, 1fr); }
  .data-cards { grid-template-columns: 1fr 1fr; }
  .articles { grid-template-columns: repeat(2, 1fr); }
  .articles .article-card:last-child { display: none; }
}

@media (max-width: 900px) {
  .lead { grid-template-columns: 1fr; }
  .player-hero__broker { text-align: left; margin-left: 0; }
  .compare__inputs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 740px) {
  :root { --header-h: 108px; } /* el buscador salta a su propia fila */
  .site-header__row {
    height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
    row-gap: 8px;
  }
  .search-pill { order: 5; flex-basis: 100%; max-width: none; margin: 0; }
  .auth { margin-left: auto; }
  .link-enter { display: none; }
  .user-pill .user-name { display: none; }
  .brand img { height: 32px; }

  h2 { font-size: 22px; }
  .data-cards { grid-template-columns: 1fr; }
  .last-grid { grid-template-columns: 1fr; }
  .articles { grid-template-columns: 1fr; }
  .articles .article-card:last-child { display: flex; }
  .next-games { grid-template-columns: 1fr; }
  .charts { grid-template-columns: 1fr; }
  .mates { grid-template-columns: 1fr; }
  .explore { grid-template-columns: 1fr 1fr; }
  .ideal__row--4 { grid-template-columns: repeat(2, 1fr); }

  .player-hero { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
  .player-hero__name { font-size: 36px; }
  .player-hero__price { font-size: 38px; }
  .player-hero__photo { width: 92px; height: 92px; }
  .player-hero__id { gap: var(--sp-4); min-width: 0; }
  .register-band { padding: var(--sp-5) var(--sp-4); }
  .band20 .more { display: none; }
}

/* Hero de la ficha en móvil: foto+identidad / chips / precio+compartir */
@media (max-width: 640px) {
  .player-hero { display: block; padding: var(--sp-4); }

  /* Fila A: foto 68px + columna [P·#33] / nombre (máx. 2 líneas) */
  .player-hero__id {
    display: grid; grid-template-columns: 68px minmax(0, 1fr);
    column-gap: var(--sp-3); align-items: center; min-width: 0;
  }
  .player-hero__id > div { display: contents; }
  .player-hero__photo {
    width: 68px; height: 68px; grid-column: 1; grid-row: 1 / 3;
    outline-width: 2px; outline-offset: 2px;
  }
  .player-hero__mrow { display: flex; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 6px; }
  .player-hero__mrow .chip-dark--pos { font-size: 12px; padding: 2px 9px; }
  .player-hero__name {
    grid-column: 2; grid-row: 2; align-self: start;
    font-size: 32px; line-height: 1.05; text-wrap: balance;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .player-hero__name .dorsal { display: none; }

  /* Fila B: chips compactos en flex-wrap a todo el ancho */
  .player-hero__chips { grid-column: 1 / -1; grid-row: 3; margin-top: var(--sp-3); gap: 6px; }
  .player-hero__chips .chip-dark { font-size: 12px; padding: 3px 9px; }
  .player-hero__chips .chip-dark--pos { display: none; }

  /* Fila C: hairline + precio a la izquierda y Compartir a la derecha */
  .player-hero__broker {
    margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    width: 100%; text-align: left;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-3); align-items: center;
  }
  .player-hero__broker .label { grid-column: 1; font-size: 10px; }
  .player-hero__price { grid-column: 1; font-size: 30px; }
  .player-hero__var { grid-column: 1; }
  .player-hero__broker .btn { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-top: 0; }
}

@media (max-width: 380px) {
  .player-hero__broker { grid-template-columns: 1fr; }
  .player-hero__broker .btn {
    grid-column: 1; grid-row: auto; width: 100%;
    justify-content: center; margin-top: var(--sp-3);
  }
}

@media (max-width: 480px) {
  .stat-cards { grid-template-columns: 1fr; }
  .explore { grid-template-columns: 1fr; }
  .compare__inputs { grid-template-columns: 1fr; }
  .ideal__row--2 { grid-template-columns: repeat(2, 1fr); }
  .ideal__row--2 .ideal-player { grid-column: span 1; }
  /* Móvil: mantenemos el emblema pero compacto (solo «20» + balón) */
  .mark20__anos { display: none; }
  .mark20__2 { font-size: 24px; }
  .mark20 { gap: 1px; }
}

/* ---------- 10. FICHA DE JUGADOR REAL (añadidos sobre el prototipo) ---------- */

/* Nota discreta (tabs sin datos, tarjetas vacías, gráficas sin datos) */
.note-muted { font-size: 13px; color: var(--muted); }
.note-muted--pad { padding: var(--sp-2) var(--sp-4) var(--sp-4); }

/* Tarjeta con scroll horizontal (tablas anchas sin columnas sticky) */
.card--scroll-x { overflow-x: auto; }

/* Fallback de foto del hero: iniciales sobre azul noche */
.player-hero__photo--fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--score); font-weight: 700; font-size: 36px;
  color: var(--accent); user-select: none;
}
@media (max-width: 640px) {
  .player-hero__photo--fallback { font-size: 22px; }
  /* Nombres de jugador: pasa a "N. Apellido(s)" para que quepan las columnas. */
  .pname-full { display: none; }
  .pname-abbr { display: inline; }
}

/* Variación positiva en el hero (el color base de __var es --down) */
.player-hero__var.up { color: var(--up); }

/* Game-log con varias filas de medias: solo la última queda pegada abajo;
   las demás conservan el sticky lateral de J/Rival pero no el vertical */
.gamelog tfoot tr:not(:last-child) td { position: static; }
.gamelog tfoot tr:not(:last-child) td.stick-1,
.gamelog tfoot tr:not(:last-child) td.stick-2 { position: sticky; bottom: auto; }

/* Últimos 5: barra de partido no jugado */
.minibars .bar--np { background: var(--line); }

/* Enlaces de jugador dentro de tablas (compañeros) */
.table a.player-cell { color: var(--ink); }
.table a.player-cell:hover { color: var(--accent-deep); text-decoration: none; }