/* ==========================================================================
   70-filtros-premium-rendimiento.css
   Propósito: Panel de filtros de dos fases para la página de rendimiento.
   Fase 1: Panel de configuración de búsqueda (pre-ranking).
   Fase 2: Barra compacta con resumen + KPIs + filtros de tabla (post-ranking).
   Paleta: Azul marino #003580 · Dorado #C9A227 · Blanco
   ========================================================================== */

/* ── Variables de la paleta ─────────────────────────────────────────────── */
:root {
  --mcf-azul:    #003580;
  --mcf-azul-dk: #001840;
  --mcf-gold:    #C9A227;
  --mcf-gold-lt: #E8C45A;
  --mcf-surface: #F8FAFC;
  --mcf-border:  rgba(201,162,39,0.30);
  --mcf-shadow:  0 8px 32px rgba(15,23,42,0.08);
  --mcf-radius:  14px;
  --perf-control-h: 36px;
  --perf-generate-w: 118px;
  --perf-minutes-gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 1 — Panel de configuración de búsqueda
   ══════════════════════════════════════════════════════════════════════════ */

#perf-panel-busqueda {
  background:
    radial-gradient(circle at top right, rgba(201,162,39,0.14) 0%, transparent 24%),
    radial-gradient(circle at bottom left, rgba(201,162,39,0.08) 0%, transparent 26%),
    linear-gradient(150deg, #fffdf7 0%, #fbf6ea 54%, #f3e8ca 100%);
  border: 1.5px solid var(--mcf-border);
  border-radius: var(--mcf-radius);
  box-shadow: var(--mcf-shadow), 0 1px 0 rgba(255,248,230,0.24) inset;
  padding: 8px 16px 8px;
  position: relative;
  z-index: 30;
  overflow: visible;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 8px;
}

/* Franja decorativa superior dorada */
#perf-panel-busqueda::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(201,162,39,0.08) 0%,
    var(--mcf-gold) 14%,
    var(--mcf-gold-lt) 50%,
    var(--mcf-gold) 86%,
    rgba(201,162,39,0.08) 100%);
  border-radius: 999px;
  opacity: 0.90;
  pointer-events: none;
  z-index: 2;
}

/* Header del panel */
.perf-panel-header {
  display: none;
}

.perf-panel-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--mcf-azul) 0%, var(--mcf-azul-dk) 100%);
  color: white;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,53,128,0.16);
  flex-shrink: 0;
}

.perf-panel-header-badge i {
  color: var(--mcf-gold-lt);
  font-size: 0.60rem;
}

/* ── Barra unificada para inicio.py (misma estética que rendimiento) ──── */
.perf-busqueda-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: radial-gradient(circle at top right, rgba(201,162,39,0.10) 0%, transparent 24%),
              linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 100%);
  border: 1px solid rgba(201,162,39,0.35);
  border-top: 3px solid var(--mcf-gold);
  border-radius: var(--mcf-radius);
  box-shadow: var(--mcf-shadow);
  padding: 0;
  overflow: visible;
  max-width: 760px;
}

/* Rejilla de 3 columnas: Ligas | Perfiles | Minutos+Acción */
.perf-busqueda-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: start;
}

/* Columnas individuales */
.perf-busqueda-col {
  display: grid;
  grid-auto-rows: max-content;
  row-gap: 6px;
  padding: 10px 12px 8px;
  position: relative;
  min-height: 74px;
  align-content: start;   /* ancla el contenido arriba — botones no se mueven */
  justify-items: center;
}

.perf-busqueda-col:first-child { padding-left: 0; }
.perf-busqueda-col:last-child  { padding-right: 0; }

.perf-busqueda-col > * {
  justify-self: center;
}

/* Separador vertical dorado entre columnas */
.perf-busqueda-col:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,162,39,0.35) 18%,
    rgba(201,162,39,0.50) 50%,
    rgba(201,162,39,0.35) 82%,
    transparent 100%);
}

/* Etiqueta de columna */
.perf-col-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.56rem;
  font-weight: 800;
  color: #93a2b8;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 1px;
  text-align: center;
}

.perf-busqueda-col:last-child .perf-col-label {
  justify-content: center;
  text-align: center;
  width: auto;
  margin-inline: auto;
  transform: none;
}

.perf-col-label i {
  color: var(--mcf-gold);
  font-size: 0.78rem;
}

/* Botón selector (Mapa / Lista / Perfil) */
.perf-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--perf-control-h);
  min-height: var(--perf-control-h);
  max-height: var(--perf-control-h);
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--mcf-gold);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,0.94) 100%);
  color: var(--mcf-azul);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(15,23,42,0.035), 0 1px 0 rgba(255,255,255,0.84) inset;
  transition: all 0.18s ease;
  width: auto;
  min-width: 144px;
  max-width: 100%;
  justify-content: center;
}

.perf-selector-btn:hover:not(:disabled) {
  border-color: rgba(201,162,39,0.96);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12), 0 4px 10px rgba(15,23,42,0.05);
  transform: translateY(-1px);
}

.perf-selector-btn:disabled {
  opacity: 0.50;
  cursor: not-allowed;
  transform: none !important;
}

.perf-selector-btn i {
  color: var(--mcf-gold);
  font-size: 0.88rem;
}

/* Selector dual (Mapa + Lista) */
.perf-selector-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(108px, 1fr));
  gap: 8px;
  width: min(100%, 260px);
  margin-inline: auto;
}

/* Resumen de selección bajo el botón */
.perf-selector-resumen {
  margin-top: 0;
  min-height: 11px;
  font-size: 0.50rem;
  font-weight: 600;
  color: var(--mcf-azul);
  line-height: 1.28;
  opacity: 0.94;
}

.perf-selector-resumen:empty,
#resumen-ligas-seleccionadas:empty {
  display: none;
}

.perf-selector-submeta {
  min-height: 11px;
  font-size: 0.48rem;
  color: #64748b;
  line-height: 1.25;
  opacity: 0.92;
}

.perf-selector-submeta:empty {
  display: none;
}

/* Tag/chip de selección */
.perf-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(0,53,128,0.06);
  border: 1px solid rgba(201,162,39,0.30);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.59rem;
  font-weight: 700;
  color: var(--mcf-azul);
  margin: 2px 2px 0 0;
  white-space: nowrap;
}

/* Texto de ayuda sutil debajo de los botones */
.perf-col-hint {
  margin-top: 6px;
  font-size: 0.56rem;
  color: #b0bec5;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}

/* Input de minutos */
.perf-minutos-input {
  width: 66px !important;
  height: var(--perf-control-h) !important;
  min-height: var(--perf-control-h) !important;
  max-height: var(--perf-control-h) !important;
  border-radius: 10px !important;
  border: 1px solid var(--mcf-gold) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  line-height: calc(var(--perf-control-h) - 2px) !important;
  padding: 0 6px !important;
  margin: 0 !important;
  text-align: center !important;
  color: var(--mcf-azul) !important;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,0.94) 100%) !important;
  box-shadow: 0 3px 10px rgba(15,23,42,0.035), 0 1px 0 rgba(255,255,255,0.84) inset !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  display: block !important;
  vertical-align: middle !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

.perf-minutos-input::-webkit-outer-spin-button,
.perf-minutos-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.perf-minutos-input:focus {
  border-color: var(--mcf-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.13), inset 0 1px 2px rgba(15,23,42,0.03) !important;
}

/* Botón avanzado de minutos */
.perf-avanzado-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--perf-control-h) !important;
  min-height: var(--perf-control-h) !important;
  max-height: var(--perf-control-h) !important;
  min-width: 98px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,0.94) 100%) !important;
  color: var(--mcf-azul) !important;
  border: 1px solid var(--mcf-gold) !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(15,23,42,0.035), 0 1px 0 rgba(255,255,255,0.84) inset !important;
  transition: all 0.15s ease;
  box-sizing: border-box !important;
  outline: none !important;
  appearance: none !important;
}

.perf-avanzado-btn i {
  color: #6b7d99;
}

.perf-avanzado-btn:hover {
  border-color: rgba(201,162,39,0.96);
  color: var(--mcf-azul);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12), 0 4px 10px rgba(15,23,42,0.05);
  transform: translateY(-1px);
}

.perf-avanzado-btn:hover i {
  color: var(--mcf-gold);
}

.perf-minutes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 240px);
  margin-top: 1px;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.perf-minutes-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--perf-minutes-gap);
  flex-wrap: nowrap;
  width: 100%;
  margin-inline: auto;
}

.perf-minutes-row > .perf-minutos-input,
.perf-minutes-row > .perf-avanzado-btn,
.perf-selector-split > .perf-selector-btn,
.perf-busqueda-col:nth-child(2) .perf-selector-btn {
  align-self: center;
}

/* Botón generar ranking — protagonista visual */
.perf-btn-generar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #d2dbe7 0%, #9aa8bc 100%);
  color: white;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(15,23,42,0.10), 0 1px 0 rgba(255,255,255,0.18) inset;
  transition: all 0.2s ease;
  width: auto;
  min-width: var(--perf-generate-w);
  margin-top: 0;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.perf-btn-generar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 55%);
  border-radius: inherit;
  pointer-events: none;
}

