/* ============================================================
   TradingFight — STANDINGS (rankings)
   Primera vista migrada al sistema de diseño. Ver docs/context/DESIGN_SYSTEM.md

   NOTA DE ESPECIFICIDAD (importante):
   Todo aquí usa clases planas `tfs-*` (especificidad 0-1-0). NO se usan
   selectores de ID. Motivo: main.css tiene 107 selectores de ID (86 con
   #page-game) y eso obliga a responsive.css a llevar 161 !important, porque
   no hay otra forma de sobrescribirlos. Ese es el bucle que hay que romper.
   Estas clases ganan a las de main.css por ORDEN DE CARGA (este fichero va
   después), no por fuerza bruta. Cero !important en todo el fichero.

   Las media queries viven AQUÍ, junto a su componente — no en responsive.css.
   Tener el layout y su adaptación móvil en ficheros distintos, con versiones
   de caché distintas, es la fábrica de bugs responsive que documentó la auditoría.
   ============================================================ */

/* ── Contenedor ─────────────────────────────────────────── */
.tfs-panel {
    background: var(--tf-surface-1);
    border: 1px solid var(--tf-border-default);
    border-radius: var(--tf-radius-md);
    overflow: hidden;
}

.tfs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf-space-3);
    padding: var(--tf-space-3) var(--tf-space-4);
    background: var(--tf-surface-2);
    border-bottom: 1px solid var(--tf-border-default);
    flex-wrap: wrap;
}

.tfs-title {
    font-family: var(--tf-font-ui);
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-weight-medium);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tf-text-secondary);
    margin: 0;
}

.tfs-tools { display: flex; gap: var(--tf-space-2); align-items: center; flex-wrap: wrap; }

/* ── Tabla ──────────────────────────────────────────────── */
/* El contenedor scrollea, NUNCA el body de la página. */
.tfs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tfs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tf-font-ui);
    font-size: var(--tf-text-sm);
}

.tfs-table thead th {
    text-align: left;
    padding: var(--tf-space-2) var(--tf-space-3);
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-weight-medium);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tf-text-secondary);
    background: var(--tf-surface-2);
    border-bottom: 1px solid var(--tf-border-default);
    white-space: nowrap;
    user-select: none;
}

.tfs-table tbody td {
    padding: var(--tf-space-2) var(--tf-space-3);
    border-bottom: 1px solid var(--tf-border-subtle);   /* casi invisible, sin cebra */
    color: var(--tf-text-primary);
    white-space: nowrap;
}

.tfs-table tbody tr:last-child td { border-bottom: 0; }

.tfs-table tbody tr {
    transition: background var(--tf-motion-fast) var(--tf-ease);
}
.tfs-table tbody tr:hover { background: var(--tf-surface-2); }

/* Fila propia: fondo sutil + filo de acento. SIN brillo. */
.tfs-row-self { background: var(--tf-accent-muted); box-shadow: inset 2px 0 0 var(--tf-accent); }
.tfs-row-self:hover { background: var(--tf-accent-muted); }

