/* Anulación de box-sizing global solo dentro de la tabla holográfica
   (Bootstrap aplica * { box-sizing:border-box } en su reboot; aquí volvemos a content-box
   para permitir un glow y expansión más natural en efectos de hover). */
.colecciones-table,
.colecciones-table *,
.colecciones-table *::before,
.colecciones-table *::after {
	box-sizing: content-box;
}

/* Reducir padding superior en página colecciones para aprovechar header fijo */
body.colecciones-page .container.py-4 {
	padding-top: 2.5rem !important;
	margin-top: 1rem;
}

/* En pantallas de escritorio, aplicar espacio superior específico para /colecciones */
@media (min-width: 721px) {
	#colecciones-module {
		margin-top: 2rem; /* espacio solicitado en desktop */
	}
}

/* === Estilos para el banner del módulo === PREMIUM GLASS-MORPHISM VERSION === */

/* Contenedor del banner */
.colecciones-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Estandarte / bandera - GLASS-MORPHISM PREMIUM */
.colecciones-flag {
    /* Placa energética: más oscura, menos blur, marco celeste contenido */
    background: linear-gradient(135deg, rgba(4, 8, 16, 0.92), rgba(8, 4, 24, 0.92));
    backdrop-filter: blur(4px) saturate(125%);
    -webkit-backdrop-filter: blur(4px) saturate(125%);
    border: 1.5px solid rgba(0, 224, 255, 0.60);
    border-radius: 16px;
    padding: 1.5rem 2.5rem;
    position: relative;
    display: inline-block;
    /* Glow celeste + toque dorado */
    box-shadow: 
        0 0 18px rgba(0, 224, 255, 0.22), 
        0 0 6px rgba(214,178,106,0.12), /* dorado sutil */
        inset 0 0 12px rgba(0, 224, 255, 0.04), 
        inset 0 -6px 14px rgba(0,0,0,0.18);
    animation: colecciones-flag-glow 3s ease-in-out infinite;
    transition: all 0.25s ease;
}

/* Línea superior sutil con gradiente premium */
.colecciones-flag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 224, 255, 0.15) 25%, rgba(0, 224, 255, 0.20) 50%, rgba(0, 224, 255, 0.15) 75%, transparent 100%);
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

/* Efecto hover: glow dinámico y elevación */
.colecciones-flag:hover {
    box-shadow: 
        0 0 32px rgba(0, 224, 255, 0.45),
        0 0 12px rgba(214,178,106,0.18), /* dorado hover */
        inset 0 0 24px rgba(0, 224, 255, 0.08);
    transform: translateY(-3px);
    border-color: rgba(0, 224, 255, 0.60);
}

/* Animación de glow refinada */
@keyframes colecciones-flag-glow {
    0% {
        box-shadow: 0 0 20px rgba(0, 224, 255, 0.25), inset 0 0 15px rgba(0, 224, 255, 0.03);
    }
    50% {
        box-shadow: 0 0 28px rgba(0, 224, 255, 0.35), inset 0 0 20px rgba(0, 224, 255, 0.06);
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 224, 255, 0.25), inset 0 0 15px rgba(0, 224, 255, 0.03);
    }
}

/* Título principal - IMPACTANTE Y PREMIUM */
.colecciones-title {
    font-size: 2.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    transition: text-shadow 0.3s ease;
    color: #d6b26a; /* dorado principal */
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.72),
        0 0 6px rgba(214, 178, 106, 0.48), /* dorado suave */
        0 0 12px rgba(0, 224, 255, 0.34), /* azul */
        0 0 24px rgba(214, 178, 106, 0.18); /* dorado tenue */
}

/* Hover: título con glow dorado + azul */
.colecciones-flag:hover .colecciones-title {
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.72),
        0 0 8px rgba(214, 178, 106, 0.70), /* dorado intenso cerca del texto */
        0 0 14px rgba(0, 224, 255, 0.70), /* azul como halo intermedio */
        0 0 28px rgba(214, 178, 106, 0.28); /* lavado dorado exterior */
}

/* Subtítulo dentro de .colecciones-flag */
.colecciones-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: #a0e8ff; /* azul claro */
    letter-spacing: 0.02em;
    margin-top: 2rem;
    margin-bottom: 0;
    transition: all 0.3s ease;
    text-shadow: 0 1px 1px rgba(0,0,0,0.50), 0 0 4px rgba(0, 224, 255, 0.30);
    opacity: 0.92;
}

/* Buscador sobre la tabla a la izquierda */
.colecciones-search {
    display: flex;
    justify-content: flex-start; /* alineado a la izquierda */
    margin-bottom: 1rem; /* separa de la tabla */
}

