/* Biblioteca · base: tarjetas, rejillas, estanterías, aviso legal y ancho de página. Orden de carga: base → home → ficha. */
/* tarjetas */
.bk-shelves { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: none; margin: 1.25rem auto 0; }
.bk-shelf {
    display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.25rem 1rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--c, var(--color-teal));
    border-radius: var(--radius); text-decoration: none; color: var(--color-text); transition: transform .15s ease;
}
.bk-shelf:hover { transform: translateY(-3px); }
.bk-shelf-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--color-accent-warm); }
.bk-shelf-text { margin: 0 0 .5rem; font-size: .92rem; }
.bk-soon { display: inline-block; margin-top: .25rem; padding: .1rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--color-gold-tint); color: var(--color-gold-text); }

.bk-disclosure { max-width: 70ch; margin: 1.5rem auto 0; padding: .9rem 1.1rem; font-size: .88rem; text-align: left;
    background: var(--color-quote-bg); color: var(--color-quote-text); border-left: 4px solid var(--color-gold); border-radius: 8px; }

.bk-draft { text-align: center; font-size: .8rem; padding: .3rem; background: var(--color-gold-tint); color: var(--color-gold-text); }
:root[data-theme="dark"] .bk-shelf { background: #14262a; color: #e6e6e6; border-color: #2a4a50; }
:root[data-theme="dark"] .bk-disclosure { background: #1b2a2d; color: #cfd8da; }
:root[data-theme="dark"] .bk-shelf-title { color: #ffb37a; }

/* Tarjetas altas (formato libro, 2:3) */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; max-width: none; margin: 1rem auto 0; }
.bk-card { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: var(--color-text); transition: transform .15s ease; }
.bk-card:hover { transform: translateY(-4px); }
.bk-card-cover { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px 12px 12px 6px; border: 1px solid var(--color-border);
    box-shadow: 4px 6px 14px rgba(0,0,0,.18), inset 6px 0 6px -6px rgba(0,0,0,.35); background: var(--color-surface); }
.bk-card-cover img, .bk-book-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.bk-cover-ph { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; height: 100%; padding: 1rem; text-align: center; color: #fff;
    background: linear-gradient(160deg, var(--c), #0006), var(--c); }
.bk-cover-ph b { font: 700 1.2rem var(--font-heading); }
.bk-card-title { font: 700 1.05rem/1.2 var(--font-heading); color: var(--color-accent-warm); text-align: center; min-height: 2.4em; }   /* reserva 2 líneas: meta y sinopsis quedan alineadas entre tarjetas */
.bk-card-meta { font-size: .82rem; text-align: center; opacity: .85; }
.bk-card-blurb { font-size: .82rem; line-height: 1.35; text-align: center; opacity: .8; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Bloque de estantería y listados */
.bk-shelf-block { margin: 2rem auto 0; max-width: none; padding-top: .5rem; border-top: 3px solid var(--c); }
.bk-shelf-block .bk-soon { margin-bottom: .75rem; }
.bk-shelf-h { margin: .5rem 0 .25rem; font-size: 1.5rem; }
.bk-shelf-h a { color: inherit; text-decoration: none; }
.bk-shelf-h a:hover { text-decoration: underline; }
.bk-crumbs { font-size: .88rem; margin-bottom: 1rem; }
.bk-empty { font-style: italic; opacity: .7; }
.bk-count { font-size: .9rem; opacity: .8; }
.bk-seealso { columns: 2; padding-left: 1.2rem; }

/* Ancho ampliado aplicado a todas las páginas de la biblioteca (home, listados, edades, 404).
   Se redefine --max-width solo dentro de <main> (la cabecera de la web no cambia) y se igualan los márgenes laterales. */
.main-hx { --max-width: 1240px; }
.main-hx > .content-card { margin-left: .5rem; margin-right: .5rem; }
@media (min-width: 641px) { .main-hx > .content-card { margin-left: auto; margin-right: auto; width: calc(100% - 2rem); } }