/**
 * Skeleton loading (placeholder "pulsando", estilo apps modernos).
 * Reutilizável em qualquer tela. Use junto com views/_js/skeleton.js.
 */

.skeleton {
	display: inline-block;
	height: 12px;
	border-radius: 6px;
	background: #eef0f2;
	background-image: linear-gradient(90deg, #eef0f2 0px, #f6f7f8 40px, #eef0f2 80px);
	background-size: 600px 100%;
	animation: skeleton-shimmer 1.3s infinite linear;
}

@keyframes skeleton-shimmer {
	0%   { background-position: -200px 0; }
	100% { background-position: 400px 0; }
}

/* Skeleton em linhas de tabela */
.skeleton-row td {
	padding: 14px 10px !important;
}
.skeleton-row .skeleton {
	width: 100%;
}

/* Larguras variadas para parecer conteúdo real */
.skeleton.w-20 { width: 20%; }
.skeleton.w-30 { width: 30%; }
.skeleton.w-40 { width: 40%; }
.skeleton.w-50 { width: 50%; }
.skeleton.w-60 { width: 60%; }
.skeleton.w-70 { width: 70%; }
.skeleton.w-80 { width: 80%; }
.skeleton.w-90 { width: 90%; }
.skeleton.w-100 { width: 100%; }

/* Skeleton genérico para blocos (modais, painéis) */
.skeleton-bloco {
	padding: 20px;
}
.skeleton-bloco .skeleton {
	display: block;
	margin-bottom: 12px;
}

/* Overlay de skeleton sobre containers gerenciados por plugins (ex.: DataTables) */
.skeleton-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 5;
	padding: 8px 0;
	overflow: hidden;
}
.skeleton-overlay .skeleton-ov-row {
	display: flex;
	gap: 24px;
	padding: 14px 12px;
	border-bottom: 1px solid #f1f3f4;
}
.skeleton-overlay .skeleton-ov-col {
	flex: 1;
}
.skeleton-overlay .skeleton-ov-col .skeleton {
	width: 100%;
}

/* Modo bloco do overlay (cards, painéis): barras empilhadas */
.skeleton-overlay .skeleton-ov-bloco {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	justify-content: center;
}
.skeleton-overlay .skeleton-ov-bloco .skeleton {
	display: block;
	height: 14px;
}

/* Overlay herda o arredondamento do container (não estoura cantos do card) */
.skeleton-overlay {
	border-radius: inherit;
}
