/* ===== Barra de Federaciones ===== */
.feds-bar{
  /* añade layout de barra */
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;

  /* ya lo tenías */
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* === NUEVO: el WRAPPER central que scrollea === */
.feds-strip-wrap{
  position:relative;
  flex:1 1 auto;                 /* el carril crece */
  overflow:auto hidden;          /* scroll horizontal aquí */
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:#3a4348 transparent;

  /* opcional, para que parezca carril */
  background:#0f1315;
  border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.feds-strip-wrap::-webkit-scrollbar{ height:4px; }
.feds-strip-wrap::-webkit-scrollbar-thumb{ background:#3a4348; border-radius:999px; }
.feds-strip-wrap::-webkit-scrollbar-track{ background:transparent; }

/* La fila interna NO scrollea */
.feds-strip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  white-space:nowrap;
  padding-bottom:6px;            /* margen frente al scrollbar */
  overflow:visible;              /* ← quita el overflow de aquí */
}

/* ===== Botones fijos (izq/dcha) ===== */
.fed-action{
  flex:0 0 auto;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:#1a2023;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  cursor:pointer;
  color:#d6e2ea;
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.fed-action:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.18);
  background:#20272b;
}

/* ===== Chip (tamaño fijo + zoom) — tus reglas existentes ===== */
.fed-chip{
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  padding: 6px;
  scroll-snap-align: start;
  background: #1a2023;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  overflow: hidden;
  --img-scale: 1;
  --img-shift-y: 0px;
}
.fed-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
  background: #20272b;
}
.fed-chip.selected{
  border-color: #00e765;
  box-shadow: 0 0 0 2px rgba(0,231,101,0.25), 0 4px 16px rgba(0,231,101,0.18);
  background: #0b7c3c;
}
.fed-chip img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--img-scale)) translateY(var(--img-shift-y));
  transition: transform .12s ease;
  display: block;
  pointer-events: none;
}
/* Zoom específico (los que ya pusiste) */
.feds-bar .fed-chip.fed_canarias { --img-scale: 1.28; }
.feds-bar .fed-chip.fed_cataluna { --img-scale: 1.28; }
.feds-bar .fed-chip.fed_ceuta    { --img-scale: 1.32; }
.feds-bar .fed-chip.fed_galicia  { --img-scale: 1.22; }

/* Responsive */
@media (max-width: 480px){
  .fed-action{ width:42px; height:42px; }
  .fed-chip{ width: 42px; height: 42px; padding: 5px; }
  .feds-strip{ gap: 8px; padding: 6px 8px; }
}




/* Botones de la barra con imagen */
.fed-action.left,
.fed-action.right {
  padding: 0; /* quita espacio extra */
}

/* Imagen dentro de cualquier botón */
.fed-action .fed-action-img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none; /* todo el clic es del botón */
}