.perf-btn-generar:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(201,162,39,0.58), 0 1px 0 rgba(255,255,255,0.22) inset;
  transform: translateY(-1px);
}

.perf-btn-generar:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(201,162,39,0.35);
}

.perf-btn-generar:disabled {
  background: linear-gradient(135deg, #CBD5E1 0%, #94A3B8 100%);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.perf-btn-generar i { font-size: 0.84rem; }

/* Cancelar la edición vuelve al ranking previo: acción secundaria, no destructiva. */
.perf-btn-cancel-edit {
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  gap: 6px;
  min-height: 34px;
  margin-top: 8px;
  padding: 0 13px;
  border: 1px solid rgba(159, 79, 86, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdfd 0%, #fff4f3 100%);
  color: #87454b;
  font-size: 0.70rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(92, 35, 43, 0.07), inset 0 1px 0 #fff;
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.perf-btn-cancel-edit:hover {
  background: linear-gradient(180deg, #fff4f3 0%, #fbe5e4 100%);
  border-color: #ab6269;
  color: #71343b;
  box-shadow: 0 0 0 3px rgba(159, 79, 86, 0.10), 0 7px 16px rgba(92, 35, 43, 0.12);
  transform: translateY(-1px);
}

.perf-btn-cancel-edit:active {
  box-shadow: 0 2px 7px rgba(92, 35, 43, 0.10);
  transform: translateY(0);
}

.perf-btn-cancel-edit:focus-visible {
  outline: 2px solid #ab6269;
  outline-offset: 2px;
}

.perf-btn-cancel-edit i {
  color: #a46167;
  font-size: 0.72rem;
}

/* Modo Titulares / Suplentes — estado activo (mismo scale que Avanzado) */
.perf-avanzado-btn.perf-modo-active {
  background: linear-gradient(180deg, #D8B243 0%, #B98F1F 100%) !important;
  color: #0B2545 !important;
  border-color: #C9A227 !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.30) !important;
  transform: none !important;
  cursor: default;
  font-weight: 800 !important;
}

/* Panel de inputs del modo activo — aparece con fade+slide */
.perf-modo-inputs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
  width: min(100%, 260px);
  animation: perfModoFadeIn 0.22s ease;
}
.perf-modo-inputs .perf-avanzado-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes perfModoFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.perf-panel-titulares-wrap,
.perf-panel-suplentes-wrap {
  animation: perfModoFadeIn 0.22s ease;
}

/* Tabla izquierda de trayectoria: fade rápido al reconstruirse */
#perf-trayectoria-stats-left > * {
  animation: perfTrayFadeIn 0.18s ease;
}

@keyframes perfTrayFadeIn {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* Transición suave en filas al ocultar/mostrar */
#perf-trayectoria-stats-left tr {
  transition: opacity 0.15s ease;
}

/* Estado debajo del botón generar */
.perf-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  min-height: 12px;
  width: min(100%, 332px);
  margin-inline: auto;
  font-size: 0.50rem;
  font-weight: 700;
  color: #71839b;
  letter-spacing: 0.01em;
}

.perf-status-row:empty {
  display: none;
  min-height: 0;
  margin-top: 0;
}

.perf-status-row i {
  font-size: 0.70rem !important;
}

/* Progress bar inline */
.perf-inline-progress {
  margin-top: 6px;
  padding: 7px 9px 7px;
  border: 1px solid rgba(201,162,39,0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.94) 100%);
  box-shadow: 0 8px 20px rgba(15,23,42,0.05);
  width: min(100%, 332px);
  margin-inline: auto;
}

.perf-busqueda-col:nth-child(2) .perf-selector-btn {
  width: min(100%, 240px);
  margin-inline: auto;
}

.perf-busqueda-col:nth-child(1) .perf-selector-btn {
  min-width: 0;
}

.perf-inline-progressbar {
  height: 5px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(148,163,184,0.10) !important;
}

.perf-inline-progressbar .progress-bar {
  background: linear-gradient(90deg, var(--mcf-gold) 0%, var(--mcf-azul) 100%) !important;
  transition: width 0.3s ease !important;
}

.perf-inline-progresstext { margin-top: 5px; }

.perf-inline-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.perf-inline-progress-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: #64748b;
}

.perf-inline-progress-percent {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--mcf-azul);
  white-space: nowrap;
}

/* Collapse de minutos avanzado */
.perf-avanzado-panel {
  display: flex;
  gap: 10px;
  padding: 10px 0 4px;
  flex-wrap: wrap;
}

.perf-avanzado-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.perf-avanzado-field label {
  font-size: 0.56rem;
  font-weight: 700;
  color: #64748b;
}

.perf-avanzado-field input {
  width: 64px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.10);
  font-size: 0.68rem;
  padding: 0 6px;
  text-align: center;
  outline: none;
  color: var(--mcf-azul);
}

/* Versión compacta del bloque de minutos titulares */
#perf-panel-titulares {
  position: relative;
  width: fit-content !important;
  max-width: 100%;
  justify-self: start !important;
}

.perf-minutos-input-compact {
  width: 66px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  font-size: 0.70rem !important;
}

.perf-avanzado-btn-compact {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  min-width: 90px !important;
  padding: 0 10px !important;
  font-size: 0.66rem !important;
}

/* Asegura que el panel de minutos quede visualmente pegado a Titulares */
#perf-panel-titulares .perf-minutes-row {
  justify-content: flex-start;
  margin-top: 2px;
}

/* Tarjetas de configuración por modo (Titulares / Suplentes) */
.perf-modo-card {
  width: fit-content;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 8px 10px 9px;
  border: 2px solid rgba(201,162,39,0.95);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff7de 0%, #f4e3ad 100%);
  box-shadow: 0 10px 20px rgba(201,162,39,0.22), 0 2px 8px rgba(15,23,42,0.08);
  animation: perfModoFadeIn 0.2s ease;
  justify-self: start;
}

.perf-modo-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.60rem;
  font-weight: 800;
  color: var(--mcf-azul);
  letter-spacing: 0.02em;
}

.perf-modo-card-title i {
  color: var(--mcf-gold);
  font-size: 0.64rem;
}

#perf-panel-titulares .perf-avanzado-panel {
  margin-top: 6px;
  padding: 6px 0 0;
  gap: 8px;
  flex-wrap: nowrap;
}

#perf-panel-titulares .perf-avanzado-field label {
  font-size: 0.52rem;
}

#perf-panel-titulares .perf-avanzado-field input {
  width: 74px;
  height: 28px;
  font-size: 0.66rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 2 — Barra compacta post-ranking
   ══════════════════════════════════════════════════════════════════════════ */

#perf-panel-postranking {
  display: none;
  background: linear-gradient(160deg, #ffffff 0%, #fdfcf8 100%);
  border: 1px solid rgba(201,162,39,0.30);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
  margin-bottom: 14px;
  overflow: hidden;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Franja superior dorada en Fase 2 */
#perf-panel-postranking::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--mcf-gold) 20%,
    var(--mcf-gold-lt) 50%,
    var(--mcf-gold) 80%,
    transparent 100%);
  pointer-events: none;
}

#perf-panel-postranking {
  position: relative;
}

/* Cabecera compacta: resumen + KPIs + botón editar */
.perf-postranking-header {
  display: none;
}

.perf-postranking-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.perf-postranking-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-left: auto;
  padding-left: 2px;
  min-height: 58px;
  justify-content: flex-start;
}

.perf-postranking-actions-spacer {
  height: 9px;
  width: 100%;
}

.perf-postranking-actions-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.perf-summary-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.perf-summary-inline-label {
  font-size: 0.52rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.perf-summary-inline-content {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  flex-wrap: wrap;
  color: var(--mcf-azul);
}

.perf-summary-inline-value {
  font-size: 0.84rem;
  font-weight: 900;
  color: var(--mcf-azul);
  line-height: 1;
}

.perf-summary-inline-key {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.perf-summary-inline-sep {
  font-size: 0.64rem;
  font-weight: 700;
  color: rgba(201,162,39,0.72);
  margin: 0 2px;
}

/* Chips de resumen */
.perf-postranking-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid rgba(201,162,39,0.12);
}

.perf-postranking-chips:empty {
  display: none;
  padding-left: 0;
  border-left: none;
}

.perf-btn-summary-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(201,162,39,0.42);
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%);
  color: var(--mcf-gold);
  box-shadow: 0 2px 8px rgba(15,23,42,0.035);
  transition: all 0.16s ease;
}

.perf-btn-summary-info:hover {
  background: rgba(255,255,255,1);
  border-color: rgba(201,162,39,0.62);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.08), 0 4px 10px rgba(15,23,42,0.05);
  transform: translateY(-0.5px);
}

.perf-btn-summary-info i {
  color: var(--mcf-gold);
  font-size: 0.68rem;
}

