/* ==========================================================================
   ESTILOS DE LA BIBLIOTECA VIRTUAL (FRONTEND)
   ========================================================================== */

.bd-biblioteca-contenedor {
	width: 100%;
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Fila contenedora que agrupa los libros y su respectivo estante */
.bd-estante-fila {
	margin-bottom: 50px;
	position: relative;
}

/* Grilla dinámica adaptativa con Flexbox para alinear los libros sobre el mueble */
.bd-libros-grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: flex-end;
	padding: 0 20px;
	margin-bottom: -5px; /* Ajuste sutil para que los libros se apoyen directo en la madera */
	z-index: 2;
	position: relative;
}

/* Estructura de cada libro individual */
.bd-libro-item {
	flex: 1;
	margin: 0 10px;
	max-width: 140px; /* Tamaño estandarizado de portada */
	text-align: center;
	transition: transform 0.2s ease-in-out;
}

.bd-libro-item:hover {
	transform: translateY(-8px); /* Pequeño efecto flotante al pasar el mouse */
}

.bd-libro-enlace {
	text-decoration: none !important;
	display: block;
	color: inherit;
}

/* Contenedor de la portada con sombra para darle profundidad */
.bd-libro-portada-wrap {
	box-shadow: 0 8px 15px rgba(0,0,0,0.3);
	border-radius: 3px;
	overflow: hidden;
	background: #eee;
	line-height: 0;
}

.bd-libro-portada {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 2 / 3; /* Mantiene la proporción clásica del libro */
	object-fit: cover;
}

/* Metadatos inferiores del libro */
.bd-libro-meta {
	margin-top: 10px;
	font-family: sans-serif;
}

.bd-libro-titulo {
	display: block;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* Recorta a un máximo de 2 líneas el título */
	-webkit-box-orient: vertical;
}

.bd-libro-precio {
	display: block;
	font-size: 12px;
	color: #ed8936;
	font-weight: bold;
	margin-top: 3px;
}

/* Mueble Físico del Estante */
.bd-estante-madera {
	width: 100%;
	height: 35px; /* Altura visual del estante */
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	z-index: 1;
	box-shadow: 0 10px 15px rgba(0,0,0,0.15);
}

/* Estante por defecto en caso de no subir imagen en el backend */
.bd-estante-default {
	background: linear-gradient(to bottom, #a0522d 0%, #8b4513 100%);
	border-bottom: 4px solid #5c2d0c;
	border-radius: 2px;
}


/* ==========================================================================
   LÓGICA ADAPTATIVA MEDIANTE MEDIA QUERIES (Configuración Dinámica)
   ========================================================================== */

/* Configuración de Columnas Desktop (Por defecto según data-desktop) */
.bd-biblioteca-contenedor[data-desktop="6"] .bd-libro-item { max-width: calc(100% / 6 - 20px); }
.bd-biblioteca-contenedor[data-desktop="5"] .bd-libro-item { max-width: calc(100% / 5 - 20px); }
.bd-biblioteca-contenedor[data-desktop="4"] .bd-libro-item { max-width: calc(100% / 4 - 20px); }

/* Configuración para Tablets (Ancho menor a 992px) */
@media (max-width: 992px) {
	.bd-libros-grid { flex-wrap: wrap; justify-content: center; }
	
	.bd-biblioteca-contenedor[data-tablet="4"] .bd-libro-item { flex: 0 0 calc(100% / 4 - 20px); max-width: calc(100% / 4 - 20px); }
	.bd-biblioteca-contenedor[data-tablet="3"] .bd-libro-item { flex: 0 0 calc(100% / 3 - 20px); max-width: calc(100% / 3 - 20px); }
	.bd-biblioteca-contenedor[data-tablet="2"] .bd-libro-item { flex: 0 0 calc(100% / 2 - 20px); max-width: calc(100% / 2 - 20px); }
}

/* Configuración para Celulares (Ancho menor a 576px) */
@media (max-width: 576px) {
	.bd-biblioteca-contenedor[data-celu="3"] .bd-libro-item { flex: 0 0 calc(100% / 3 - 10px); max-width: calc(100% / 3 - 10px); margin: 5px; }
	.bd-biblioteca-contenedor[data-celu="2"] .bd-libro-item { flex: 0 0 calc(100% / 2 - 10px); max-width: calc(100% / 2 - 10px); margin: 5px; }
	.bd-biblioteca-contenedor[data-celu="1"] .bd-libro-item { flex: 0 0 calc(100% - 10px); max-width: 150px; margin: 5px auto; }
}


/* ==========================================================================
   PARCHE RESPONSIVE: AJUSTE DE MADERAS EN CASCADA (FLEX-WRAP)
   ========================================================================== */

@media (max-width: 992px) {
	/* 1. Hacemos que la grilla tenga una separación vertical entre filas de libros */
	.bd-libros-grid {
		flex-wrap: wrap !important;
		row-gap: 55px; /* Crea el espacio vertical exacto para que quepa la madera entre filas */
		padding-bottom: 20px;
	}

	/* 2. Convertimos la madera en un fondo absoluto que se replica en cada salto de línea */
	.bd-estante-madera {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 35px;
		z-index: 1;
	}
}

@media (max-width: 576px) {
	/* 3. Para celulares (donde se arman 3 niveles de estantes con tus 5 libros) 
		  hacemos que la grilla pinte líneas de madera de fondo repetitivas usando CSS */
	.bd-libros-grid {
		row-gap: 65px; /* Un poquito más de espacio en móviles para las portadas */
		/* Generamos un truco visual: un degradado que dibuja una madera artificial 
		   exactamente donde caen los libros si tu imagen no se duplica bien */
		background-image: linear-gradient(
			to bottom, 
			transparent 0%, 
			transparent 160px, 
			rgba(139, 69, 19, 0.15) 160px, 
			transparent 165px
		);
		background-size: 100% 210px; /* Se repite cada vez que baja una fila de libros */
	}
	
	/* Ajustamos el margen inferior de los items para que pisen parejo */
	.bd-libro-item {
		margin-bottom: 10px !important;
	}
}


/* ==========================================================================
   CONTROL DE VISIBILIDAD DE ESTANTES RESPONSIVE (HTML TRIPLE)
   ========================================================================== */

/* Por defecto ocultamos las versiones móviles y tablets */
.bd-only-tablet,
.bd-only-celular {
	display: none !important;
}
.bd-only-desktop {
	display: block !important;
}

/* Reglas a nivel Tablet (Entre 577px y 992px) */
@media (max-width: 992px) and (min-width: 577px) {
	.bd-only-desktop,
	.bd-only-celular {
		display: none !important;
	}
	.bd-only-tablet {
		display: block !important;
	}
	.bd-libros-grid {
		flex-wrap: nowrap !important; /* Forzamos a que NO queden flotando */
	}
}

/* Reglas a nivel Celular (Menor o igual a 576px) */
@media (max-width: 576px) {
	.bd-only-desktop,
	.bd-only-tablet {
		display: none !important;
	}
	.bd-only-celular {
		display: block !important;
	}
	.bd-libros-grid {
		flex-wrap: nowrap !important; /* Cada sub-estante de 2 libros se mantiene firme */
	}
}