/*
 * Roboto autoalojada (no depende de Google Fonts en producción — mismo
 * criterio que la fuente OFL usada para la marca de agua, ver
 * assets/fonts/LICENSE-Roboto.txt). Es la variante variable (un solo
 * archivo cubre los pesos 100-900), por eso un único `@font-face` con un
 * rango de `font-weight` en vez de una declaración por peso.
 */
@font-face {
	font-family: 'CDL Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url( '../../fonts/Roboto-Variable.woff2' ) format( 'woff2' );
}

.cdl-library {
	--cdl-lib-border: #d4d4d8;
	--cdl-lib-muted: #6b7280;
	--cdl-lib-danger: #b91c1c;
	--cdl-lib-accent: #2454ff;
	--cdl-lib-font: 'CDL Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	/*
	 * `!important`: constructores de página como Elementor aplican su
	 * tipografía global (`body { font-family: ... !important }`) — sin esto,
	 * la fuente propia del plugin pierde siempre contra la del tema/kit
	 * global, sin importar la especificidad del selector (comprobado en
	 * navegador real contra el tema Astra + Elementor de este sitio).
	 */
	font-family: var( --cdl-lib-font ) !important;
}

.cdl-library__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

.cdl-library__toolbar input,
.cdl-library__toolbar select {
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var( --cdl-lib-border );
	border-radius: 8px;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cdl-library__toolbar input:hover,
.cdl-library__toolbar select:hover {
	border-color: var( --cdl-lib-accent );
}

.cdl-library__toolbar input:focus-visible,
.cdl-library__toolbar select:focus-visible {
	outline: none;
	border-color: var( --cdl-lib-accent );
	box-shadow: 0 0 0 3px rgba( 36, 84, 255, 0.35 );
}

.cdl-library__grid {
	--cdl-lib-columns: 4;
	display: grid;
	grid-template-columns: repeat( var( --cdl-lib-columns ), 1fr );
	gap: 16px;
}

/*
 * La cantidad de columnas es configurable (Configuración > "Visualización de
 * la biblioteca"), pero un valor alto fijo en una pantalla angosta dejaría
 * tarjetas ilegibles — se limita con `min()` en vez de ignorar el ajuste.
 */
@media ( max-width: 900px ) {
	.cdl-library__grid {
		grid-template-columns: repeat( min( var( --cdl-lib-columns ), 3 ), 1fr );
	}
}

@media ( max-width: 600px ) {
	.cdl-library__grid {
		grid-template-columns: repeat( min( var( --cdl-lib-columns ), 2 ), 1fr );
	}
}

.cdl-library__card[hidden],
.cdl-library__card--off-page {
	display: none !important;
}

.cdl-library__pager {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin-top: 20px;
}

.cdl-library__load-more {
	display: block;
	margin: 20px auto 0;
}

/*
 * El botón "Cargar más" también lleva `button` (spec §6.1: hereda el color
 * del tema/WooCommerce, ver más abajo) — un `.button` de tema sin
 * `!important` en su propio `display` es, igual que cualquier regla de
 * autor, más fuerte en la cascada que la regla `[hidden]` del user-agent
 * (el origen de la hoja de estilos pesa antes que la especificidad), así
 * que el atributo `hidden` que pone el JS no alcanza para ocultarlo sin
 * este `!important` explícito.
 */
.cdl-library__pager[hidden],
.cdl-library__load-more[hidden] {
	display: none !important;
}

.cdl-library__card {
	border: 1px solid var( --cdl-lib-border );
	border-radius: 10px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cdl-library__card:hover {
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.1 );
	transform: translateY( -2px );
}

.cdl-library__cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 8px;
}

.cdl-library__book-title {
	font-size: 1rem;
	margin: 0 0 4px;
}

.cdl-library__author {
	color: var( --cdl-lib-muted );
	font-size: 0.85rem;
	margin: 0 0 8px;
}

.cdl-library__progress {
	font-size: 0.85rem;
	margin: 0 0 8px;
}

/*
 * Sin color/fondo propios a propósito (spec §6.1: "los estilos propios deben
 * limitarse al componente y utilizar variables CSS configurables"): las
 * clases `button`/`wp-element-button` hacen que WooCommerce o el tema
 * (clásico o de bloques) pinten el botón con su propio color de marca, en
 * vez de un azul fijo que no tiene relación con el sitio donde se instale.
 */
.cdl-library__read-button {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	text-align: center;
	margin-top: auto;
	border-radius: 8px;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

.cdl-library__read-button:hover {
	opacity: 0.88;
}

.cdl-library__read-button:active {
	transform: scale( 0.97 );
}

/*
 * Igual criterio que el botón "Leer": sin color propio, solo una
 * interacción visual (opacidad/elevación) que funciona encima de
 * cualquier color de marca que ponga el tema.
 */
.cdl-library__pager-btn,
.cdl-library__load-more {
	border-radius: 8px;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.cdl-library__pager-btn:hover:not( :disabled ),
.cdl-library__load-more:hover {
	opacity: 0.88;
	transform: translateY( -1px );
}

.cdl-library__pager-btn:active:not( :disabled ),
.cdl-library__load-more:active {
	transform: scale( 0.97 );
}

.cdl-library__pager-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cdl-library__page-indicator {
	font-variant-numeric: tabular-nums;
}

.cdl-library__suspended-notice {
	font-size: 0.85rem;
	color: var( --cdl-lib-danger );
	margin-top: auto;
}