/* Variables CSS - Paleta WENDY PLATA (Gamer Girl Pink/Cyan) */
:root {
	/* Colores de la marca (Basado en paneles de Twitch) */
	--color-primary-dark: #FF69B4; /* Rosa Neón (Principal) */
	--color-secondary-light: #00F0FF; /* Cian Eléctrico (Acento) */
	--color-background-base: #FFFFFF; /* Blanco (Para avatar) */
	--color-background-soft: #1C1C2A; /* Fondo del body (Indigo Oscuro) */
	--color-text-main: #FFFFFF;	/* Texto principal: Blanco */
	--color-text-subtle: #AAAAAA; /* Gris claro para textos secundarios */
	--color-text-dark: #1C1C2A; /* Texto oscuro para botones claros */
	
	/* Fuentes Nuevas */
	--font-heading: 'Fredoka One', cursive;
	--font-body: 'Montserrat', sans-serif;
	--font-subtitle: 'Montserrat', sans-serif;
	--font-buttons: 'Fredoka One', cursive;

	--color-background-dark-rgb: 28, 28, 42; /* Indigo Oscuro */
}
/* ------------------- AJUSTES GENERALES Y TIPOGRAFÍA ------------------- */
body {
	font-family: var(--font-body);
	margin: 0;
	padding: 0;
	background-color: var(--color-background-soft); /* Fondo Indigo */
	
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
/* Capa de fondo (Sutil) */
	.background-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		
		background-image: url('assets/img/background.jpg'); /* USA TU NUEVO FONDO */
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		
		/* Filtros: Oscuro y Tinte Indigo */
		filter: brightness(0.6) contrast(1.0) grayscale(20%);	
		background-blend-mode: multiply;
		opacity: 0.8; 
	}
	.content-box {
		max-width: 500px;	
		width: 100%;
		background-color: rgba(28, 28, 42, 0.85); /* Fondo de caja: Indigo Semi-Transparente */
		backdrop-filter: blur(5px);
		border-radius: 15px;
		/* Bordes y sombras Rosa y Cian */
		border: 3px solid var(--color-primary-dark);	
		box-shadow: 0 0 15px rgba(255, 105, 180, 0.5), 0 0 30px rgba(0, 240, 255, 0.4);	
		text-align: center;
		z-index: 1;
	}
	.glitch-overlay {
		opacity: 0;	
	}
/* ------------------- PERFIL ------------------- */
	@keyframes pulse-gamer {	
		0% { transform: scale(1); box-shadow: 0 0 10px var(--color-primary-dark), 0 0 20px var(--color-secondary-light); }
		50% { transform: scale(1.03); box-shadow: 0 0 20px var(--color-primary-dark), 0 0 40px var(--color-secondary-light); }
		100% { transform: scale(1); box-shadow: 0 0 10px var(--color-primary-dark), 0 0 20px var(--color-secondary-light); }
	}
	#profileAvatar {
		width: 120px;	
		height: 120px;
		object-fit: cover;
		border: 5px solid var(--color-secondary-light); /* Borde Cian */
		box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 30px rgba(0, 240, 255, 0.7);
		transition: transform 0.3s ease;
		background-color: var(--color-background-base);
	}
	#profileAvatar:hover {
		transform: scale(1.05);
		animation: pulse-gamer 1.5s infinite ease-in-out;
		cursor: pointer;
	}
/* ------------------- TÍTULOS ------------------- */
	h1 {
		font-family: var(--font-heading); /* Fredoka One */
		color: var(--color-secondary-light); /* Cian */
		font-size: 3em;
		font-weight: 400; /* Fredoka One es bold por defecto */
		text-shadow: 0 0 10px var(--color-primary-dark), 0 0 20px var(--color-primary-dark);
		margin-top: 10px !important;
	}
	.subtitle {
		font-family: var(--font-subtitle); /* Montserrat */
		color: var(--color-primary-dark);	/* Rosa */
		font-size: 1.1em;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
		font-weight: 700;
	}
	.text-white-50 { /* Sobrescribimos la clase de Bootstrap (Base Isa) */
		color: var(--color-text-subtle) !important; /* Gris */
		font-size: 1em;
	}
	.stats-line {
		color: var(--color-text-main); /* Blanco */
		border-top: 1px dashed var(--color-primary-dark);
		border-bottom: 1px dashed var(--color-primary-dark);
		padding: 10px 0;
	}
	.color-primary { color: var(--color-primary-dark) !important; }
	.color-secondary { color: var(--color-secondary-light) !important; }
