/* ==========================================================================
   30-componentes-compartidos.css
   Proposito: estilos compartidos de navegacion y tarjetas reutilizadas.
   Criterio de limpieza: se deja solo lo activo/relevante en la app actual.
   ========================================================================== */

/* Enlaces de navegacion de dbc.NavLink (sidebar y menus) */
.nav-link {
  color: white !important;
  font-weight: 500;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 8px 16px;
  margin-right: 15px;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Boton de logout (id existente en sidebar) */
#logout-button {
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  border: 2px solid #dc3545;
}

#logout-button:hover {
  transform: scale(1.05);
  background-color: #c82333;
}

/* Tarjetas de jugadores en Home */
.tarjeta-jugador {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.tarjeta-jugador:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tarjeta-jugador.tarjeta-jugador--loading {
  position: relative;
  border-color: rgba(201, 162, 39, 0.9);
  box-shadow: 0 10px 24px rgba(11, 37, 69, 0.12), 0 0 0 2px rgba(201, 162, 39, 0.18);
  transform: translateY(-2px);
}

.tarjeta-jugador.tarjeta-jugador--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(201, 162, 39, 0.10) 35%,
    rgba(255, 255, 255, 0.44) 50%,
    rgba(201, 162, 39, 0.10) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 220% 100%;
  animation: tarjetaJugadorPulseShimmer 1.05s ease-in-out infinite;
}

@keyframes tarjetaJugadorPulseShimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* Fila activa premium en ranking al abrir modal de rendimiento */
#tabla-ranking tr.perf-ranking-row--loading td,
#tabla-ranking tr.perf-ranking-row--loading .dash-cell,
#tabla-ranking td.perf-ranking-cell--loading,
#tabla-ranking .dash-cell.perf-ranking-cell--loading,
#tabla-ranking tr.perf-ranking-row--loading td > div,
#tabla-ranking tr.perf-ranking-row--loading .dash-cell-value,
#tabla-ranking td.perf-ranking-cell--loading > div,
#tabla-ranking .dash-cell.perf-ranking-cell--loading .dash-cell-value {
  position: relative;
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(201, 162, 39, 0.12) 22%,
    rgba(255, 255, 255, 0.98) 48%,
    rgba(201, 162, 39, 0.12) 74%,
    rgba(255, 255, 255, 0.94) 100%
  ) !important;
  background-size: 220% 100% !important;
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 39, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  animation: perfRankingRowShimmer 1.05s ease-in-out infinite;
  transition: box-shadow 0.18s ease, background-position 0.18s ease, transform 0.18s ease;
}

#tabla-ranking tr.perf-ranking-row--loading td:first-child,
#tabla-ranking tr.perf-ranking-row--loading .dash-cell:first-child,
#tabla-ranking tr.perf-ranking-row--loading td:first-child > div,
#tabla-ranking tr.perf-ranking-row--loading .dash-cell:first-child .dash-cell-value {
  box-shadow:
    inset 2px 0 0 rgba(201, 162, 39, 0.95),
    inset 0 0 0 1px rgba(201, 162, 39, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

#tabla-ranking tr.perf-ranking-row--loading td > div,
#tabla-ranking tr.perf-ranking-row--loading .dash-cell-value {
  transform: translateY(-1px);
}

@keyframes perfRankingRowShimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* Cierre de modales con contraste consistente */
.modal-header .btn-close {
  color: white !important;
  opacity: 1;
}

/* Identidad de las competiciones internacionales en los selectores de ligas. */
img[src*="/flags/uefa-youth-league."],
img[src*="/flags/libertadores-sub20."] {
  object-fit: contain !important;
  border-radius: 0 !important;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-country-title img[src*="/flags/uefa-youth-league."] {
  width: 30px !important;
  height: 26px !important;
  flex: 0 0 30px;
}
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-country-title img[src*="/flags/libertadores-sub20."] {
  width: 76px !important;
  height: 26px !important;
  flex: 0 0 76px;
}