/* ==========================================================================
   El Camino DT — BUSCAR JUGADORES DEL CLUB, COMO EL SCOUTING DEL MODO
   --------------------------------------------------------------------------
   La franja y la retícula son las de `.scsel` (seleccion.css); acá va lo que
   el club agrega: el buscador de `scouting.js` adentro de la tarjeta grande y
   las dos solapas de la derecha. Lo pinta `pantalla-scouting-club.js`.
   ========================================================================== */

/* La franja lleva la clase de la Plantilla para que `franja-del-club.js` le
   meta las solapas de Fichajes; las columnas son las del Scouting. */
.scc .scc__hero.plsel__hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
@media (max-width: 1180px) { .scc .scc__hero.plsel__hero { grid-template-columns: minmax(0, 1fr); } }

/* El buscador pide más ancho que el mapa del modo. */
.scc .scsel__grilla--mapa { grid-template-columns: minmax(0, 2fr) minmax(24rem, 1fr) !important; }
@media (max-width: 1100px) { .scc .scsel__grilla--mapa { grid-template-columns: minmax(0, 1fr) !important; } }

/* --- la tarjeta de los ojeados: criterios arriba, la matriz abajo --- */
.scc .scc__ojeados { overflow: hidden; }
.scc .scc__criterios {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-3) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--line-hairline);
}
.scc .scc__results { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.scc .scc__results .table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.scc .scc__results .panel__head { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

/* --- las dos solapas --- */
.scc .scc__lado[data-ver='red'] .scsel__tab:not(.scsel__tab--red),
.scc .scc__lado[data-ver='candidato'] .scsel__tab:not(.scsel__tab--candidato) { display: none; }
.scc .scc__preview { display: flex; flex-direction: column; min-height: 0; }
.scc .scc__preview > .scsel__rueda { padding: 0 var(--sp-4) var(--sp-4); }

/* --- el país elegido y la red --- */
.scc .scpais__gente .oje { display: inline-flex; align-items: center; gap: var(--sp-3); }
.scc .scc__acciones { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.scc .scc__red { margin-top: var(--sp-2); width: 100%; min-width: 0; table-layout: fixed; }
.scc .scc__red th:nth-child(2), .scc .scc__red td:nth-child(2) { width: 6.5rem; }
.scc .scc__red th:nth-child(3), .scc .scc__red td:nth-child(3) { width: 7.5rem; }
.scc .scc__red td { white-space: normal; overflow-wrap: anywhere; }
.scc .scc__red tbody tr { height: auto; }
.scc .scc__red .ojeo2__quien { display: grid; gap: 2px; }
.scc .scc__red .ojeo2__extra { color: var(--text-muted); font-size: var(--fs-xs); }
.scc .ojeo2__aviso { margin: var(--sp-2) 0 0; color: var(--accent-texto); font-size: var(--fs-sm); }

@media (max-width: 720px) {
  .scc .scc__red th:nth-child(2), .scc .scc__red td:nth-child(2) { display: table-cell !important; width: 4.5rem; }
  .scc .scc__red th:nth-child(3), .scc .scc__red td:nth-child(3) { width: 6rem; }
  .scc .scc__red .ojeo2__ojos { font-size: var(--fs-xs); letter-spacing: 0; }
  .scc .scc__criterios { gap: var(--sp-3); }
  .scc .scc__acciones { margin-left: 0; }
}

/* En una columna la página rueda entera: cada tarjeta mide lo que pide. */
@media (max-width: 1100px) {
  .scc { flex: none; }
  .scc .scsel__grilla { flex: none; }
  .scc .scsel__t, .scc .scsel__col--tabs, .scc .scsel__col--tabs .scsel__tab { flex: none; min-height: auto; }
  .scc .scc__ojeados { overflow: visible; }
  .scc .scc__results .table-scroll { flex: none; max-height: 70vh; }
  .scc .scsel__mapa-caja, .scc .scc__preview > .scsel__rueda { overflow: visible; flex: none; }
}
.scc .scc__red .label { white-space: normal; overflow-wrap: anywhere; }