/* Columnas numéricas: derecha + tabulares. Sin esto los dígitos bailan. */
.tfs-num {
    text-align: right;
    font-family: var(--tf-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.tfs-rank {
    font-family: var(--tf-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--tf-text-tertiary);
    text-align: right;
    width: 44px;
}

/* ── Celda de jugador ───────────────────────────────────── */
.tfs-player { display: flex; align-items: center; gap: var(--tf-space-2); min-width: 0; }

/* El marco (.tf-ring) NO puede ir sobre el <img>.
   Los pseudo-elementos no se renderizan en elementos reemplazados (<img>, <input>,
   <video>…): el navegador sustituye su contenido por el recurso externo, así que
   ::before/::after nunca llegan a existir. Poner .tf-ring en el <img> deja el marco
   INVISIBLE sin error ninguno — falla en silencio.
   Por eso el anillo va en este contenedor y el <img> vive dentro.
   Mismo patrón que TF_USER.renderMiniProfile, que ya usaba un div aparte. */
.tfs-avatar-wrap {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

.tfs-avatar {
    width: 22px;
    height: 22px;
    border-radius: var(--tf-radius-full);
    background: var(--tf-surface-3);
    flex-shrink: 0;
    object-fit: cover;
}

.tfs-avatar-wrap .tfs-avatar { display: block; width: 100%; height: 100%; }

.tfs-nick {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--tf-weight-medium);
}

.tfs-clan { color: var(--tf-text-secondary); font-size: var(--tf-text-xs); }

/* ── Racha: color solo por semántica ────────────────────── */
.tfs-streak-up   { color: var(--tf-profit); }
.tfs-streak-down { color: var(--tf-loss); }
.tfs-streak-flat { color: var(--tf-neutral); }

/* ── Banner "tu posición" ───────────────────────────────────
   REGRESIÓN ARREGLADA: el banner usaba .leaderboard-self-banner / .lb-avatar-wrap /
   .lb-avatar-ring / .lb-clan / .elo-cell, y la limpieza del bloque 2 se llevó todas
   esas reglas por delante (`.leaderboard-self` casaba también con
   `.leaderboard-self-banner` por prefijo). Resultado: el banner se quedó SIN NINGÚN
   estilo, y su <img> sin caja — es decir, al tamaño natural del SVG de dicebear.
   No saltó en la verificación porque solo aparece si estás logueado Y sales en la
   lista, y la lista mostraba jugadores demo.
   Se reconstruye con el sistema de diseño. */
.tfs-self-banner {
    display: none;                  /* el JS lo pone a flex cuando hay dato */
    align-items: center;
    gap: var(--tf-space-3);
    flex-wrap: wrap;
    padding: var(--tf-space-2) var(--tf-space-3);
    margin-bottom: var(--tf-space-3);
    background: var(--tf-accent-muted);
    border: 1px solid var(--tf-border-default);
    border-left: 2px solid var(--tf-accent);
    border-radius: var(--tf-radius-md);
    font-family: var(--tf-font-ui);
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
}

.tfs-self-pos { white-space: nowrap; }
.tfs-self-pos strong {
    color: var(--tf-accent);
    font-family: var(--tf-font-mono);
    font-variant-numeric: tabular-nums;
}

.tfs-self-stats {
    display: flex;
    align-items: center;
    gap: var(--tf-space-3);
    flex-wrap: wrap;
    min-width: 0;
}

.tfs-self-name { color: var(--tf-text-primary); font-weight: var(--tf-weight-medium); }

/* ── Controles ──────────────────────────────────────────── */
.tfs-filter {
    font-family: var(--tf-font-ui);
    font-size: var(--tf-text-sm);
    padding: var(--tf-space-2) var(--tf-space-3);
    background: var(--tf-bg-sunken);
    border: 1px solid var(--tf-border-default);
    border-radius: var(--tf-radius-sm);
    color: var(--tf-text-primary);
    min-width: 180px;
}
.tfs-filter::placeholder { color: var(--tf-text-tertiary); }
.tfs-filter:focus {
    outline: none;
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 1px var(--tf-accent);
}

.tfs-tab {
    font-family: var(--tf-font-ui);
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-weight-medium);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: var(--tf-space-2) var(--tf-space-3);
    background: transparent;
    border: 1px solid var(--tf-border-default);
    border-radius: var(--tf-radius-sm);
    color: var(--tf-text-secondary);
    cursor: pointer;
    transition: background var(--tf-motion-fast) var(--tf-ease),
                color var(--tf-motion-fast) var(--tf-ease);
}
.tfs-tab:hover { background: var(--tf-surface-3); color: var(--tf-text-primary); }
/* El JS marca el estado con `.active` (app.js:2686, :1592). Se soportan las dos formas:
   `.tfs-tab-active` para markup estático y `.active` para no tener que reescribir —y
   arriesgar— los selectores del JS que ya funcionan. */
.tfs-tab-active,
.tfs-tab.active {
    background: var(--tf-accent-muted);
    border-color: var(--tf-accent);
    color: var(--tf-accent);
}
.tfs-tab:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }
.tfs-tab i { font-size: 1em; }

/* Variante pequeña: los botones de orden son secundarios frente a los modos. */
.tfs-tab-sm {
    font-size: 11px;
    padding: var(--tf-space-1) var(--tf-space-2);
    letter-spacing: .04em;
}

