/* Estilos personalizados para AMV TCG - Bootstrap 5.3 */

/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
	/* Colores principales - Ajustados para coincidir exactamente con la versión original */
	--bs-body-bg: #0F0F0F;
	--bs-body-color: #FFFFFF;
	
	/* Colores de fondo */
	--color-bg-primary: #0F0F0F;
	--color-bg-secondary: #1A1A1A;
	--color-bg-tertiary: #242424;
	--color-bg-card: #1E1E1E;
	
	/* Colores de acento */
	/*--color-accent-purple: #8B5CF6;*/
	--color-accent-purple: hsl(258.3, 89.5%, 66.3%);
	--color-accent-purple-hover: hsl(258.3, 79.5%, 61.3%);
	--color-accent-purple-active: hsl(258.3, 69.5%, 56.3%);
	--color-accent-blue: #3B82F6;
	--color-accent-green: #10B981;
	--color-accent-orange: #F97316;
	--color-accent-pink: #EC4899;
	--color-accent-red: #EF4444;
	--color-accent-yellow: #F59E0B;
	
	/* Colores de texto */
	--color-text-primary: #FFFFFF;
	--color-text-secondary: #A3A3A3;
	--color-text-tertiary: #6B7280;
	
	/* Bordes */
	--color-border-light: rgba(255, 255, 255, 0.1);
	--color-border-card: rgba(255, 255, 255, 0.05);
	
	/* Espaciado - Ajustado para coincidir con la versión original */
	--spacing-1: 4px;
	--spacing-2: 8px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 20px;
	--spacing-6: 24px;
	--spacing-8: 32px;
	--spacing-10: 40px;
	--spacing-12: 48px;
	
	/* Bordes redondeados */
	--border-radius-sm: 8px;
	--border-radius-md: 12px;
	--border-radius-lg: 16px;
	--border-radius-xl: 24px;
	--border-radius-full: 9999px;
	
	/* Sombras */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	
	/* Transiciones */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.3s ease;
	--transition-slow: 0.5s ease;

	/* Cartas 3D */
	--color1: rgb(0, 231, 255);
	--color2: rgb(255, 0, 231);
	--back: url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);

	/* Colores de Tiers */
	--color-tier-1: #c0c0c0;
	--color-tier-2: #bf9339;
	--color-tier-3: #ffa800;
	--color-tier-4: #00ced1;
	--color-tier-5: #ff69b4;
	--color-tier-6: #ff6114;
}