/* ------------------- BOTONES DE ENLACES (Rosa y Cian) ------------------- */
	.link-button {
		font-family: var(--font-buttons); /* Fredoka One */
		font-weight: 400;
		border-radius: 50px; /* Botones Redondeados */
		padding: 14px 25px;	
		font-size: 1.2em;	
		border: 2px solid var(--color-primary-dark);
	}
	.link-button.style-wine { /* Ahora es style-dark (Rosa) */
		background-color: var(--color-primary-dark) !important;
		color: var(--color-text-dark); /* Texto Indigo */
		border-color: var(--color-primary-dark);
		box-shadow: 0 0 8px rgba(255, 105, 180, 0.5);
	}
	.link-button.style-wine:hover {
		background-color: var(--color-secondary-light); /* Cian */
		color: var(--color-text-dark) !important;
		box-shadow: 0 0 20px var(--color-secondary-light);
	}
	.link-button.style-rose { /* Ahora es style-light (Cian) */
		color: var(--color-text-dark) !important; /* Texto Indigo */
		background-color: var(--color-secondary-light);
		border-color: var(--color-secondary-light);
		box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
	}
	.link-button.style-rose:hover {
		background-color: var(--color-primary-dark);
		color: var(--color-secondary-light) !important;
	}
/* ------------------- BOTÓN CTA PRINCIPAL (MAIN) ------------------- */
	.cta-main {
		font-family: var(--font-buttons);
		font-weight: 400;
		font-size: 1.4em;	
		width: 100%;
		
		/* Fondo ROSA, Texto Indigo Oscuro */
		background-color: var(--color-primary-dark) !important;	
		color: var(--color-text-dark) !important;	
		
		border: 3px solid var(--color-secondary-light);	
		border-radius: 50px; /* Redondeado */
		
		box-shadow: 0 0 15px var(--color-primary-dark), 0 0 30px var(--color-secondary-light);	
		transition: all 0.3s ease;
		padding: 18px 25px !important; 
	}
	.cta-main:hover {
		background-color: var(--color-secondary-light) !important;	
		color: var(--color-text-dark) !important;	
		box-shadow: 0 0 20px var(--color-secondary-light), 0 0 40px var(--color-primary-dark);
		transform: translateY(-2px);
	}
/* ------------------- BOTÓN SUTIL (Email) ------------------- */
	.link-button.style-rose-subtle { /* Renombrado desde wine-subtle */
		font-size: 0.9em;
		font-weight: 700;
		font-family: var(--font-body); /* Montserrat para legibilidad */
		background-color: transparent !important;
		border: 2px solid var(--color-primary-dark);
		color: var(--color-text-main) !important; /* Texto Blanco */
		border-radius: 50px;
	}
	.link-button.style-rose-subtle:hover {
		background-color: rgba(255, 105, 180, 0.3) !important;
		color: var(--color-secondary-light) !important;
	}
/* ------------------- SWEETALERT2 STYLES (Fondo Oscuro) ------------------- */
	.neon-popup {
		background: #101010 !important; /* Fondo Negro */
		border: 2px solid var(--color-secondary-light) !important;
		box-shadow: 0 0 15px var(--color-secondary-light);
		color: var(--color-text-main) !important;
	}
	.neon-title {
		color: var(--color-secondary-light) !important;	
		text-shadow: 1px 1px 0px var(--color-primary-dark);
		font-family: var(--font-heading) !important;
	}
	.swal2-html-container p {
		color: var(--color-text-main) !important;	
	}
	.swal2-html-container a {
		color: var(--color-secondary-light) !important;
	}
	.swal2-image {
		background-color: var(--color-background-soft);
	}
	/* Botón Confirmar */
	.neon-confirm-button {
		color: var(--color-text-dark) !important;
		background-color: var(--color-secondary-light) !important;
		border: 2px solid var(--color-primary-dark) !important;	
		font-family: var(--font-buttons);
		border-radius: 50px;
	}
	/* Botón Cancelar */
	.neon-cancel-button {
		background-color: var(--color-primary-dark) !important;
		color: var(--color-secondary-light) !important;
		border: 2px solid var(--color-secondary-light) !important;
		font-family: var(--font-buttons);
		border-radius: 50px;
	}
/* ------------------- END ------------------- */
/* ------------------- FOOTER ------------------- */
	.footer-credits {
		color: var(--color-text-subtle);	
		font-size: 0.75em;
		padding-top: 15px;
	}
	.footer-credits a {
		color: var(--color-secondary-light); /* Enlaces en Cian */
		text-decoration: none;
		transition: color 0.3s;
	}
	.footer-credits a:hover {
		color: var(--color-text-main);
	}
/* ------------------- END FOOTER ------------------- */