.colecciones-search input {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.colecciones-search input::placeholder {
    color: #999999 !important;
    opacity: 1;
}

.colecciones-table tbody tr:hover {
	background: rgba(0, 200, 255, 0.02) !important;
	box-shadow: inset 0 0 10px rgba(0, 200, 255, 0.12);
	transform: scale(1.005);
	transition: 0.25s ease;
}
.table > :not(caption) > * > * {
	background-color: transparent !important;
}
/* --- ELIMINAR CUALQUIER FONDO DE FILAS ALTERNADAS O STRIPED --- */
.colecciones-table.table-striped tbody tr:nth-of-type(odd),
.colecciones-table.table-striped tbody tr:nth-of-type(even),
.colecciones-table tbody tr:nth-of-type(odd),
.colecciones-table tbody tr:nth-of-type(even),
.colecciones-table tbody tr:nth-child(odd),
.colecciones-table tbody tr:nth-child(even),
.colecciones-table.table-dark tbody tr:nth-child(odd),
.colecciones-table.table-dark tbody tr:nth-child(even) {
	background: transparent !important;
	background-color: transparent !important;
}
/* Base transparente para todas las filas */
.colecciones-table tbody tr,
.colecciones-table tbody tr td {
	background: none !important;
	background-color: transparent !important;
}
/* Hover holográfico (reforzado) */
.colecciones-table tbody tr:hover {
	background: rgba(0, 200, 255, 0.05) !important;
	box-shadow: inset 0 0 20px rgba(0, 200, 255, 0.25);
	transform: scale(1.01);
	transition: 0.25s ease;
}
/* Parche final anti-Bootstrap (reforzado) */
.table > :not(caption) > * > * {
	background-color: transparent !important;
}
/* === Bloque final transparencia total solicitado === */
tbody,
tbody tr,
tbody tr td {
	background: transparent !important;
	background-color: transparent !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-accent-bg: transparent !important;
	background: transparent !important;
}
.table-striped > tbody > tr:nth-of-type(even) > * {
	background: transparent !important;
}
table tbody tr:hover td {
	background: rgba(0, 255, 255, 0.02) !important;
	backdrop-filter: blur(4px);
}
.table-responsive {
	overflow-x: visible !important;
}
table { width: 100%; table-layout: auto; }
/* Sobrescribir variables de table-dark */
.colecciones-table.table-dark {
	--bs-table-bg: transparent !important;
	--bs-table-striped-bg: transparent !important;
	--bs-table-hover-bg: rgba(0, 255, 255, 0.05) !important;
	--bs-table-border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Forzar tbody y filas totalmente transparentes */
.colecciones-table.table-dark tbody,
.colecciones-table.table-dark tbody tr,
.colecciones-table.table-dark tbody tr td {
	background: transparent !important;
	background-color: transparent !important;
}
/* Hover holográfico */
.colecciones-table.table-dark tbody tr:hover td {
	background: rgba(0, 200, 255, 0.02) !important;
	box-shadow: inset 0 0 10px rgba(0, 200, 255, 0.12);
	/* transform: scale(1.01); */
	transition: 0.25s ease;
}
/* Eliminar scroll horizontal */
.table-responsive { overflow-x: visible !important; }
.colecciones-table { width:100%; table-layout:auto; }
.floating-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:20px; }
@keyframes floatAnim { 0% { transform:translateY(0); } 50% { transform:translateY(-6px); } 100% { transform:translateY(0); } }
#collectorTable th, #collectorTable td { vertical-align:middle; }
#collectorTable tbody tr { transition:background .15s; }
#collectorTable tbody tr:hover { background:rgba(255,255,255,0.02); }
.pagination-btn { cursor:pointer; padding:4px 10px; border:1px solid rgba(255,255,255,0.15); margin:0 4px; border-radius:4px; font-size:.8rem; }
.pagination-btn.active { background:#3b82f6; border-color:#3b82f6; color:#fff; }
#searchUser { background:#fff; color:#000; }
#searchUser::placeholder { color:#333; }

/* Legibilidad reforzada del buscador Colecciones */
#searchUser {
	background-color: #ffffff !important; /* fondo blanco */
	color: #000000 !important;            /* texto negro */
}

#searchUser::placeholder {
    color: #999999 !important;            /* placeholder gris */
    opacity: 1 !important;
}

/* Espaciado entre rarezas en columna Objetos */
.item-rare {
    display: inline-block;
    margin-right:30px; /* espacio entre rarezas */
}

/* Estilo para mensaje de no exhibir */
.colecciones-table td .no-showcase-text {
    color: #00d8ff !important;
    font-weight: 500;
}

/* Columna Coleccionista más angosta */
.colecciones-table th.coleccionista,
.colecciones-table td.coleccionista {
    width: 180px;
    min-width: 180px;
}

/* Columna Objetos pegada a Coleccionista */
.colecciones-table th.objetos,
.colecciones-table td.objetos {
    width: auto;
    white-space: nowrap;
    padding-left: 12px; /* pequeño padding para separación visual */
}

/* Estilo para mensaje de sin items */
.colecciones-table td.no-items {
    color: #00d8ff !important;
    font-weight: 500;
}


/* === Tabla Colecciones Estilos Futuristas === */
.table-container {
	/* Contenedor más opaco y nitido: mantener glass, priorizar legibilidad */
	background: rgba(2, 12, 20, 0.44);
	backdrop-filter: blur(6px) saturate(135%);
	-webkit-backdrop-filter: blur(6px) saturate(135%);
	padding: 20px;
	border-radius: 14px;
	border: 1px solid rgba(0, 200, 255, 0.30);
	box-shadow: 0 0 22px rgba(0, 160, 255, 0.10), inset 0 0 14px rgba(0, 200, 255, 0.05);
}