/*
|--------------------------------------------------------------------------
| Estilos generales
|--------------------------------------------------------------------------
|
*/
	html, body{height: 100%;}
	body {
		font-family: 'Inter', sans-serif;
		background-color: var(--color-bg-primary);
		color: var(--color-text-primary);
		/*min-height: 100vh;*/
		line-height: 1.5;
		overflow-x: hidden;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Poppins', sans-serif;
		font-weight: 600;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	button {
		font-family: inherit;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* Clases de utilidad para colores personalizados */
	.bg-dark {
		background-color: var(--color-bg-primary) !important;
	}

	.bg-dark-secondary {
		background-color: var(--color-bg-secondary) !important;
	}

	.bg-dark-card {
		background-color: var(--color-bg-card) !important;
	}

	.bg-dark-tertiary {
		background-color: var(--color-bg-tertiary) !important;
	}

	.text-purple {
		color: var(--color-accent-purple) !important;
	}

	.text-blue {
		color: var(--color-accent-blue) !important;
	}

	.text-green {
		color: var(--color-accent-green) !important;
	}

	.text-orange {
		color: var(--color-accent-orange) !important;
	}

	.text-pink {
		color: var(--color-accent-pink) !important;
	}

	.bg-purple {
		background-color: var(--color-accent-purple) !important;
	}

	.bg-blue {
		background-color: var(--color-accent-blue) !important;
	}

	.bg-green {
		background-color: var(--color-accent-green) !important;
	}

	.bg-orange {
		background-color: var(--color-accent-orange) !important;
	}

	.bg-pink {
		background-color: var(--color-accent-pink) !important;
	}

	.bg-red {
		background-color: var(--color-accent-red) !important;
	}

	.bg-yellow {
		background-color: var(--color-accent-yellow) !important;
	}

	.bg-tier-1 {background-color: var(--color-tier-1) !important;}
	.bg-tier-2 {background-color: var(--color-tier-2) !important;}
	.bg-tier-3 {background-color: var(--color-tier-3) !important;}
	.bg-tier-4 {background-color: var(--color-tier-4) !important;}
	.bg-tier-5 {background-color: var(--color-tier-5) !important;}
	.bg-tier-6 {background-color: var(--color-tier-6) !important;}

	.border-purple {
		border-color: var(--color-accent-purple) !important;
	}

	.border-blue {
		border-color: var(--color-accent-blue) !important;
	}

	.border-green {
		border-color: var(--color-accent-green) !important;
	}

	.border-orange {
		border-color: var(--color-accent-orange) !important;
	}

	.border-pink {
		border-color: var(--color-accent-pink) !important;
	}

	/* Botones personalizados */
	.btn-primary,
	.button-primary {
		/*color: var(--color-text-primary);*/
		/*border-color: var(--color-accent-purple);*/
		/*background-color: var(--color-accent-purple);*/
		--bs-btn-color: var(--color-text-primary);
		--bs-btn-bg: var(--color-accent-purple);
		--bs-btn-border-color: var(--color-accent-purple);
		--bs-btn-hover-bg: var(--color-accent-purple-hover);
		--bs-btn-hover-border-color: var(--color-accent-purple-hover);
		--bs-btn-active-bg: var(--color-accent-purple-active);
		--bs-btn-active-border-color: var(--color-accent-purple-active);
	}

	.btn-outline-light {
		color: var(--color-text-primary);
		border-color: var(--color-border-light);
	}

	.btn-outline-light:hover, .btn-outline-light:focus {
		color: var(--color-text-primary);
		background-color: var(--color-bg-tertiary);
	}

	.button-secondary {
		color: var(--color-text-primary);
		background-color: rgba(255, 255, 255, 0.1);
	}

	.button-secondary:hover {background-color: rgba(255, 255, 255, 0.2);}

	/* Estructura de la aplicación */
	.app-container {
		display: flex;
		min-height: 100vh;
	}

	/* Estrellas */
	.stars, .star {color: var(--color-accent-yellow);}

	/* Tags de Usuarios */
	.user-tags {display: flex;	flex-wrap: wrap;	gap: var(--spacing-2);}
	.user-tags .tag {
		display: flex;	align-items: center;	gap: var(--spacing-2);
		/*padding: var(--spacing-2) var(--spacing-3);*/
		padding: 2px;
		border-radius: var(--border-radius-full);
		background-color: var(--color-accent-purple-active);
	}
	.user-tags .tag .img {
		overflow: hidden;
		width: 34px; height: 34px;
		border-radius: var(--border-radius-full);
	}
	.user-tags .tag img {
		object-fit: cover;
		width: 100%; height: 100%;
	}
	.user-tags .tag .text {
		font-size: 14px; color: var(--color-text-primary);
	}

	/* Iconos */
	.icon {width: 1.4em;	height: auto;}
	i[class^="ci-"] {font-size: 1.4em;	vertical-align: top;}

	/* Estilos personalizados para el modal de video de YouTube */
	/* Estilo general del modal */
	.modal-content.bg-dark {
		background-color: #0F0F0F !important;
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	}

	/* Cabecera del modal */
	.modal-header {
		padding: 1rem 1.5rem;
	}

	.modal-title {
		font-weight: 600;
		display: flex;
		align-items: center;
	}

	.video-title {
		font-family: 'Poppins', sans-serif;
		font-size: 1.25rem;
	}

	.badge.bg-danger {
		background-color: #EF4444 !important;
		font-size: 0.75rem;
		padding: 0.35em 0.65em;
	}

	/* Contenedor del video */
	.video-container {
		border-radius: 0;
		overflow: hidden;
		background-color: #000;
	}

	/* Pie del modal */
	.modal-footer {
		padding: 1rem 1.5rem;
	}

	/* Información de la carta */
	.card-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 32px;
		height: 32px;
		overflow: hidden;
		border-radius: 50%;
		border: 2px solid rgba(255, 255, 255, 0.1);
	}

	.avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.editor-name {
		font-weight: 600;
		font-size: 0.9rem;
		line-height: 1.2;
	}

	.card-info .card-meta {
		opacity: 0.7;
		margin-bottom: 0;
		font-size: 0.8rem;
	}

	/* Botones de acción */
	.card-actions .btn {
		font-size: 0.85rem;
		padding: 0.375rem 0.75rem;
		border-radius: 0.375rem;
	}

	.btn-outline-light {
		border-color: rgba(255, 255, 255, 0.2);
	}

	.btn-outline-light:hover {
		background-color: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.3);
	}

	/* Botón de cierre */
	.btn-close-white {
		filter: brightness(0) invert(1);
		opacity: 0.7;
	}

	.btn-close-white:hover {
		opacity: 1;
	}

	/* Animación de entrada */
	.modal.fade .modal-dialog {
		transform: scale(0.95);
		transition: transform 0.3s ease-out;
	}

	.modal.show .modal-dialog {
		transform: scale(1);
	}

	/* Estilos responsivos */
	@media (max-width: 767.98px) {
		.modal-footer {
			flex-direction: column;
			align-items: flex-start;
		}
		
		.card-actions {
			margin-top: 1rem;
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
		
		.card-actions .btn {
			flex: 1;
			margin-right: 0.5rem;
		}
		
		.card-actions .btn:last-child {
			margin-right: 0;
		}
	}


/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
|
*/
	#sidebar{
		position: relative;
		max-width: 300px;
		background-color: var(--color-bg-primary);
		border-right: 1px solid var(--color-border-light);
	}
	#sidebar span{
		display: inline-block;	opacity: 1;	white-space: nowrap;
		max-width: 300px;
		/* Animación */
			-webkit-transition: all 0.3s ease 0s;
			-moz-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s
	}
	#sidebar.active span {
		opacity: 0;
		max-width: 0;
		margin-left: 0 !important;	margin-right: 0 !important;
	}
	#sidebar .menu-toggle {
		position: absolute;	top: 72px;	left: 100%;	cursor: pointer;
		/*margin-right: -10px;*/	padding: var(--spacing-2);
		color: var(--color-text-secondary);	line-height: 1em;
		border: 1px solid var(--color-border-light);	border-radius: var(--border-radius-sm);
		background: var(--color-bg-primary);
		z-index: 99999;
		/* Animación */
			-webkit-transition: all 0.3s ease 0s;
			-moz-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s
	}
	#sidebar .menu-toggle:hover {color: var(--color-text-primary);}
	#sidebar.active .menu-toggle svg {
		/* Animación */
			-webkit-transition: all 0.3s ease 0s;
			-moz-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s
	}
	#sidebar .menu-toggle .right {opacity: 0;}
	#sidebar .menu-toggle .left {position: absolute;	opacity: 1;}
	#sidebar.active .menu-toggle .right {opacity: 1;}
	#sidebar.active .menu-toggle .left {opacity: 0;}
	#sidebar .logo {
		font-size: 1.3em;
		border-bottom: 1px solid var(--color-border-light);
		background-color: var(--color-bg-primary);
	}
	#sidebar .logo img {
		width: 40px;	height: auto;
		border-radius: 100%;
	}
	#sidebar .logo span {vertical-align: middle;}
	#sidebar .title {
		color: var(--color-text-secondary);
		font-size: 14px;
		font-weight: 500;
		margin-bottom: var(--spacing-3);
		padding-left: var(--spacing-4);
	}
	#sidebar .divider {
		height: 1px;
		background-color: var(--color-border-light);
		margin: var(--spacing-4) 0;
	}
	#sidebar .nav-link {
		margin-bottom: var(--spacing-1);
		color: var(--color-text-secondary);
		border-radius: var(--border-radius-md);
		transition: all var(--transition-fast);
	}
	#sidebar .nav-link:hover {
		background-color: var(--color-bg-secondary);
		color: var(--color-text-primary);
	}
	#sidebar .nav-link.active {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}
	#sidebar .nav-link i,
	#sidebar .nav-link svg {
		display: inline-block;	/*float: left;*/
		/*font-size: 20px;*/	font-size: 1.4em;	text-align: center;	vertical-align: top;
		width: 24px;
	}
	#sidebar.active .nav-link::after,
	#sidebar.active .nav-link::before {
		/* Animación */
			-webkit-transition: all 0.3s ease 0s;
			-moz-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s
	}
	#sidebar.active .nav-link::before {
		content: "";
		position: absolute;	left: 80%;	opacity: 0;
		margin-top: 4px;	margin-left: -16px;
		border: 8px solid transparent;	border-right-color: var(--color-border-light);
	}
	#sidebar.active .nav-link:hover::before {left: 100%;	opacity: 1;}
	#sidebar.active .nav-link::after {
		content: attr(data-tag-text);
		position: absolute;	left: 80%;	opacity: 0;	overflow: hidden;
		max-width: 0;
		margin-top: -4px;	padding: var(--spacing-1) 0;
		white-space: nowrap;
		border-radius: var(--border-radius-sm);
		background-color: var(--color-border-light);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	#sidebar.active .nav-link:hover::after {
		left: 100%;	opacity: 1;
		max-width: 300px;
		padding: var(--spacing-1) var(--spacing-4);
	}

	/*.sidebar {
		position: fixed;
		left: 0;
		top: 0;
		width: 260px;
		height: 100vh;
		background-color: var(--color-bg-primary);
		border-right: 1px solid var(--color-border-light);
		z-index: 50;
		display: flex;
		flex-direction: column;
		transition: transform var(--transition-normal);
	}

	.sidebar.collapsed {
		transform: translateX(-100%);
	}

	.sidebar-header {
		padding: var(--spacing-4) var(--spacing-6);
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
	}

	.sidebar-section {
		padding: var(--spacing-4) var(--spacing-4);
	}

	.sidebar-title {
		color: var(--color-text-secondary);
		font-size: 14px;
		font-weight: 500;
		margin-bottom: var(--spacing-3);
		padding-left: var(--spacing-4);
	}

	.sidebar-divider {
		height: 1px;
		background-color: var(--color-border-light);
		margin: var(--spacing-4) 0;
	}

	.sidebar .nav-link {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
		padding: var(--spacing-3) var(--spacing-4);
		color: var(--color-text-secondary);
		border-radius: var(--border-radius-md);
		transition: all var(--transition-fast);
		margin-bottom: var(--spacing-1);
	}

	.sidebar .nav-link:hover {
		background-color: var(--color-bg-secondary);
		color: var(--color-text-primary);
	}

	.sidebar .nav-link.active {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}

	.sidebar .nav-link i {
		font-size: 20px;
		width: 24px;
		text-align: center;
	}*/


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
|
*/
	#header{
		margin-bottom: var(--spacing-6);
		padding: var(--spacing-4) 0;
		background-color: var(--color-bg-primary);
		border-bottom: 1px solid var(--color-border-light);
	}
	#header .login{border-radius: var(--bs-btn-border-radius);}
	#header .user-item {
		padding: var(--spacing-3) var(--spacing-4);
		color: var(--color-text-secondary);
		border-radius: var(--border-radius-md);
		transition: all var(--transition-fast);
	}
	#header .user-item:hover {
		color: var(--color-text-primary);
		background-color: var(--color-bg-secondary);
	}
	/* Botón de perfil */
	#header .user-profile {
		display: inline-block;
		/*overflow: hidden;*/
		padding: 2px;
		background-color: var(--color-accent-purple-active);
		border-radius: var(--border-radius-full);
		transition: all var(--transition-fast);
	}
	#header .user-profile:hover {
		background-color: var(--color-accent-purple);
	}
	#header .user-profile img {
		display: inline-block;
		width: 36px;	height: 36px;
		font-size: .8em;	line-height: 36px;
		border-radius: var(--border-radius-full);
	}
	#header .user-status {
		width: 8px;
		height: 8px;
		margin-left: auto;
		border-radius: var(--border-radius-full);
		background-color: var(--color-accent-green);
	}
	#header .user-status.offline {
		background-color: var(--color-text-tertiary);
	}
	/* Título sección */
	#header .title {
		font-size: 24px;
		font-weight: 600;
	}
	/* Notif */
	#header .action-button {
		width: 40px;
		height: 40px;
		color: var(--color-text-secondary);
		border: none;
		border-radius: var(--border-radius-full);
		background-color: var(--color-bg-secondary);
		transition: all var(--transition-fast);
	}
	#header .action-button:hover {
		color: var(--color-text-primary);
		background-color: var(--color-bg-tertiary);
	}
	#header .notification-badge {
		position: relative;
	}
	#header .notification-badge::after {
		content: '';
		position: absolute;
		top: 8px;
		right: 8px;
		width: 8px;
		height: 8px;
		border-radius: var(--border-radius-full);
		background-color: var(--color-accent-red);
	}

	/*.user-list {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-1);
	}

	.user-item {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
		padding: var(--spacing-3) var(--spacing-4);
		color: var(--color-text-secondary);
		border-radius: var(--border-radius-md);
		transition: all var(--transition-fast);
	}

	.user-item:hover {
		background-color: var(--color-bg-secondary);
		color: var(--color-text-primary);
	}

	.user-avatar {
		width: 32px;
		height: 32px;
		border-radius: var(--border-radius-full);
		overflow: hidden;
		flex-shrink: 0;
	}

	.user-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.user-status {
		width: 8px;
		height: 8px;
		border-radius: var(--border-radius-full);
		background-color: var(--color-accent-green);
		margin-left: auto;
	}

	.user-status.offline {
		background-color: var(--color-text-tertiary);
	}

	.user-profile {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
		padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
		background-color: var(--color-bg-secondary);
		border-radius: var(--border-radius-full);
		transition: all var(--transition-fast);
	}

	.user-profile:hover {
		background-color: var(--color-bg-tertiary);
	}*/

	/* Main Content - Ajustado para coincidir con la versión original */
	/*.main-content {
		flex: 1;
		margin-left: 260px;
		padding: var(--spacing-6);
		transition: margin-left var(--transition-normal);
	}

	@media (max-width: 1024px) {
		.main-content {
			margin-left: 0;
		}
		
		.sidebar.collapsed {
			transform: translateX(-100%);
		}
	}*/

	/* Header y navegación superior */
	/*.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--spacing-4) 0;
		margin-bottom: var(--spacing-6);
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
	}

	.header-title {
		font-size: 24px;
		font-weight: 600;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
	}*/

			/*.search-bar {
				position: relative;
				width: 300px;
			}

			.search-input {
				width: 100%;
				padding: var(--spacing-3) var(--spacing-4);
				padding-left: var(--spacing-10);
				background-color: var(--color-bg-secondary);
				border: 1px solid var(--color-border-light);
				border-radius: var(--border-radius-full);
				color: var(--color-text-primary);
				font-size: 14px;
			}

			.search-icon {
				position: absolute;
				left: var(--spacing-4);
				top: 50%;
				transform: translateY(-50%);
				color: var(--color-text-tertiary);
				font-size: 16px;
			}*/

	/*.header-actions {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
	}

	.action-button {
		width: 40px;
		height: 40px;
		border-radius: var(--border-radius-full);
		background-color: var(--color-bg-secondary);
		color: var(--color-text-secondary);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all var(--transition-fast);
	}

	.action-button:hover {
		background-color: var(--color-bg-tertiary);
		color: var(--color-text-primary);
	}

	.notification-badge {
		position: relative;
	}

	.notification-badge::after {
		content: '';
		position: absolute;
		top: 8px;
		right: 8px;
		width: 8px;
		height: 8px;
		border-radius: var(--border-radius-full);
		background-color: var(--color-accent-red);
	}*/

			/*@media (max-width: 768px) {
				.search-bar {
					display: none;
				}
			}*/