#perf-summary-popover {
  border: 1px solid rgba(201,162,39,0.18);
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(15,23,42,0.12), 0 4px 14px rgba(15,23,42,0.06);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

#perf-summary-popover .popover-arrow::before,
#perf-summary-popover .popover-arrow::after {
  border-bottom-color: rgba(201,162,39,0.18);
}

.perf-summary-popover-header {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--mcf-gold);
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.94) 100%);
  border-bottom: 1px solid rgba(201,162,39,0.10);
  padding: 11px 14px;
  letter-spacing: 0.01em;
}

.perf-summary-popover-body {
  min-width: 244px;
  max-width: 320px;
  padding: 10px 11px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.90) 100%);
}

.perf-summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 9px;
}

.perf-summary-stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px 8px;
  border: 1px solid rgba(201,162,39,0.24);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.88) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 1px 2px rgba(15,23,42,0.025);
}

.perf-summary-stat-label {
  font-size: 0.50rem;
  font-weight: 800;
  color: #98a8c1;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.perf-summary-stat-value {
  font-size: 1rem;
  font-weight: 900;
  color: var(--mcf-azul);
  line-height: 1.02;
}

.perf-summary-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(226,232,240,0.52);
  padding-top: 2px;
}

.perf-summary-popover-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 1px;
  border-bottom: 1px solid rgba(226,232,240,0.54);
}

.perf-summary-popover-row:last-child {
  border-bottom: none;
}

.perf-summary-popover-row-block {
  align-items: flex-start;
}

.perf-summary-popover-key {
  font-size: 0.54rem;
  font-weight: 800;
  color: #98a8c1;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.perf-summary-popover-val {
  font-size: 0.62rem;
  font-weight: 700;
  color: #1e293b;
  text-align: right;
  line-height: 1.35;
}

.perf-summary-popover-val-muted {
  color: var(--mcf-azul);
  font-weight: 800;
}

.perf-summary-popover-val-block {
  max-width: 178px;
  color: #334155;
  font-weight: 700;
  line-height: 1.46;
}

.perf-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(0,53,128,0.10);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.59rem;
  font-weight: 700;
  color: var(--mcf-azul);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.perf-search-chip i {
  color: var(--mcf-gold);
  font-size: 0.58rem;
}

/* Botón "Editar búsqueda" */
.perf-btn-editar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 11px;
  border: 1px solid rgba(0,53,128,0.22);
  background: linear-gradient(180deg, rgba(0,53,128,0.96) 0%, rgba(0,33,80,0.98) 100%);
  color: #ffffff;
  font-size: 0.63rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,33,80,0.16);
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.perf-postranking-actions .perf-btn-editar {
  margin-left: 2px;
}

.perf-adv-thresholds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(201,162,39,0.18);
}

.perf-adv-threshold-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.perf-adv-threshold-label {
  margin: 0;
  color: #64748b;
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.perf-adv-threshold-input {
  width: 100%;
  height: 27px;
  border: 1px solid rgba(201,162,39,0.36);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--mcf-azul);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 7px rgba(15,23,42,0.035);
}

.perf-adv-threshold-input:focus {
  border-color: rgba(201,162,39,0.72);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12), 0 4px 12px rgba(15,23,42,0.07);
}

.perf-btn-editar:hover {
  background: linear-gradient(180deg, rgba(0,53,128,1) 0%, rgba(0,27,66,1) 100%);
  box-shadow: 0 0 0 3px rgba(0,53,128,0.12), 0 8px 18px rgba(0,33,80,0.18);
  transform: translateY(-1px);
}

.perf-btn-editar i {
  color: var(--mcf-gold);
  font-size: 0.60rem;
}

/* ── Sección de filtros de tabla ─────────────────────────────────────────── */

/* Contenedor principal: dos filas */
.perf-table-filters-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

/* Fila 1: Filtros de tipo modal (Liga, Perfil, Contrato, Equipo, Jugador) */
.perf-filters-row-1 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 11px;
  flex-wrap: nowrap;
  border-bottom: none;
  overflow-x: auto;
}

/* Fila 2: Sliders compactos + Reset */
.perf-filters-row-2 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px 12px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(248,250,252,0.54) 0%, rgba(248,250,252,0.34) 100%);
}

.perf-table-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: 8px;
}

.perf-toggle-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
}

.perf-toggle-group--header {
  box-shadow: none;
}

.perf-toggle-group .perf-filter-btn {
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.56rem;
  gap: 4px;
}

.perf-toggle-group .perf-filter-btn i {
  font-size: 0.56rem;
}

/* Etiqueta "FILTRAR" */
.perf-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.50rem;
  font-weight: 700;
  color: var(--mcf-gold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.88;
}

/* Grupo de filtro individual */
.perf-filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
  align-items: center;
  justify-content: flex-start;
  min-height: 58px;
}

.perf-filter-group-primary {
  min-width: 104px;
}

.perf-filter-group-label {
  font-size: 0.47rem;
  font-weight: 700;
  color: #8fa0b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-align: center;
  width: 100%;
}

/* Botón de filtro modal */
.perf-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(201,162,39,0.56);
  background: rgba(255,255,255,0.98);
  color: var(--mcf-azul);
  font-size: 0.60rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(15,23,42,0.035);
  transition: all 0.16s ease;
}

.perf-filter-summary {
  width: 100%;
  min-height: 14px;
  max-height: 14px;
  margin-top: 1px;
  font-size: 0.50rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--mcf-azul);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}

.perf-filter-btn:hover:not(:disabled) {
  border-color: rgba(201,162,39,0.46);
  box-shadow: 0 0 0 2px rgba(201,162,39,0.08), 0 2px 6px rgba(15,23,42,0.04);
  transform: translateY(-1px);
}

.perf-filter-btn.active,
.perf-filter-btn[data-active="true"],
.perf-filter-btn--active {
  background: rgba(0,53,128,0.06);
  border-color: rgba(0,53,128,0.24);
  font-weight: 700;
}

.perf-filter-btn--active {
  background: rgba(0, 53, 128, 0.10) !important;
  border-color: var(--mcf-blue) !important;
  color: var(--mcf-blue) !important;
  box-shadow: 0 0 0 2px rgba(0,53,128,0.12) !important;
}

.perf-filter-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
}

.perf-filter-btn i {
  color: var(--mcf-gold);
  font-size: 0.60rem;
  flex-shrink: 0;
}

.perf-pico-action-btn,
.perf-pico-calc-btn,
.perf-pico-secondary-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease !important;
}

.perf-pico-calc-btn:not(:disabled) {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
  border-color: rgba(21, 128, 61, 0.96) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(21, 128, 61, 0.18), 0 1px 0 rgba(255,255,255,0.30) inset !important;
}

.perf-pico-calc-btn:not(:disabled) i {
  color: rgba(255,255,255,0.92) !important;
}

.perf-pico-calc-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 12px 24px rgba(21, 128, 61, 0.24), 0 0 0 3px rgba(34, 197, 94, 0.16), 0 1px 0 rgba(255,255,255,0.34) inset !important;
}

.perf-pico-action-btn:hover:not(:disabled),
.perf-pico-secondary-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(201,162,39,0.96) !important;
  box-shadow: 0 12px 22px rgba(15,23,42,0.12), 0 0 0 3px rgba(201,162,39,0.14), 0 1px 0 rgba(255,255,255,0.86) inset !important;
  filter: saturate(1.04);
}

.perf-pico-deactivate-btn:hover:not(:disabled) {
  border-color: rgba(220,38,38,0.92) !important;
  box-shadow: 0 12px 22px rgba(185,28,28,0.16), 0 0 0 3px rgba(220,38,38,0.12), 0 1px 0 rgba(255,255,255,0.82) inset !important;
}

/* Divisores */
.perf-filters-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,162,39,0.16) 18%,
    rgba(201,162,39,0.16) 82%,
    transparent 100%);
  flex-shrink: 0;
  opacity: 0.75;
}

.perf-filters-divider-actions {
  margin-left: auto;
}

/* ── Sliders en Fila 2 ───────────────────────────────────────────────────── */

.perf-sliders-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.52rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.9;
}

.perf-sliders-label i {
  color: var(--mcf-gold);
  font-size: 0.62rem;
}

.perf-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  max-width: 160px;
  flex: 1 1 120px;
  padding: 7px 10px 5px;
  border: 1px solid rgba(201,162,39,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
}

.perf-slider-group--header {
  min-width: 138px;
  max-width: 164px;
  padding: 4px 9px 3px;
  background: rgba(255,255,255,0.90);
  box-shadow: 0 1px 4px rgba(15,23,42,0.022);
}

.perf-slider-label-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.perf-slider-name {
  font-size: 0.47rem;
  font-weight: 700;
  color: #97a6bb;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.perf-slider-val {
  font-size: 0.56rem;
  font-weight: 800;
  color: var(--mcf-azul);
}