.colecciones-table { width:100%; border-collapse:collapse; color:#d5f9ff; font-size:0.95rem; backdrop-filter:blur(6px); }
.colecciones-table thead th { padding:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#8eeaff; border-bottom:2px solid rgba(0,200,255,0.35); background:transparent !important; position:relative; }
.colecciones-table thead th::after { content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(0,255,255,0.08), rgba(0,150,255,0.03), rgba(0,255,255,0.08)); opacity:0.2; pointer-events:none; }
.colecciones-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.06); transition:.25s ease; background:rgba(0,50,80,0.03); }
.colecciones-table tbody tr:hover { background:rgba(0,200,255,0.03); box-shadow:inset 0 0 10px rgba(0,200,255,0.12); transform:scale(1.005); }
.colecciones-table tbody td { padding:10px 12px; }
.select-user-btn { 
	padding: 8px 18px;
	border: none;
	background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
	color: #ffffff;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(106,17,203,0.35), 0 2px 6px rgba(0,0,0,0.25);
	transition: all .3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.select-user-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.5s ease;
}
.select-user-btn:hover::before {
	left: 100%;
}
.select-user-btn:hover { 
	background: linear-gradient(135deg, #7c1fd4 0%, #3a88ff 100%);
	box-shadow: 0 6px 18px rgba(106,17,203,0.55), 0 3px 10px rgba(37,117,252,0.35);
	transform: translateY(-2px);
}

/* === Overrides: Filas totalmente transparentes === */
.colecciones-table tbody tr {
	background:none !important;
	background-color:transparent !important;
	border-bottom:1px solid rgba(255,255,255,0.06);
	transition:0.25s ease;
}
.colecciones-table tbody tr:hover {
	background:rgba(0,200,255,0.02) !important;
	box-shadow:inset 0 0 10px rgba(0,200,255,0.12);
	transform:scale(1.005);
}

/* Fuerza el tbody a ser completamente transparente */
.colecciones-table tbody {
	background: transparent !important;
	background-color: transparent !important;
}

/* Forzar celdas del tbody sin fondo */
.colecciones-table tbody tr td {
	background: none !important;
	background-color: transparent !important;
}

/* Fila normal transparente */
.colecciones-table tbody tr {
	background: none !important;
	background-color: transparent !important;
}

/* Hover holográfico */
.colecciones-table tbody tr:hover {
	background: rgba(0, 200, 255, 0.05) !important;
	box-shadow: inset 0 0 20px rgba(0, 200, 255, 0.25);
	transform: scale(1.01);
	transition: 0.25s ease;
}

/* --- ELIMINAR CUALQUIER FONDO DE FILAS ALTERNADAS O STRIPED --- */
.colecciones-table.table-striped tbody tr:nth-of-type(odd),
.colecciones-table.table-striped tbody tr:nth-of-type(even),
.colecciones-table tbody tr:nth-of-type(odd),
.colecciones-table tbody tr:nth-of-type(even),
.colecciones-table tbody tr:nth-child(odd),
.colecciones-table tbody tr:nth-child(even),
.colecciones-table.table-dark tbody tr:nth-child(odd),
.colecciones-table.table-dark tbody tr:nth-child(even) {
	background: transparent !important;
	background-color: transparent !important;
}

/* Base transparente para todas las filas */
.colecciones-table tbody tr,
.colecciones-table tbody tr td {
	background: none !important;
	background-color: transparent !important;
}

/* Hover holográfico (reforzado) */
.colecciones-table tbody tr:hover {
	background: rgba(0, 200, 255, 0.05) !important;
	box-shadow: inset 0 0 20px rgba(0, 200, 255, 0.25);
	transform: scale(1.01);
	transition: 0.25s ease;
}

/* Parche final anti-Bootstrap (reforzado) */
.table > :not(caption) > * > * {
	background-color: transparent !important;
}

/* === Hover uniforme sin bordes verticales === */
/* Quitar bordes verticales en todas las celdas para hover continuo */
.colecciones-table td,
.colecciones-table th {
	border-left: none !important;
	border-right: none !important;
}

/* Hover uniforme cubriendo toda la fila sin separaciones */
.colecciones-table tbody tr:hover td {
	background: rgba(0, 200, 255, 0.05) !important;
	box-shadow: inset 0 0 20px rgba(0, 200, 255, 0.25);
	border-left: none !important;
	border-right: none !important;
}

/* Iconos de ranking (imagen) */
.ranking-icon {
	width: 24px;
	height: auto;
	margin-right: 6px;
	vertical-align: middle;
	object-fit: contain;
}
.ranking-icon.second-place { width:26px; }
.ranking-icon.third-place { width:20px; }
.ranking-column { width:30px; text-align:center; }
.ranking-number { font-weight:700; color:#00c8ff; font-size:14px; line-height:1; display:inline-block; }

/* --- VARIABLES GLOBALES DE RELIC PORTAL (Mantenemos la paleta) --- */
:root {
	--color-fondo-tarjeta: rgba(10, 10, 30, 0.9);
	--color-texto-principal: #F0F0F0;
	--color-calipso: #00FFFF; /* Legendario */
	--color-morado: #9933FF; /* Épico */
	--color-azul-claro: #00AAFF; /* Raro */
}

/* --- ESTILO DEL CARRUSEL --- */
/* Título del coleccionista */
.coleccionista-titulo-wrapper {
	position: relative;
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
	margin-top: -70px;
	padding-left: 80px;
	padding-right: 80px;
	z-index: 1;
	pointer-events: none;
}

.coleccionista-titulo {
	display: inline-flex;
	align-items: center;
	margin: 0;
	/* Limpieza: eliminar placa ovalada, glow y blur. Mantener texto sin contenedor visual */
	padding: 8px 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	position: relative;
	overflow: visible;
	pointer-events: auto;
}

.coleccionista-titulo::before {
	content: none;
	display: none;
}

.coleccionista-titulo::after {
	content: none;
	display: none;
}

.coleccionista-titulo-texto {
	font-size: clamp(1.3rem, 5vw, 2.4rem);
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #ffb867;
	position: relative;
	padding-left: 18px;
	/* Halo central cálido y subrayado ámbar sutil */
	text-shadow: 0 0 14px rgba(255,190,120,0.22), 0 2px 4px rgba(0,0,0,0.28);
	z-index: 1;
	animation: none;
	position: relative;
}

/* Subrayado sutil ámbar usando border-bottom en el contenedor de texto */
.coleccionista-titulo-texto {
	display: inline-block;
	padding-bottom: 4px;
	/* subrayado eliminado per request */
}

.coleccionista-titulo-texto::before {
	content: "";
	position: absolute;
	left: 0;
	top: -6px;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		to right,
		rgba(255, 184, 103, 0.0),
		rgba(255, 184, 103, 0.85),
		rgba(255, 184, 103, 0.0)
	);
	pointer-events: none;
}

.coleccionista-titulo-texto::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		to right,
		rgba(255, 184, 103, 0.0),
		rgba(255, 184, 103, 0.65),
		rgba(255, 184, 103, 0.0)
	);
	pointer-events: none;
}

