/* ============================================================================
   FBF · Clasificación
   ----------------------------------------------------------------------------
   Acompaña a assets/js/clasificacion.js. Pensada para el sitio del hincha
   (tema oscuro), que es donde se consulta la tabla.

   La zona se señala con una barra de color a la izquierda de la fila y NO
   solo con el color de fondo: quien no distingue verde de naranja tiene que
   poder leer igual en qué zona está su club, y para eso está la leyenda con
   el mismo color y su texto.
   ============================================================================ */

/* Encabezado de grupo, cuando la competencia se juega en zonas. */
.cl-grupo {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-500, #f2b705);
}
.cl-grupo:first-child { margin-top: 0; }

.cl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.cl-tabla {
  width: 100%;
  min-width: 620px;          /* debajo de esto la fila se vuelve ilegible */
  border-collapse: collapse;
  font-size: 13px;
}

.cl-tabla th,
.cl-tabla td {
  padding: 11px 8px;
  text-align: center;
  white-space: nowrap;
}

.cl-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2, #0d1f18);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.cl-tabla tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cl-tabla tbody tr:hover td { background: rgba(255, 255, 255, .035); }

/* ---------- Puesto y barra de zona ---------- */
.cl-tabla .cl-pos {
  position: relative;
  width: 42px;
  padding-left: 14px;
  /* --text-muted mide 4.43:1 sobre las filas con velo de zona, justo por
     debajo del mínimo. El puesto es el dato principal de esta columna. */
  color: #a8bfb5;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.cl-marca {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

/* ---------- Club ---------- */
.cl-tabla .cl-club { width: 40%; text-align: left; }
.cl-tabla .cl-club a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.cl-tabla .cl-club a:hover { color: var(--gold-500, #f2b705); }
.cl-tabla .cl-club img { flex: none; width: 24px; height: 24px; object-fit: contain; }
.cl-tabla .cl-club span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Números ---------- */
.cl-tabla td:not(.cl-club) { font-variant-numeric: tabular-nums; }
.cl-tabla .cl-dg { font-weight: 700; }
.cl-tabla .cl-pts { font-weight: 900; color: var(--gold-500, #f2b705); font-size: 14px; }

/* La fila del club que se está mirando, cuando la tabla se muestra dentro de
   su ficha: sin esto hay que ir contando para encontrarlo. */
.cl-tabla tr.es-destacada td { background: rgba(242, 183, 5, .10); }
.cl-tabla tr.es-destacada .cl-club a { color: var(--gold-500, #f2b705); }

/* ---------- Zonas ----------
   El color va en la barra lateral y en un velo muy tenue sobre la fila. El
   velo solo ayuda a agrupar; el dato lo da la barra, que se lee igual en
   escala de grises por su posición. */
[data-zona="lib"]    .cl-marca { background: #2f7fe0; }
[data-zona="libpre"] .cl-marca { background: #e08a2f; }
[data-zona="sud"]    .cl-marca { background: #1f9d63; }
[data-zona="desc"]   .cl-marca { background: #d8443f; }

tr[data-zona="lib"]    td { background: rgba(47, 127, 224, .07); }
tr[data-zona="libpre"] td { background: rgba(224, 138, 47, .07); }
tr[data-zona="sud"]    td { background: rgba(31, 157, 99, .07); }
tr[data-zona="desc"]   td { background: rgba(216, 68, 63, .07); }

/* La ficha del club reutiliza los mismos colores de zona, para que el hincha
   reconozca sin leer que su equipo está en puesto de Libertadores o de
   descenso. Aquí la señal va en el borde izquierdo de la tarjeta. */
.club-position-card[data-zona] { border-left: 3px solid transparent; }
.club-position-card[data-zona="lib"]    { border-left-color: #2f7fe0; }
.club-position-card[data-zona="libpre"] { border-left-color: #e08a2f; }
.club-position-card[data-zona="sud"]    { border-left-color: #1f9d63; }
.club-position-card[data-zona="desc"]   { border-left-color: #d8443f; }

/* ---------- Racha ---------- */
.cl-tabla .cl-racha { width: 132px; }
.cl-forma { display: inline-flex; gap: 4px; }
.cl-r {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  cursor: default;
}
.cl-r svg { width: 12px; height: 12px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cl-r-v { background: rgba(31, 157, 99, .18); }
.cl-r-v svg { stroke: #46c98b; }
.cl-r-e { background: rgba(255, 255, 255, .10); }
.cl-r-e svg { stroke: #9fb3aa; }
.cl-r-d { background: rgba(216, 68, 63, .18); }
.cl-r-d svg { stroke: #f0736e; }
.cl-sin-racha { color: var(--text-muted); }

/* ---------- Leyenda ---------- */
.cl-leyenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.cl-leyenda-grupo strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cl-leyenda-grupo span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
  line-height: 1.4;
}
.cl-leyenda-grupo i { flex: none; }
.cl-leyenda-grupo i[data-zona] { width: 11px; height: 11px; border-radius: 3px; }
.cl-leyenda-grupo i[data-zona="lib"]    { background: #2f7fe0; }
.cl-leyenda-grupo i[data-zona="libpre"] { background: #e08a2f; }
.cl-leyenda-grupo i[data-zona="sud"]    { background: #1f9d63; }
.cl-leyenda-grupo i[data-zona="desc"]   { background: #d8443f; }

/* ---------- Móvil ----------
   El club y los puntos son lo que se busca en el teléfono; las columnas
   auxiliares (G, E, P, GF, GC) se esconden y la tabla deja de necesitar
   desplazamiento lateral, que es lo que hacía imposible leerla. */
@media (max-width: 620px) {
  .cl-tabla { min-width: 0; font-size: 12.5px; }
  .cl-tabla .cl-op,
  .cl-tabla .cl-racha { display: none; }
  .cl-tabla .cl-club { width: auto; }
  .cl-tabla th, .cl-tabla td { padding: 10px 5px; }
}

@media print {
  .cl-wrap { overflow: visible; }
  .cl-tabla { min-width: 0; }
  .cl-tabla tbody tr[data-zona] td { background: none !important; }
}