/* Jugadores: botones rápidos, puntaje, estrella, tarjetas y barra de selección */

/* Los deslizadores duplicaban las casillas numéricas: se dejan solo los números */
.range-wrap { display: none; }
.slicer-values { margin-bottom: 0; }
.rangeHint { margin-top: 4px; }

/* Barra rápida */
.ju-quick { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.ju-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ju-row--chips { justify-content: flex-start; }
.ju-seg, .ju-views { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-3); gap: 2px; }
.ju-seg__b { height: 30px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 500 12.5px/1 var(--font-ui); cursor: pointer; }
.ju-seg__b.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 28, 22, .14); font-weight: 600; }
.ju-lbl { font: 600 10.5px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.ju-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ju-chip { height: 30px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 500 12.5px/1 var(--font-ui); cursor: pointer; transition: all .15s; }
.ju-chip:hover { border-color: var(--brand); color: var(--ink); }
.ju-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px rgba(27, 103, 70, .22); }

/* Puntaje */
.ju-sc { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 4px; border-radius: 50%; border: 3px solid #B8C4BC; font: 600 12.5px/1 var(--font-data); font-style: normal; color: var(--ink-2); }
/* Rating de otra liga (0 a 10, pastilla) */
.ju-rt { display: inline-block; min-width: 40px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm, 6px); background: var(--surface); color: var(--ink); font: 500 12px/1.3 var(--font-data); text-align: center; }
.ju-card__g .ju-rt { min-width: 0; }
/* Tramos de color de las dos ligas (UI-03 Rating de la B Nacional, UI-04 Puntaje del Federal A): una sola paleta; los cortes son propios de cada
   escala y viven en js/alab-liga-metricas.js (tramoRating / tramoPuntaje). Texto oscuro sobre los dos claros y blanco sobre los dos oscuros (AA). */
.ju-rt--lo, .ju-sc--lo { background: #B9D2C4; border-color: #B9D2C4; color: #111C16; }
.ju-rt--mid, .ju-sc--mid { background: #5E9E7C; border-color: #5E9E7C; color: #111C16; }
.ju-rt--hi, .ju-sc--hi { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.ju-rt--top, .ju-sc--top { background: var(--res-loss); border-color: var(--res-loss); color: #fff; font-weight: 600; }
.ju-rley { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ju-rley__i { display: inline-flex; align-items: center; gap: 5px; }
.ju-rley .ju-rt { min-width: 0; width: 14px; height: 14px; padding: 0; border-radius: 4px; }
.ju-sc-ley { margin: 6px 0 0; max-width: 820px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); }
.ju-sc-ley .ju-rley .ju-rt { border-radius: 50%; }
.players-table-pro th.th-sortable[data-sort] { cursor: pointer; }
.players-table-pro th.th-sortable[data-sort]:hover { color: var(--brand); }

/* Casilla y estrella en el nombre */
.ju-pick { display: inline-flex; align-items: center; margin-right: 8px; cursor: pointer; opacity: 0; transition: opacity .12s; }
tr:hover .ju-pick, .ju-pick:has(input:checked) { opacity: 1; }
.ju-chk { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.ju-star { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; opacity: .35; transition: all .12s; flex: none; }
tr:hover .ju-star, .ju-star.is-on { opacity: 1; }
.ju-star:hover { background: var(--brand-tint); color: var(--brand); }
.ju-star.is-on { color: var(--brand); }
.ju-star.is-on svg { fill: currentColor; }
.ju-star .icon { width: 16px; height: 16px; }
#tbody tr.is-sel td { background: var(--brand-tint); }

/* Tarjetas */
.ju-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 16px 20px 22px; }
.ju-cards[hidden], .ju-more[hidden] { display: none; }
.ju-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 14px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: center; transition: box-shadow .15s, border-color .15s, transform .15s; }
.ju-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(17, 28, 22, .1); transform: translateY(-1px); }
.ju-card.is-sel { background: var(--brand-tint); border-color: var(--brand); }
.ju-pick--c { position: absolute; left: 12px; top: 12px; opacity: .55; margin: 0; }
.ju-card:hover .ju-pick--c, .ju-pick--c:has(input:checked) { opacity: 1; }
.ju-star--c { position: absolute; right: 10px; top: 10px; margin: 0; opacity: .55; }
.ju-card:hover .ju-star--c, .ju-star--c.is-on { opacity: 1; }
.ju-card__ph { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px rgba(17, 28, 22, .12); margin-top: 4px; }
.ju-card__n { margin-top: 6px; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; line-height: 1.2; }
.ju-card__t { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--ink-2); }
.ju-card__t img { width: 16px; height: 16px; object-fit: contain; }
.ju-card__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 10px; }
.ju-card__g > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 9px; background: var(--surface-2); }
.ju-card__g b { font: 600 14px/1.2 var(--font-data); }
.ju-card__g .ju-sc { min-width: 30px; height: 30px; font-size: 11.5px; border-width: 2.5px; }
.ju-card__g span { font-size: 10px; color: var(--ink-3); }
.ju-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--ink-3); }

/* Ver más */
.ju-more { display: flex; justify-content: center; padding: 16px; border-top: 1px solid var(--line); }
.ju-morebtn { height: 40px; padding: 0 24px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 13px/1 var(--font-ui); cursor: pointer; }
.ju-morebtn:hover { border-color: var(--brand); background: var(--brand-tint); }

/* Selección */
.ju-bulk { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #0F2D22; color: #fff; box-shadow: 0 16px 36px rgba(0, 0, 0, .3); max-width: 94vw; }
.ju-bulk[hidden] { display: none; }
.ju-bulk b { margin-right: 10px; font-size: 13px; }
.ju-bbtn { height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; font: 500 12.5px/1 var(--font-ui); cursor: pointer; }
.ju-bbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.ju-bbtn:disabled { opacity: .4; cursor: not-allowed; }
.ju-bbtn--ghost { border-color: transparent; background: transparent; color: rgba(255, 255, 255, .7); }
.ju-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 10020; padding: 10px 16px; border-radius: 12px; background: #0F2D22; color: #fff; font: 500 13px/1.4 var(--font-ui); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.ju-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ju-pop { pointer-events: none; z-index: 120; }

/* El pager viejo ya no se usa */
.pager #btnPrev, .pager #btnNext { display: none; }
.pager .pill { background: transparent; border: 0; color: var(--ink-3); }

@media (max-width: 900px) { .ju-quick { padding: 10px 14px; } .ju-cards { padding: 12px 14px 18px; } .ju-pop { display: none; } }