/* ── Aviso de datos de ejemplo ──────────────────────────────
   `.tf-badge-demo` (tokens.css) es inline-flex, que con `margin: 0 auto` no centra.
   `.tfs-demo-badge.hidden` es 0-2-0 y gana a `.tfs-demo-badge` (0-1-0), así que el
   toggle del JS funciona sin depender del orden de carga de main.css. */
.tfs-demo-badge {
    display: flex;
    width: fit-content;
    margin: 0 auto var(--tf-space-3);
}
.tfs-demo-badge.hidden { display: none; }

/* ── Barra de modos ─────────────────────────────────────── */
.tfs-tabs {
    display: flex;
    justify-content: center;
    gap: var(--tf-space-2);
    margin-bottom: var(--tf-space-4);
    flex-wrap: wrap;
}

/* ── Buscador + orden ───────────────────────────────────── */
.tfs-controls {
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-2);
    margin-bottom: var(--tf-space-3);
}

.tfs-search-wrap { position: relative; max-width: 340px; }
.tfs-search-wrap i {
    position: absolute;
    left: var(--tf-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tf-text-tertiary);
    font-size: var(--tf-text-xs);
    pointer-events: none;
}
/* El icono vive dentro del campo: hay que dejarle sitio. */
.tfs-search-wrap .tfs-filter { width: 100%; padding-left: var(--tf-space-6); }

.tfs-sort-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tf-space-2);
}
.tfs-sort-label {
    font-family: var(--tf-font-ui);
    font-size: var(--tf-text-xs);
    color: var(--tf-text-tertiary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Estados ────────────────────────────────────────────── */
.tfs-state {
    padding: var(--tf-space-7) var(--tf-space-4);
    text-align: center;
    color: var(--tf-text-secondary);
    font-size: var(--tf-text-sm);
}

/* Estado de ERROR visible.
   Antes, un fallo de /api/leaderboard caía en _generateDemoLeaderboard() y
   pintaba 95 jugadores ficticios: la app fingía funcionar y el 500 pasó
   desapercibido meses (BUG-062). Los fallos se muestran; no se disfrazan. */
.tfs-state-error { color: var(--tf-danger); }
.tfs-retry {
    margin-top: var(--tf-space-3);
    font-family: var(--tf-font-ui);
    font-size: var(--tf-text-sm);
    padding: var(--tf-space-2) var(--tf-space-4);
    background: var(--tf-surface-2);
    border: 1px solid var(--tf-border-default);
    border-radius: var(--tf-radius-md);
    color: var(--tf-text-primary);
    cursor: pointer;
}
.tfs-retry:hover { background: var(--tf-surface-3); }

/* ── Paginación ─────────────────────────────────────────── */
.tfs-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf-space-3);
    padding: var(--tf-space-2) var(--tf-space-4);
    border-top: 1px solid var(--tf-border-default);
    background: var(--tf-surface-2);
    font-size: var(--tf-text-xs);
    color: var(--tf-text-secondary);
}
.tfs-foot-info { font-variant-numeric: tabular-nums; }

/* ── Responsive: aquí, junto al componente ──────────────── */
@media (max-width: 768px) {
    /* Se ocultan columnas secundarias por PRIORIDAD, y la tabla sigue
       scrolleando en su contenedor. La estrategia anterior era un
       `.lb-clan { display:none }` suelto en responsive.css y nada más
       para una tabla de 9 columnas. */
    .tfs-col-optional { display: none; }
    .tfs-table thead th,
    .tfs-table tbody td { padding: var(--tf-space-2); }
    .tfs-head { padding: var(--tf-space-2) var(--tf-space-3); }
    .tfs-filter { min-width: 0; flex: 1; }

    /* Cuatro modos no caben en un móvil. En vez de encoger la fuente en tres
       breakpoints distintos (que es lo que hacía responsive.css), el contenedor
       pasa a carrusel horizontal. Scrollea la barra, nunca la página. */
    .tfs-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: var(--tf-space-1);
    }
    .tfs-tab { flex-shrink: 0; white-space: nowrap; }
    .tfs-search-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
    .tfs-col-compact { display: none; }
    .tfs-table { font-size: var(--tf-text-xs); }
}