/* ---- skeleton loaders ---- */
.skeleton {
  background: linear-gradient(90deg, var(--gris-200) 25%, var(--superficie-alta) 37%, var(--gris-200) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radio-chico);
}
.skeleton-linea { height: .9rem; margin-bottom: .55rem; }
.skeleton-linea.corta { width: 40%; }

/* Esqueleto con la silueta real de .tarjeta-partido (ver skeletonPartidos en
   app.js) + un barrido diagonal tipo foco de estadio recorriéndola, en vez
   de barras planas — usa --verde para el tinte del foco, así cambia solo
   con cambiar de tema (Cristal/PS5/Xbox/Switch). */
.tarjeta-partido-esqueleto { position: relative; overflow: hidden; }
.foco-esqueleto {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--verde) 18%, transparent) 48%,
    transparent 66%
  );
  transform: translateX(-100%);
  animation: foco-recorre 2.2s ease-in-out infinite;
}
@keyframes foco-recorre { to { transform: translateX(220%); } }

.skeleton-escudo { width: 1.55rem; height: 1.55rem; border-radius: 50%; flex-shrink: 0; }
.skeleton-inline { height: .8rem; border-radius: 4px; }
.skeleton-inline.ancho-corto { width: 64px; }
.skeleton-inline.ancho-medio { width: 92px; }
.skeleton-inline.ancho-largo { width: 122px; }
.skeleton-marcador { width: 2.1rem; height: 1.7rem; flex-shrink: 0; border-radius: var(--radio-chico); }