/* Contextual styling for carousel title remains in .vitrina-destacada-container. */

/* Contextual styling: aplicar variante del título SOLO dentro del carrusel/vitrina */
.vitrina-destacada-container .coleccionista-titulo {
	/* Reseteos estrictos: eliminar placas, bordes y glows antiguos */
	background: transparent;
	box-shadow: none;
	border-top: none;
	border-bottom: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	animation: none;
	transition: all 0.18s ease;
	padding: 10px 72px;
}

.vitrina-destacada-container .coleccionista-titulo .coleccionista-titulo-texto {
	/* Texto protagonista: glow ámbar suave, sin animaciones */
	text-shadow: 0 0 8px rgba(255,180,115,0.22), 0 2px 4px rgba(0,0,0,0.28);
	color: #ffb867;
	animation: none; /* neutralizar titleGlow */
}

.vitrina-destacada-container .coleccionista-titulo::before,
.vitrina-destacada-container .coleccionista-titulo::after {
	/* Desactivar por completo los rayos laterales heredados */
	content: none;
	display: none;
	width: 0;
	height: 0;
	opacity: 0;
	animation: none;
}

@media (max-width: 900px) {
	.vitrina-destacada-container .coleccionista-titulo {
		padding: 10px 36px;
	}
	.vitrina-destacada-container .coleccionista-titulo .coleccionista-titulo-texto {
		font-size: clamp(1.1rem, 6vw, 1.8rem);
		letter-spacing: 2px;
	}
}

.carrusel-bg {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	background:
		linear-gradient(
			to bottom,
			transparent 0%,
			transparent 65%,
			rgba(0, 180, 220, 0.06) 78%,
			rgba(0, 180, 220, 0.035) 88%,
			rgba(0, 180, 220, 0.0) 100%
		),
		radial-gradient(
			120% 80% at 50% 48%,
			rgba(0, 180, 220, 0.18),
			rgba(4, 12, 24, 0.92) 65%,
			#040c18 100%
		);
	overflow-x: hidden;
	overflow-y: visible;
	z-index: 0;
}

/* Versión móvil con gradientes reducidos para mejor performance */
@media (max-width: 900px) {
	.carrusel-bg {
		background:
			radial-gradient(700px 170px at 50% 28%, rgba(255,184,103,0.03), rgba(255,184,103,0) 35%),
			linear-gradient(180deg, rgba(4,12,24,0.95) 0%, rgba(6,18,32,0.92) 50%, rgba(8,22,38,0.9) 100%);
	}
}

/* (El bloque móvil del carrusel fue consolidado más abajo para evitar duplicados) */

.carrusel-bg::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: 100%;
	height: 65%;
	background: radial-gradient(
	  ellipse at center top,
	  rgba(0, 220, 255, 0.07) 0%,
	  rgba(0, 220, 255, 0.04) 35%,
	  rgba(0, 220, 255, 0.015) 55%,
	  rgba(0, 220, 255, 0.0) 75%
	);
		pointer-events: none;
		z-index: 0;
}




/* Contenedor centrado que envuelve la vitrina y las flechas */
.carrusel-wrapper {
	position: relative;
	width: 100%;
	max-width: 1360px; /* exacto para 4 objetos de 340px cada uno */
	margin: 0 auto;
	overflow: visible; /* permitir reflejos */
	z-index: 3; /* Sobre el fondo (z-index: 1) */
}

/* ============================================
   COLLECTION PROGRESS BAR (NIVEL 2)
   ============================================ */
.collection-progress-container {
	max-width: 1360px;
	margin: 0 auto 20px auto;
	padding: 12px 16px;
	/* Glass-morphism sutil sin bordes brillantes */
	background: rgba(15, 25, 45, 0.4);
	border: 1px solid rgba(80, 200, 255, 0.15);
	border-radius: 8px;
	backdrop-filter: blur(4px);
	/* Sombra mínima para profundidad */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.collection-progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	gap: 12px;
	/* Responsive: wrap en pantallas pequeñas */
	flex-wrap: wrap;
}

.progress-label {
	/* Tipografía responsive con clamp() */
	font-size: clamp(12px, 2vw, 14px);
	font-weight: 600;
	color: #50c8ff;
	/* Sin glow - texto simple y limpio */
	letter-spacing: 0.3px;
}

