/* Planeta Geek Flipbook — Biblioteca / Estantería
   Cada skin define un set de custom properties sobre [data-pgfb-skin="..."].
   Los lomos usan --book-accent (color propio del libro, viene de su config
   individual) tintado con la textura/paleta del skin activo. */

.pgfb-library {
	--shelf-wood: #6b4226;
	--shelf-wood-dark: #4a2c18;
	--shelf-bg: #2b1810;
	--shelf-plaque: #e8d9b5;
	--shelf-plaque-text: #3a2414;
	--spine-text: #f3e9d2;
	--library-font: Georgia, 'Times New Roman', serif;
	--toolbar-bg: rgba(0,0,0,.25);

	position: relative;
	padding: 24px;
	border-radius: 10px;
	background: var(--shelf-bg);
	font-family: var(--library-font);
	color: var(--spine-text);
	box-shadow: inset 0 0 80px rgba(0,0,0,.5);
}

/* ---------------- Toolbar / selector de skin ---------------- */

.pgfb-library-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 10px 14px;
	background: var(--toolbar-bg);
	border-radius: 8px;
}

.pgfb-library-toolbar-label {
	font-size: 13px;
	opacity: .8;
	margin-right: 4px;
}

.pgfb-skin-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pgfb-skin-btn {
	font-family: system-ui, sans-serif;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.06);
	color: inherit;
	cursor: pointer;
	transition: background .15s, transform .1s, border-color .15s;
}
.pgfb-skin-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.pgfb-skin-btn.is-active { background: var(--book-accent, #d64550); border-color: transparent; color: #fff; font-weight: 600; }

/* ---------------- Estantes ---------------- */

.pgfb-shelf-group { margin-bottom: 34px; }

.pgfb-shelf-label {
	display: inline-block;
	margin: 0 0 8px 4px;
	padding: 3px 12px;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--shelf-plaque);
	color: var(--shelf-plaque-text);
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0,0,0,.35);
}

.pgfb-shelf { position: relative; padding-bottom: 18px; }

.pgfb-shelf-row {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
	min-height: 150px;
}

.pgfb-shelf-board {
	position: absolute;
	left: -8px;
	right: -8px;
	bottom: 8px;
	height: 14px;
	background: linear-gradient(180deg, var(--shelf-wood) 0%, var(--shelf-wood-dark) 100%);
	border-radius: 2px;
	box-shadow: 0 6px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ---------------- Lomos de libro ---------------- */

.pgfb-shelf-book {
	appearance: none;
	border: none;
	cursor: pointer;
	position: relative;
	width: 40px;
	min-height: 120px;
	padding: 10px 4px;
	background: linear-gradient(180deg, var(--book-accent, #d64550) 0%, color-mix(in srgb, var(--book-accent, #d64550) 70%, black) 100%);
	border-radius: 3px 3px 2px 2px;
	box-shadow: inset 2px 0 0 rgba(255,255,255,.18), inset -2px 0 0 rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.4);
	transform: rotate(var(--book-tilt, 0deg));
	transform-origin: bottom center;
	transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
	z-index: 2;
}
.pgfb-shelf-book-h1 { min-height: 110px; }
.pgfb-shelf-book-h2 { min-height: 128px; }
.pgfb-shelf-book-h3 { min-height: 142px; }
.pgfb-shelf-book-h4 { min-height: 118px; }

.pgfb-shelf-book:hover {
	transform: rotate(0deg) translateY(-10px);
	box-shadow: inset 2px 0 0 rgba(255,255,255,.25), inset -2px 0 0 rgba(0,0,0,.25), 0 12px 18px rgba(0,0,0,.5);
	z-index: 5;
}

.pgfb-shelf-book.pgfb-pulled {
	transform: translateY(-90px) translateZ(0) rotate(0deg) scale(1.06);
	box-shadow: 0 30px 40px rgba(0,0,0,.55);
	z-index: 10;
	transition: transform .45s cubic-bezier(.22,.9,.32,1.15), box-shadow .45s;
}

.pgfb-spine-title {
	display: block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 100%;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--spine-text);
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
	margin: 0 auto;
}

/* ---------------- Modal del visor ---------------- */

.pgfb-library-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pgfb-library-modal.is-open { display: flex; }

.pgfb-library-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.75);
	backdrop-filter: blur(2px);
}

.pgfb-library-modal-panel {
	position: relative;
	width: min(920px, 100%);
	max-height: 90vh;
	background: #16110d;
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 30px 60px rgba(0,0,0,.6);
	animation: pgfb-modal-in .35s cubic-bezier(.22,.9,.32,1.15);
}
@keyframes pgfb-modal-in {
	from { opacity: 0; transform: scale(.92) translateY(20px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pgfb-library-modal-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--book-accent, #d64550);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0,0,0,.4);
}

.pgfb-library-modal-body { min-height: 300px; }
.pgfb-library-modal-body .pgfb-container { width: 100% !important; height: min(78vh, 640px) !important; }

.pgfb-library-modal-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 300px;
	font-family: system-ui, sans-serif;
	opacity: .7;
}

.pgfb-library-empty { opacity: .7; font-style: italic; }

/* =====================================================================
   SKINS
   ===================================================================== */

/* 1. Clásica — biblioteca de caoba y cuero, letras doradas */
.pgfb-library[data-pgfb-skin="clasica"] {
	--shelf-wood: #7a4a26; --shelf-wood-dark: #4e2d14;
	--shelf-bg: #241611; --shelf-plaque: #e6d3a3; --shelf-plaque-text: #3a2410;
	--spine-text: #f3e6c8; --library-font: Georgia, 'Times New Roman', serif;
	background-image: radial-gradient(ellipse at top, rgba(255,220,150,.06), transparent 60%);
}
.pgfb-library[data-pgfb-skin="clasica"] .pgfb-shelf-book { border: 1px solid rgba(201,162,39,.5); }

/* 2. Rural — madera de pino clara, mimbre, cálida */
.pgfb-library[data-pgfb-skin="rural"] {
	--shelf-wood: #b98a52; --shelf-wood-dark: #8a6339;
	--shelf-bg: #3c2f22; --shelf-plaque: #f2e2c4; --shelf-plaque-text: #4a3216;
	--spine-text: #fbf2df; --library-font: 'Trebuchet MS', sans-serif;
}
.pgfb-library[data-pgfb-skin="rural"] .pgfb-shelf-board {
	background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 4px, transparent 4px 12px), linear-gradient(180deg, var(--shelf-wood), var(--shelf-wood-dark));
}

