:root {
    --crmpam-bg-primary:#031739!important;
	--crmpam-bg-secondary: #000000!important;
	--crmpam-bg-color-custom-1: #006782!important;
	--crmpam-bg-color-custom-2: #006782!important;
	--crmpam-bg-color-custom-3: #002a46!important;
  }
   
  p, .crmpam-p {
	color: #ffffff!important
  }
	 body {
	  background: linear-gradient(264deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	}
	
	/* ================================
	   HEADER Y FOOTER
	   ================================ */
	
	.crmpam-header {
	  background: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	}
	
	.crmpam-header::before, 
	.crmpam-header::after {
	  filter: blur(2rem);
	  background-color: rgb(2 45 38 / 0%) !important
	}
	
	.crmpam-footer {
	  background: linear-gradient(279,var(--crmpam-bg-primary) 0%,var(--crmpam-bg-color-custom-1) 100%) !important;
	}
	
	/* ================================
	   NAVEGACIÓN DESKTOP
	   ================================ */
	.crmpam-header-menu a.active-menu-option > div {
	  background: linear-gradient(90deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 50%, var(--crmpam-bg-primary) 100%) !important;
	  color: rgb(255, 255, 255);
	  border: 1px solid var(--crmpam-bg-color-custom-1);
	}
	
	/* ================================
	   BOTONES Y ELEMENTOS INTERACTIVOS
	   ================================ */
	
	.crmpam-btn-primary {
	  background: linear-gradient(113.27deg, var(--crmpam-bg-primary) 15.04%, var(--crmpam-bg-color-custom-1) 84.96%) !important;
	}
  
	.home-main-slots-desktop__button {
	  background: linear-gradient(113.27deg, var(--crmpam-bg-primary) 15.04%, var(--crmpam-bg-color-custom-1) 84.96%) !important;
	}
	
	.home-main-slots-desktop__item:hover .home-main-slots-desktop__button {
	  transition: 0.6s;
	  background: linear-gradient(113.27deg, var(--crmpam-bg-color-custom-1) 15.04%, var(--crmpam-bg-primary) 84.96%) !important;  
	}
  
	a.showMoreButton {
	  border: 1px solid #ffffff !important;
  }
	
	a.showMoreButton:after {
	  background-color: var(--crmpam-bg-color-custom-1) !important;
  
	}
  
	.crmpam-user-menu .crmpam-user-menu-content p:hover {
	  border-left: 3px solid var(--crmpam-color-primary) !important;
  }
	/* ================================
	   TAGS Y PROVIDERS
	   ================================ */
	
	.provider-slide, 
	.tag-slide {
	  background: linear-gradient(189deg, var(--crmpam-bg-primary) -27.46%, var(--crmpam-bg-color-custom-1) 93.07%) !important;
	}
	
	.provider-slide:hover, 
	.tag-slide:hover {
	  background: linear-gradient(359deg, var(--crmpam-bg-color-custom-1) -27.82%, var(--crmpam-bg-primary) 68.15%) !important;
	}
	
	.tag-carrousel-item {
	  background: linear-gradient(180deg, var(--crmpam-bg-color-custom-3) 0%, var(--crmpam-bg-primary) 100%) !important;
	}
	
	
	/* ================================
	   LOBBY Y SECCIONES
	   ================================ */
	
	.lobby-section-title p {
	  background-color: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	  color: var(--crmpam-color-primary) !important;
	}
	
	/* ================================
	   SIDEBAR MENU
	   ================================ */
	
	/* Animación de entrada */
	@keyframes slideInRight {
	  from {
		transform: translateX(100%);
		opacity: 0;
	  }
	  to {
		transform: translateX(0);
		opacity: 1;
	  }
	}
	
	/* Contenedor del menú */
	.crmpam-user-menu > .crmpam-user-menu-content {
	  background: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	  animation: slideInRight 0.4s ease-out !important;
	  padding: 60px 0 20px 20px !important;
	}
	
	/* Eliminar fondo zebra por defecto */
	.crmpam-user-menu .crmpam-user-menu-content p {
	  background: transparent !important;
	}
	
	/* Efecto zebra para elementos del menú normal */
	.crmpam-user-menu .crmpam-user-menu-content a.main-menu-link:not(.highlighted-menu-link):nth-child(odd) p {
	  background: #032139 !important;
	  border-radius: 8px 0 0 8px !important;
	  margin-right: 0 !important;
	  padding-right: 20px !important;
	}
	
	.crmpam-user-menu .crmpam-user-menu-content a.main-menu-link:not(.highlighted-menu-link):nth-child(even) p {
	  background: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	  border-radius: 8px 0 0 8px !important;
	  margin-right: 0 !important;
	  padding-right: 20px !important;
	}
	
	/* Elementos destacados (Novedades) */
	a.main-menu-link.highlighted-menu-link p {
	  background: #172A39 !important;
	  background-color: #172A39 !important;
	  color: white !important;
	  border-radius: 8px 0 0 8px !important;
	  margin-right: 0 !important;
	  padding-right: 20px !important;
	}
	
	/* Efecto hover */
	.crmpam-user-menu .crmpam-user-menu-content p:hover {
	  background: linear-gradient(90deg, rgba(var(--crmpam-bg-primary), 0.3) 0%, rgba(var(--crmpam-bg-color-custom-1), 0.1) 100%) !important;
	  border-left: 3px solid rgb(62, 192, 240) !important;
	  padding-left: 7px !important;
	  transition: all 0.3s ease !important;
	}
	
	/* Separador del menú */
	.menu-separator {
	  height: 2px !important;
	  background-color: rgba(128, 128, 128, 0.5) !important;
	  margin: 15px 10px !important;
	}
	
	/* Logo del menú móvil */
	.menu-logo {
	  display: block !important;
	  margin: 0 auto 20px auto !important;
	  max-width: 150px !important;
	  height: auto !important;
	}
	
	/* ================================
	   MOBILE
	   ================================ */
	
	/* Barra de navegación inferior */
	.MuiBottomNavigation-root {
	  background:  linear-gradient(180deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	}
	
	/* Media query para dispositivos móviles */
	@media (max-width: 1200px) {
	  /* Contenido móvil */
	  .mobile-content {
		background: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	  }
	
	  /* Header móvil */
	  .crmpam-header {
		background-color: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
		--AppBar-background: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
		--AppBar-color: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	  }
	}
	
	
	 
	.login-popup .crmpam-popup-content-container{
	   background: linear-gradient(298deg, var(--crmpam-bg-primary) 0%, var(--crmpam-bg-color-custom-1) 100%) !important;
	  }
	  
	.login-popup .crmpam-popup-overlay {
	  background: rgb(0 0 0 / 20%)!important;
	  }
	
	  .login-popup .crmpam-dark-form .crmpam-input > div {
		background: linear-gradient(180deg, rgba(62, 192, 240, 0), rgba(7, 69, 59, 100)) !important;
		border-radius: 12px;
	}
	
	.crmpam-popup .crmpam-popup-content-header{
	  border-bottom-style: none !important;
	}
	
	.crmpam-popup .crmpam-popup-content-header{
	  background: none !important;
	  -webkit-box-shadow: none !important;
	  box-shadow: none !important;
	}
  
  .crmpam-user-menu .crmpam-user-menu-content p:hover {
	border-left: 3px solid rgb(255 255 255) !important;
  }
  
  .crmpam-user-menu .crmpam-user-menu-content a.main-menu-link:not(.highlighted-menu-link):nth-child(odd) p {
	background: #2b2b2b !important;
  }
  
  a.main-menu-link.highlighted-menu-link p{
	background: var(--crmpam-bg-primary)  !important;
  }