.progress-stats {
	/* Tipografía responsive con clamp() */
	font-size: clamp(11px, 1.8vw, 13px);
	color: #8ec5ff;
	font-weight: 500;
	flex: 1;
	text-align: center;
	/* Sin efectos brillantes */
}

.progress-percentage-text {
	/* Tipografía responsive con clamp() */
	font-size: clamp(12px, 2vw, 14px);
	font-weight: 700;
	color: #50c8ff;
	/* Sin glow - texto simple y limpio */
	letter-spacing: 0.3px;
}

.collection-progress-bar {
	position: relative;
	width: 100%;
	/* Altura responsive para mejor legibilidad en móvil */
	height: clamp(10px, 2vh, 14px);
	background: rgba(10, 20, 35, 0.8);
	border: 1px solid rgba(80, 200, 255, 0.1);
	border-radius: 6px;
	overflow: hidden;
	/* Sombra interna mínima */
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.collection-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	/* Gradiente sutil minimalista: azul medio → azul claro */
	background: linear-gradient(90deg, 
		#3584e4 0%, 
		#4a9ff5 50%, 
		#62d6ff 100%);
	border-radius: 6px;
	/* Transición suave mantenida para animación */
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	/* Sin glow ni sombras - estilo plano y limpio */
}

.carrusel-vitrina {
	/* contenedor centrado y limitado para flechas visibles y 4 objetos */
	width: 100%;
	max-width: 1360px; /* exacto para 4 objetos de 340px cada uno */
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	overflow-x: hidden; /* sin scroll horizontal */
	overflow-y: visible; /* permitir efectos verticales sin recortes */
	scroll-snap-type: x mandatory;
	/* padding se ajusta dinámicamente vía JS para centrar 4 tarjetas */
	--slot-width: 340px; /* ancho exacto de cada tarjeta */
	padding-left: 0;
	padding-right: 0;
	margin-top: 0; /* espaciado controlado por #inventory-view */
	margin-bottom: 24px; /* sin márgenes laterales */
	position: relative; /* permitir banda de fondo */
	z-index: 3; /* Misma capa que wrapper */
}

.carrusel-track {
	width: max-content; /* permitir overflow para paginar */
	padding: 8px 0; /* padding menor */
	position: relative;
	z-index: 3; /* Misma capa que vitrina */
}
/* El contenedor del inventario actúa como contexto de posicionamiento */
/* El contenedor del inventario actúa como contexto de posicionamiento */
#inventory-view {
	width: 100%;
	margin: 0 auto;
	padding-top: 13px;   /* separación del botón "Volver" */
	padding-bottom: 48px;/* espacio para reflejos */
	overflow: visible;   /* permitir reflejos que sobresalgan */
	z-index: 2;          /* Capa intermedia */
}

/* Código legacy eliminado - body.colecciones-carousel-active no se usa */

/* Botones de navegación del carrusel */
.carrusel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #e0e8f0;
	font-size: 48px;
	cursor: pointer;
	z-index: 5; /* Máxima prioridad - sobre todo */
	text-shadow: 0 0 12px rgba(200,210,220,0.65), 0 2px 8px rgba(0,0,0,0.55);
	transition: all 0.3s ease;
	padding: 0;
	line-height: 1;
}
.carrusel-btn:hover {
	color: #ffffff;
	text-shadow: 0 0 18px rgba(220,230,240,0.95), 0 2px 12px rgba(0,0,0,0.75);
	transform: translateY(-50%) scale(1.15);
}
.carrusel-btn:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}
.carrusel-btn.btn-prev { left: -56px; }
.carrusel-btn.btn-next { right: -56px; }

/* --- ESTILO BASE DE LA TARJETA --- */

.item-card { 
	position: relative; 
	width: 340px; 
	height: 460px; 
	margin: 0; 
	padding: 0; 
	background: transparent; 
	border: none; 
	box-shadow: 0 0 20px rgba(100, 150, 200, 0.15), 0 8px 30px rgba(0, 0, 0, 0.2); 
	overflow: visible; 
	display: inline-block; 
	vertical-align: top; 
	scroll-snap-align: start;
}
.frame-img { position:absolute; top:6%; left:6%; width:88%; height:88%; object-fit:contain; pointer-events:none; z-index:3; }
.item-card.raro .frame-img { top:8%; left:8%; width:84%; height:84%; }
.item-card.legendario .frame-img { top:4%; left:4%; width:92%; height:92%; }
.item-inner-img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:60%; height:50%; object-fit:contain; z-index:4; }

/* Lazy-load eliminado - no se usa en carrusel actual */

.item-inner-placeholder { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:60%; height:50%; display:flex; align-items:center; justify-content:center; color:#bbb; background:rgba(0,0,0,0.15); z-index:3; font-size:0.85rem; }
.item-card .etiqueta-rareza { display:none !important; }

/* Responsive: ajuste de tarjetas para móvil */
@media (max-width: 900px) { 
	.item-card {
		width: 300px; 
		height: 380px; 
		margin: 0;
		box-shadow: 0 0 15px rgba(100, 150, 200, 0.12), 0 6px 20px rgba(0, 0, 0, 0.18);
	}
	.item-inner-img, 
	.item-inner-placeholder { 
		width: 58%; 
		height: 48%; 
	}
	.carrusel-vitrina {
		--slot-width: 300px; /* Actualizar variable CSS para móvil */
	}
}

/* Responsive: botones de navegación en tablets (ajustado a valores móviles solicitados) */
@media (max-width: 768px) {
	.carrusel-btn {
		font-size: 40px;
		left: 6px;
	}
	.carrusel-btn.btn-next {
		right: 6px;
	}
}

/* Pedestal sutil bajo cada tarjeta del carrusel (sin reflejos) */
.item-card::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px; /* muy cerca del borde inferior */
	transform: translateX(-50%);
	width: 56%;
	height: 10px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.06) 85%, transparent 100%);
	filter: blur(2px);
	z-index: 1;
	pointer-events: none;
}
/* Eliminar reflejo espejo para estética salón premium */
.item-card { -webkit-box-reflect: none !important; }

