/* ============================================================
   css/pages/clasificacion.css — estilos exclusivos de clasificacion.php
   (cargado por head.php cuando la página define $page_css='clasificacion')
   Reutiliza .table / .table--flat / .form5 / .z-po / .z-desc / .zones-leg
   de rincon.css; aquí solo lo específico de la tabla completa.
   ============================================================ */

/* Cabecera de página: h1 + acceso a la calculadora */
.clas-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap;
}
.clas-head h1 {
  font-family: var(--score); font-size: 30px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1;
}
.clas-head__sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* La tabla desborda a scroll horizontal en pantallas estrechas */
.clas-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.clas-table { min-width: 640px; }

/* Columna de equipo: escudo + nombre completo (escritorio) / código (móvil) */
.clas-table .clas-team { white-space: nowrap; }
.clas-team .team-tag { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.clas-team__name { display: inline; }
.clas-team__code { display: none; }

/* Realce de la columna de victorias */
.clas-table td.clas-v { font-weight: 700; }

/* La primera columna (posición) queda pegada al hacer scroll horizontal */
.clas-table th:first-child,
.clas-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.clas-table thead th:first-child { z-index: 3; background: var(--ink); }
.clas-table tbody tr:nth-child(even) td:first-child { background: var(--zebra); }
.clas-table tbody tr:hover td:first-child { background: var(--hover); }

.clas-note { margin-top: var(--sp-3); max-width: 760px; line-height: 1.5; }

/* Responsive: en móvil se ocultan PF/PC/Forma y el nombre pasa a código */
@media (max-width: 640px) {
  .clas-head { align-items: flex-start; flex-direction: column; }
  .clas-head h1 { font-size: 25px; }
  .clas-table { min-width: 0; }
  .clas-table .hide-sm { display: none; }
  .clas-team__name { display: none; }
  .clas-team__code { display: inline; }
}