/* Pestañas del ranking, tabla de posiciones y tarjetas de paquetes. */

.pestanas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pestana {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--borde-suave);
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto-tenue);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: all 0.2s;
}

.pestana:hover { color: var(--texto); border-color: var(--borde); }

.pestana.activa {
  color: #1a1206;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(212, 168, 67, 0.3);
}

/* --- tabla de posiciones --- */

.tabla-ranking { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.tabla-ranking th {
  text-align: left;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--oro);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(212, 168, 67, 0.2);
}

.tabla-ranking td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tabla-ranking tr:last-child td { border-bottom: none; }
.tabla-ranking .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-ranking .puesto { width: 58px; font-weight: 800; color: var(--texto-tenue); }
.tabla-ranking tr.yo td { background: rgba(212, 168, 67, 0.08); }
.tabla-ranking tr.podio-1 .puesto,
.tabla-ranking tr.podio-2 .puesto,
.tabla-ranking tr.podio-3 .puesto { font-size: 1.2rem; }
.tabla-ranking tr.podio-1 td { color: var(--oro-claro); font-weight: 700; }
.tabla-ranking .puntos { color: var(--oro-claro); font-weight: 700; }

/* --- paquetes de la tienda --- */

.paquete {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(165deg, var(--panel-alto), rgba(9, 13, 20, 0.9));
  border: 1px solid var(--borde-suave);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s, border-color 0.25s;
}

.paquete:hover { transform: translateY(-4px); border-color: var(--oro); }

.paquete.destacado { border-color: rgba(212, 168, 67, 0.55); }

.paquete .cinta {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 168, 67, 0.16);
  border: 1px solid rgba(212, 168, 67, 0.5);
  color: var(--oro-claro);
}

.paquete h2 { font-size: 1.05rem; font-weight: 700; }

.paquete .cantidad {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--oro-claro);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.paquete .cantidad small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.paquete .bonus {
  color: var(--verde);
  font-size: 0.85rem;
  font-weight: 600;
}

.paquete .precio {
  margin-top: 6px;
  font-size: 1.25rem;
  font-weight: 700;
}

.paquete .unitario {
  font-size: 0.76rem;
  color: var(--texto-tenue);
  margin-bottom: 14px;
}

.paquete .accion { margin-top: auto; width: 100%; }

/* ------------------------------------ la identidad en la fila del ranking

   La celda del jugador pasó de ser un texto a ser cara + nombre + título.
   Va en flex y no en línea porque el marco se superpone a la cara, y para
   superponer hace falta una caja con posición propia. */
.jugador-ranking {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* El envoltorio existe SÓLO para poder superponer el marco.

   Un `border` sobre el círculo cambiaría su tamaño y las filas de la tabla
   medirían distinto según quién tenga marco puesto — en una tabla eso se ve
   más que en ningún otro lado, porque las filas están una arriba de la otra. */
.ficha-ranking {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: block;
}

/* Más chico que en la sala: en una tabla las filas van una pegada a la otra y
   38 px las separa de más. El círculo es el mismo, definido en `app.css`. */
.ficha-ranking .avatar-inicial {
  --lado-avatar: 30px;
  font-size: 0.78rem;
}

/* El marco, con alto y ancho ESCRITOS.

   Nunca en `auto`: una imagen en posición absoluta con `width: auto` se pinta
   al tamaño del archivo, no al de su caja. Con un PNG grande el marco taparía
   la tabla entera. Ya pasó en la sala de espera y en la mesa. */
.marco-ranking {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  object-fit: contain;
  pointer-events: none;
}

/* El nombre no envuelve y se recorta: una tabla con filas de distinta altura
   según el largo del nombre se lee mucho peor que un nombre cortado. */
.nombre-ranking {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14ch;
}

/* En el teléfono la columna es angosta y el título es lo primero que sobra:
   el puesto, el nombre y los puntos son lo que se viene a mirar. */
@media (max-width: 560px) {
  .jugador-ranking .titulo-jugador { display: none; }
  .nombre-ranking { max-width: 10ch; }
}

/* ===================================================== la tabla en el teléfono

   LA RED DE SEGURIDAD, PRIMERO.

   Una tabla con cinco columnas tiene un ancho mínimo y ninguna cantidad de CSS
   lo baja a cero. Sin esto, lo que no entra se sale del `.panel`, del `main` y
   de la ventana: el documento medía 452 px en una pantalla de 320 y la página
   entera se corría en horizontal, con la barra y el título. Medido a 320, 375,
   390 y 414 px.

   Con `overflow-x: auto` lo que no entra se desplaza ADENTRO de su caja, que
   es lo que hace cualquier tabla ancha en cualquier sitio. La página deja de
   moverse y el `ranking-movil.spec.js` lo afirma. */
.caja-tabla {
  overflow-x: auto;
  /* El desplazamiento con el dedo, con freno al soltar. */
  -webkit-overflow-scrolling: touch;
}

/* Y después, que no haga falta desplazar.

   La forma corta de los encabezados numéricos vive escondida en pantalla
   grande: ver `encabezadoNum` en `ranking-ui.js`, que explica por qué son dos
   palabras y no un recorte. Con las tres letras, menos separación y menos
   relleno a los costados, el ancho mínimo de la tabla baja de 417 px a 293 con
   una fila normal y a 325 con la peor —un nombre de 14 caracteres contra su
   tope de 10ch, más un puntaje de cinco cifras con separador de miles—.

   O sea: con filas normales entra desde 375 px, donde hay 305 disponibles. Con
   un nombre largo sobran 20 px a 375 y 5 a 390, y se desplazan adentro de la
   caja, que es para lo que está. A 320 px sobra siempre: ahí no hay forma de
   meter cinco columnas, y esconder «Jugadas» dejaría a «Ganadas» sin contra
   qué leerse —12 de 40 no es lo mismo que 12 de 300—.

   Los dos números están medidos, en la página de verdad y con los dos juegos
   de filas, a 320, 375, 390 y 414 px. Las dos cosas las afirma
   `ranking-movil.spec.js`, cada una con sus filas. */
.tabla-ranking .th-corto { display: none; }

@media (max-width: 480px) {
  .tabla-ranking .th-largo { display: none; }
  .tabla-ranking .th-corto { display: inline; }

  .tabla-ranking th { letter-spacing: 0.6px; padding: 8px 6px; }
  .tabla-ranking td { padding: 12px 6px; }

  /* Y la columna del puesto, a lo que mida.

     Los 58 px de arriba son para que los números del puesto queden alineados
     en una lista larga de escritorio. En el teléfono esa prolijidad no paga:
     lo que de verdad ocupa es la medalla del podio a 1,2 rem.

     Medido, y menos de lo que esperaba: las dos reglas juntas bajan el piso
     de la tabla de 330 px a 325. Los 58 px fijos ya no eran el tope a ese
     tamaño —el contenido mínimo manda antes—, así que lo que se gana es el
     tamaño de la medalla. Se quedan igual: cinco píxeles menos de
     desplazamiento es algo real a 320 px, donde cada uno se nota. */
  .tabla-ranking .puesto { width: auto; }
  .tabla-ranking tr.podio-1 .puesto,
  .tabla-ranking tr.podio-2 .puesto,
  .tabla-ranking tr.podio-3 .puesto { font-size: 1rem; }
}