/* Botón Reset */
.perf-btn-reset-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid rgba(220,38,38,0.20);
  background: rgba(255,255,255,0.82);
  color: #c2410c;
  font-size: 0.58rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(15,23,42,0.025);
}

.perf-table-header-controls .perf-btn-reset-compact {
  margin-left: 2px;
}

.tabla-ranking-header {
  min-height: 58px;
  position: relative;
  overflow: visible !important;
  z-index: 20;
}

.perf-ranking-export-btn {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 9px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,251,255,0.96) 100%);
  color: var(--mcf-azul);
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,23,42,0.045);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.perf-ranking-export-btn:hover:not(:disabled),
.perf-ranking-export-btn:focus-visible:not(:disabled) {
  background: linear-gradient(180deg, #004b93 0%, #003580 100%);
  border-color: rgba(201,162,39,0.62);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12), 0 7px 16px rgba(0,53,128,0.18);
  transform: translateY(-1px);
  outline: none;
}

.perf-ranking-export-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 7px rgba(15,23,42,0.10);
}

.perf-ranking-export-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

.perf-ranking-export-icon {
  width: 11px;
  height: 12px;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.perf-ranking-export-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}

.perf-ranking-export-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Evita que el menú de "Filtros avanzados" quede por detrás o recortado por la tabla */
#perf-table-header-controls,
.perf-adv-chips-group,
.perf-adv-menu {
  position: relative;
  overflow: visible !important;
}

.perf-btn-reset-compact:hover:not(:disabled) {
  background: rgba(254,226,226,0.88);
  border-color: rgba(220,38,38,0.48);
  box-shadow: 0 0 0 2px rgba(220,38,38,0.08);
}

.perf-btn-reset-compact:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── Animaciones ─────────────────────────────────────────────────────────── */

@keyframes perf-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#perf-panel-busqueda,
#perf-panel-postranking {
  animation: perf-fade-in 0.26s ease forwards;
}

/* ── Resumen de estado del ranking ───────────────────────────────────────── */
#perf-ranking-summary-panel {
  animation: perf-fade-in 0.22s ease;
}

/* Modal listado de paises y ligas */
.perf-filter-modal-content {
  border: 1px solid rgba(201,162,39,0.28) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15,23,42,0.16) !important;
}

.perf-filter-modal-header {
  min-height: 52px;
}

.perf-filter-modal-header button:hover {
  background: rgba(201,162,39,0.10) !important;
}

.perf-filter-modal-body input:is(#input-buscar-pais, #input-buscar-radar-pais, #metricas-input-buscar-season) {
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201,162,39,0.24) !important;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,0.96) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px rgba(15,23,42,0.03) !important;
  font-size: 0.78rem !important;
  padding: 0 12px !important;
}

.perf-filter-modal-body input:is(#input-buscar-pais, #input-buscar-radar-pais, #metricas-input-buscar-season):focus {
  outline: none !important;
  border-color: rgba(201,162,39,0.52) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.10) !important;
}

#modal-metric-filters .metric-filter-loading-wrap,
#modal-metric-filters .metric-filter-loading-shell {
  min-height: 230px;
  border-radius: 12px;
}

#modal-metric-filters .metric-filter-loading-wrap {
  position: relative;
}

#modal-metric-filters .metric-filter-loading-wrap .dash-spinner {
  filter: drop-shadow(0 7px 18px rgba(0,53,128,0.16));
}

#modal-metric-filters .metric-filter-loading-wrap .dash-loading {
  border-radius: 12px;
}

.perf-metric-opening-overlay {
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(2px);
}

.perf-metric-opening-overlay > div:last-child,
.perf-metric-opening-text {
  color: #004b93;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
}

.perf-metric-opening-overlay {
  gap: 10px;
}

.perf-metric-opening-overlay::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 62px;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.perf-metric-opening-spinner,
.perf-metric-opening-text {
  position: relative;
  z-index: 1;
}

.perf-metric-opening-spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(201, 162, 39, 0.22);
  border-top-color: #c9a227;
  animation: perfMetricOpeningSpin 0.78s linear infinite;
}

@keyframes perfMetricOpeningSpin {
  to {
    transform: rotate(360deg);
  }
}

#modal-metric-filters .metric-filter-position-checklist label {
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#modal-metric-filters .metric-filter-position-checklist label:hover {
  border-color: rgba(201,162,39,0.55) !important;
  background: #f8fbff !important;
}

#modal-metric-filters .metric-filter-position-checklist label:has(input:checked) {
  border-color: rgba(201,162,39,0.72) !important;
  background: linear-gradient(180deg, #fff9e8 0%, #f8fbff 100%) !important;
  color: #004b93 !important;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0.22), 0 3px 10px rgba(15,23,42,0.07) !important;
}

#modal-metric-filters #btn-open-metric-picker {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

#modal-metric-filters #btn-open-metric-picker .metric-filter-picker-icon {
  width: 13px;
  height: 13px;
  display: inline-grid;
  gap: 2px;
  align-items: center;
  justify-items: stretch;
  flex-shrink: 0;
}

#modal-metric-filters #btn-open-metric-picker .metric-filter-picker-icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: #b58500;
  box-shadow: 0 1px 2px rgba(181,133,0,0.18);
}

#modal-metric-filters #btn-open-metric-picker:hover:not(:disabled),
#modal-metric-filters #btn-open-metric-picker:focus-visible {
  background: linear-gradient(180deg, #fff9e8 0%, #ffffff 100%) !important;
  border-color: rgba(201,162,39,0.78) !important;
  color: #003580 !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12), 0 6px 16px rgba(15,23,42,0.10) !important;
  transform: translateY(-1px);
}

#modal-metric-filters #btn-open-metric-picker:hover:not(:disabled) .metric-filter-picker-icon,
#modal-metric-filters #btn-open-metric-picker:focus-visible .metric-filter-picker-icon {
  filter: brightness(0.92);
}

#modal-metric-filters #btn-open-metric-picker:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(15,23,42,0.08) !important;
}

#modal-metric-filters .metric-filter-remove-btn {
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

#modal-metric-filters .metric-filter-remove-btn:hover,
#modal-metric-filters .metric-filter-remove-btn:focus-visible {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(127,29,29,0.22) !important;
  transform: translateY(-1px);
}

#modal-metric-filters .metric-filter-remove-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(127,29,29,0.16) !important;
}

#modal-metric-filters .metric-filter-fill-btn:hover:not(:disabled),
#modal-metric-filters .metric-filter-fill-btn:focus-visible {
  background: linear-gradient(180deg, #004b93 0%, #003580 100%) !important;
  border-color: rgba(201,162,39,0.50) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12), 0 8px 18px rgba(0,53,128,0.18) !important;
  transform: translateY(-1px);
}

#modal-metric-filters .metric-filter-fill-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(15,23,42,0.08) !important;
}

#modal-metric-filters .metric-filter-reference-panel {
  width: fit-content;
  max-width: 100%;
  padding: 8px;
  border: 1px solid rgba(201,162,39,0.26);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0,53,128,0.035) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 7px 20px rgba(15,23,42,0.06);
}

#modal-metric-filters .metric-filter-reference-label {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(0,53,128,0.10);
  background: rgba(0,53,128,0.055);
  color: #004b93;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

#modal-metric-filters .metric-filter-reference-mark {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c9a227;
  box-shadow: 0 0 0 4px rgba(201,162,39,0.14);
}

#modal-metric-filters .metric-filter-reference-dd {
  max-width: min(360px, 100%);
}

#modal-metric-filters .metric-filter-reference-dd .Select-control {
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(201,162,39,0.38) !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 5px rgba(15,23,42,0.04) !important;
}

#modal-metric-filters .metric-filter-reference-dd .Select-placeholder,
#modal-metric-filters .metric-filter-reference-dd .Select-value {
  line-height: 28px !important;
  color: #5b6f8f !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-align: left !important;
  padding-left: 10px !important;
}

#modal-metric-filters .metric-filter-reference-dd .Select-value-label {
  color: #004b93 !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

#modal-metric-filters .metric-filter-reference-dd .Select-input {
  height: 28px !important;
}

#modal-metric-filters .metric-filter-reference-dd .Select-input > input {
  height: 26px !important;
  padding: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

#modal-metric-filters .metric-filter-reference-dd .Select-control:hover,
#modal-metric-filters .metric-filter-reference-dd.is-focused .Select-control,
#modal-metric-filters .metric-filter-reference-dd.is-open .Select-control {
  border-color: rgba(201,162,39,0.72) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.10), 0 4px 12px rgba(15,23,42,0.08) !important;
}

#modal-metric-filters .metric-filter-reference-panel .metric-filter-fill-btn {
  height: 30px !important;
  border-radius: 9px !important;
  border-color: rgba(0,53,128,0.22) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  color: #003580 !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

#modal-metric-filters .metric-filter-reference-panel .metric-filter-fill-btn:hover:not(:disabled),
#modal-metric-filters .metric-filter-reference-panel .metric-filter-fill-btn:focus-visible {
  background: linear-gradient(180deg, #004b93 0%, #003580 100%) !important;
  border-color: rgba(201,162,39,0.58) !important;
  color: #ffffff !important;
}