/*
|--------------------------------------------------------------------------
| Pie de página
|--------------------------------------------------------------------------
|
*/
	#pie {color: var(--color-text-tertiary);}
	#pie i {color: #f00;}
	#pie a {color: #1580c7;}
	#pie a:hover {color: #279be8;}


/*
|--------------------------------------------------------------------------
| Hero section
|--------------------------------------------------------------------------
|
*/
	.hero {
		position: relative;	overflow: hidden;
		/*height: 400px;*/
		margin-bottom: var(--spacing-8);
		border-radius: var(--border-radius-lg);
		background-size: cover;	background-position: center;
	}
	.hero .overlay {
		padding: var(--spacing-8);
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
	}
	.hero .badge {
		padding: var(--spacing-2) var(--spacing-3);
		color: var(--color-text-primary);
		font-size: 14px;
		font-weight: 500;
		border-radius: var(--border-radius-full);
		background-color: rgba(255, 107, 0, 0.8);
	}
	.hero .title {font-size: 32px;	font-weight: 700;}
	.hero .meta {
		margin-bottom: var(--spacing-6);
	}
	.hero .meta-item {
		font-size: 14px;
		color: var(--color-text-secondary);
	}
	.hero .button {
		padding: var(--spacing-3) var(--spacing-6);
		font-weight: 600;
		border-radius: var(--border-radius-md);
		transition: all var(--transition-fast);
	}

	.hero .button-secondary {
		color: var(--color-text-primary);
		background-color: rgba(255, 255, 255, 0.1);
	}

	.hero .button-secondary:hover {background-color: rgba(255, 255, 255, 0.2);}

	/*.hero-section {
		position: relative;
		overflow: hidden;
		height: 400px;
		margin-bottom: var(--spacing-8);
		border-radius: var(--border-radius-lg);
	}

	.hero-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hero-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: var(--spacing-8);
	}

	.hero-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-2);
		padding: var(--spacing-2) var(--spacing-3);
		background-color: rgba(255, 107, 0, 0.8);
		border-radius: var(--border-radius-full);
		color: var(--color-text-primary);
		font-size: 14px;
		font-weight: 500;
		margin-bottom: var(--spacing-4);
		width: fit-content;
	}

	.hero-title {
		font-size: 32px;
		font-weight: 700;
		margin-bottom: var(--spacing-3);
	}

	.hero-meta {
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
		margin-bottom: var(--spacing-6);
	}

	.hero-meta-item {
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
		color: var(--color-text-secondary);
		font-size: 14px;
	}

	.hero-actions {
		display: flex;
		gap: var(--spacing-4);
	}

	.hero-button {
		padding: var(--spacing-3) var(--spacing-6);
		border-radius: var(--border-radius-md);
		font-weight: 600;
		transition: all var(--transition-fast);
	}

	.hero-button-primary {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}

	.hero-button-primary:hover {
		background-color: #7c4deb;
	}

	.hero-button-secondary {
		background-color: rgba(255, 255, 255, 0.1);
		color: var(--color-text-primary);
	}

	.hero-button-secondary:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}*/


/*
|--------------------------------------------------------------------------
| Secciones y títulos
|--------------------------------------------------------------------------
|
*/
	/*.section {
		margin-bottom: var(--spacing-8);
	}*/
	.section-header {
		margin-bottom: var(--spacing-6);
	}
	.section-title {
		font-size: 24px;
		font-weight: 600;
	}


