/* ============================================================
   smgr · css/pages/viz_fichados.css — LOS MÁS FICHADOS
   (visualizacion_fichados.php).

   Misma gramática que viz_ideales.css (cabecera azul, franja de estadísticas,
   filas con foto, pie oscuro) y todo bajo #captureArea, pero cada fila lleva
   DOS jugadores: el titular de la posición, grande, y justo debajo el siguiente
   de esa misma posición, en gris y pequeño. La jerarquía la dan el tamaño y el
   fondo, no un separador: se tiene que leer de un vistazo que la línea de abajo
   es la segunda opción, no otro titular.
   ============================================================ */

#captureArea {
  font-family: 'Inter', sans-serif;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
  width: 1024px;
}
#captureArea * { box-sizing: border-box; }

/* ---------- Cabecera ---------- */
#captureArea .header {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  color: #fff; padding: 14px 10px; text-align: center;
}
#captureArea .logo-section {
  display: flex; align-items: center; justify-content: center; gap: 15px;
}
#captureArea .header h1 { font-size: 32px; font-weight: 800; margin: 0; }
#captureArea .header p { font-size: 15px; opacity: .9; margin-top: 4px; }

/* ---------- Franja de estadísticas ---------- */
#captureArea .stats-header { background: #f8f9fa; padding: 18px 30px; border-bottom: 2px solid #e9ecef; }
#captureArea .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
#captureArea .stat-item { background: #fff; padding: 14px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
#captureArea .stat-value { font-size: 24px; font-weight: 700; color: #2d3748; display: block; }
#captureArea .stat-label { font-size: 12px; color: #718096; text-transform: uppercase; font-weight: 600; margin-top: 5px; }

/* El aviso del presupuesto: es el dato con más gracia de la tarjeta (los diez que
   todos quieren no caben), así que va en su propia franja y no de nota al pie. */
#captureArea .fx-aviso {
  background: #fff5f5; border-bottom: 2px solid #fed7d7; color: #742a2a;
  padding: 11px 30px; text-align: center; font-size: 14px; font-weight: 500;
}
#captureArea .fx-aviso strong { font-weight: 800; }

/* ---------- Rejilla común de las dos filas ---------- */
#captureArea .table-header,
#captureArea .player-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 120px 110px 300px;
  align-items: center; gap: 10px;
}
#captureArea .table-header {
  background: #2d3748; color: #fff; padding: 12px 18px;
  font-weight: 600; font-size: 13px; letter-spacing: .03em; text-align: center;
}
#captureArea .table-header div:nth-child(2) { text-align: left; }
#captureArea .table-header .th-bar { text-align: left; }

#captureArea .players-list { background: #fff; }
#captureArea .fx-slot { border-bottom: 1px solid #e2e8f0; }
#captureArea .fx-slot:last-child { border-bottom: 0; }
#captureArea .player-row { padding: 8px 18px 6px; min-height: 56px; }

#captureArea .player-rank {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
}
#captureArea .player-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
#captureArea .player-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
  border: 2px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
}
/* La foto va ENCIMA de las iniciales: cuando el jugador no tiene retrato (los
   fichajes recién llegados), el onerror la esconde y quedan las iniciales, no un
   círculo vacío. */
#captureArea .player-avatar { position: relative; }
#captureArea .player-avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#captureArea .player-avatar .ini { color: #4a5568; font-weight: 700; font-size: 15px; }
#captureArea .player-details { min-width: 0; }
#captureArea .player-details h3 {
  margin: 0; font-size: 17px; font-weight: 700; color: #1a202c;
  white-space: nowrap; display: flex; align-items: center;
}

/* Las banderitas del cupo. display: inline-block explícito porque rincon.css trae
   img { display: block } y la captura NO carga ese fichero: sin esto se ven de una
   forma en la web y de otra en el PNG. */
#captureArea .player-details .cup,
#captureArea .fx-next__jug .cup {
  display: inline-block; width: 17px; height: 17px; margin-left: 8px;
  vertical-align: -3px; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px rgba(19, 28, 46, .18);
}
#captureArea .fx-next__jug .cup--sm { width: 13px; height: 13px; margin-left: 6px; vertical-align: -2px; }

#captureArea .team-column { display: flex; align-items: center; justify-content: center; gap: 7px; }
/* rincon.css trae img { display: block } y la captura NO lo carga: el escudo se
   comporta distinto en la web y en el PNG si no se fija aquí. */
#captureArea .team-column img { display: inline-block; width: 30px; height: 30px; object-fit: contain; }
#captureArea .eqcod { font-weight: 700; color: #2d3748; font-size: 14px; }
#captureArea .value-column { font-weight: 700; font-size: 15px; color: #2d3748; text-align: center; }

/* ---------- La barra de cuántos equipos lo tienen ---------- */
#captureArea .fx-bar-cell { display: flex; align-items: center; gap: 10px; }
#captureArea .fx-bar {
  flex: 1 1 auto; height: 12px; border-radius: 6px; background: #edf2f7;
  position: relative; overflow: hidden;
}
#captureArea .fx-bar--sm { height: 8px; }
#captureArea .fx-bar__f {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px;
  background: #2c5282;
}
#captureArea .fx-num {
  flex: 0 0 92px; text-align: right; font-weight: 800; font-size: 16px; color: #1a202c;
}
#captureArea .fx-num small { font-weight: 600; font-size: 12px; color: #718096; }
#captureArea .fx-num--sm { font-size: 13px; font-weight: 700; color: #4a5568; }
#captureArea .fx-num--sm small { font-size: 11px; }

/* ---------- La segunda línea: el siguiente de la posición ---------- */
#captureArea .fx-next {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 120px 110px 300px;
  align-items: center; gap: 10px;
  padding: 5px 18px 8px; background: #f7fafc;
}
/* La segunda línea pinta cuatro celdas en una rejilla de cinco, así que hay que
   decir en cuál va cada una: el nombre ocupa jugador + equipo y la barra tiene
   que caer en la columna de la barra, no en la del precio. */
#captureArea .fx-next__lbl { grid-column: 1; }
#captureArea .fx-next__jug { grid-column: 2 / 4; }
#captureArea .fx-next__pre { grid-column: 4; }
#captureArea .fx-next .fx-bar-cell { grid-column: 5; }
#captureArea .fx-next__lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #a0aec0; text-align: center; white-space: nowrap;
}
#captureArea .fx-next__jug { display: flex; align-items: center; gap: 7px; min-width: 0; padding-left: 56px; }
#captureArea .fx-next__jug img { display: inline-block; width: 20px; height: 20px; object-fit: contain; flex: none; }
#captureArea .fx-next__jug .nm {
  font-size: 14px; font-weight: 600; color: #4a5568;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#captureArea .fx-next__jug .eq { font-size: 12px; font-weight: 700; color: #a0aec0; }
#captureArea .fx-next__pre { text-align: center; font-size: 13px; font-weight: 600; color: #718096; }

/* ---------- Pie ---------- */
#captureArea .footer {
  background: #2d3748; color: #fff; padding: 10px 20px; text-align: center; font-size: 14px;
}
#captureArea .social-links { margin-top: 8px; }
#captureArea .social-links span { margin: 0 10px; opacity: .8; }

.ec-link { margin: var(--sp-4) 0 0; }