/* Reserva el espacio de las fotos mientras se descargan para evitar saltos de layout. */
.galeria-imagen-pendiente {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 9 / 16;
	background-color: rgba(127, 127, 127, 0.08);
	overflow: hidden;
	position: relative;
}

.galeria-imagen-pendiente img {
	display: block;
}

/* Estado visible mientras la imagen termina de descargarse y decodificarse. */
.galeria-imagen-pendiente::before {
	content: "Cargando foto";
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: #fff;
	font-size: clamp(0.95rem, 2.5vw, 1.2rem);
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
	background-color: rgba(0, 0, 0, 0.14);
	pointer-events: none;
}

.galeria-imagen-pendiente.galeria-imagen-error::before {
	content: "No se pudo cargar la foto";
}

/*
 * El carrusel conserva siempre un marco vertical. Así las fotos verticales
 * pueden tocar ambos lados del contenedor; las horizontales se contienen y
 * dejan el espacio sobrante arriba y abajo.
 */
#fotos.carousel .carousel-inner {
	aspect-ratio: 9 / 16;
}

#fotos.carousel .carousel-item {
	height: 100%;
}

#fotos.carousel .carousel-item > div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* El marco permanente sustituye la proporción provisional de carga. */
#fotos.carousel .galeria-imagen-pendiente {
	aspect-ratio: auto;
}

#fotos.carousel .carousel-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}