/* El ranking y los torneos (public/ranking.js). Prefijo rk-. Solo tokens de style.css (docs/diseno.md → Ranking y torneos).
   Datos en texto plano con " · " y estados en .status: la caja es solo para controles. */

.rk-page { max-width: 1000px; }
.rk-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s1); }
.rk-title { margin: 0; padding: 0; border: 0; }
.rk-head-r { margin-left: auto; }
.rk-season { width: auto; min-width: 200px; }
.rk-sub { margin-bottom: var(--s2); font-size: var(--fs-3); }
.rk-sub.small { font-size: var(--fs-2); }
.rk-back { display: inline-flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); color: var(--text-2); font-size: var(--fs-2); font-weight: 600; }
.rk-back:hover { color: var(--text); text-decoration: none; }
.rk-desc { white-space: pre-wrap; margin: var(--s2) 0 var(--s3); color: var(--text); line-height: 1.5; }
.rk-sec { margin-top: var(--s6); }
.rk-sechead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; border-bottom: 1px solid var(--border-2); margin-bottom: var(--s3); padding-bottom: var(--s2); }
.rk-sechead .sec-title { border: 0; padding: 0; margin: 0; }
.rk-sec-n { margin-left: var(--s2); color: var(--muted); font-weight: 400; }
.rk-sec-n::before { content: '·'; margin-right: var(--s2); }
.rk-sec-n:empty { display: none; }
.rk-foot { margin: var(--s2) 0 0; max-width: 720px; }
.rk-hint { margin: calc(-1 * var(--s1)) 0 var(--s2); }
.rk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.rk-grid2 h3.caps { margin: var(--s4) 0 var(--s2); }
@media (max-width: 760px) { .rk-grid2 { grid-template-columns: 1fr; } }

/* el campeón: un dato, en dorado, con el trofeo */
.rk-champ { display: inline-flex; align-items: center; gap: var(--s2); margin: var(--s2) 0; color: var(--gold-2); font-size: var(--fs-4); }
.rk-champ span { color: var(--text-2); font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rk-champ b { font-family: var(--font-display); font-size: var(--fs-6); color: var(--gold-2); }

/* tablas: filas separadas por un filete, números a la derecha y parejos, como una planilla sobria */
.rk-tablewrap { overflow-x: auto; }
.rk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.rk-table th { text-align: left; font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: var(--s2); border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.rk-table td { padding: var(--s2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.rk-table tbody tr:last-child td { border-bottom: 0; }
.rk-table .rk-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-table .rk-pos { width: 36px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rk-table .rk-val { color: var(--text); font-weight: 700; }
.rk-table .rk-first .rk-pos, .rk-table .rk-first .rk-val { color: var(--gold-2); }
.rk-table .rk-name { min-width: 140px; }
.rk-table .rk-off td { color: var(--muted); }
.rk-table .rk-off .rk-link, .rk-table .rk-off b { color: var(--text-2); font-weight: 600; }
.rk-table-sm { font-size: var(--fs-2); }
/* en el teléfono la tabla entra sin correrse: menos aire, y el % y los puntos (cuando ordena el promedio) se van */
@media (max-width: 560px) {
  .rk-table th, .rk-table td { padding: var(--s2) var(--s1); }
  .rk-table th { letter-spacing: .02em; }
  .rk-table .rk-sm-no { display: none; }
  .rk-table .rk-pos { width: 24px; }
  .rk-table .rk-name { min-width: 96px; }
}
.rk-cmd { display: inline-flex; flex-direction: column; gap: 2px; }
.rk-cmd.row { flex-direction: row; }
/* un nombre que abre algo: texto, subrayado al pasar */
.rk-link { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.rk-link:hover { text-decoration: underline; color: var(--gold-2); }
.rk-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }

/* partidas: una fila por partida, el orden abajo */
.rk-games { display: flex; flex-direction: column; }
.rk-game { display: flex; flex-direction: column; gap: var(--s1); width: 100%; padding: var(--s2) var(--s3); background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); text-align: left; cursor: pointer; border-radius: 0; transition: background var(--t-fast) var(--ease); }
.rk-game:last-child { border-bottom: 0; }
.rk-game:hover { background: var(--panel); }
.rk-game:focus-visible { outline: none; box-shadow: var(--ring); }
.rk-game-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.rk-game-meta { font-size: var(--fs-2); color: var(--muted); }
.rk-game-js { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-3); }
.rk-gj { display: inline-flex; align-items: baseline; gap: var(--s1); color: var(--text-2); }
.rk-gj b { font-weight: 600; }
.rk-gj-p { color: var(--muted); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.rk-gj-pts { color: var(--muted); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.rk-gj-win b, .rk-gj-win .rk-gj-p { color: var(--gold-2); }

/* la partida entera (modal) */
.rk-pm-head { margin-bottom: var(--s2); }
.rk-pm-list { display: flex; flex-direction: column; margin: var(--s3) 0; }
.rk-pm-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.rk-pm-row:last-child { border-bottom: 0; }
.rk-pm-p { width: 36px; flex: none; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 700; }
.rk-pm-row.rk-gj-win .rk-pm-p, .rk-pm-row.rk-gj-win b { color: var(--gold-2); }
.rk-pm-sel { width: 76px; flex: none; }
.rk-pm-who { flex: 1; min-width: 0; }
.rk-pm-who .meta { font-size: var(--fs-2); }
.rk-pm-pts { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-pm-err { color: var(--text-2); }
.rk-pm-err .icon { color: var(--ember); }
.rk-pm-err q, .rk-av q { color: var(--text); font-style: italic; }
.rk-pm-acts { margin-top: var(--s3); }
.rk-pl-meta { font-size: var(--fs-3); margin-bottom: var(--s2); }

/* avisos del inicio */
.rk-avs { display: flex; flex-direction: column; }
.rk-av { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.rk-av:last-child { border-bottom: 0; }
.rk-av-ico { color: var(--gold-2); align-self: flex-start; margin-top: 2px; }
.rk-av-red { color: var(--wine-2); }
.rk-av-t { flex: 1 1 260px; min-width: 0; }
.rk-av-acts { flex: none; margin-left: auto; }

/* elegir el mazo de torneo en el lobby */
.rk-picks { display: flex; flex-direction: column; gap: var(--s1); }
.rk-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: var(--s2) var(--s3); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.rk-pick:hover:not(:disabled) { border-color: var(--gold); background: var(--panel-3); }
.rk-pick:disabled { opacity: .55; cursor: not-allowed; }
.rk-pick:focus-visible { outline: none; box-shadow: var(--ring); }

/* lista de torneos y de mesas abiertas */
.rk-tlist { display: flex; flex-direction: column; }
.rk-trow { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--border); color: var(--text); transition: background var(--t-fast) var(--ease); }
.rk-trow:last-child { border-bottom: 0; }
.rk-trow:hover { background: var(--panel); text-decoration: none; }
.rk-trow-ico { color: var(--gold-2); }
.rk-trow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-trow-t .meta { color: var(--muted); }
.rk-trow-go { color: var(--muted); }
.rk-camps { display: flex; flex-direction: column; gap: var(--s1); }
.rk-campr { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-3); }
.rk-campr .icon { color: var(--gold-2); }

/* la página de un torneo */
.rk-accion { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); margin-top: var(--s4); }
.rk-acc-t { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); flex: 1 1 280px; }
.rk-reglas { display: flex; flex-direction: column; gap: var(--s1); }
.rk-prohib { columns: 2; padding-left: var(--s4); margin: 0; font-size: var(--fs-3); }
.rk-ronda { margin-bottom: var(--s4); }
.rk-ronda-h { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s1); }
.rk-mesa { border-left: 2px solid var(--border-2); padding: var(--s1) 0 var(--s1) var(--s3); margin: var(--s2) 0; }
.rk-mesa-h { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rk-mesa-js { color: var(--text-2); padding: var(--s1) 0; }
.rk-mesa .rk-game { padding-left: 0; }
.rk-orgbar { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--border); }
.rk-ins { overflow: hidden; }
.rk-in-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); }
.rk-in-row:last-child { border-bottom: 0; }
.rk-in-who { flex: 0 1 220px; min-width: 0; }
.rk-in-who .meta { color: var(--muted); }
.rk-in-mz { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.rk-mz { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s1); }
.rk-l-h { margin: var(--s3) 0 var(--s1); }
.rk-lista { columns: 2; padding-left: var(--s4); margin: 0; font-size: var(--fs-2); line-height: 1.6; }
@media (max-width: 560px) { .rk-lista, .rk-prohib { columns: 1; } }