#modal-metric-filters .metric-filter-reference-dd .Select-menu-outer {
  border-radius: 10px !important;
  border: 1px solid rgba(201,162,39,0.30) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,0.16) !important;
  overflow: hidden;
}

:is(#listado-paises-helper, #radar-listado-paises-helper, #metricas-season-count-label) {
  font-size: 0.68rem !important;
  color: #7b8aa3 !important;
  margin-bottom: 8px !important;
}

:is(#listado-paises-accordion, #radar-listado-paises-accordion) {
  max-height: 360px !important;
  border: 1px solid rgba(201,162,39,0.18) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.92) 100%) !important;
}

.perf-continent-section {
  margin-bottom: 10px;
}

.perf-continent-title {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b8aa3;
  padding: 2px 4px 6px;
}

.perf-continent-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perf-country-card {
  padding: 0;
  border: 1px solid rgba(201,162,39,0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,251,253,0.96) 100%);
  box-shadow: 0 3px 10px rgba(15,23,42,0.03);
  overflow: hidden;
}

.perf-country-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1f365d;
  padding: 11px 14px;
}

.perf-country-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.perf-country-header::-webkit-details-marker {
  display: none;
}

.perf-country-header::after {
  content: "▸";
  color: #9aa7bb;
  font-size: 0.72rem;
  margin-left: 12px;
}

.perf-country-card[open] > .perf-country-header {
  border-bottom: 1px solid rgba(201,162,39,0.14);
}

.perf-country-card[open] > .perf-country-header::after {
  content: "▾";
}

.perf-country-flag {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.perf-country-flag-emoji {
  width: auto;
  height: auto;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
  border-radius: 0;
}

.perf-country-body {
  padding: 8px 14px 10px;
}

.perf-country-family {
  padding: 2px 0;
  border-top: 1px solid rgba(201,162,39,0.12);
}

.perf-country-family:first-child {
  border-top: none;
}

.perf-country-family summary {
  list-style: none;
}

.perf-country-family summary::-webkit-details-marker {
  display: none;
}

.perf-country-family-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  color: #2f476a;
  padding: 8px 2px;
}

.perf-country-family-summary::after {
  content: "▾";
  color: #a7b2c1;
  font-size: 0.68rem;
  margin-left: auto;
  padding-left: 8px;
}

.perf-country-family:not([open]) .perf-country-family-summary::after {
  content: "▸";
}

.perf-country-family-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(201,162,39,0.08);
  color: #7f8da4;
  font-size: 0.62rem;
  font-weight: 800;
  margin-left: 8px;
}

.perf-country-family .dash-checklist {
  padding: 3px 0 8px 4px;
}

.perf-country-family .dash-checklist label {
  display: block;
  font-size: 0.74rem;
  color: #1f2937;
  margin-bottom: 7px;
  padding-left: 8px;
  line-height: 1.35;
}

