/**
 * Estilos globales para el logo con efecto Triángulo de Penrose
 * Se aplica a todas las instancias del logo en el proyecto
 */

/* Logo en el header (navbar-logo) */
.navbar-brand .navbar-logo,
.app-header .navbar-brand .navbar-logo {
	width: 28px !important;
	height: 28px !important;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
	position: relative;
	transform-style: preserve-3d;
	animation: penroseRotate 10s linear infinite;
	perspective: 300px;
	display: block !important;
}

/* Logo en páginas de login (dentro de .brand) */
.login .brand .logo,
.login-v2 .brand .logo,
.login-with-news-feed .brand .logo {
	width: 28px !important;
	height: 28px !important;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
	position: relative;
	transform-style: preserve-3d;
	animation: penroseRotate 10s linear infinite;
	perspective: 300px;
}

/* Cara frontal del triángulo de Penrose */
.navbar-brand .navbar-logo::before,
.login .brand .logo::before,
.login-v2 .brand .logo::before,
.login-with-news-feed .brand .logo::before {
	content: '';
	position: absolute;
	width: 28px;
	height: 24px;
	background: var(--bs-app-theme, #348fe2);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	transform: rotateX(0deg) rotateY(0deg);
	opacity: 1;
	box-shadow: 0 0 10px rgba(52, 143, 226, 0.5);
	top: 0;
	left: 0;
}

/* Cara lateral derecha */
.navbar-brand .navbar-logo::after,
.login .brand .logo::after,
.login-v2 .brand .logo::after,
.login-with-news-feed .brand .logo::after {
	content: '';
	position: absolute;
	width: 28px;
	height: 24px;
	background: linear-gradient(90deg, var(--bs-app-theme, #348fe2) 0%, rgba(52, 143, 226, 0.8) 100%);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	transform: rotateX(0deg) rotateY(60deg) translateX(14px);
	opacity: 0.85;
	transform-origin: left center;
	top: 0;
	left: 0;
}

/* Efecto de profundidad adicional con sombras */
.navbar-brand .navbar-logo,
.login .brand .logo,
.login-v2 .brand .logo,
.login-with-news-feed .brand .logo {
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Animación de rotación 3D para efecto Penrose */
@keyframes penroseRotate {
	0% {
		transform: rotateY(0deg) rotateX(15deg);
	}
	25% {
		transform: rotateY(90deg) rotateX(15deg);
	}
	50% {
		transform: rotateY(180deg) rotateX(15deg);
	}
	75% {
		transform: rotateY(270deg) rotateX(15deg);
	}
	100% {
		transform: rotateY(360deg) rotateX(15deg);
	}
}

/* Ajustes para móviles */
@media (max-width: 768px) {
	.navbar-brand .navbar-logo,
	.login .brand .logo,
	.login-v2 .brand .logo,
	.login-with-news-feed .brand .logo {
		width: 24px !important;
		height: 24px !important;
	}
	
	.navbar-brand .navbar-logo::before,
	.login .brand .logo::before,
	.login-v2 .brand .logo::before,
	.login-with-news-feed .brand .logo::before,
	.navbar-brand .navbar-logo::after,
	.login .brand .logo::after,
	.login-v2 .brand .logo::after,
	.login-with-news-feed .brand .logo::after {
		width: 24px;
		height: 20px;
	}
	
	.navbar-brand .navbar-logo::after,
	.login .brand .logo::after,
	.login-v2 .brand .logo::after,
	.login-with-news-feed .brand .logo::after {
		transform: rotateX(0deg) rotateY(60deg) translateX(12px);
	}
}