.etiqueta-rareza {
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 4px 8px;
	font-size: 0.7em;
	font-weight: bold;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.1);
}

.item-card:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 0 26px rgba(200,230,255,0.75), 0 0 42px rgba(140,180,230,0.35) inset;
}
.item-card:hover .frame-img {
	filter: drop-shadow(0 0 12px rgba(220,230,240,0.75)) brightness(1.06);
}
/* Glow dorado sólo para legendarios al hover */
.item-card.legendario:hover .frame-img {
	filter: drop-shadow(0 0 14px rgba(255, 200, 80, 0.85)) brightness(1.08);
}
/* Glow morado sólo para épicos al hover */
.item-card.epico:hover .frame-img {
	filter: drop-shadow(0 0 10px rgba(170, 80, 255, 0.60)) brightness(1.03);
}
/* Glow cian atenuado para raros al hover */
.item-card.raro:hover .frame-img {
	filter: drop-shadow(0 0 10px rgba(120, 210, 255, 0.55)) brightness(1.02);
}

/* --- ESTILOS POR RAREZA --- */

/* RARO */
/* Estilos de rareza: sin bordes/sombras propias (usan las de .item-card base) */
.item-card.raro, 
.item-card.epico, 
.item-card.legendario { 
	border: none; 
	box-shadow: inherit; 
	background: transparent;
}

@keyframes pulseGlow {
	0% { 
		box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.7), 
					0 0 5px 1px rgba(255, 255, 255, 0.8) inset; 
	}
	50% { 
		box-shadow: 0 0 25px 8px rgba(0, 255, 255, 0.9), 
					0 0 5px 1px rgba(255, 255, 255, 0.8) inset; 
	}
	100% { 
		box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.7), 
					0 0 5px 1px rgba(255, 255, 255, 0.8) inset; 
	}
}
.item-card.legendario:hover { animation: none; }
/* Eliminado sistema de animación y glow de tarjetas (pulseGlow) */

/* Nombre del ítem debajo de la imagen - OCULTO */
.item-name-display {
	display: none;
}
.floating-item-tooltip .rarity {
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .5px;
	margin-bottom: 4px;
	color: #7ff6ff;
	text-shadow: 0 0 4px rgba(0,255,255,0.6);
}

/* Tooltip descriptivo futurista */
.item-tooltip {
	position: absolute;
	left: 50%;
	top: 4%;
	transform: translate(-50%, -110%);
	width: 82%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .35s cubic-bezier(.25,.8,.25,1);
	z-index: 30;
}
.item-tooltip-inner {
	background: linear-gradient(145deg, rgba(0,30,45,0.92), rgba(0,90,110,0.65));
	border: 1px solid rgba(0,255,255,0.45);
	border-radius: 12px;
	padding: 10px 14px 12px;
	box-shadow: 0 0 18px rgba(0,255,255,0.35), inset 0 0 10px rgba(0,255,255,0.25);
	backdrop-filter: blur(8px) saturate(180%);
	position: relative;
	overflow: hidden;
}
.item-tooltip-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(0,255,255,0.25), transparent 70%);
	opacity: .6;
	mix-blend-mode: screen;
	pointer-events: none;
}
.item-tooltip-title {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .6px;
	margin-bottom: 4px;
	color: #9ffbff;
	text-shadow: 0 0 6px rgba(0,255,255,0.7);
}
.item-tooltip-body {
	display: block;
	font-size: .70rem;
	line-height: 1.25;
	color: #d7f9ff;
	max-height: 86px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.item-tooltip-static { display:none; }

/* Tooltip flotante dinámico */
.floating-item-tooltip {
	position: fixed;
	top: 0; left: 0;
	transform: translate(-50%, -110%);
	min-width: 200px;
	max-width: 280px;
	padding: 10px 14px 12px;
	background: linear-gradient(145deg, rgba(0,30,45,0.92), rgba(0,90,110,0.65));
	border: 1px solid rgba(0,255,255,0.55);
	border-radius: 12px;
	box-shadow: 0 0 20px rgba(0,255,255,0.45), inset 0 0 12px rgba(0,255,255,0.3);
	backdrop-filter: blur(10px) saturate(180%);
	z-index: 10000;
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease, transform .28s cubic-bezier(.25,.8,.25,1);
	font-size: 0.7rem;
	color: #d3f9ff;
}
.floating-item-tooltip.visible {
	opacity: 1;
	transform: translate(-50%, -118%);
}
.floating-item-tooltip h4 {
	margin:0 0 4px;
	font-size: .75rem;
	letter-spacing: .6px;
	font-weight: 700;
	color: #9ffbff;
	text-shadow: 0 0 6px rgba(0,255,255,0.7);
}
.floating-item-tooltip .desc {
	line-height: 1.25;
	max-height: 100px;
	overflow-y: auto;
}
.floating-item-tooltip .desc::-webkit-scrollbar { width: 6px; }
.floating-item-tooltip .desc::-webkit-scrollbar-track { background: rgba(0,40,55,0.4); }
.floating-item-tooltip .desc::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.45); border-radius: 3px; }
.item-tooltip-body::-webkit-scrollbar { width: 6px; }
.item-tooltip-body::-webkit-scrollbar-track { background: rgba(0,40,55,0.4); }
.item-tooltip-body::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.45); border-radius: 3px; }

