/* Estadísticas — cómo se ha ido desarrollando la liga.
 *
 * Mismo idioma visual que Liga y Jornada: negro, crema y oro. Con la MISMA excepción deliberada
 * que documenta liga-ui.css — verde, naranja y rojo están RESERVADOS a la química, así que aquí
 * no aparece ninguno. Un mánager pintado de rojo en este gráfico se leería como "mala química"
 * por quien acaba de venir del Draft.
 *
 * De ahí sale la decisión de fondo del gráfico: no hay un color por mánager. Hay UNA línea
 * encendida en oro —la tuya, o la que elijas— y las demás apagadas detrás. Además de no gastar
 * colores reservados, es lo único que se lee con diez líneas encima. */

/* La columna de la app. Mismos valores que liga-ui.css a propósito: esta pantalla cuelga de
   Liga, se llega desde ella y se vuelve a ella, así que un ancho distinto se notaría como un
   salto al entrar. El despeje de la barra de abajo no se pone aquí — lo lleva `body` en
   marca.css, para todas—; esto es solo el respiro del final del contenido. */
.app { width: 100%; max-width: 430px; padding-bottom: 40px; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 10px;
}
.titulo {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--crema);
}
.sub {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.volver {
  flex-shrink: 0;
  padding: 7px 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--oro-claro);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.volver:hover { background: color-mix(in srgb, var(--oro) 10%, transparent); }
.volver:focus { outline: none; }
.volver:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

.vacio {
  margin: 24px 16px;
  color: var(--crema-suave);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* ── Bloques ──────────────────────────────────────────────────────────────── */
.bloque { margin: 14px 12px 20px; }
.bloque-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--borde);
}
.bloque-titulo {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crema);
}
.bloque-nota {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* ── El interruptor Puntos / Puesto ───────────────────────────────────────── */
.conmutador {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
}
.conmutador-op {
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--crema-suave);
  font: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.conmutador-op.activa { background: color-mix(in srgb, var(--oro) 16%, transparent); color: var(--oro-claro); }
.conmutador-op:focus { outline: none; }
.conmutador-op:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }

/* ── El gráfico ───────────────────────────────────────────────────────────── */
/* La caja del gráfico. Enmarcada con un filete tenue: separa el dibujo del resto de la página
   sin ponerle un recuadro que compita con las líneas de dentro. */
.grafico {
  padding: 10px 4px 2px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
/* Se estira al ancho que haya y conserva su forma: las cuentas del módulo son coordenadas del
   `viewBox`, no píxeles, así que valen igual en un móvil de 375 que en un monitor. */
.grafico-svg { display: block; width: 100%; height: auto; }

.rejilla { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.eje-txt {
  fill: rgba(255, 255, 255, 0.4);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 8px;
  letter-spacing: 0.5px;
}

/* Las apagadas dan CONTEXTO: sin ellas no se sabría si la línea de oro va primera o última. Con
   demasiado contraste competirían con ella, así que se quedan en un susurro. */
.linea {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.linea.resaltada { stroke: var(--oro); stroke-width: 2.2; }
.punto { fill: rgba(255, 255, 255, 0.25); }
.punto.resaltado { fill: var(--oro); }

.nota {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--oro-claro);
}

/* ── La leyenda, que además ELIGE ─────────────────────────────────────────── */
.leyenda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: none;
  color: var(--crema-suave);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chip.activo { border-color: var(--oro); color: var(--oro); }
.chip:focus { outline: none; }
.chip:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.chip-nombre { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.chip-tu {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ── La tabla ─────────────────────────────────────────────────────────────── */
/* Siete columnas de datos no caben en 375px. Se desplaza SOLA, dentro de su caja: sin esto, la
   página entera se movería de lado y la cabecera y la barra se irían con ella. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-stats {
  width: 100%;
  border-collapse: collapse;
  /* Los dígitos con el mismo ancho, que es lo que hace que una columna de cifras se pueda
     comparar de un vistazo sin leerla número a número. */
  font-variant-numeric: tabular-nums;
}
.tabla-stats th, .tabla-stats td { padding: 8px 6px; text-align: right; white-space: nowrap; }
.th-nombre, .td-nombre { text-align: left; padding-left: 0; }
.tabla-stats thead th {
  border-bottom: 1px solid var(--borde);
  font-weight: 400;
}
.th-boton {
  padding: 2px 3px;
  border: none;
  border-radius: 4px;
  background: none;
  color: rgba(255, 255, 255, 0.4);
  font: inherit;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.th-dato.activa .th-boton { color: var(--oro); }
.th-boton:focus { outline: none; }
.th-boton:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }
.th-nombre {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.tabla-stats tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
/* Tu fila, sin colores de química: un filete de oro a la izquierda y el nombre en crema. */
.tabla-stats tbody tr.yo { background: color-mix(in srgb, var(--oro) 7%, transparent); }
.tabla-stats tbody tr.yo .td-nombre { box-shadow: inset 2px 0 0 var(--oro); padding-left: 8px; color: var(--crema); }
.td-nombre {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--crema);
}
.td-dato { font-family: "Bebas Neue", Impact, sans-serif; font-size: 14px; color: var(--crema-suave); }
/* La columna por la que se está ordenando, encendida: es la respuesta a lo que acabas de pulsar,
   y sin esto una tabla reordenada parece que se ha movido sola. */
.td-dato.activa { color: var(--oro); }