/* 3. Urbana — hormigón, metal, acento grafiti */
.pgfb-library[data-pgfb-skin="urbana"] {
	--shelf-wood: #5a5a5a; --shelf-wood-dark: #2e2e2e;
	--shelf-bg: #1c1c1e; --shelf-plaque: #ffcc00; --shelf-plaque-text: #1c1c1e;
	--spine-text: #f2f2f2; --library-font: 'Segoe UI', system-ui, sans-serif;
	background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 26px 26px;
}
.pgfb-library[data-pgfb-skin="urbana"] .pgfb-shelf-book { border-radius: 1px; }

/* 4. Mágica — estantes flotantes, brumas encantadas */
.pgfb-library[data-pgfb-skin="magica"] {
	--shelf-wood: #3d6b52; --shelf-wood-dark: #234034;
	--shelf-bg: #10241d; --shelf-plaque: #bfe8cf; --shelf-plaque-text: #14392a;
	--spine-text: #eafff2; --library-font: 'Palatino Linden', Georgia, serif;
	background-image: radial-gradient(circle at 20% 20%, rgba(140,255,190,.08), transparent 45%), radial-gradient(circle at 80% 70%, rgba(180,140,255,.08), transparent 45%);
}
.pgfb-library[data-pgfb-skin="magica"] .pgfb-shelf-book { box-shadow: inset 0 0 12px rgba(160,255,200,.25), 0 0 14px rgba(140,255,190,.25); }

/* 5. Cyberpunk — neón, rejilla, escaneado */
.pgfb-library[data-pgfb-skin="cyberpunk"] {
	--shelf-wood: #241a3d; --shelf-wood-dark: #140d24;
	--shelf-bg: #0b0716; --shelf-plaque: #ff2bd6; --shelf-plaque-text: #0b0716;
	--spine-text: #d8f8ff; --library-font: 'Consolas', 'Courier New', monospace;
	background-image: linear-gradient(rgba(0,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,200,.05) 1px, transparent 1px);
	background-size: 22px 22px;
}
.pgfb-library[data-pgfb-skin="cyberpunk"] .pgfb-shelf-book { box-shadow: 0 0 10px var(--book-accent, #ff2bd6), inset 0 0 6px rgba(255,255,255,.2); }
.pgfb-library[data-pgfb-skin="cyberpunk"] .pgfb-shelf-board { box-shadow: 0 0 12px rgba(0,255,255,.4); }

/* 6. Mística — nebulosa astral, tonos violeta/estrellas */
.pgfb-library[data-pgfb-skin="mistica"] {
	--shelf-wood: #392a5c; --shelf-wood-dark: #201638;
	--shelf-bg: #140c26; --shelf-plaque: #cbb8ff; --shelf-plaque-text: #241645;
	--spine-text: #ece2ff; --library-font: 'Optima', Georgia, serif;
	background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(ellipse at center, rgba(140,100,255,.12), transparent 70%);
}
.pgfb-library[data-pgfb-skin="mistica"] .pgfb-shelf-book { box-shadow: 0 0 16px rgba(180,140,255,.35); }

/* 7. Bárbara — piedra y cuero, hierro forjado */
.pgfb-library[data-pgfb-skin="barbara"] {
	--shelf-wood: #5a4632; --shelf-wood-dark: #362a1c;
	--shelf-bg: #241d16; --shelf-plaque: #c9a35a; --shelf-plaque-text: #2a1c0d;
	--spine-text: #ecd9b8; --library-font: 'Copperplate', Georgia, serif;
	background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.6px);
	background-size: 6px 6px;
}
.pgfb-library[data-pgfb-skin="barbara"] .pgfb-shelf-book { border: 2px solid rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(201,163,90,.3), 0 4px 8px rgba(0,0,0,.5); }
.pgfb-library[data-pgfb-skin="barbara"] .pgfb-shelf-board { box-shadow: 0 6px 10px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.3); }

/* 8. Alejandría — arenisca, papiro, columnas antiguas */
.pgfb-library[data-pgfb-skin="alejandria"] {
	--shelf-wood: #b8945f; --shelf-wood-dark: #85683f;
	--shelf-bg: #2c2013; --shelf-plaque: #f1e2bd; --shelf-plaque-text: #4a3418;
	--spine-text: #fbf1d9; --library-font: 'Papyrus', Georgia, serif;
	background-image: linear-gradient(rgba(230,200,140,.05), transparent 60%);
}
.pgfb-library[data-pgfb-skin="alejandria"] .pgfb-shelf-book { border-radius: 1px 1px 4px 4px; }

/* ---------------- Responsive ---------------- */

@media (max-width: 600px) {
	.pgfb-library { padding: 14px; }
	.pgfb-shelf-book { width: 32px; }
	.pgfb-spine-title { font-size: 10px; }
	.pgfb-library-modal-panel { padding: 10px; }
}