/* Mostrar tooltip al pasar sobre imagen o marco */
.item-card:hover .item-tooltip,
.item-card .item-inner-img:hover ~ .item-tooltip,
.item-card .frame-img:hover ~ .item-tooltip {
	opacity: 1;
	transform: translate(-50%, -118%);
}

@media (max-width:900px){
	.item-tooltip { width: 90%; transform: translate(-50%, -105%); }
	.item-card:hover .item-tooltip { transform: translate(-50%, -112%); }
	.item-name-display { font-size: .72rem; padding: 4px 8px 3px; }
}

/* === Nuevo sistema de marcos (sin pseudo-elementos, ni <img> de marco) === */
/* Contenedor básico y overlay de marco como imagen externa */
.item-visual { position: relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.item-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; pointer-events:none; }
.item-imagen { position:relative; z-index:1; max-width:80%; max-height:80%; object-fit:contain; }

/* Botón Volver simple (vista "Visitar") */
.qv-cargas-back {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 20px;
	font-size: 1.2rem;
	color: #66f0ff;
	background: transparent;
	border: 1px solid rgba(102,240,255,0.3);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
}

.qv-cargas-back:hover {
	color: #a0e8ff;
	border-color: rgba(102,240,255,0.6);
	background: rgba(102,240,255,0.05);
}

.qv-cargas-back:active {
	transform: scale(0.95);
}

.qv-cargas-back:focus-visible {
	outline: 2px solid #66f0ff;
	outline-offset: 2px;
}

/* Spotlights desactivados para evitar contaminación de color sobre la vitrina */
body.colecciones-carousel-active .colecciones-spotlights { display: none; }
body:not(.colecciones-carousel-active) .colecciones-spotlights { display: none; }
.colecciones-spotlights {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 850; /* mantenido para compatibilidad, pero visualmente inactivo */
	overflow: hidden;
	mix-blend-mode: normal;
	display: none; /* completamente desactivado */
}
.colecciones-spotlights .beam,
.colecciones-spotlights .beam-blue {
	background: none;
	filter: none;
	opacity: 0;
	animation: none;
	transform: none;
	pointer-events: none;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.colecciones-loading-spinner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 15, 25, 0.85);
	backdrop-filter: blur(8px);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

.colecciones-loading-spinner.visible {
	display: flex;
}

.spinner-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.spinner-ring {
	width: 60px;
	height: 60px;
	border: 4px solid rgba(80, 200, 255, 0.2);
	border-top-color: #50c8ff;
	border-radius: 50%;
	animation: spinnerRotate 1s linear infinite;
	box-shadow: 0 0 20px rgba(80, 200, 255, 0.3);
}

@keyframes spinnerRotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.spinner-text {
	font-size: 16px;
	color: #50c8ff;
	text-shadow: 0 0 10px rgba(80, 200, 255, 0.6);
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* ============================================
   CAROUSEL COUNTER
   ============================================ */
.carrusel-counter {
	text-align: center;
	margin-bottom: 15px;
	margin-top: 20px;
	font-size: 14px;
	color: #50c8ff;
	text-shadow: 0 0 8px rgba(80, 200, 255, 0.5);
	font-weight: 500;
	letter-spacing: 0.3px;
}

/* ========================================
   Contador de Inventario
   ======================================== */
.inventory-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0,30,50,0.6), rgba(0,50,80,0.4));
    border: 1px solid rgba(0,224,255,0.4);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,224,255,0.3);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.inventory-counter:hover {
    border-color: rgba(0,224,255,0.6);
    box-shadow: 0 0 15px rgba(0,224,255,0.5);
}

.inventory-counter .counter-label {
    color: #7dd3f7;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.inventory-counter .counter-value {
    color: #00ff88;
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 0 0 8px rgba(0,255,136,0.5);
}

.inventory-counter .counter-value.counter-full {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255,107,107,0.6);
    animation: counter-warning 1.5s infinite alternate;
}

@keyframes counter-warning {
    0% { 
        text-shadow: 0 0 8px rgba(255,107,107,0.6); 
        color: #ff6b6b;
    }
    100% { 
        text-shadow: 0 0 15px rgba(255,107,107,0.9); 
        color: #ff4444;
    }
}

/* ========================================
   Botón de expansión de inventario
   ======================================== */