/* ==========================================================================
   Modal listado de paises y ligas - premium amplio
   ========================================================================== */

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-filter-modal-content {
  border: 1px solid rgba(201,162,39,0.28) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(15,23,42,0.20) !important;
  max-width: 860px !important;
  width: 96vw !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-filter-modal-header {
  min-height: 52px;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-filter-modal-header button:hover {
  background: rgba(201,162,39,0.10) !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-filter-modal-body {
  padding: 12px 14px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%);
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-topbar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-topbar > .fa-search {
  display: none !important;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-search-input,
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#input-buscar-pais, #input-buscar-radar-pais, #input-buscar-pais-camp, #listas-input-buscar-pais) {
  flex: 0 0 clamp(150px, 15ch, 205px) !important;
  width: clamp(150px, 15ch, 205px) !important;
  max-width: 22% !important;
  height: var(--perf-control-h) !important;
  min-height: var(--perf-control-h) !important;
  max-height: var(--perf-control-h) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--mcf-gold) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 3px 10px rgba(15,23,42,0.04) !important;
  font-family: inherit !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  color: #1f365d !important;
  padding: 0 14px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
  outline: none !important;
  min-width: 0 !important;
}

@media (max-width: 900px) {
  :is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  :is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-search-input,
  :is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#input-buscar-pais, #input-buscar-radar-pais, #input-buscar-pais-camp, #listas-input-buscar-pais) {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  :is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#listado-paises-helper, #radar-listado-paises-helper, #listado-paises-helper-camp, #listas-listado-paises-helper),
  :is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-selection-summary {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-search-input:focus,
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#input-buscar-pais, #input-buscar-radar-pais, #input-buscar-pais-camp, #listas-input-buscar-pais):focus {
  border-color: var(--mcf-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-search-input::placeholder,
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#input-buscar-pais, #input-buscar-radar-pais, #input-buscar-pais-camp, #listas-input-buscar-pais)::placeholder {
  color: #8fa3c0 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#listado-paises-helper, #radar-listado-paises-helper, #listado-paises-helper-camp, #listas-listado-paises-helper),
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-selection-summary {
  flex: 0 1 clamp(220px, 31vw, 360px);
  width: clamp(220px, 31vw, 360px);
  max-width: 44%;
  display: flex !important;
  align-items: center !important;
  min-height: 36px;
  padding: 0 12px !important;
  border-radius: 14px;
  border: 1.5px solid var(--mcf-gold) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 3px 10px rgba(15,23,42,0.04);
  min-width: 0;
  margin-bottom: 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) .ligas-modal-selection-summary > div,
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#listado-paises-helper, #radar-listado-paises-helper, #listado-paises-helper-camp, #listas-listado-paises-helper) > div {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-summary-label {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa3c0;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-summary-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1f365d;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-clear-btn,
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-edit-btn {
  flex: 0 0 auto;
  min-width: 78px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 0.63rem;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.18s ease;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-edit-btn {
  min-width: 88px;
  border: 1px solid rgba(0,53,128,0.22) !important;
  background: linear-gradient(180deg, rgba(0,53,128,0.96) 0%, rgba(0,33,80,0.98) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0,33,80,0.16);
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-edit-btn:hover {
  background: linear-gradient(180deg, rgba(0,53,128,1) 0%, rgba(0,27,66,1) 100%) !important;
  box-shadow: 0 0 0 3px rgba(0,53,128,0.12), 0 8px 18px rgba(0,33,80,0.18);
  transform: translateY(-1px);
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-clear-btn {
  min-width: 154px;
  border: 1px solid rgba(255,59,48,0.52) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffafb 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 4px 12px rgba(15,23,42,0.04);
  color: #d62d20 !important;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-clear-btn:hover {
  border-color: rgba(255,59,48,0.92) !important;
  background: linear-gradient(180deg, rgba(255,243,243,1) 0%, rgba(255,250,250,1) 100%) !important;
  box-shadow: 0 0 0 3px rgba(255,59,48,0.09), 0 8px 18px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-modal-footer-actions--end {
  justify-content: flex-end !important;
}

:is(#ligas-summary-popover, #radar-ligas-summary-popover, #metricas-season-summary-popover, #ligas-summary-popover-camp) {
  max-width: 390px;
}

:is(#ligas-summary-popover, #radar-ligas-summary-popover, #metricas-season-summary-popover, #ligas-summary-popover-camp) .popover-arrow::before,
:is(#ligas-summary-popover, #radar-ligas-summary-popover, #metricas-season-summary-popover, #ligas-summary-popover-camp) .popover-arrow::after {
  border-bottom-color: rgba(201,162,39,0.28) !important;
}

:is(#ligas-summary-popover, #radar-ligas-summary-popover, #metricas-season-summary-popover, #ligas-summary-popover-camp) .popover {
  border: 1px solid rgba(201,162,39,0.26) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(15,23,42,0.16) !important;
}

.ligas-modal-edit-popover-header {
  padding: 12px 14px 10px !important;
  border-bottom: 1px solid rgba(201,162,39,0.14) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
  color: #003580 !important;
  font-size: 0.79rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
}

.ligas-modal-edit-popover-body {
  max-width: 368px;
  padding: 12px 14px 14px !important;
  border: none;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: none;
  color: #1f365d;
  text-align: left;
}

.ligas-modal-edit-count {
  margin-bottom: 12px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #8fa3c0;
}

.ligas-modal-edit-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
}

.ligas-modal-edit-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  min-height: 34px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,255,0.95) 100%);
  color: #1f365d;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.2;
  gap: 8px;
  appearance: none;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.ligas-modal-edit-chip:hover {
  border-color: rgba(201,162,39,0.42);
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
  box-shadow: 0 6px 14px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}

.ligas-modal-edit-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ligas-modal-edit-chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(15,23,42,0.06);
  color: #1f365d;
  font-size: 0.68rem;
  margin-left: 0 !important;
  flex: 0 0 auto;
}

.ligas-modal-edit-empty {
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.35;
  color: #5d7190;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#listado-paises-accordion, #radar-listado-paises-accordion, #listado-paises-accordion-camp, #listas-listado-paises-accordion) {
  max-height: calc(100vh - 230px) !important;
  min-height: 320px;
  border: 1px solid rgba(201,162,39,0.18) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  background: #ffffff !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,0.30) transparent;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#listado-paises-accordion, #radar-listado-paises-accordion, #listado-paises-accordion-camp, #listas-listado-paises-accordion)::-webkit-scrollbar {
  width: 5px;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#listado-paises-accordion, #radar-listado-paises-accordion, #listado-paises-accordion-camp, #listas-listado-paises-accordion)::-webkit-scrollbar-track {
  background: transparent;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) :is(#listado-paises-accordion, #radar-listado-paises-accordion, #listado-paises-accordion-camp, #listas-listado-paises-accordion)::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,0.28);
  border-radius: 99px;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-loading-state {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: #6b7a95;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-loading-spinner {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 3px solid rgba(201,162,39,0.16);
  border-top-color: #c9a227;
  animation: perfSpin 0.9s linear infinite;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .ligas-modal-loading-text {
  font-size: 0.86rem;
  font-weight: 700;
  color: #6c7f9f;
  letter-spacing: 0.02em;
}

@keyframes perfSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-continent-section {
  margin-bottom: 12px;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-continent-section:last-child {
  margin-bottom: 0;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-continent-title {
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8fa3c0 !important;
  padding: 4px 2px 8px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-continent-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,0.25) 0%, transparent 100%);
  border-radius: 99px;
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-continent-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  align-items: start !important;
}

@media (max-width: 700px) {
  :is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-continent-group {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  :is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-continent-group {
    grid-template-columns: 1fr !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-card {
  padding: 0;
  border: 1.2px solid rgba(201,162,39,0.44) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 0 0 1px rgba(201,162,39,0.06),
    0 2px 8px rgba(15,23,42,0.04) !important;
  overflow: hidden;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
  align-self: start !important;
  height: auto !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-card:hover {
  border-color: rgba(201,162,39,0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 0 0 1px rgba(201,162,39,0.10),
    0 4px 14px rgba(15,23,42,0.07) !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-card[open] {
  border-color: var(--mcf-gold) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 0 0 1px rgba(201,162,39,0.16),
    0 8px 20px rgba(201,162,39,0.14) !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-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #1f365d !important;
  padding: 9px 11px !important;
  user-select: none;
  transition: background 0.14s ease;
}

: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-header:hover {
  background: rgba(0,53,128,0.03);
}

: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-card[open] > .perf-country-header {
  background: linear-gradient(180deg, rgba(201,162,39,0.08) 0%, rgba(201,162,39,0.03) 100%);
  border-bottom: 1px solid rgba(201,162,39,0.24);
}

: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 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0;
  overflow: hidden;
}

: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 > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

: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-header::-webkit-details-marker {
  display: none !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-header::after {
  content: "\203A";
  color: #b0bec5 !important;
  font-size: 0.90rem !important;
  font-weight: 400;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}

: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-card[open] > .perf-country-header::after {
  transform: rotate(90deg);
  color: #C9A227 !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-flag {
  width: 20px !important;
  height: 15px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10) !important;
  flex-shrink: 0 !important;
  object-fit: cover;
}

: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-flag-emoji {
  width: auto !important;
  height: auto !important;
  min-width: 20px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}

: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-body {
  padding: 4px 10px 6px !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-family {
  padding: 1px 0 !important;
  border-top: 1px solid rgba(201,162,39,0.10) !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-family:first-child {
  border-top: none !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-family summary {
  list-style: none !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-family summary::-webkit-details-marker {
  display: none !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-family-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  color: #2f476a !important;
  padding: 5px 2px !important;
  gap: 4px;
}

: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-family-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

: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-family-summary::after {
  content: "▾";
  color: #b0bec5 !important;
  font-size: 0.60rem !important;
  margin-left: 4px;
  flex-shrink: 0;
}

: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-family:not([open]) .perf-country-family-summary::after {
  content: "▸" !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-family-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(201,162,39,0.10) !important;
  color: #6b7a95 !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  margin-left: 5px !important;
  flex-shrink: 0;
}

: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-family .dash-checklist {
  padding: 1px 0 4px 2px !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-family .dash-checklist label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.70rem !important;
  color: #1f2937 !important;
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
  cursor: pointer;
  border-radius: 5px;
  padding: 2px 5px !important;
  transition: background 0.12s ease;
}

: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-family .dash-checklist label:hover {
  background: rgba(0,53,128,0.04);
}

: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-family .dash-checklist input[type="checkbox"] {
  accent-color: #003580;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
  cursor: pointer;
}

/* Modal de perfiles */
#modal-perfil .perf-filter-modal-body {
  padding: 12px 16px 10px 16px !important;
}

#modal-perfil #perfil-checklist-helper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 12px !important;
  margin: 0 0 10px 0 !important;
  border: 1.5px solid var(--mcf-gold) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 3px 10px rgba(15,23,42,0.04) !important;
  color: #1f365d !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#modal-perfil #perfil-checklist-helper span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal-perfil .perf-profile-checklist-container {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 4px 14px rgba(15,23,42,0.04);
}

#modal-perfil .perf-profile-group-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#modal-perfil .perf-profile-group-card {
  border: 1px solid rgba(201,162,39,0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 3px 12px rgba(15,23,42,0.035);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#modal-perfil .perf-profile-group-card:hover {
  border-color: rgba(201,162,39,0.28);
  box-shadow: 0 6px 16px rgba(15,23,42,0.06);
}

#modal-perfil .perf-profile-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 6px 16px 6px 24px;
  cursor: pointer;
  list-style: none;
}

#modal-perfil .perf-profile-group-summary::-webkit-details-marker {
  display: none;
}

#modal-perfil .perf-profile-group-summary::after {
  content: "▸";
  margin-left: auto;
  color: #b0bec5;
  font-size: 0.68rem;
  transition: transform 0.18s ease, color 0.18s ease;
}

#modal-perfil .perf-profile-group-card[open] .perf-profile-group-summary::after {
  transform: rotate(90deg);
  color: #c9a227;
}

#modal-perfil .perf-profile-group-card[open] {
  border-color: rgba(201,162,39,0.52);
  box-shadow: 0 8px 22px rgba(15,23,42,0.08), 0 0 0 1px rgba(201,162,39,0.08);
}

#modal-perfil .perf-profile-group-card[open] .perf-profile-group-summary {
  background: linear-gradient(180deg, rgba(201,162,39,0.075) 0%, rgba(201,162,39,0.02) 100%);
  border-bottom: 1px solid rgba(201,162,39,0.12);
}

#modal-perfil .perf-profile-group-body {
  padding: 10px 14px 12px;
}

#modal-perfil .perf-profile-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
}

#modal-perfil .perf-profile-group-title {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa3c0;
  line-height: 1;
  white-space: nowrap;
}

#modal-perfil .perf-profile-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(201,162,39,0.10);
  color: #6b7a95;
  font-size: 0.60rem;
  font-weight: 800;
  flex: 0 0 auto;
}

#modal-perfil .perf-profile-group-count.is-active {
  background: rgba(201,162,39,0.16);
  color: #7a5b00;
}

#modal-perfil .perf-profile-group-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

#modal-perfil .perf-profile-group-checklist label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px;
  padding: 6px 8px !important;
  border-radius: 10px;
  font-size: 0.74rem !important;
  font-weight: 600;
  color: #1f365d !important;
  line-height: 1.25;
  background: rgba(255,255,255,0.7);
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#modal-perfil .perf-profile-group-checklist label:hover {
  background: rgba(0,53,128,0.04);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0.12);
}

#modal-perfil .perf-profile-group-checklist input[type="checkbox"] {
  accent-color: #003580;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  cursor: pointer;
}

@media (max-width: 620px) {
  #modal-perfil .perf-profile-group-checklist {
    grid-template-columns: 1fr;
  }
}

:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises) .perf-filter-modal-footer {
  padding: 8px 12px !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-modal-footer-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  gap: 10px !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .perf-busqueda-grid {
    grid-template-columns: 1fr 1fr;
  }
  .perf-busqueda-col:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-right: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(201,162,39,0.18);
  }
  .perf-busqueda-col:nth-child(3)::after { display: none; }
  .perf-busqueda-col:nth-child(2)::after { display: none; }
}

@media (max-width: 600px) {
  .perf-busqueda-grid {
    grid-template-columns: 1fr;
  }
  .perf-busqueda-col {
    padding-right: 0;
    padding-left: 0 !important;
  }
  .perf-busqueda-col:not(:last-child)::after { display: none; }
  .perf-busqueda-col:not(:first-child) {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(201,162,39,0.16);
  }
  .perf-kpi-strip { display: none; }
}

