/* ════════════════════════════════════════════════════════════
   THEME · Rediseño marca Team Medellín — capas NUEVAS compartidas.
   Los tokens de color/tipografía viven en cada página (retemados a la
   paleta oficial #2C315F/#009CDF/#0097AF + Roboto).
   ponytail: extracción parcial — aquí solo lo nuevo (chips + tarjetas
   móviles); mover el resto del CSS duplicado cuando haya otra pasada.
   ════════════════════════════════════════════════════════════ */

/* ── Chips de filtro (categorías frecuentes) ── */
.filter-chips {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .1rem .1rem .7rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--d-line, #2E3565);
  background: var(--d-surface, #20264B);
  color: var(--c-gray, #9BA4B5);
  border-radius: 999px;
  padding: .48rem 1.05rem;
  font-family: var(--font-ui, Roboto, system-ui, sans-serif);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-chip:hover { border-color: var(--c-blue-br, #3DC1FF); color: var(--c-blue-br, #3DC1FF); }
.filter-chip.on {
  background: var(--c-blue, #009CDF);
  border-color: var(--c-blue, #009CDF);
  color: #fff;
  font-weight: 700;
}

/* ── Resultados como tarjetas en móvil (sin columnas ocultas a la fuerza) ── */
@media (max-width: 640px) {
  .table-wrap { background: transparent; border: none; box-shadow: none; overflow: visible; }
  #table-container table { display: block; }
  #table-container thead { display: none; }
  #table-container tbody { display: flex; flex-direction: column; gap: .6rem; }
  #table-container tbody tr {
    display: grid;
    /* pos | nombre/dorsal | tiempo */
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: .75rem;
    row-gap: .12rem;
    align-items: center;
    background-color: var(--d-surface, #20264B);
    border: 1px solid var(--d-line, #2E3565);
    border-radius: 14px;
    padding: .7rem .85rem;
    box-shadow: none;
  }
  #table-container td { display: block; padding: 0; border: 0; }
  #table-container td.hide-sm { display: none; }
  #table-container td:first-child { grid-column: 1; grid-row: 1 / span 2; }
  #table-container td.name-cell {
    grid-column: 2 / span 2;
    grid-row: 1;
    white-space: normal;
    line-height: 1.3;
    font-size: .92rem;
  }
  #table-container td:has(.dorsal-badge) { grid-column: 2; grid-row: 2; }
  #table-container td.time-cell { grid-column: 3; grid-row: 2; text-align: right; white-space: nowrap; }
}