/*
|--------------------------------------------------------------------------
| Cards y grids
|--------------------------------------------------------------------------
|
*/
	.cards3d .c {}

	.cards3d .c {
		position: relative;	display: inline-block;	/*overflow: hidden;*/	touch-action: none;	/*isolation: isolate;*/
		/*width: 71.5vw;	height: 100vw;*/
		/*margin: 20px;*/
		/*border-radius: 5%/3.5%;*/
		/*background-color: #040712;	background-image: var(--front);	background-size: cover;	background-repeat: no-repeat;	background-position: 50% 50%;*/
		/*box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);*/
		transform-origin: center;	will-change: transform, filter;
		transition: transform 0.5s ease, box-shadow 0.2s ease;
		/*z-index: 10;*/
	}
	/*.cards3d .c img {margin: -30px;}*/
	/*@media screen and (min-width: 600px) {
		.cards3d .c {
			width: clamp(12.9vw, 61vh, 18vw);
			height: clamp(18vw, 85vh, 25.2vw);
		}
	}*/
	.cards3d .c:hover {
		/*box-shadow: -20px -20px 30px -25px var(--color1), 20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.3), 0 55px 35px -20px rgba(0, 0, 0, 0.5);*/
	}
	/*.cards3d .c.pika {
		--color1: var(--pika1);
		--color2: var(--pika2);
		--front: var(--pikafront);
	}*/
	.cards3d .c:before,
	.cards3d .c:after {
		content: "";
		position: absolute;	top: 6.165%;	right: 10%;	bottom: 6.165%;	left: 10%;	opacity: 0.5;
		background-repeat: no-repeat;
		mix-blend-mode: color-dodge;
		transition: all 0.33s ease;
	}
	.cards3d .c:before {
		opacity: 0.5;
		background-position: 50% 50%;	background-size: 300% 300%;	background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
		filter: brightness(0.5) contrast(1);
		z-index: 1;
	}
	.cards3d .c:after {
		opacity: 0.75;
		background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);	background-position: 50% 50%;	background-size: 160%;	background-blend-mode: overlay;
		filter: brightness(1) contrast(1);	mix-blend-mode: color-dodge;
		transition: all 0.33s ease;
		z-index: 2;
	}
	.cards3d .c.active:after,
	.cards3d .c:hover:after {
		filter: brightness(1) contrast(1);
		opacity: 1;
	}
	.cards3d .c.active,
	.cards3d .c:hover {
		-webkit-animation: none;
		animation: none;
		transition: box-shadow 0.1s ease-out;
	}
	.cards3d .c.active:before,
	.cards3d .c:hover:before {
		opacity: 0.88;
		background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);	background-position: 50% 50%;	background-size: 250% 250%;
		filter: brightness(0.66) contrast(1.33);
		-webkit-animation: none;
		animation: none;
		transition: none;
	}
	.cards3d .c.active:before,
	.cards3d .c:hover:before,
	.cards3d .c.active:after,
	.cards3d .c:hover:after {
		-webkit-animation: none;
		animation: none;
		transition: none;
	}
	.cards3d .c.tier-5.active:before,
	.cards3d .c.tier-5:hover:before {
		background-image: linear-gradient(115deg, transparent 20%, var(--color1) 36%, var(--color2) 43%, var(--color3) 50%, var(--color4) 57%, var(--color5) 64%, transparent 80%);
	}
	.cards3d .c.animated {
		-webkit-animation: holoCard 12s ease 0s 1;
		animation: holoCard 12s ease 0s 1;
		transition: none;
	}
	.cards3d .c.animated:before {
		-webkit-animation: holoGradient 12s ease 0s 1;
		animation: holoGradient 12s ease 0s 1;
		transition: none;
	}
	.cards3d .c.animated:after {
		-webkit-animation: holoSparkle 12s ease 0s 1;
		animation: holoSparkle 12s ease 0s 1;
		transition: none;
	}

	@-webkit-keyframes holoSparkle {
		0%, 100% {
			opacity: 0.75;
			background-position: 50% 50%;
			filter: brightness(1.2) contrast(1.25);
		}
		5%, 8% {
			opacity: 1;
			background-position: 40% 40%;
			filter: brightness(0.8) contrast(1.2);
		}
		13%, 16% {
			opacity: 0.5;
			background-position: 50% 50%;
			filter: brightness(1.2) contrast(0.8);
		}
		35%, 38% {
			opacity: 1;
			background-position: 60% 60%;
			filter: brightness(1) contrast(1);
		}
		55% {
			opacity: 0.33;
			background-position: 45% 45%;
			filter: brightness(1.2) contrast(1.25);
		}
	}
	@keyframes holoSparkle {
		0%, 100% {
			opacity: 0.75;
			background-position: 50% 50%;
			filter: brightness(1.2) contrast(1.25);
		}
		5%, 8% {
			opacity: 1;
			background-position: 40% 40%;
			filter: brightness(0.8) contrast(1.2);
		}
		13%, 16% {
			opacity: 0.5;
			background-position: 50% 50%;
			filter: brightness(1.2) contrast(0.8);
		}
		35%, 38% {
			opacity: 1;
			background-position: 60% 60%;
			filter: brightness(1) contrast(1);
		}
		55% {
			opacity: 0.33;
			background-position: 45% 45%;
			filter: brightness(1.2) contrast(1.25);
		}
	}

	@-webkit-keyframes holoGradient {
		0%, 100% {
			opacity: 0.5;
			background-position: 50% 50%;
			filter: brightness(0.5) contrast(1);
		}
		5%, 9% {
			background-position: 100% 100%;
			opacity: 1;
			filter: brightness(0.75) contrast(1.25);
		}
		13%, 17% {
			background-position: 0% 0%;
			opacity: 0.88;
		}
		35%, 39% {
			background-position: 100% 100%;
			opacity: 1;
			filter: brightness(0.5) contrast(1);
		}
		55% {
			background-position: 0% 0%;
			opacity: 1;
			filter: brightness(0.75) contrast(1.25);
		}
	}
	@keyframes holoGradient {
		0%, 100% {
			opacity: 0.5;
			background-position: 50% 50%;
			filter: brightness(0.5) contrast(1);
		}
		5%, 9% {
			background-position: 100% 100%;
			opacity: 1;
			filter: brightness(0.75) contrast(1.25);
		}
		13%, 17% {
			background-position: 0% 0%;
			opacity: 0.88;
		}
		35%, 39% {
			background-position: 100% 100%;
			opacity: 1;
			filter: brightness(0.5) contrast(1);
		}
		55% {
			background-position: 0% 0%;
			opacity: 1;
			filter: brightness(0.75) contrast(1.25);
		}
	}

	@-webkit-keyframes holoCard {
		0%, 100% {
			transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
		}
		5%, 8% {
			transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
		}
		13%, 16% {
			transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
		}
		35%, 38% {
			transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
		}
		55% {
			transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
		}
	}
	@keyframes holoCard {
		0%, 100% {
			transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
		}
		5%, 8% {
			transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
		}
		13%, 16% {
			transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
		}
		35%, 38% {
			transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
		}
		55% {
			transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
		}
	}

	.cards3d .three-d-wrapper {
		perspective: 750px;
		isolation: isolate;
		transform: translate3d(0.1px, 0.1px, 0.1px);
	}

	.cards3d .c.tier-1:before,
	.cards3d .c.tier-1:after {background-image: none;}
	.cards3d .c.tier-2 {--color1: #54a29e;	--color2: #a79d66;}
	.cards3d .c.tier-2:after {background-image: none;}
	.cards3d .c.tier-3 {--color1: #fac;	--color2: #ddccaa;}
	.cards3d .c.tier-3:after {background-image: none;}
	.cards3d .c.tier-4 {--color1: #efb2fb;	--color2: #acc6f8;}
	.cards3d .c.tier-5 {--color1: #ec9bb6;	--color2: #ccac6f;	--color3: #69e4a5;	--color4: #8ec5d6;	--color5: #b98cce;}



	.card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: var(--spacing-6);
	}

	.card-detallada {
		background-color: var(--color-bg-card);
		border-radius: var(--border-radius-lg);
		overflow: hidden;
		transition: all var(--transition-fast);
		border: 1px solid var(--color-border-card);
	}

	.card-detallada:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
	}

	.card-image {
		position: relative;
		height: 180px;
		overflow: hidden;
	}

	.card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.card-badge {
		position: absolute;
		top: var(--spacing-3);
		left: var(--spacing-3);
		padding: var(--spacing-1) var(--spacing-3);
		background-color: rgba(255, 107, 0, 0.8);
		border-radius: var(--border-radius-full);
		color: var(--color-text-primary);
		font-size: 12px;
		font-weight: 500;
	}

	.card-content {
		padding: var(--spacing-4);
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: var(--spacing-2);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.card-meta {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
		margin-bottom: var(--spacing-3);
	}

	.card-meta-item {
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
		color: var(--color-text-secondary);
		font-size: 12px;
	}

	.card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--spacing-3) var(--spacing-4);
		border-top: 1px solid var(--color-border-card);
	}

	.card-user {
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
	}

	.card-user-avatar {
		width: 24px;
		height: 24px;
		border-radius: var(--border-radius-full);
		overflow: hidden;
	}

	.card-user-name {
		font-size: 12px;
		color: var(--color-text-secondary);
	}

	.card-stats {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
	}

	.card-stat {
		display: flex;
		align-items: center;
		gap: var(--spacing-1);
		color: var(--color-text-secondary);
		font-size: 12px;
	}

	/* AMV Card específico */
	.amv-card {
		background-color: var(--color-bg-card);
		border-radius: var(--border-radius-lg);
		overflow: hidden;
		transition: all var(--transition-fast);
		border: 1px solid var(--color-border-card);
		display: flex;
		flex-direction: column;
	}

	.amv-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
	}

	.amv-card-image {
		position: relative;	overflow: hidden;
		height: 320px; /* Proporción para cartas AMV (720x1280) */
		background: url('../assets/cardgame/respaldo.png');	background-position: center;	background-size: cover;
	}

	.amv-card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		background-color: rgba(15, 15, 15, 0.6);
	}

	.amv-card-tier {
		position: absolute;
		top: var(--spacing-3);
		right: var(--spacing-3);
		width: 32px;
		height: 32px;
		border-radius: var(--border-radius-full);
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--color-accent-yellow);
		color: var(--color-bg-primary);
		font-weight: 700;
		font-size: 14px;
	}

	.amv-card-tier.legendary {
		background-color: var(--color-accent-yellow);
	}

	.amv-card-tier.epic {
		background-color: var(--color-accent-purple);
	}

	.amv-card-tier.rare {
		background-color: var(--color-accent-blue);
	}

	.amv-card-tier.uncommon {
		background-color: var(--color-accent-green);
	}

	.amv-card-tier.common {
		background-color: var(--color-text-secondary);
	}

	.amv-card-content {
		padding: var(--spacing-4);
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	.amv-card-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: var(--spacing-2);
	}

	.amv-card-title a {transition: all var(--transition-fast);}

	.amv-card-title a:hover {color: var(--color-accent-purple);}

	.amv-card-meta {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
		margin-bottom: var(--spacing-3);
	}

	.amv-card-meta-item {
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
		color: var(--color-text-secondary);
		font-size: 13px;
	}

	.amv-card-meta-item i {
		width: 16px;
		text-align: center;
		color: var(--color-text-tertiary);
	}

	.amv-card-rating {
		display: flex;
		align-items: center;
		gap: var(--spacing-1);
		margin-top: auto;
	}

	.amv-card-stars {
		display: flex;
		gap: 2px;
		color: var(--color-accent-yellow);
		font-size: 14px;
	}

	.amv-card-score {
		margin-left: auto;
		font-weight: 600;
		color: var(--color-accent-purple);
	}

	.amv-card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--spacing-3) var(--spacing-4);
		border-top: 1px solid var(--color-border-card);
	}

	.amv-card-contest {
		font-size: 12px;
		color: var(--color-text-secondary);
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
	}

	.amv-card-contest i {
		color: var(--color-accent-yellow);
	}

	.amv-card-year {
		font-size: 12px;
		color: var(--color-text-secondary);
	}


