/**
 * Biblioteca personal — estilos.
 *
 * Dirección de arte heredada del visor: serif para el contenido, sans para la
 * interfaz, y la portada como protagonista. Un libro se reconoce por su
 * cubierta antes que por su título, y esta pantalla existe para que el cliente
 * encuentre lo suyo de un vistazo.
 *
 * Se apoya en variables propias, no en las del tema: la biblioteca aparece
 * dentro de «Mi cuenta» de WooCommerce, que cada tema pinta a su manera, y no
 * puede depender de que el de turno defina nada.
 *
 * @package Voedia_Reader
 */

.voedia-bib {
	/* La biblioteca ES pantalla de producto, no lienzo de lectura: va con la
	   paleta de la marca. El acento marrón `#8a6a3b` que traía lo heredó del
	   visor, donde sí tiene sentido —papel y tinta—, pero aquí lo único que
	   hacía era que «Mi biblioteca» pareciera de otra aplicación. */
	--vb-texto: var( --vm-texto );
	--vb-titulo: var( --vm-negro );
	--vb-tenue: var( --vm-texto-tenue );
	--vb-borde: var( --vm-borde );
	--vb-acento: var( --vm-azul-tinta );
	--vb-fondo-hueco: var( --vm-azul-tenue );

	--vb-sans: var( --vm-sans );
	--vb-serif: var( --vm-serif );

	font-family: var( --vb-sans );
	color: var( --vb-texto );
	margin-block: 1.5rem;
}

/* AQUÍ HABÍA UN MODO OSCURO POR `prefers-color-scheme`, Y ESTABA MAL.
 *
 * La idea era acompañar al tema si el tema tuviera modo oscuro. El problema es
 * que `prefers-color-scheme` no dice qué hace el tema: dice qué prefiere el
 * SISTEMA OPERATIVO del visitante. El tema de Voedia es claro siempre, así que
 * a cualquiera con el sistema en oscuro la biblioteca le pintaba el título en
 * `#e8e8e8` sobre el fondo blanco de «Mi cuenta».
 *
 * Medido en la página desplegada: contraste 1,23:1. El mínimo AA es 4,5:1, y el
 * v3 §5.2 lo exige. Los títulos eran ilegibles y no había forma de que ninguna
 * comprobación automática lo notara, porque el texto estaba ahí y en su sitio.
 *
 * No se sustituye por otra condición: el día que el tema tenga modo oscuro, lo
 * anunciará con una clase o un atributo en la raíz, y ESO es lo que habrá que
 * mirar — no la preferencia del sistema. */

.voedia-bib-titulo {
	margin: 0 0 1rem;
	font-family: var( --vb-sans );
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var( --vb-texto );
}

/* --- Rejilla --------------------------------------------------------- */

.voedia-bib-rejilla {
	display: grid;
	/* Se adapta sola al ancho disponible: la biblioteca vive dentro de la
	   columna de «Mi cuenta», que es estrecha, y también a página completa. */
	grid-template-columns: repeat( auto-fill, minmax( 9.5rem, 1fr ) );
	gap: 1.75rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.voedia-bib-item { margin: 0; }

.voedia-bib-enlace {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
}

/* --- Portada --------------------------------------------------------- */

.voedia-bib-marco {
	position: relative;
	display: block;
	/* Proporción de libro. Se fija para que la rejilla no baile cuando las
	   portadas vienen con tamaños distintos, que es lo normal. */
	aspect-ratio: 2 / 3;
	border-radius: 0.35rem;
	overflow: hidden;
	background: var( --vb-fondo-hueco );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.12 ), 0 6px 16px rgba( 0, 0, 0, 0.10 );
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.voedia-bib-enlace:hover .voedia-bib-marco,
.voedia-bib-enlace:focus-visible .voedia-bib-marco {
	transform: translateY( -3px );
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.14 ), 0 14px 28px rgba( 0, 0, 0, 0.16 );
}

/* `.voedia-bib-portada` es ahora el marco compartido (`portada.css`), que ya
   trae la proporción y el `object-fit: contain`. Aquí solo se le quita el
   redondeo propio: quien recorta es `.voedia-bib-marco`, que lo envuelve. */
.voedia-bib-portada {
	width: 100%;
	border-radius: 0;
}

/* Sin portada no se deja un hueco gris: se compone una con el título. Un
   catálogo a medio ilustrar no debe parecer roto. */
.voedia-bib-sinportada {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	box-sizing: border-box;
	background: linear-gradient( 160deg, var( --vb-fondo-hueco ), rgba( 63, 151, 194, 0.22 ) );
}

.voedia-bib-sinportada span {
	font-family: var( --vb-serif );
	font-size: 0.85rem;
	line-height: 1.35;
	text-align: center;
	color: var( --vb-texto );
	/* Un título largo no debe desbordar la cubierta inventada. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Cinta de estado sobre la portada: dice de un vistazo por dónde va cada
   libro, sin tener que leer nada. */
.voedia-bib-cinta {
	position: absolute;
	right: 0.4rem;
	bottom: 0.4rem;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.72 );
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	backdrop-filter: blur( 6px );
}

.voedia-bib-cinta--fin { background: rgba( 118, 118, 61, 0.92 ); } /* oliva de marca */

/* --- Datos ----------------------------------------------------------- */