/* Modal mapa de paises y ligas */
.perf-map-modal-content {
  border: 1px solid rgba(201,162,39,0.32) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 32px 72px rgba(15,23,42,0.25) !important;
  /* Hacer el modal flex column para que body crezca */
  display: flex !important;
  flex-direction: column !important;
  height: 92vh !important;
  max-height: 92vh !important;
}

/* El dialogo debe tener altura fija */
#modal-mapa-ligas .modal-dialog {
  height: 92vh !important;
  max-height: 92vh !important;
  margin: 4vh auto !important;
}

#modal-mapa-ligas .perf-map-modal-header {
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
  border-bottom: 1px solid var(--mcf-gold) !important;
}

#modal-mapa-ligas .perf-map-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

#modal-mapa-ligas .perf-map-region-switch {
  display: flex;
  align-items: center;
}

#modal-mapa-ligas .mapa-seg-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid rgba(201,162,39,0.30);
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.04);
}

#modal-mapa-ligas .mapa-seg-group .form-check {
  margin: 0 !important;
  padding-left: 0 !important;
}

#modal-mapa-ligas .mapa-seg-group .btn-check {
  display: none !important;
}

#modal-mapa-ligas .mapa-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 30px;
  padding: 0 16px;
  border-radius: 9px;
  color: #64748b;
  font-size: 0.70rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

#modal-mapa-ligas .mapa-seg-btn:hover {
  color: var(--mcf-azul);
  background: rgba(0,53,128,0.03);
}

#modal-mapa-ligas .mapa-seg-btn-active {
  background: linear-gradient(135deg, var(--mcf-gold) 0%, #b88a00 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(201,162,39,0.24);
  font-weight: 800;
}

#modal-mapa-ligas .perf-map-close-btn {
  border: none;
  background: transparent;
  color: var(--mcf-gold);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

#modal-mapa-ligas .perf-map-close-btn:hover {
  background: rgba(201,162,39,0.10);
}

#modal-mapa-ligas .perf-map-modal-body {
  padding: 10px 14px 8px 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
  /* Crecemos para llenar el espacio entre header y footer */
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#modal-mapa-ligas .perf-map-body-row {
  align-items: stretch;
  margin: 0 !important;
  /* Ocupamos todo el espacio restante del body */
  flex: 1 1 auto;
  min-height: 0;
}

/* Hack Bootstrap: la clase row de dash usa height auto, sobreescribimos */
#modal-mapa-ligas .perf-map-body-row.row {
  height: 100%;
}

#modal-mapa-ligas .perf-map-left-col {
  padding-right: 12px !important;
  flex: 1;
  min-width: 0;
  /* Columna de Bootstrap: necesitamos que herede la altura del row */
  height: 100%;
  display: flex;
  flex-direction: column;
}

#modal-mapa-ligas .perf-map-right-col {
  padding-left: 12px !important;
  flex: 0 0 300px;
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#modal-mapa-ligas .perf-map-canvas {
  position: relative;
  /* overflow visible para que el popup de ligas no quede cortado */
  overflow: visible;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 1px solid rgba(201,162,39,0.18);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: inset 0 1px 6px rgba(15,23,42,0.03), 0 10px 30px rgba(15,23,42,0.05);
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* El borde redondeado con clip lo aplicamos al mapa interior, no al contenedor */
}

/* Recortamos solo el gráfico plotly, no el contenedor entero */
#modal-mapa-ligas .perf-map-graph {
  flex: 1 1 auto;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px;
  overflow: hidden;
}

#modal-mapa-ligas .perf-map-graph .js-plotly-plot,
#modal-mapa-ligas .perf-map-graph .plot-container,
#modal-mapa-ligas .perf-map-graph .svg-container,
#modal-mapa-ligas .perf-map-graph .main-svg {
  width: 100% !important;
  height: 100% !important;
}

#modal-mapa-ligas .perf-map-legend {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 6px;
  padding-left: 4px;
  flex-shrink: 0;
}

#modal-mapa-ligas .perf-map-legend:empty {
  display: none;
}

#modal-mapa-ligas .perf-map-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  margin-bottom: 10px;
}

#modal-mapa-ligas .perf-map-side-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--mcf-azul);
  letter-spacing: -0.01em;
}

#modal-mapa-ligas .perf-map-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mcf-azul);
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  box-shadow: 0 4px 8px rgba(0,53,128,0.15);
}

#modal-mapa-ligas .perf-map-badge:empty {
  display: none;
}

#modal-mapa-ligas .perf-map-clear-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(255,59,48,0.52);
  background: linear-gradient(180deg, #ffffff 0%, #fffafb 100%);
  color: #d62d20;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

#modal-mapa-ligas .perf-map-clear-btn:hover {
  border-color: rgba(255,59,48,0.92);
  background: linear-gradient(180deg, rgba(255,243,243,1) 0%, rgba(255,250,250,1) 100%);
  box-shadow: 0 0 0 3px rgba(255,59,48,0.09), 0 8px 18px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}

#modal-mapa-ligas .perf-map-side-checklist-hidden {
  display: none !important;
}

#modal-mapa-ligas .perf-map-right-panel-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#modal-mapa-ligas .perf-map-selected-panel {
  flex: 1 1 auto;
  /* El scroll aquí sí es deseado: lista de ligas dentro del panel */
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(201,162,39,0.25);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 2px 6px rgba(15,23,42,0.03);
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,0.30) transparent;
}

#modal-mapa-ligas .perf-map-selected-panel::-webkit-scrollbar {
  width: 5px;
}

#modal-mapa-ligas .perf-map-selected-panel::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,0.28);
  border-radius: 99px;
}

#modal-mapa-ligas .perf-map-selected-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#modal-mapa-ligas .perf-map-selected-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(0,53,128,0.025);
  border: 1px solid rgba(201,162,39,0.12);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

#modal-mapa-ligas .perf-map-selected-item:hover {
  background: rgba(0,53,128,0.06);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0.20);
}

#modal-mapa-ligas .perf-map-selected-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1f365d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Bandera en el panel de ligas seleccionadas */
#modal-mapa-ligas .perf-map-sel-flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
  flex-shrink: 0;
}

#modal-mapa-ligas .perf-map-sel-flag-emoji {
  font-size: 14px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* Botón x para eliminar liga individual */
#modal-mapa-ligas .perf-map-sel-remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.16s ease, background 0.16s ease;
}

#modal-mapa-ligas .perf-map-sel-remove:hover {
  color: #dc2626;
  background: rgba(220,38,38,0.08);
}

#modal-mapa-ligas .perf-map-selected-empty {
  font-size: 0.72rem;
  color: #8fa3c0;
  font-weight: 600;
  text-align: center;
  padding: 20px 0;
}

#modal-mapa-ligas .perf-map-popup {
  min-width: 200px;
  max-width: 240px;
  max-height: 248px;
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid var(--mcf-gold);
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(15,23,42,0.18);
  padding: 8px 10px;
  z-index: 1000;
}

#modal-mapa-ligas #mapa-popup-title {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #003580 !important;
  margin-bottom: 6px !important;
  padding-right: 18px !important;
}

#modal-mapa-ligas #mapa-popup-checklist {
  max-height: 192px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,0.36) transparent;
}

#modal-mapa-ligas #mapa-popup-checklist::-webkit-scrollbar {
  width: 5px;
}

#modal-mapa-ligas #mapa-popup-checklist::-webkit-scrollbar-track {
  background: transparent;
}

#modal-mapa-ligas #mapa-popup-checklist::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,0.30);
  border-radius: 99px;
}

#modal-mapa-ligas #mapa-popup-groups {
  max-height: 192px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,0.36) transparent;
}

#modal-mapa-ligas #mapa-popup-groups::-webkit-scrollbar {
  width: 5px;
}

#modal-mapa-ligas #mapa-popup-groups::-webkit-scrollbar-track {
  background: transparent;
}

#modal-mapa-ligas #mapa-popup-groups::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,0.30);
  border-radius: 99px;
}

#modal-mapa-ligas .perf-map-popup-family {
  margin-bottom: 8px;
  padding: 6px 6px 4px 6px;
  border: 1px solid rgba(201,162,39,0.16);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

#modal-mapa-ligas .perf-map-popup-family:first-child {
  margin-top: 0;
}

#modal-mapa-ligas .perf-map-popup-family-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 26px !important;
  padding: 4px 4px !important;
  cursor: pointer !important;
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  color: #2f476a !important;
  border-radius: 8px !important;
  transition: background 0.14s ease, color 0.14s ease;
  border-bottom: 1px solid rgba(201,162,39,0.10);
  margin-bottom: 4px;
}

#modal-mapa-ligas .perf-map-popup-family-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
}

#modal-mapa-ligas .perf-map-popup-family-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 5px !important;
  margin-left: auto !important;
  border-radius: 999px !important;
  background: rgba(201,162,39,0.10) !important;
  color: #6b7a95 !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

#modal-mapa-ligas .perf-map-popup-family-checklist {
  padding: 0 0 2px 2px;
}

