/* ══════════════════════════════════════════════════════════════════════════════
   tablero.css — PÁGINA · Ranking (tablero.html) · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Arquitectura §2.6. 3/oct, rehecho con las referencias (Duolingo, Uxcel,
   Brilliant; W3): UNA sola lista centrada, no podio + países + tabla con el
   mismo peso. Medalla 1–3 por color; del cuarto en adelante, solo el número.
   Tu fila se marca por FONDO (superficie/destacada), no por etiqueta. Los
   países son pestañas sobre la misma lista. Arriba, el resumen en cifras.
   Tiempo real: la plataforma manda, aquí se pinta.
   ══════════════════════════════════════════════════════════════════════════════ */

.tablero { max-width: calc(800px + 2 * var(--margen-hero)); }   /* 800 de contenido, como en Figma */

.tablero .ficha__titulo { margin-bottom: var(--espacio-8); }

/* ── Resumen en cifras: banda de tinta (4/oct) ────────────────────────────── */
.tablero__resumen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-16) var(--espacio-32);
  margin: 0 0 var(--espacio-32);
  padding: var(--espacio-24) var(--espacio-32) var(--espacio-32);
  background: var(--superficie-tinta);
  border-color: transparent;
  color: var(--texto-sobre-tinta);
}
.tablero__resumen .cifra { gap: var(--espacio-12); }
.tablero__resumen .cifra__n { color: var(--texto-sobre-tinta); }
.tablero__resumen .cifra__t { font-size: var(--tipo-cuerpo); line-height: 1.5; color: var(--texto-sobre-tinta-terciario); }

/* ── Ligas (pestañas) ─────────────────────────────────────────────────────── */
.tablero__ligas { margin: 0 0 var(--espacio-16); }

/* ── La lista ─────────────────────────────────────────────────────────────── */
.tablero__lista { padding: 0; overflow: hidden; }
.tablero__lista-cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espacio-8) var(--espacio-16);
  padding: var(--espacio-24) var(--espacio-32) var(--espacio-16);
}
.tablero__lista-cabeza .ficha__h2 { margin: 0; }
.tablero__sello {
  padding: var(--espacio-4) var(--espacio-8);
  background: var(--superficie-tinta);
  color: var(--texto-acento-sobre-tinta);
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.filas { list-style: none; margin: 0; padding: 0; }
.fila {
  display: grid;
  grid-template-columns: 40px 40px minmax(0, 1fr) auto auto;
  gap: var(--espacio-16);
  align-items: center;
  padding: var(--espacio-12) var(--espacio-32);
  border-top: var(--trazo-filete) solid var(--borde-filete);
  transition: background .12s ease;
}
.fila--yo { background: var(--superficie-destacada); }
/* Hover invertido (direccion-visual §5). */
.fila:hover { background: var(--superficie-tinta); color: var(--texto-sobre-tinta); }
.fila:hover .fila__pos, .fila:hover .fila__puntos { color: var(--texto-acento-sobre-tinta); }
.fila:hover .fila__pais, .fila:hover .fila__puntos small, .fila:hover .fila__identidad, .fila:hover .fila__tu { color: var(--texto-sobre-tinta-terciario); }

.fila__pos { font-family: var(--tipografia-pixel); font-size: var(--tipo-dato); line-height: 1; text-align: center; color: var(--texto-terciario); }
/* Medallas: una por puesto, con el único acento y la tinta. */
.medalla {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  color: var(--texto-principal);
}
.medalla--1 { background: var(--acento-base); }
.medalla--2 { background: var(--superficie-tinta); color: var(--texto-sobre-tinta); }
.medalla--3 { background: var(--superficie-pagina); box-shadow: inset 0 0 0 var(--trazo-linea) var(--borde-fuerte); }

.fila__quien { display: grid; gap: 2px; min-width: 0; }
.fila__alias { font-weight: 600; font-size: var(--tipo-cuerpo-menor); line-height: 1.3; overflow-wrap: anywhere; }
.fila__tu { margin-left: var(--espacio-8); font-weight: 500; font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.fila__pais { font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.fila__identidad { font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.fila__identidad .ficha__falta { font-size: var(--tipo-meta-menor); }

.fila__insignias { display: flex; gap: var(--espacio-4); }
.fila__insignia { width: 24px; height: 24px; image-rendering: pixelated; }
.fila__insignia--vacia { width: 24px; height: 24px; border: var(--trazo-filete) dashed var(--borde-filete); border-radius: 50%; }

/* Rango por país (Gran · Maestro(a) · Distinguido(a)), solo en la pestaña del país. */
.rango {
  padding: var(--espacio-4) var(--espacio-8);
  border: var(--trazo-filete) solid var(--borde-filete);
  background: var(--superficie-pagina);
  font-weight: 600;
  font-size: var(--tipo-meta-menor);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-principal);
  white-space: nowrap;
}
.rango--gran { background: var(--acento-base); border-color: var(--acento-base); }
.rango--maestro { background: var(--superficie-tinta); border-color: var(--superficie-tinta); color: var(--texto-sobre-tinta); }

.fila__puntos { min-width: 72px; font-family: var(--tipografia-pixel); font-size: var(--tipo-dato); line-height: 1; text-align: right; }
.fila__puntos small { margin-left: var(--espacio-4); font-family: var(--tipografia-texto); font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }

.tablero__nota { margin: 0; padding: var(--espacio-16) var(--espacio-32) var(--espacio-24); border-top: var(--trazo-filete) solid var(--borde-filete); font-size: var(--tipo-meta); line-height: 1.5; color: var(--texto-terciario); }
.tablero__nota b { font-weight: 600; color: var(--texto-secundario); }
.tablero__vacio { padding: var(--espacio-24) var(--espacio-32); font-size: var(--tipo-meta); color: var(--texto-terciario); }

/* ── Cómo se puntúa ───────────────────────────────────────────────────────── */
.puntua { margin-top: var(--espacio-32); padding: var(--espacio-24) var(--espacio-32) var(--espacio-32); }
.puntua__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--espacio-24) var(--espacio-32); }
.puntua__item { display: grid; gap: var(--espacio-8); align-content: start; }
.puntua__item p { margin: 0; font-size: var(--tipo-cuerpo-menor); line-height: 1.5; color: var(--texto-secundario); }
.puntua__item b { color: var(--texto-principal); }

@media (max-width: 620px) {
  .fila { grid-template-columns: 40px 32px minmax(0, 1fr) auto; padding-inline: var(--espacio-16); }
  .fila__insignias { display: none; }
  .tablero__resumen, .tablero__lista-cabeza, .tablero__nota, .puntua { padding-inline: var(--espacio-16); }
}