/*
 * Skeleton loading.
 *
 * Se muestra sólo mientras hay una carga real, reserva las dimensiones finales
 * para no provocar saltos, usa una animación CSS ligera y respeta la
 * preferencia de reducción de movimiento.
 */

.rop-skeleton[hidden] {
	display: none !important;
}

.rop-skeleton__line,
.rop-skeleton__media,
.rop-skeleton__thumb,
.rop-skeleton__price,
.rop-skeleton__button {
	display: block;
	border-radius: 12px;
	background: linear-gradient( 90deg, #eeeef1 25%, #f7f7f9 37%, #eeeef1 63% );
	background-size: 400% 100%;
	animation: rop-shimmer 1.4s ease infinite;
}

.rop-skeleton--grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rop-skeleton__card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding-bottom: 1rem;
	overflow: hidden;
	border: 1px solid var(--rop-line, #ececed);
	border-radius: var(--rop-radius, 22px);
	background: var(--rop-surface, #fff);
}

.rop-skeleton__media {
	width: 100%;
	aspect-ratio: 16 / 11;
	border-radius: 0;
}

.rop-skeleton__line {
	height: 12px;
	margin-inline: 1rem;
}

.rop-skeleton__line--lg { width: 70%; height: 14px; }
.rop-skeleton__line--sm { width: 45%; }

.rop-skeleton__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: .3rem 1rem 0;
}

.rop-skeleton__price { width: 70px; height: 16px; }
.rop-skeleton__button { width: 42px; height: 42px; border-radius: 50%; }

.rop-skeleton--cart {
	display: grid;
	gap: 10px;
}

.rop-skeleton__row {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: .8rem;
	align-items: center;
	padding: .7rem;
	border: 1.5px dashed var(--rop-dash, #dcdce0);
	border-radius: 18px;
}

.rop-skeleton__thumb {
	width: 64px;
	height: 64px;
	border-radius: 14px;
}

.rop-skeleton__lines {
	display: grid;
	gap: .5rem;
}

.rop-skeleton--cart .rop-skeleton__line {
	margin-inline: 0;
}

[aria-busy="true"] .rop-order-item,
[aria-busy="true"] .rop-card {
	opacity: .55;
	transition: opacity .15s ease;
}

@keyframes rop-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media ( prefers-reduced-motion: reduce ) {
	.rop-skeleton__line,
	.rop-skeleton__media,
	.rop-skeleton__thumb,
	.rop-skeleton__price,
	.rop-skeleton__button {
		animation: none;
		background: #eeeef1;
	}
}

.rop-no-animations .rop-skeleton__line,
.rop-no-animations .rop-skeleton__media,
.rop-no-animations .rop-skeleton__thumb,
.rop-no-animations .rop-skeleton__price,
.rop-no-animations .rop-skeleton__button {
	animation: none;
	background: #eeeef1;
}

/* Skeleton del cuadro rápido */
.rop-skeleton--quick {
	display: grid;
	grid-template-columns: minmax( 0, 42% ) minmax( 0, 1fr );
	gap: 24px;
	padding-right: 24px;
}

.rop-skeleton--quick .rop-skeleton__media {
	aspect-ratio: 3 / 4;
	border-radius: 0;
}

.rop-skeleton--quick .rop-skeleton__lines {
	display: grid;
	gap: .9rem;
	align-content: start;
	padding-top: 32px;
}

.rop-skeleton--quick .rop-skeleton__line {
	height: 16px;
	margin-inline: 0;
}

@media ( max-width: 767px ) {
	.rop-skeleton--quick {
		grid-template-columns: minmax( 0, 1fr );
		padding: 0 0 20px;
	}

	.rop-skeleton--quick .rop-skeleton__media {
		aspect-ratio: 16 / 10;
	}

	.rop-skeleton--quick .rop-skeleton__lines {
		padding: 0 20px;
	}
}

/* Precarga de imágenes ------------------------------------------------- */

/*
 * El contenedor lleva el brillo detrás de la imagen. Cuando la imagen llega,
 * la tapa; JavaScript sólo quita la animación. Si el JavaScript falla no se ve
 * nada raro: el brillo queda oculto bajo la foto.
 *
 * Esta hoja sólo se carga cuando el skeleton está activo en el panel, así que
 * apagarlo desactiva también esta precarga.
 */
.rop-card__media,
.rop-banner__media,
.rop-pairing__media,
.rop-dish__media {
	background-image: linear-gradient( 90deg, #eeeef1 25%, #f7f7f9 37%, #eeeef1 63% );
	background-size: 400% 100%;
	animation: rop-shimmer 1.4s ease infinite;
}

.rop-card__media.is-loaded,
.rop-banner__media.is-loaded,
.rop-pairing__media.is-loaded,
.rop-dish__media.is-loaded {
	background-image: none;
	animation: none;
}

/* Las miniaturas del pedido las pinta JavaScript ya con su marca. */
.rop-order-item__thumb {
	background-image: linear-gradient( 90deg, #eeeef1 25%, #f7f7f9 37%, #eeeef1 63% );
	background-size: 400% 100%;
	animation: rop-shimmer 1.4s ease infinite;
}

.rop-order-item__thumb.is-loaded {
	background-image: none;
	animation: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.rop-card__media,
	.rop-banner__media,
	.rop-pairing__media,
	.rop-dish__media,
	.rop-order-item__thumb {
		animation: none;
		background-image: none;
		background-color: #eeeef1;
	}
}

.rop-no-animations .rop-card__media,
.rop-no-animations .rop-banner__media,
.rop-no-animations .rop-pairing__media,
.rop-no-animations .rop-order-item__thumb {
	animation: none;
	background-image: none;
	background-color: #eeeef1;
}