/* ==============================================================================
   Sistema: Ecovía Comechingones (Smart City & Tourism)
   Creador y Desarrollador: Silvio Deandrea
   Copyright: © 2026 Silvio Deandrea. Todos los derechos reservados.
   Licencia: Propiedad Privada - Producto Protegido por Derechos de Autor.
   ============================================================================== */

/* Skeleton loaders (F8.8) — reemplazo de los "Cargando…" con bloques grises
   animados para que la sensación de espera sea más liviana. CSS puro, sin
   librerías externas. Las clases se aplican a cualquier elemento; las
   variantes (-line, -card, -avatar) controlan tamaño. */

.skeleton {
  position: relative;
  overflow: hidden;
  background: #e7e5e4;
  border-radius: 0.5rem;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.4s linear infinite;
}

@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

.skeleton-line { height: 0.8rem; margin-bottom: 0.5rem; }
.skeleton-line.lg { height: 1.25rem; }
.skeleton-line.sm { height: 0.6rem; }
.skeleton-line.w-1\/4  { width: 25%; }
.skeleton-line.w-1\/3  { width: 33.333%; }
.skeleton-line.w-1\/2  { width: 50%; }
.skeleton-line.w-2\/3  { width: 66.667%; }
.skeleton-line.w-3\/4  { width: 75%; }
.skeleton-line.w-full  { width: 100%; }

.skeleton-card {
  height: 8rem;
  border-radius: 1rem;
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
}

.skeleton-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.375rem;
}

/* Cuando los skeletons sustituyen contenido cargando, suelen ir adentro de un
   contenedor — esta clase no es estrictamente necesaria pero ayuda a que el
   layout no salte cuando llega el contenido real. */
.skeleton-wrap > * + * { margin-top: 0.4rem; }