/* Planeta Geek Flipbook — identidad visual "imprenta de cómic"
   Tinta + papel envejecido + tramado halftone como firma visual del toolbar.
   Todo el color variable viene de custom properties fijadas por JS por instancia. */

.pgfb-container {
	--pgfb-ink: #1b1b1f;
	--pgfb-paper: #f0e9d8;
	--pgfb-accent: #d64550;
	--pgfb-accent-2: #2a9d8f;
	--pgfb-gold: #c9a227;

	position: relative;
	overflow: hidden;
	background: var(--pgfb-ink);
	border-radius: 6px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--pgfb-paper);
	box-shadow: 0 8px 30px rgba(0,0,0,.35);
	display: flex !important;
	flex-direction: column !important;
}

.pgfb-stage-wrap {
	position: relative !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}

.pgfb-boot-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 14px;
	opacity: .7;
}

/* ---------- Toolbar: tramado halftone como firma ---------- */
.pgfb-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background-color: var(--pgfb-ink);
	background-image: radial-gradient(rgba(240,233,216,.14) 1px, transparent 1.4px);
	background-size: 7px 7px;
	border-bottom: 2px solid var(--pgfb-accent);
	flex-wrap: wrap;
	z-index: 5;
}

.pgfb-toolbar .pgfb-spacer { flex: 1 1 auto; }

.pgfb-btn {
	background: rgba(240,233,216,.08);
	border: 1px solid rgba(240,233,216,.25);
	color: var(--pgfb-paper);
	border-radius: 4px;
	padding: 6px 9px;
	font-size: 13px;
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: background .15s, border-color .15s, transform .1s;
}
.pgfb-btn:hover { background: rgba(240,233,216,.18); border-color: var(--pgfb-accent); }
.pgfb-btn:active { transform: scale(.94); }
.pgfb-btn.pgfb-active { background: var(--pgfb-accent); border-color: var(--pgfb-accent); color: #fff; }
.pgfb-btn.pgfb-active.pgfb-manga-active { background: var(--pgfb-accent-2); border-color: var(--pgfb-accent-2); }

.pgfb-page-indicator {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: .04em;
	font-size: 13px;
	padding: 0 6px;
	white-space: nowrap;
}

.pgfb-container input.pgfb-page-jump[type="text"],
.pgfb-container input.pgfb-page-jump[type="number"],
.pgfb-page-jump {
	width: 52px !important;
	max-width: 52px !important;
	height: 28px !important;
	min-height: 0 !important;
	text-align: center !important;
	background: rgba(0,0,0,.25) !important;
	border: 1px solid rgba(240,233,216,.25) !important;
	color: var(--pgfb-paper) !important;
	border-radius: 4px !important;
	padding: 5px 4px !important;
	font-size: 13px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	line-height: normal !important;
	font-family: inherit !important;
}

/* ---------- Zoom ---------- */
.pgfb-zoom-indicator {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	padding: 0 6px;
	min-width: 42px;
	text-align: center;
	opacity: .8;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.pgfb-zoom-indicator:hover { opacity: 1; color: var(--pgfb-accent); }

.pgfb-btn:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* La página ampliada se puede desplazar con scroll nativo (rueda, gesto táctil)
   o arrastrando con el ratón (ver JS). */
.pgfb-stage-wrap.pgfb-zoomed {
	overflow: auto !important;
	cursor: grab;
}
.pgfb-stage-wrap.pgfb-zoomed:active { cursor: grabbing; }

/* Las zonas de navegación lateral molestarían al arrastrar/hacer scroll con zoom activo. */
.pgfb-stage-wrap.pgfb-zoomed .pgfb-nav-zone { pointer-events: none; }

/* ---------- Stage ---------- */
.pgfb-stage {
	position: relative !important;
	flex: 1 1 auto !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background:
		radial-gradient(ellipse at center, rgba(255,255,255,.04), transparent 70%),
		var(--pgfb-ink);
	perspective: 2400px !important;
	touch-action: pan-y;
	min-height: 0 !important;
	width: 100% !important;
	transition: transform .15s ease;
}

.pgfb-stage-wrap.pgfb-zoomed .pgfb-stage {
	overflow: visible !important;
}

.pgfb-stage.pgfb-mode-embed,
.pgfb-stage.pgfb-mode-webtoon {
	display: block;
	overflow-y: auto;
	perspective: none;
}

/* ---------- 3D book mode ---------- */
.pgfb-book {
	position: relative !important;
	display: flex !important;
	transform-style: preserve-3d !important;
	height: 100% !important;
}

.pgfb-spread {
	position: relative !important;
	display: flex !important;
	box-shadow: 0 20px 45px rgba(0,0,0,.5);
	height: 100% !important;
}

/* Sombra del lomo del libro, solo visible en modo spread (dos páginas) */
.pgfb-spine-shadow {
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 46px;
	margin-left: -23px;
	pointer-events: none;
	z-index: 500;
	background: linear-gradient(90deg,
		transparent, rgba(0,0,0,.32) 44%, rgba(0,0,0,.48) 50%, rgba(0,0,0,.32) 56%, transparent);
}

.pgfb-leaf {
	transform-style: preserve-3d !important;
	transform-origin: left center !important;
	transition: transform .7s cubic-bezier(.45,.05,.55,.95);
	background: var(--pgfb-paper);
	height: 100% !important;
}
.pgfb-leaf.pgfb-leaf-right-origin { transform-origin: right center !important; }
.pgfb-leaf.pgfb-flipped { transform: rotateY(-180deg) !important; }
.pgfb-leaf.pgfb-flipped.pgfb-leaf-right-origin { transform: rotateY(180deg) !important; }

.pgfb-leaf-face {
	position: absolute !important;
	inset: 0 !important;
	backface-visibility: hidden !important;
	overflow: hidden !important;
	background: var(--pgfb-paper);
	width: 100% !important;
	height: 100% !important;
}
.pgfb-leaf-face img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; max-width: none !important; max-height: none !important; }
.pgfb-leaf-face.pgfb-face-back { transform: rotateY(180deg) !important; }

.pgfb-leaf-face::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 12%, transparent 88%, rgba(0,0,0,.18));
	pointer-events: none;
}