/*
|--------------------------------------------------------------------------
| Módulos
|--------------------------------------------------------------------------
|
*/
	.module {
		margin-bottom: var(--spacing-6);	padding: var(--spacing-6);
		border-radius: var(--border-radius-lg);
		background-color: var(--color-bg-secondary);
	}

	.module h2 {font-size: 28px;}
	.module h3 {font-size: 20px;}

	.module small {
		display: inline-block;
		font-size: 14px; color: var(--color-text-tertiary);
	}

	.module .text {
		display: block;
		font-size: 16px;
	}

	/* tier_icon: ["🔸", "✨", "⭐", "💠", "🌸", "🏵️"] */
	.tier-1 {color: var(--color-tier-1) !important}
	.tier-2 {color: var(--color-tier-2) !important}
	.tier-3 {color: var(--color-tier-3) !important}
	.tier-4 {color: var(--color-tier-4) !important}
	.tier-5 {color: var(--color-tier-5) !important}
	.tier-6 {color: var(--color-tier-6) !important}

	.similarcards .channel-image {
		width: 60px;	height: 80px;
		border-radius: var(--border-radius-sm);
	}


/*
|--------------------------------------------------------------------------
| Editores que sigues
|--------------------------------------------------------------------------
|
*/
	.followed .add,
	.followed .avatar {
		width: 80px; height: 80px;
		margin: 0 auto var(--spacing-2);
		border: 2px solid var(--color-text-tertiary);	border-radius: var(--border-radius-full);
		background-size: cover;	background-position: center;
	}
	.followed .add {
		font-size: 24px;
		border-color: var(--color-accent-purple);
		background-color: var(--color-accent-purple);
	}
	.followed .avatar {overflow: hidden;}

	.followed .avatar.purple {border-color: var(--color-accent-purple);}
	.followed .avatar.blue {border-color: var(--color-accent-blue);}
	.followed .avatar.green {border-color: var(--color-accent-green);}
	.followed .avatar.orange {border-color: var(--color-accent-orange);}
	.followed .avatar.pink {border-color: var(--color-accent-pink);}
	.followed .avatar.red {border-color: var(--color-accent-red);}
	.followed .avatar.yellow {border-color: var(--color-accent-yellow);}

	.followed .name {font-size: 14px; color: var(--color-text-primary);}

	.followed .data {font-size: 12px; color: var(--color-text-tertiary);}

	.followed .text {font-size: 14px; color: var(--color-text-secondary);}

	.followed span {display: block;}


/*
|--------------------------------------------------------------------------
| Categorías populares
|--------------------------------------------------------------------------
|
*/
	.channel-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: var(--spacing-4);
	}

	.channel-card {
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
		padding: var(--spacing-3) var(--spacing-4);
		background-color: var(--color-bg-card);
		border-radius: var(--border-radius-md);
		transition: all var(--transition-fast);
	}

	.channel-card:hover {
		background-color: var(--color-bg-tertiary);
	}

	.channel-image {
		width: 64px;
		height: 64px; min-height: 100%;
		border-radius: var(--border-radius-md);
		overflow: hidden;
		flex-shrink: 0;
	}

	.channel-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.channel-info {
		flex-grow: 1;
	}

	.channel-name {
		margin-bottom: var(--spacing-1);
	}

	.channel-category {
		font-size: 12px;
		color: var(--color-text-secondary);
		margin-bottom: var(--spacing-2);
	}

	.channel-stats {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
	}

	.channel-stat {
		display: flex;
		align-items: center;
		gap: var(--spacing-1);
		color: var(--color-text-secondary);
		font-size: 12px;
	}


