/* ==========================================================================
   SKELETON LOADER — MEGA
   Reutiliza las variables de marca definidas en mega-table.css (--mega-*).
   Pensado para reemplazar el contenido real mientras llega la respuesta AJAX
   de las tablas/paneles dinámicos, en vez del modal bloqueante de SweetAlert.
   ========================================================================== */

@keyframes mega-skeleton-shimmer{
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.skeleton{
	position: relative;
	display: block;
	width: 100%;
	border-radius: var(--mega-radius-sm, 8px) !important;
	background: linear-gradient(
		100deg,
		var(--mega-gris-claro, #F4F5F7) 30%,
		rgba(45, 39, 156, 0.09) 50%,
		var(--mega-gris-claro, #F4F5F7) 70%
	) !important;
	background-size: 400% 100% !important;
	animation: mega-skeleton-shimmer 1.5s ease-in-out infinite !important;
	color: transparent !important;
	pointer-events: none !important;
	user-select: none !important;
}

/* ==========================================================================
   Tamaños / formas comunes
   ========================================================================== */

.skeleton-text{
	height: .8rem;
	margin: .3rem 0;
}

.skeleton-text.skeleton-title{
	height: 1.05rem;
	width: 55%;
}

.skeleton-circle{
	border-radius: 50% !important;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
}

.skeleton-icon{
	width: 48px;
	height: 48px;
	border-radius: var(--mega-radius-sm, 8px) !important;
	flex-shrink: 0;
}

.skeleton-badge{
	height: 1.3rem;
	width: 72px;
	border-radius: 999px !important;
}

.skeleton-btn{
	height: 2.1rem;
	width: 100px;
	border-radius: 999px !important;
}

.skeleton-input{
	height: 2.1rem;
	border-radius: var(--mega-radius-sm, 8px) !important;
}

/* Anchos utilitarios para variar el largo de las barras */
.skeleton-w-25{ width: 25% !important; }
.skeleton-w-40{ width: 40% !important; }
.skeleton-w-50{ width: 50% !important; }
.skeleton-w-60{ width: 60% !important; }
.skeleton-w-75{ width: 75% !important; }
.skeleton-w-90{ width: 90% !important; }

/* ==========================================================================
   Filas skeleton dentro de la tabla dinámica (#loadTable)
   ========================================================================== */

table.mega-table tbody#loadTable tr.skeleton-row td{
	padding: .95rem .75rem !important;
	border-bottom: 1px solid var(--mega-gris-borde) !important;
}

table.mega-table tbody#loadTable tr.skeleton-row:hover{
	background-color: transparent !important;
}

/* ==========================================================================
   Tarjetas / paneles skeleton genéricos (reutilizables en cualquier vista)
   ========================================================================== */

.skeleton-card{
	border: 1px solid var(--mega-gris-borde) !important;
	border-radius: var(--mega-radius, 2rem) !important;
	background: #ffffff !important;
	padding: 1rem !important;
}

.skeleton-card .skeleton-row-flex{
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* ==========================================================================
   Accesibilidad: respetar "reducir movimiento"
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
	.skeleton{
		animation: none !important;
		background: var(--mega-gris-claro, #F4F5F7) !important;
	}
}