#modal-mapa-ligas .perf-map-popup-family-checklist label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 22px;
  padding: 2px 6px !important;
  border-radius: 8px;
  font-size: 0.68rem !important;
  color: #24344d !important;
  transition: background 0.16s ease;
  margin-bottom: 2px !important;
}

#modal-mapa-ligas .perf-map-popup-family-checklist label:hover {
  background: rgba(0,53,128,0.04);
}

#modal-mapa-ligas .perf-map-popup-family-checklist input[type="checkbox"] {
  accent-color: #003580;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
}

#modal-mapa-ligas #mapa-popup-checklist label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 24px;
  padding: 2px 4px !important;
  border-radius: 8px;
  font-size: 0.69rem !important;
  color: #24344d !important;
  transition: background 0.16s ease;
}

#modal-mapa-ligas #mapa-popup-checklist label:hover {
  background: rgba(0,53,128,0.04);
}

#modal-mapa-ligas #mapa-popup-checklist input[type="checkbox"] {
  accent-color: #003580;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
}

#modal-mapa-ligas .perf-map-modal-footer {
  padding: 8px 14px 10px 14px !important;
  border-top: 1px solid var(--mcf-gold) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.92) 100%) !important;
}

@media (max-width: 1100px) {
  #modal-mapa-ligas .perf-map-right-col {
    max-width: 196px;
    min-width: 182px;
    flex-basis: 196px;
  }
}

@media (max-width: 900px) {
  #modal-mapa-ligas .perf-map-body-row {
    flex-wrap: wrap;
  }

  #modal-mapa-ligas .perf-map-left-col,
  #modal-mapa-ligas .perf-map-right-col {
    max-width: 100%;
    min-width: 100%;
    flex-basis: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   FILTROS AVANZADOS — chip toggles en el header de la tabla
   ══════════════════════════════════════════════════════════════ */

.perf-adv-chips-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-right: 10px;
  flex-shrink: 0;
}

.perf-adv-chips-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mcf-azul, #003580);
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.perf-adv-chips-label i {
  font-size: 0.50rem;
  color: var(--mcf-gold, #C9A227);
}

.perf-adv-chips-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
}

/* Chip base */
.perf-adv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1.5px solid rgba(201, 162, 39, 0.38);
  background: rgba(255, 255, 255, 0.85);
  color: var(--mcf-azul, #003580);
  font-size: 0.60rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  line-height: 1;
  font-family: inherit;
}

.perf-adv-chip i {
  font-size: 0.56rem;
  color: var(--mcf-gold, #C9A227);
  transition: color 0.15s ease;
}

.perf-adv-chip:hover:not(:disabled) {
  border-color: var(--mcf-gold, #C9A227);
  background: rgba(201, 162, 39, 0.06);
  box-shadow: 0 1px 4px rgba(201, 162, 39, 0.18);
}

/* Chip activo */
.perf-adv-chip.perf-adv-chip--active {
  background: var(--mcf-azul, #003580) !important;
  border-color: var(--mcf-azul, #003580) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 53, 128, 0.22) !important;
}

.perf-adv-chip.perf-adv-chip--active i {
  color: var(--mcf-gold, #C9A227) !important;
}

/* Chip deshabilitado */
.perf-adv-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── DropdownMenu "Filtros avanzados" ──────────────────────────── */
.perf-adv-dropdown .Select-control,
.perf-adv-dropdown .VirtualizedSelect .Select-control {
  min-height: 26px !important;
  height: auto !important;
  border-radius: 13px !important;
  border: 1.5px solid rgba(201, 162, 39, 0.42) !important;
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.perf-adv-dropdown .Select-control:hover {
  border-color: var(--mcf-gold, #C9A227) !important;
}

.perf-adv-dropdown .Select-placeholder,
.perf-adv-dropdown .Select-input input {
  font-size: 0.62rem !important;
  color: #94A3B8 !important;
  line-height: 24px !important;
  padding: 0 10px !important;
}

.perf-adv-dropdown .Select-value {
  background: var(--mcf-azul, #003580) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  margin: 2px 3px !important;
  padding: 0 6px !important;
  line-height: 18px !important;
}

.perf-adv-dropdown .Select-value-icon {
  border-right: 1px solid rgba(255,255,255,0.25) !important;
  color: var(--mcf-gold, #C9A227) !important;
  font-size: 0.70rem !important;
  padding: 0 4px !important;
}

.perf-adv-dropdown .Select-value-icon:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

.perf-adv-dropdown .Select-value-label {
  color: #fff !important;
  padding: 0 6px 0 2px !important;
}

.perf-adv-dropdown .Select-arrow-zone {
  padding: 0 8px !important;
}

.perf-adv-dropdown .Select-menu-outer {
  border: 1.5px solid rgba(201, 162, 39, 0.35) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(15,23,42,0.10) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

.perf-adv-dropdown .Select-option {
  font-size: 0.64rem !important;
  color: var(--mcf-azul, #003580) !important;
  padding: 6px 12px !important;
}

.perf-adv-dropdown .Select-option.is-focused {
  background: rgba(201, 162, 39, 0.08) !important;
}

.perf-adv-dropdown .Select-option.is-selected {
  background: var(--mcf-azul, #003580) !important;
  color: #fff !important;
}

.perf-adv-dropdown.is-disabled .Select-control {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

/* ── Button "Filtros avanzados" (dbc.DropdownMenu) ─────────────── */
.perf-adv-menu {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1200;
}

/* Toggle button */
.perf-adv-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  border: 1.5px solid var(--mcf-gold, #C9A227) !important;
  background: #fff !important;
  color: var(--mcf-azul, #003580) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 4px rgba(201,162,39,0.18) !important;
  transition: all 0.18s ease !important;
}

.perf-adv-toggle-btn:hover:not(:disabled) {
  background: rgba(201,162,39,0.08) !important;
  border-color: var(--mcf-azul, #003580) !important;
}

.perf-adv-toggle-btn:disabled,
.perf-adv-menu.disabled .perf-adv-toggle-btn {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Hide the default Bootstrap caret */
.perf-adv-toggle-btn::after {
  display: none !important;
}

/* Dropdown menu panel */
.perf-adv-menu .dropdown-menu {
  min-width: 180px !important;
  padding: 8px 4px !important;
  border: 1.5px solid rgba(201,162,39,0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
  background: #fff !important;
  margin-top: 4px !important;
  z-index: 40 !important;
}

/* Checklist inside the menu */
.perf-adv-checklist {
  padding: 2px 8px !important;
}

.perf-adv-checklist .form-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.14s ease !important;
}

.perf-adv-checklist .form-check:hover {
  background: rgba(201,162,39,0.07) !important;
}

.perf-adv-checklist .form-check-input {
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  border: 1.5px solid rgba(0,53,128,0.4) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.perf-adv-checklist .form-check-input:checked {
  background-color: var(--mcf-azul, #003580) !important;
  border-color: var(--mcf-azul, #003580) !important;
}

.perf-adv-checklist .form-check-label {
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  color: var(--mcf-azul, #003580) !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
}

/* Resumen de filtros activos (texto bajo el botón) */
.perf-adv-resumen {
  font-size: 0.54rem;
  font-weight: 600;
  color: var(--mcf-azul, #003580);
  opacity: 0.72;
  white-space: nowrap;
  letter-spacing: 0.01em;
  margin-top: 3px;
  line-height: 1.2;
}

/* Tooltip del contador de ranking */
#ranking-info-icon {
  display: inline-flex;
  align-items: center;
}

/* Sidebar minimizado: recuperar tamaño de tabla en rendimiento */
#page-content[data-sidebar-open="false"] #tabla-ranking .dash-cell {
  font-size: 0.66rem !important;
  padding: 3px 6px !important;
}

#page-content[data-sidebar-open="false"] #tabla-ranking th.dash-header {
  font-size: 0.66rem !important;
  padding: 4px 6px !important;
}

/* Separador vertical entre chips y sliders */
.perf-header-controls-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 162, 39, 0.35) 30%,
    rgba(201, 162, 39, 0.35) 70%,
    transparent 100%
  );
  align-self: center;
  flex-shrink: 0;
  margin: 0 4px;
}


/* Cabecera común de los selectores de países y ligas. */
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises, #modal-liga-comparada) .perf-filter-modal-content {
  border-radius: 16px !important;
  overflow: hidden !important;
}
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises, #modal-liga-comparada) .perf-filter-modal-header {
  background: #003875 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #C79B00 !important;
  align-items: center !important;
}
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises, #modal-liga-comparada) .perf-filter-modal-header .modal-title {
  color: #fff !important;
}
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises, #modal-liga-comparada) .perf-filter-modal-header > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 8px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises, #modal-liga-comparada) .perf-filter-modal-header > button:hover {
  background: rgba(255,255,255,.15) !important;
}
:is(#modal-listado-paises, #modal-radar-listado-ligas, #metricas-season-modal, #modal-listado-paises-camp, #jug-encaje-ligas-modal, #listas-modal-listado-paises, #modal-liga-comparada) .perf-filter-modal-header > button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}