/*
|--------------------------------------------------------------------------
| Sección - Tendencias
|--------------------------------------------------------------------------
|
*/
	.trending-header {
		background-color: var(--color-bg-secondary);
		border-radius: var(--border-radius-lg);
		padding: var(--spacing-6);
		margin-bottom: var(--spacing-6);
	}

	.trending-tabs .nav-link {
		color: var(--color-text-secondary);
		border: none;
		padding: var(--spacing-3) var(--spacing-6);
		border-radius: var(--border-radius-md);
		transition: all var(--transition-fast);
	}

	.trending-tabs .nav-link:hover {
		color: var(--color-text-primary);
	}

	.trending-tabs .nav-link.active {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}

	.trending-filter {
		background-color: var(--color-bg-tertiary);
		border-radius: var(--border-radius-md);
		padding: var(--spacing-2) var(--spacing-4);
		color: var(--color-text-secondary);
		transition: all var(--transition-fast);
	}

	.trending-filter:hover {
		background-color: var(--color-bg-tertiary);
		color: var(--color-text-primary);
	}

	.trending-filter.active {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}


/*
|--------------------------------------------------------------------------
| Sección - Abrir Sobres
|--------------------------------------------------------------------------
|
*/
	.pack-card {
		background-color: var(--color-bg-secondary);
		border-radius: var(--border-radius-lg);
		overflow: hidden;
		transition: all var(--transition-normal);
	}

	.pack-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
	}

	.pack-image {
		height: 200px;
		position: relative;
		overflow: hidden;
	}

	.pack-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--transition-normal);
	}

	.pack-card:hover .pack-image img {
		transform: scale(1.05);
	}

	.pack-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: var(--spacing-6);
	}

	.pack-badge {
		position: absolute;
		top: var(--spacing-4);
		right: var(--spacing-4);
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
		padding: var(--spacing-1) var(--spacing-3);
		border-radius: var(--border-radius-full);
		font-size: 0.875rem;
		font-weight: 600;
	}

	.pack-content {
		padding: var(--spacing-6);
	}

	.pack-stats {
		display: flex;
		gap: var(--spacing-4);
		margin-bottom: var(--spacing-4);
	}

	.pack-stat {
		background-color: var(--color-bg-tertiary);
		border-radius: var(--border-radius-md);
		padding: var(--spacing-2) var(--spacing-4);
		text-align: center;
		flex-grow: 1;
	}

	.pack-stat-value {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--color-accent-purple);
		margin-bottom: var(--spacing-1);
	}

	.pack-stat-label {
		font-size: 0.75rem;
		color: var(--color-text-secondary);
	}

	.pack-progress {
		margin-bottom: var(--spacing-6);
	}

	.pack-progress-label {
		display: flex;
		justify-content: space-between;
		margin-bottom: var(--spacing-2);
	}

	.pack-progress-bar {
		height: 8px;
		background-color: var(--color-bg-tertiary);
		border-radius: var(--border-radius-full);
		overflow: hidden;
	}

	.pack-progress-value {
		height: 100%;
		background-color: var(--color-accent-purple);
		border-radius: var(--border-radius-full);
	}


/*
|--------------------------------------------------------------------------
| Sección - Intercambios
|--------------------------------------------------------------------------
|
*/
	.trade-card {
		background-color: var(--color-bg-secondary);
		border-radius: var(--border-radius-lg);
		overflow: hidden;
		transition: all var(--transition-normal);
	}

	.trade-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
	}

	.trade-header {
		padding: var(--spacing-6);
		border-bottom: 1px solid var(--color-border-light);
	}

	.trade-status {
		display: inline-flex;
		align-items: center;
		padding: var(--spacing-1) var(--spacing-3);
		border-radius: var(--border-radius-full);
		font-size: 0.75rem;
		font-weight: 600;
	}

	.trade-status.active {
		background-color: var(--color-accent-green);
		color: #000;
	}

	.trade-status.pending {
		background-color: var(--color-accent-yellow);
		color: #000;
	}

	.trade-status.completed {
		background-color: var(--color-accent-blue);
		color: #fff;
	}

	.trade-content {
		padding: var(--spacing-6);
	}

	.trade-cards {
		display: flex;
		justify-content: space-between;
		gap: var(--spacing-4);
		margin-bottom: var(--spacing-6);
	}

	.trade-side {
		flex: 1;
	}

	.trade-side-header {
		display: flex;
		align-items: center;
		margin-bottom: var(--spacing-4);
	}

	.trade-side-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: var(--spacing-3);
	}

	.trade-side-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.trade-side-name {
		font-weight: 600;
	}

	.trade-card-list {
		background-color: var(--color-bg-tertiary);
		border-radius: var(--border-radius-md);
		padding: var(--spacing-4);
	}

	.trade-card-item {
		display: flex;
		align-items: center;
		padding: var(--spacing-2);
		border-radius: var(--border-radius-sm);
		transition: all var(--transition-fast);
	}

	.trade-card-item:hover {
		background-color: var(--color-bg-secondary);
	}

	.trade-card-image {
		width: 40px;
		height: 60px;
		border-radius: var(--border-radius-sm);
		overflow: hidden;
		margin-right: var(--spacing-3);
	}

	.trade-card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.trade-card-info {
		flex-grow: 1;
	}

	.trade-card-title {
		font-size: 0.875rem;
		font-weight: 600;
		margin-bottom: var(--spacing-1);
	}

	.trade-card-rarity {
		font-size: 0.75rem;
	}

	.trade-card-rarity.legendary {
		color: var(--color-accent-yellow);
	}

	.trade-card-rarity.epic {
		color: var(--color-accent-purple);
	}

	.trade-card-rarity.rare {
		color: var(--color-accent-blue);
	}

	.trade-card-rarity.uncommon {
		color: var(--color-accent-green);
	}

	.trade-card-rarity.common {
		color: var(--color-text-tertiary);
	}

	.trade-divider {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.trade-divider-line {
		width: 2px;
		height: 100px;
		background-color: var(--color-border-light);
		margin: var(--spacing-4) 0;
	}

	.trade-divider-icon {
		width: 40px;
		height: 40px;
		background-color: var(--color-accent-purple);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
	}

	.trade-footer {
		padding: var(--spacing-6);
		border-top: 1px solid var(--color-border-light);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.trade-time {
		font-size: 0.875rem;
		color: var(--color-text-secondary);
	}


/*
|--------------------------------------------------------------------------
| Sección - Perfil
|--------------------------------------------------------------------------
|
*/
	.profile-header {
		background-color: var(--color-bg-secondary);
		border-radius: var(--border-radius-lg);
		overflow: hidden;
		margin-bottom: var(--spacing-8);
	}

	.profile-cover {
		position: relative;
		height: 240px;
	}

	.profile-cover-image {
		width: 100%;	height: 140px;
		border-radius: var(--border-radius-sm);
		background: linear-gradient(90deg, rgba(16,16,28,1) 0%, var(--color-accent-purple-active) 50%, rgba(16,16,28,1) 100%);
		background-size: cover;	background-position: center;
	}

	.profile-avatar img,
	.profile-avatar .img {
		display: inline-block;	/*object-fit: cover;*/
		width: 120px;	height: 120px;
		border: 4px solid var(--color-accent-purple);	border-radius: 50%;
		background-image: url("../assets/cardgame/avatars/11.png");	background-size: cover;	background-position: center;
	}

	.profile-avatar .discord-badge {
		width: 2em;
		text-align: center;	line-height: 2em;
	}

	.profile-info {
		padding-top: 80px;
		/*padding-bottom: var(--spacing-6);*/
		text-align: center;
	}

	.profile-name {
		font-size: 24px;
		font-weight: 700;
		margin-bottom: var(--spacing-1);
	}

	.profile-username {
		color: var(--color-text-secondary);
		margin-bottom: var(--spacing-6);
	}

	/*.profile-stats {
		display: flex;
		justify-content: center;
		gap: var(--spacing-8);
		margin-bottom: var(--spacing-6);
	}*/

	/*.stat-item {
		text-align: center;
	}*/

	.stat-value {
		font-size: 24px;
		font-weight: 700;
		margin-bottom: var(--spacing-1);
	}

	.stat-label {
		color: var(--color-text-secondary);
		font-size: 14px;
	}

	.profile-actions {
		display: flex;
		justify-content: center;
		gap: var(--spacing-3);
	}


/*
|--------------------------------------------------------------------------
| Sección - Visualizador 3D de cartas
|--------------------------------------------------------------------------
|
*/
	#card3d {margin-top: -20px;}
	#card3d .three-d-wrapper img {height: 66vh;}
	#card3d .overlay {
		position: absolute;	top: 6.165%;	right: 10%;	bottom: 6.165%;	left: 10%;
		background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.8));
	}
	#card3d .holographic {top: 6.165%;	right: 10%;	bottom: 6.165%;	left: 10%;}



	.card-viewer-3d {
		position: relative;
		height: 600px;
		display: flex;
		align-items: center;
		justify-content: center;
		perspective: 1000px;
		margin-bottom: var(--spacing-8);
	}

	.card-3d {
		position: relative;
		width: 360px; /* Proporción para cartas AMV (720x1280) */
		height: 540px;
		transform-style: preserve-3d;
		transition: transform var(--transition-normal);
	}

	.card-3d-inner {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: var(--border-radius-lg);
		box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
		overflow: hidden;
	}

	.card-3d-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.card-3d-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.8));
	}

	.card-3d-info {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: var(--spacing-6);
		color: var(--color-text-primary);
	}

	.card-3d-title {
		font-size: 24px;
		font-weight: 700;
		margin-bottom: var(--spacing-3);
	}

	.card-3d-meta {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
	}

	.card-3d-meta-item {
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
		font-size: 14px;
	}

	.card-viewer-controls {
		position: absolute;
		bottom: var(--spacing-6);
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		gap: var(--spacing-4);
	}

	.viewer-control {
		padding: var(--spacing-2) var(--spacing-4);
		background-color: rgba(0, 0, 0, 0.5);
		border: 1px solid var(--color-border-light);
		border-radius: var(--border-radius-md);
		color: var(--color-text-primary);
		font-size: 14px;
		transition: all var(--transition-fast);
	}

	.viewer-control:hover {
		background-color: rgba(139, 92, 246, 0.3);
		border-color: var(--color-accent-purple);
	}

	/* Holographic effect */
	.holographic {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			125deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.1) 10%,
			rgba(255, 255, 255, 0.3) 20%,
			rgba(255, 255, 255, 0.1) 30%,
			rgba(255, 255, 255, 0) 40%,
			rgba(255, 255, 255, 0) 60%,
			rgba(255, 255, 255, 0.1) 70%,
			rgba(255, 255, 255, 0.3) 80%,
			rgba(255, 255, 255, 0.1) 90%,
			rgba(255, 255, 255, 0) 100%
		);
		background-size: 200% 200%;
		pointer-events: none;
		animation: holographic 5s ease infinite;
	}

	@keyframes holographic {
		0% { background-position: 0% 0%; }
		50% { background-position: 100% 100%; }
		100% { background-position: 0% 0%; }
	}


