/* ════════════════════════════════════════════════════════════
   THEME · Reto Orgullo Paisa 2026 — capas NUEVAS compartidas.
   Tokens de color/tipografía viven en cada página (verde bosque
   #0B1D14 + oro #C9A44A + Inter, de orgullopaisa.com.co).
   ponytail: extracción parcial — aquí solo lo nuevo (chips + tarjetas
   móviles), portado del rediseño de Ruta Medellín (main).
   ════════════════════════════════════════════════════════════ */

/* ── Chips de filtro (clasificaciones 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, #284534);
  background: var(--d-surface, #1A3324);
  color: var(--c-gray, #9BA4B5);
  border-radius: 999px;
  padding: .48rem 1.05rem;
  font-family: var(--font-ui, Inter, 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-oro-br, #F0C75E); color: var(--c-oro-br, #F0C75E); }
.filter-chip.on {
  background: var(--c-oro, #C9A44A);
  border-color: var(--c-oro, #C9A44A);
  color: #241C05;
  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, #1A3324);
    border: 1px solid var(--d-line, #284534);
    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; }
}