.pgfb-page-corner {
	position: absolute;
	bottom: 0;
	width: 34px;
	height: 34px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s;
	background: linear-gradient(135deg, transparent 50%, rgba(214,69,80,.55) 50%);
}
.pgfb-leaf:hover .pgfb-page-corner { opacity: .9; }
.pgfb-page-corner.pgfb-corner-right { right: 0; }
.pgfb-page-corner.pgfb-corner-left { left: 0; transform: scaleX(-1); }

/* ---------- 2D / slider flat modes ---------- */
.pgfb-flat {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.pgfb-flat img {
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	background: var(--pgfb-paper);
	box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

.pgfb-slider-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform .45s ease;
}
.pgfb-slider-track .pgfb-slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

/* ---------- Embed / manga webtoon (scroll continuo) ---------- */
.pgfb-stage.pgfb-mode-embed .pgfb-flat,
.pgfb-stage.pgfb-mode-webtoon .pgfb-flat {
	display: block;
	height: auto;
}
.pgfb-webtoon-page,
.pgfb-embed-page {
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 0 auto 4px;
}

/* ---------- Manga RTL ---------- */
.pgfb-container[dir="rtl-manga"] .pgfb-toolbar { flex-direction: row-reverse; }

/* ---------- Navegación lateral (click zones) ---------- */
.pgfb-nav-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
	cursor: pointer;
	z-index: 3;
}
.pgfb-nav-zone.pgfb-nav-left { left: 0; }
.pgfb-nav-zone.pgfb-nav-right { right: 0; }

/* ---------- Miniaturas ---------- */
.pgfb-thumbnails {
	display: flex;
	gap: 6px;
	padding: 8px;
	overflow-x: auto;
	background: rgba(0,0,0,.35);
	border-top: 1px solid rgba(240,233,216,.15);
}
.pgfb-thumbnails img {
	height: 64px;
	border-radius: 3px;
	cursor: pointer;
	opacity: .55;
	border: 2px solid transparent;
	transition: opacity .15s, border-color .15s;
}
.pgfb-thumbnails img:hover { opacity: .85; }
.pgfb-thumbnails img.pgfb-thumb-active { opacity: 1; border-color: var(--pgfb-accent); }

/* ---------- Panel TOC ---------- */
.pgfb-toc-panel {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 240px;
	background: rgba(20,20,24,.97);
	transform: translateX(-100%);
	transition: transform .25s ease;
	z-index: 6;
	overflow-y: auto;
	padding: 12px;
	border-right: 2px solid var(--pgfb-accent);
}
.pgfb-toc-panel.pgfb-open { transform: translateX(0); }
.pgfb-toc-panel ul { list-style: none; margin: 0; padding: 0; }
.pgfb-toc-panel li { padding: 6px 4px; border-bottom: 1px solid rgba(240,233,216,.08); cursor: pointer; font-size: 13px; }
.pgfb-toc-panel li:hover { color: var(--pgfb-accent); }

/* ---------- Fullscreen ---------- */
.pgfb-container:fullscreen { border-radius: 0; }
.pgfb-container:fullscreen .pgfb-stage { max-height: none; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.pgfb-page-indicator { display: none; }
	.pgfb-toc-panel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pgfb-leaf, .pgfb-slider-track, .pgfb-stage { transition: none !important; }
}