/*
|--------------------------------------------------------------------------
| Formularios
|--------------------------------------------------------------------------
|
*/
	.form-control {
		background-color: var(--color-bg-tertiary);
		border-color: var(--color-border-light);
		color: var(--color-text-primary);
	}

	.form-control:focus {
		background-color: var(--color-bg-tertiary);
		border-color: var(--color-accent-purple);
		color: var(--color-text-primary);
		box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
	}

	.form-control::placeholder {
		color: var(--color-text-tertiary);
	}

	.form-select {
		background-color: var(--color-bg-tertiary);
		border-color: var(--color-border-light);
		color: var(--color-text-primary);
	}

	.form-select:focus {
		background-color: var(--color-bg-tertiary);
		border-color: var(--color-accent-purple);
		color: var(--color-text-primary);
		box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
	}


/*
|--------------------------------------------------------------------------
| Paginación
|--------------------------------------------------------------------------
|
*/
	.pagination {
		display: flex;
		justify-content: center;
		margin-top: var(--spacing-8);
	}

	.page-item {
		margin: 0 var(--spacing-1);
	}

	.page-link {
		background-color: var(--color-bg-tertiary);
		border-color: var(--color-border-light);
		color: var(--color-text-primary);
		border-radius: var(--border-radius-md);
		padding: var(--spacing-2) var(--spacing-4);
		transition: all var(--transition-fast);
	}

	.page-link:hover {
		background-color: var(--color-accent-purple);
		border-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}

	.page-item.active .page-link {
		background-color: var(--color-accent-purple);
		border-color: var(--color-accent-purple);
	}

	.page-item.disabled .page-link {
		background-color: var(--color-bg-tertiary);
		border-color: var(--color-border-light);
		color: var(--color-text-tertiary);
	}

/* Responsive */
/*@media (max-width: 991.98px) {
	.sidebar {
		transform: translateX(-100%);
	}
	
	.sidebar.show {
		transform: translateX(0);
	}
	
	.main-content {
		margin-left: 0;
	}
}*/


