/* Database: lo que no trae el tema BlogX del blog (bootstrap.min.css y style.css se cargan del propio blog). */
:root {
	--db-bg: #121212;
	--db-card: #343a40;
	--db-card-2: #2b3035;
	--db-line: #454d55;
	--db-text: #f1f1f1;
	--db-muted: #adb5bd;
	--db-orange: #ff8500;
	--db-purple: #cb4dff;
}

body { color: var(--db-text); }
[x-cloak] { display: none !important; }
section { padding: 0; } /* BlogX le pone 150px arriba y abajo */

a { color: var(--db-purple); }
a:hover { color: #dd8bff; }

h1.title { font-size: 2.1rem; }
h2.section-title {
	font-size: 1.5rem;
	color: var(--db-orange);
	margin: 0;
}
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.5rem 0 1rem;
}
.section-head a { font-size: .9rem; white-space: nowrap; }

.db-panel {
	background: var(--db-card);
	color: var(--db-text);
	border-radius: .25rem;
	padding: 20px;
}
.db-muted { color: var(--db-muted) !important; }
.db-accent { color: var(--db-purple) !important; }

/* Navbar: el enlace activo, como un subrayado naranja */
.navbar .nav-link.active { color: #fff; box-shadow: inset 0 -2px 0 var(--db-orange); }
/* Redes: siempre el icono, también en el móvil (el tema lo cambia por texto por debajo de 576 px) */
.navbar .navbar-nav { align-items: center; }
.navbar img.nav-svg-icon { display: block; padding-bottom: 0; }

/* Buscador */
.db-search .form-control,
.db-filters .form-control,
.db-filters .custom-select {
	background-color: var(--db-card-2);
	border-color: var(--db-line);
	color: var(--db-text);
}
.db-search .form-control::placeholder { color: var(--db-muted); }
.db-search .form-control:focus,
.db-filters .form-control:focus,
.db-filters .custom-select:focus {
	background-color: var(--db-card-2);
	color: var(--db-text);
	border-color: var(--db-purple);
	box-shadow: 0 0 0 .2rem rgba(203, 77, 255, .25);
}
.btn-bunny {
	background: var(--db-orange);
	border-color: var(--db-orange);
	color: #121212;
	font-weight: 600;
}
.btn-bunny:hover, .btn-bunny:focus { background: #ff9a2e; border-color: #ff9a2e; color: #121212; }
.btn-outline-bunny {
	border-color: var(--db-purple);
	color: var(--db-purple);
}
.btn-outline-bunny:hover { background: var(--db-purple); color: #121212; }
.db-filters label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--db-muted); margin-bottom: .2rem; }

/* Tarjetas de figura */
.fig-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--db-card);
	border-radius: .25rem;
	overflow: hidden;
	color: var(--db-text);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fig-card:hover {
	color: var(--db-text);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.fig-thumb {
	aspect-ratio: 3 / 4;
	background: var(--db-card-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.fig-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fig-thumb .bi { font-size: 2.5rem; color: var(--db-line); margin: 0 !important; }
.fig-body { padding: .75rem .85rem .9rem; display: flex; flex-direction: column; flex: 1; }
.fig-title {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 .4rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fig-meta { font-size: .8rem; color: var(--db-muted); margin: 0; }
.fig-date { font-size: .8rem; color: var(--db-purple); margin: auto 0 0; padding-top: .4rem; }

/* Chips de personajes y fabricantes */
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	padding: .3rem .75rem;
	border-radius: 2rem;
	background: var(--db-card);
	color: var(--db-text);
	font-size: .85rem;
}
.chip:hover { background: #3f464d; color: #fff; text-decoration: none; }
.chip small { color: var(--db-muted); }
.chip-active { background: var(--db-purple); color: #121212; }
.chip-active:hover { background: #dd8bff; color: #121212; }
.chip-active small { color: #121212; }

/* Ficha */
.fig-hero {
	background: var(--db-card-2);
	border-radius: .25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	cursor: zoom-in;
}
.fig-hero img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fig-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .5rem; margin-top: .75rem; }
.fig-thumbs button {
	padding: 0;
	border: 2px solid transparent;
	border-radius: .2rem;
	background: var(--db-card-2);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.fig-thumbs button { cursor: zoom-in; }
.fig-thumbs button:hover { border-color: var(--db-orange); }
.fig-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.specs { margin: 0; }
.specs div { display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--db-line); }
.specs div:last-child { border-bottom: 0; }
.specs dt { width: 8.5rem; flex-shrink: 0; font-weight: normal; color: var(--db-muted); }
.specs dd { margin: 0; }

.shop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--db-line);
}
.shop:last-child { border-bottom: 0; }
.shop-name { font-weight: 600; flex: 1 1 10rem; }
.shop-name small { display: block; font-weight: normal; color: var(--db-muted); }
.shop-price { font-weight: 600; color: var(--db-orange); min-width: 5.5rem; text-align: right; }
.shop-price small { display: block; font-weight: normal; color: var(--db-muted); }
.db-currency { background-color: var(--db-card-2); border-color: var(--db-line); color: var(--db-text); }
.badge-status { font-weight: 500; padding: .35em .6em; background: var(--db-line); color: var(--db-text); }
.badge-status.in_stock { background: #2f9e44; color: #fff; }
.badge-status.preorder { background: var(--db-purple); color: #121212; }
.badge-status.backorder { background: #e8a33d; color: #121212; }

/* Visor de fotos */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1050;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox button {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2.2rem;
	line-height: 1;
	padding: 1rem;
	opacity: .8;
}
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: 0; right: 0; font-size: 3rem; }   /* bi-x es más fina que las flechas */
.lightbox .lb-prev { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 0; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: var(--db-muted); }

/* Paginación oscura */
.pagination .page-link { background: var(--db-card); border-color: var(--db-line); color: var(--db-text); }
.pagination .page-item.active .page-link { background: var(--db-orange); border-color: var(--db-orange); color: #121212; }
.pagination .page-item.disabled .page-link { background: var(--db-card-2); border-color: var(--db-line); color: var(--db-muted); }

/* Esqueletos mientras carga */
.skeleton { background: linear-gradient(90deg, #2b3035 25%, #343a40 50%, #2b3035 75%); background-size: 200% 100%;
	animation: skeleton 1.2s infinite; border-radius: .25rem; }
@keyframes skeleton { to { background-position: -200% 0; } }

@media (max-width: 575.98px) {
	.navbar-brand img { height: 64px !important; }
	body { padding-top: 84px; }
	h1.title { font-size: 1.6rem; }
	.specs dt { width: 6.5rem; }
	/* tiendas: el nombre a la izquierda; estado, precio y botón apilados a la derecha */
	.shop { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .4rem; align-items: start; }
	.shop-name { grid-column: 1; grid-row: 1 / span 3; }
	.shop .badge-status, .shop .btn { grid-column: 2; justify-self: end; }
	.shop-price { grid-column: 2; min-width: 0; }
}