.expand-inventory-btn {
    padding: 6px 12px;
    border: none;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(106,17,203,0.35), 0 2px 6px rgba(0,0,0,0.25);
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.expand-inventory-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.expand-inventory-btn:hover::before {
    left: 100%;
}

.expand-inventory-btn:hover {
    background: linear-gradient(135deg, #7c1fd4 0%, #3a88ff 100%);
    box-shadow: 0 6px 18px rgba(106,17,203,0.55), 0 3px 10px rgba(37,117,252,0.35);
    transform: translateY(-2px);
}

/* === RESPONSIVE PARA COLECCIONES BANNER === */
@media (max-width: 768px) {
    .colecciones-flag {
        padding: 1.2rem 2rem;
        border-radius: 14px;
    }
    
    .colecciones-title {
        font-size: 2rem;
        letter-spacing: 0.06em;
    }
    
    .colecciones-subtitle {
        font-size: 2rem;
        margin-top: 0.4rem;
    }
}

@media (max-width: 576px) {
    .colecciones-banner {
        margin-bottom: 1.2rem;
    }
    
    .colecciones-flag {
        padding: 1rem 1.8rem;
        border-radius: 12px;
        margin: 0 10px;
    }
    
    .colecciones-flag::before {
        left: 10%;
        right: 10%;
    }
    
    .colecciones-title {
        font-size: 1.6rem;
        letter-spacing: 0.05em;
        font-weight: 800;
    }
    
    .colecciones-subtitle {
        font-size: 0.95rem;
        margin-top: 2rem;
    }
    
    /* Barra de progreso responsive en móviles */
    .collection-progress-container {
        padding: 10px 12px;
    }
    
    .collection-progress-header {
        gap: 8px;
    }
}

/* Nota: separación superior del título ahora controlada desde el contenedor padre
   (se replicó padding-top en .vitrina-destacada-container dentro de la media query móvil). */

@media (max-width: 768px) {
	/* Móvil: compensar offset del header fijo para alinear el título
	   con el botón "Volver" (.qv-cargas-back). Aplicado solo en móvil
	   para que desktop no cambie. No usar !important ni calc(). */
	.coleccionista-titulo-wrapper {
		margin-top: -70px;
	}
	/* Estilos estrictamente acotados a #table-container para móvil
	   Evitan desbordes, permiten scroll-x y ajustan tipografía/paddings. */
	#table-container {
		max-width: 100%;
		box-sizing: border-box;
		overflow-x: auto; /* permitir scroll horizontal cuando sea necesario */
		-webkit-overflow-scrolling: touch;
		padding-left: 8px; /* evitar que el contenido toque el viewport */
		padding-right: 8px;
	}

	/* Forzar que cualquier wrapper responsive dentro respete overflow del contenedor */
	#table-container .table-responsive {
		overflow-x: auto !important;
	}

	/* Ajustes de tabla solo dentro de #table-container */
	#table-container table,
	#table-container .colecciones-table {
		width: 100%;
		max-width: 100%;
		table-layout: auto;
		font-size: 0.86rem; /* texto más legible en móviles */
	}

	/* Reducir padding de celdas para mejor encaje en pantallas pequeñas */
	#table-container .colecciones-table tbody td,
	#table-container .colecciones-table thead th,
	#table-container table td,
	#table-container table th {
		padding: 8px 10px;
	}

	/* Columnas críticas: permitir que la columna objetos haga wrap en móvil */
	#table-container .colecciones-table th.objetos,
	#table-container .colecciones-table td.objetos,
	#table-container table th.objetos,
	#table-container table td.objetos {
		white-space: normal; /* permitir multiline y evitar overflow por texto largo */
		padding-left: 8px;
	}

	/* Columna coleccionista más estrecha en móvil */
	#table-container .colecciones-table th.coleccionista,
	#table-container .colecciones-table td.coleccionista {
		width: 130px;
		min-width: 110px;
	}

	/* Forzar que imágenes/íconos no crezcan y provoquen overflow */
	#table-container img,
	#table-container .ranking-icon {
		max-width: 100%;
		height: auto;
		display: inline-block;
	}

	/* Reglas móviles del carrusel: asegurar comportamiento solicitado sin duplicados */
	.carrusel-vitrina {
		--slot-width: 100vw;
		padding-left: 0;
		padding-right: 0;
		overflow: visible;
	}

	.carrusel-track {
		width: max-content;
	}
	.carrusel-btn {
		position: absolute;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 20;
		pointer-events: auto;
	}

	.carrusel-btn.btn-prev {
		left: 8px;
	}

	.carrusel-btn.btn-next {
		right: 8px;
		left: auto;
	}

	/* Ajuste móvil: fijar ancho de cada tarjeta para mostrar 1 tarjeta por viewport */
	.item-card {
		width: calc(100vw - 48px);
		max-width: calc(100vw - 48px);
		scroll-snap-align: start;
	}

	.carrusel-counter {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 12px;
	}

	/* Si la tabla sigue siendo más ancha por columnas muchas/anchas, permitir scroll-x suave */
	#table-container::-webkit-scrollbar { height: 8px; }
	#table-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 6px; }
}

/* === Scoped: Minimal title for /colecciones (match /noticias) ===
   Apply ONLY inside .colecciones-page to avoid affecting other modules.
   Keeps the text and its effects, removes background/blur/card/line-top and animations.
*/
.colecciones-page .colecciones-flag {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	animation: none !important;
	position: relative !important;
}

/* Remove the inherited top line explicitly */
.colecciones-page .colecciones-flag::before {
	content: none !important;
}

/* Add single bottom decorative line (same concept as noticias) */
.colecciones-page .colecciones-flag::after {
	content: "" !important;
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -6px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(214,178,106,0.75), transparent);
	opacity: 0.85;
	filter: blur(0.4px);
	pointer-events: none;
}

/* Neutralize hover effects inherited from the original styles */
.colecciones-page .colecciones-flag:hover {
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	border: none !important;
}

/* Mobile: aumentar espacio vertical sobre el título solo en /colecciones */
@media (max-width: 768px) {
    .colecciones-page .colecciones-flag {
        margin-top: 2rem !important;
    }
}

/* Mobile: añadir mismo margen superior a la vitrina destacada (solo /colecciones) */
@media (max-width: 768px) {
	.colecciones-page #inventory-view {
        margin-top: 2rem;
    }
}