/*
|--------------------------------------------------------------------------
| Sistema de notificaciones
|--------------------------------------------------------------------------
|
*/
	.notification-toast {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 1050;
		width: 300px;
		animation: slideIn 0.3s ease;
	}

	.notification-toast + .notification-toast {
		bottom: 90px;
	}

	.notification-toast + .notification-toast + .notification-toast {
		bottom: 160px;
	}

	@keyframes slideIn {
		from {
			transform: translateX(100%);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	/* Animaciones */
	.fade-in {
		animation: fadeIn var(--transition-normal);
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}


/*
|--------------------------------------------------------------------------
| Ajustes para Bootstrap
|--------------------------------------------------------------------------
|
*/
	.dropdown-menu {
		background-color: var(--color-bg-secondary);
		border-color: var(--color-border-light);
	}

	.dropdown-item {
		color: var(--color-text-secondary);
	}

	.dropdown-item:hover, .dropdown-item:focus {
		background-color: var(--color-bg-tertiary);
		color: var(--color-text-primary);
	}

	.dropdown-item.active {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}

	.modal-content {
		background-color: var(--color-bg-secondary);
		border-color: var(--color-border-light);
	}

	.modal-header, .modal-footer {
		border-color: var(--color-border-light);
	}

	.table {
		color: var(--color-text-primary);
	}

	.table-dark {
		--bs-table-bg: var(--color-bg-tertiary);
		--bs-table-border-color: var(--color-border-light);
	}

	.table-dark th, .table-dark td {
		border-color: var(--color-border-light) !important;
	}

	.table-hover tbody tr:hover {
		background-color: var(--color-bg-secondary);
	}

	.nav-tabs {
		border-bottom: none;
	}

	.nav-pills .nav-link {
		color: var(--color-text-secondary);
	}

	.nav-pills .nav-link.active {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}

	.badge {
		font-weight: 600;
	}

	.rounded-4 {
		border-radius: var(--border-radius-lg) !important;
	}

	.rounded-pill {
		border-radius: var(--border-radius-full) !important;
	}

	/* Ajustes para inputs de Bootstrap */
	.form-control, .form-select, .btn {
		font-size: 14px;
		padding: var(--spacing-2) var(--spacing-4);
	}

	.form-control-lg, .form-select-lg, .btn-lg {
		font-size: 16px;
		padding: var(--spacing-3) var(--spacing-6);
	}

	.form-control-sm, .form-select-sm, .btn-sm {
		font-size: 12px;
		padding: var(--spacing-1) var(--spacing-3);
	}

	/* Ajustes para botones de Bootstrap */
	.btn {
		font-weight: 500;
		border-radius: var(--border-radius-md);
	}

	.btn-lg {
		border-radius: var(--border-radius-lg);
	}

	.btn-sm {
		border-radius: var(--border-radius-sm);
	}

	.btn-dark {
		background-color: var(--color-bg-tertiary);
		border-color: var(--color-border-light);
	}

	.btn-dark:hover, .btn-dark:focus {
		background-color: var(--color-bg-secondary);
		border-color: var(--color-border-light);
	}

	/* Ajustes para tarjetas de Bootstrap */
	.card {
		background-color: var(--color-bg-card);
		border-color: var(--color-border-card);
	}

	.card-header, .card-footer {
		background-color: rgba(0, 0, 0, 0.1);
		border-color: var(--color-border-card);
	}

	/* Ajustes para alertas de Bootstrap */
	.alert {
		border-radius: var(--border-radius-md);
	}

	.alert-primary {
		background-color: rgba(139, 92, 246, 0.2);
		border-color: rgba(139, 92, 246, 0.3);
		color: var(--color-accent-purple);
	}

	.alert-success {
		background-color: rgba(16, 185, 129, 0.2);
		border-color: rgba(16, 185, 129, 0.3);
		color: var(--color-accent-green);
	}

	.alert-warning {
		background-color: rgba(245, 158, 11, 0.2);
		border-color: rgba(245, 158, 11, 0.3);
		color: var(--color-accent-yellow);
	}

	.alert-danger {
		background-color: rgba(239, 68, 68, 0.2);
		border-color: rgba(239, 68, 68, 0.3);
		color: var(--color-accent-red);
	}

	/* Ajustes para modales de Bootstrap */
	.modal-backdrop {
		background-color: #000;
	}

	.modal-backdrop.show {
		opacity: 0.7;
	}

	.close {
		color: var(--color-text-primary);
	}

	/* Ajustes para tooltips de Bootstrap */
	.tooltip {
		--bs-tooltip-color: var(--color-text-primary);
		--bs-tooltip-bg: var(--color-accent-purple);
		font-size: 12px;
	}

	.tooltip-inner {border-radius: var(--border-radius-sm);}

	/*.bs-tooltip-top .tooltip-arrow::before {
		border-top-color: var(--color-bg-tertiary);
	}

	.bs-tooltip-end .tooltip-arrow::before {
		border-right-color: var(--color-bg-tertiary);
	}

	.bs-tooltip-bottom .tooltip-arrow::before {
		border-bottom-color: var(--color-bg-tertiary);
	}

	.bs-tooltip-start .tooltip-arrow::before {
		border-left-color: var(--color-bg-tertiary);
	}*/

	/* Ajustes para popovers de Bootstrap */
	.popover {
		background-color: var(--color-bg-secondary);
		border-color: var(--color-border-light);
	}

	.popover-header {
		background-color: var(--color-bg-tertiary);
		border-bottom-color: var(--color-border-light);
	}

	.popover-body {
		color: var(--color-text-primary);
	}

	.bs-popover-top .popover-arrow::before {
		border-top-color: var(--color-border-light);
	}

	.bs-popover-top .popover-arrow::after {
		border-top-color: var(--color-bg-secondary);
	}

	.bs-popover-end .popover-arrow::before {
		border-right-color: var(--color-border-light);
	}

	.bs-popover-end .popover-arrow::after {
		border-right-color: var(--color-bg-secondary);
	}

	.bs-popover-bottom .popover-arrow::before {
		border-bottom-color: var(--color-border-light);
	}

	.bs-popover-bottom .popover-arrow::after {
		border-bottom-color: var(--color-bg-tertiary);
	}

	.bs-popover-start .popover-arrow::before {
		border-left-color: var(--color-border-light);
	}

	.bs-popover-start .popover-arrow::after {
		border-left-color: var(--color-bg-secondary);
	}

	/* Ajustes para acordeones de Bootstrap */
	.accordion-item {
		background-color: var(--color-bg-secondary);
		border-color: var(--color-border-light);
	}

	.accordion-button {
		background-color: var(--color-bg-tertiary);
		color: var(--color-text-primary);
	}

	.accordion-button:not(.collapsed) {
		background-color: var(--color-accent-purple);
		color: var(--color-text-primary);
	}

	.accordion-button:focus {
		border-color: var(--color-accent-purple);
		box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
	}

	.accordion-button::after {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	}

	/* Ajustes para spinners de Bootstrap */
	.spinner-border, .spinner-grow {
		color: var(--color-accent-purple);
	}

	/* Ajustes para progress bars de Bootstrap */
	.progress {
		background-color: var(--color-bg-tertiary);
	}

	.progress-bar {
		background-color: var(--color-accent-purple);
	}

	/* Ajustes para list groups de Bootstrap */
	.list-group-item {
		background-color: var(--color-bg-secondary);
		border-color: var(--color-border-light);
		color: var(--color-text-primary);
	}

	.list-group-item.active {
		background-color: var(--color-accent-purple);
		border-color: var(--color-accent-purple);
	}

	.list-group-item-action:hover, .list-group-item-action:focus {
		background-color: var(--color-bg-tertiary);
		color: var(--color-text-primary);
	}

	/* Ajustes para breadcrumbs de Bootstrap */
	.breadcrumb {
		background-color: var(--color-bg-tertiary);
		border-radius: var(--border-radius-md);
		padding: var(--spacing-2) var(--spacing-4);
	}

	.breadcrumb-item + .breadcrumb-item::before {
		color: var(--color-text-tertiary);
	}

	.breadcrumb-item.active {
		color: var(--color-text-secondary);
	}

	/* Ajustes para badges de Bootstrap */
	.badge {
		font-weight: 600;
		padding: var(--spacing-1) var(--spacing-2);
	}

	.badge-primary {
		background-color: var(--color-accent-purple);
	}

	.badge-secondary {
		background-color: var(--color-text-tertiary);
	}

	.badge-success {
		background-color: var(--color-accent-green);
	}

	.badge-danger {
		background-color: var(--color-accent-red);
	}

	.badge-warning {
		background-color: var(--color-accent-yellow);
		color: #000;
	}

	.badge-info {
		background-color: var(--color-accent-blue);
	}

	.badge-light {
		background-color: var(--color-bg-tertiary);
		color: var(--color-text-primary);
	}

	.badge-dark {
		background-color: var(--color-bg-primary);
	}


/*
|--------------------------------------------------------------------------
| Responsivo
|--------------------------------------------------------------------------
|
*/
	/* Extra small devices (portrait phones, less than 576px) */
	@media (max-width: 575px) {
		#sidebar{position: fixed;	right: 100%;}
		#sidebar .menu-toggle{display: none;}
		#sidebar nav{position: fixed;	bottom: 0; left: 0;	border-top: 1px solid var(--color-border-light);	background-color: var(--color-bg-primary);}
		#sidebar nav .nav-link{margin-bottom: 0;}
		#sidebar.active .nav-link::after,
		#sidebar.active .nav-link::before {display: none;}

		/* Logo en mobiles */
		#sidebar .logo > div {
			position: fixed;	top: 0;	left: 0;
			font-size: .6em;	line-height: 1em;
			border-bottom: 1px solid var(--color-border-light);
			background-color: var(--color-bg-primary);
		}
		#sidebar .logo > div img {
			width: 18px;
			border-radius: 100%;
		}
		#sidebar .logo > div span {
			opacity: 1;
			max-width: 300px;
			vertical-align: middle;
		}

		/* Header */
		#header {padding-top: var(--spacing-8); padding-bottom: var(--spacing-2);}
		#header .title, .section-title {font-size: 18px;}
	}

	/* Small devices (landscape phones, 576px and up) */
	@media (min-width: 576px) {
		/* Perfil */
		.profile-cover-image {height: 180px;}
	}

	/* Medium devices (tablets, 768px and up) */
	@media (min-width: 768px) {
		/* Perfil */
		.profile-cover-image {height: 220px;}
	}

	/* Large devices (desktops, 992px and up) */
	@media (min-width: 992px) {
		/* Perfil */
		.profile-cover-image {height: 240px;}
	}

	/* X-Large devices (large desktops, 1200px and up) */
	@media (min-width: 1200px) {}

	/* XX-Large devices (larger desktops, 1400px and up) */
	@media (min-width: 1400px) {}