/* anotarse */
.rk-slots { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s3) 0; }
.rk-slot { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2) var(--s3); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); }
.rk-probs { color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.rk-probs .icon { color: var(--ember); }
.rk-premio { padding-top: var(--s3); border-top: 1px solid var(--border); }
.rk-premio p { white-space: pre-wrap; margin: var(--s1) 0 var(--s2); }
.rk-acepto { font-weight: 600; cursor: pointer; }
.rk-acepto input, .rk-inv input { accent-color: var(--gold); width: 16px; height: 16px; }

/* armar un torneo: lo simple arriba, el resto plegado */
.rk-form { max-width: 760px; }
.rk-form-main { padding: var(--s4); margin: var(--s3) 0; }
.rk-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.rk-fields-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--s3); }
@media (max-width: 560px) { .rk-fields-2, .rk-fields-3 { grid-template-columns: 1fr; } }
.rk-more { border-top: 1px solid var(--border); padding: var(--s3) var(--s1) 0; }
.rk-more > summary { display: flex; align-items: center; gap: var(--s1); cursor: pointer; color: var(--gold-2); font-weight: 600; font-size: var(--fs-3); list-style: none; margin-bottom: var(--s3); user-select: none; }
.rk-more > summary::-webkit-details-marker { display: none; }
.rk-more > summary .icon { color: var(--muted); transition: transform var(--t-fast) var(--ease); }
.rk-more[open] > summary .icon { transform: rotate(90deg); }
.rk-more > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }
.rk-horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--s3); }
.rk-pts-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.rk-pts-row > span { width: 90px; flex: none; color: var(--text-2); }
.rk-num-in { width: 100%; }
.rk-pts-row .rk-num-in { width: 64px; text-align: center; }
.rk-invs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s1) var(--s3); max-height: 220px; overflow: auto; padding: var(--s2); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); }
.rk-inv { font-size: var(--fs-3); cursor: pointer; }
.rk-prohib-in, .rk-premio-in, .rk-desc-in { min-height: 90px; }
.rk-premio-in, .rk-desc-in { font-family: var(--font); font-size: var(--fs-3); }
.rk-form-acts { justify-content: flex-end; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); }