/* kbrio Lightbox 1.0.0 */

.kblb-trigger { cursor: zoom-in; }
img.kblb-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

html.kblb-lock { overflow: hidden; }
html.kblb-lock body { padding-right: var(--kblb-sbw, 0); }

.kblb {
	--kblb-bg: rgba(14, 15, 17, .94);
	--kblb-fg: #f2f2f0;
	--kblb-muted: rgba(242, 242, 240, .62);
	--kblb-btn: rgba(255, 255, 255, .1);
	--kblb-btn-hover: rgba(255, 255, 255, .2);
	--kblb-accent: #fff;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	background: var(--kblb-bg);
	color: var(--kblb-fg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	opacity: 0;
	transition: opacity .2s ease;
	-webkit-tap-highlight-color: transparent;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.kblb[hidden] { display: none; }
.kblb.is-open { opacity: 1; }

/* Botones (reset fuerte para que el tema no los altere) */
.kblb .kblb__btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kblb-btn);
	color: var(--kblb-fg);
	box-shadow: none;
	text-shadow: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, opacity .15s ease;
}
.kblb .kblb__btn:hover { background: var(--kblb-btn-hover); }
.kblb .kblb__btn:focus-visible { outline: 2px solid var(--kblb-accent); outline-offset: 2px; }
.kblb .kblb__btn:disabled { opacity: .25; cursor: default; }
.kblb svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Barra superior */
.kblb__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px 6px 18px;
}
.kblb__counter { color: var(--kblb-muted); font-variant-numeric: tabular-nums; }
.kblb__actions { display: flex; gap: 8px; }

/* Escenario e imagen */
.kblb__stage { position: relative; min-height: 0; touch-action: pan-y; }
.kblb__frame { position: absolute; inset: 6px 76px; }
.kblb__img {
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	opacity: 0;
	transform: scale(.985);
	transition: opacity .25s ease, transform .25s ease;
	user-select: none;
	-webkit-user-drag: none;
}
.kblb__img.is-ready { opacity: 1; transform: none; }

.kblb .kblb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
}
.kblb__prev { left: 14px; }
.kblb__next { right: 14px; }

.kblb__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid rgba(255, 255, 255, .2);
	border-top-color: var(--kblb-fg);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease .15s;
	animation: kblb-spin .8s linear infinite;
}
.kblb.is-loading .kblb__spinner { opacity: 1; }
@keyframes kblb-spin { to { transform: rotate(360deg); } }

/* Pie de foto */
.kblb .kblb__caption {
	margin: 0 auto;
	padding: 10px 20px 4px;
	max-width: 70ch;
	text-align: center;
	color: var(--kblb-fg);
}
.kblb .kblb__caption[hidden] { display: none; }

/* Tira de miniaturas */
.kblb__thumbs {
	display: none;
	gap: 6px;
	overflow-x: auto;
	padding: 10px 16px 14px;
	margin: 0 2px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.kblb--has-thumbs .kblb__thumbs { display: flex; }
.kblb--has-thumbs .kblb__thumbs::before,
.kblb--has-thumbs .kblb__thumbs::after { content: ""; margin: auto; } /* centra si caben */
.kblb .kblb__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	opacity: .45;
	cursor: pointer;
	box-shadow: none;
	transition: opacity .15s ease;
}
.kblb .kblb__thumb:hover { opacity: .8; }
.kblb .kblb__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--kblb-accent); }
.kblb .kblb__thumb:focus-visible { outline: 2px solid var(--kblb-accent); outline-offset: 2px; }
.kblb .kblb__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Una sola imagen: sin navegación */
.kblb--single .kblb__nav,
.kblb--single .kblb__play { display: none; }

/* Móvil */
@media (max-width: 640px) {
	.kblb__frame { inset: 4px 0; }
	.kblb .kblb__nav { width: 40px; height: 40px; background: rgba(0, 0, 0, .35); }
	.kblb__prev { left: 6px; }
	.kblb__next { right: 6px; }
	.kblb .kblb__thumb { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
	.kblb, .kblb__img, .kblb .kblb__btn, .kblb .kblb__thumb { transition: none; }
	.kblb__img { transform: none; }
}