.voedia-bib-datos {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.voedia-bib-nombre {
	font-family: var( --vb-serif );
	font-size: 0.92rem;
	line-height: 1.3;
	color: var( --vb-texto );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.voedia-bib-idioma,
.voedia-bib-motivo {
	font-size: 0.7rem;
	color: var( --vb-tenue );
}

.voedia-bib-idioma {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.voedia-bib-motivo { font-style: italic; }

.voedia-bib-barra {
	display: block;
	height: 2px;
	margin-top: 0.35rem;
	border-radius: 2px;
	background: var( --vb-borde );
	overflow: hidden;
}

.voedia-bib-barra-relleno {
	display: block;
	height: 100%;
	background: var( --vb-acento );
}

.voedia-bib-accion {
	margin-top: 0.15rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --vb-acento );
}

.voedia-bib-enlace:hover .voedia-bib-accion { text-decoration: underline; }

/* --- Enlace a la biblioteca completa --------------------------------- */

.voedia-bib-mas {
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
}

.voedia-bib-mas a {
	color: var( --vb-acento );
	text-decoration: none;
	font-weight: 600;
}

.voedia-bib-mas a:hover { text-decoration: underline; }

/* --- Puerta: falta cuenta, falta libro ------------------------------- */

/* La comparten el lector y la biblioteca. Es la misma situación y contarla de
   dos formas distintas haría parecer dos productos. */
.voedia-puerta {
	max-width: 34rem;
	margin: 2.5rem auto;
	padding: 2.5rem 2rem;
	border: 1px solid var( --vm-borde );
	border-radius: var( --vm-r-tarjeta );
	background: var( --vm-blanco );
	color: var( --vm-texto );
	font-family: var( --vm-sans );
	text-align: center;
	box-shadow: var( --vm-sombra );
}

.voedia-puerta-icono { font-size: 2rem; line-height: 1; }

.voedia-puerta h2 {
	margin: 0.75rem 0 0.5rem;
	font-family: var( --vm-sans );
	font-weight: 700;
	font-size: 1.45rem;
	color: var( --vm-negro );
}

.voedia-puerta-entradilla {
	margin: 0 0 1.25rem;
	font-family: var( --vm-serif );
	font-size: 0.95rem;
	line-height: 1.7;
	color: var( --vm-texto );
}

.voedia-puerta-lista {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	list-style: none;
	border-radius: 0.5rem;
	background: var( --vm-azul-tenue );
	font-size: 0.9rem;
	line-height: 1.55;
	color: var( --vm-azul-tinta );
	text-align: left;
}

.voedia-puerta-lista li { position: relative; padding-left: 1.35rem; }
.voedia-puerta-lista li + li { margin-top: 0.4rem; }

.voedia-puerta-lista li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var( --vm-azul-tinta );
}

.voedia-puerta-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 0 0 1rem;
}

.voedia-puerta-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.35rem;
	border: 1px solid transparent;
	border-radius: var( --vm-r );
	font-family: var( --vm-sans );
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
}

/* La puerta es la pantalla que aparece cuando alguien quiere leer algo que no
   ha comprado: su botón principal lleva a comprarlo. Es conversión, y por eso
   va en rosa. */
.voedia-puerta-boton--principal { background: var( --vm-rosa-cta ); color: #fff; box-shadow: 0 4px 24px rgba( 194, 86, 120, 0.38 ); }
.voedia-puerta-boton--principal:hover { background: var( --vm-rosa-osc ); color: #fff; }

.voedia-puerta-boton--secundario { border: 1.5px solid var( --vm-azul ); color: var( --vm-azul-tinta ); background: transparent; }
.voedia-puerta-boton--secundario:hover { background: var( --vm-azul-tenue ); color: var( --vm-azul-tinta ); }

.voedia-puerta-pie { margin: 0; font-size: 0.82rem; color: var( --vm-texto-tenue ); }

/* --- Sin contenido --------------------------------------------------- */

.voedia-bib-vacia {
	padding: 2rem 1.5rem;
	border: 1px solid var( --vb-borde );
	border-radius: 0.6rem;
	text-align: center;
	line-height: 1.6;
	color: var( --vb-tenue );
}

.voedia-bib-vacia p { margin: 0 0 0.75rem; }
.voedia-bib-vacia p:last-child { margin-bottom: 0; }
.voedia-bib-vacia strong { color: var( --vb-texto ); }

.voedia-bib-vacia--pendiente { border-color: var( --vb-acento ); }

.voedia-bib-boton {
	display: inline-block;
	padding: 0.65rem 1.3rem;
	border-radius: 0.4rem;
	background: var( --vb-acento );
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.voedia-bib-boton:hover { opacity: 0.9; color: #fff; }

/* --- El adelanto del escritorio de la cuenta ------------------------- */

.voedia-bib--adelanto {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var( --vb-borde );
}

/* En el escritorio se enseñan pocas y algo más pequeñas: es un adelanto, no
   la biblioteca. */
.voedia-bib--adelanto .voedia-bib-rejilla {
	grid-template-columns: repeat( auto-fill, minmax( 8rem, 1fr ) );
}

@media ( max-width: 480px ) {
	.voedia-bib-rejilla {
		grid-template-columns: repeat( auto-fill, minmax( 7.5rem, 1fr ) );
		gap: 1.25rem 0.9rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.voedia-bib-marco { transition: none; }
	.voedia-bib-enlace:hover .voedia-bib-marco { transform: none; }
}