.sidebar-right-selected {
  background: linear-gradient(222.44deg, rgba(219, 171, 174, 0) 0%, rgba(219, 171, 174, 0) 40.12%, #EB9197 95.91%), linear-gradient(316.82deg, #DFA896 -3.39%, #B17ECE 100%);
  color: #282828;
}

.notification-selected {
  background: linear-gradient(316.82deg, #FFA082 -3.39%, #BA5DEF 100%);
}

.lan-img {
  transition: opacity 0.4s ease-in-out;
}

/* Animación para el menú desplegable del usuario */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px) scaleY(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.animate-slideDown {
  animation: slideDown 0.2s ease-out forwards;
}

/* Transiciones adicionales para el sidebar colapsado */
.sidebar-transition {
  transition: all 0.3s ease-in-out;
}

.sidebar-collapsed {
  width: 4rem; /* 16 en Tailwind = 64px = 4rem */
}

.sidebar-expanded {
  width: 16rem; /* 64 en Tailwind = 256px = 16rem */
}

/* Loader Styles */
.overlay {
  color: #000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.overlay svg {
  width: 200px;
  height: 200px;
}

.overlay .upper {
  transform-origin: 50% 50%;
  animation: upperMove 2s ease-in-out infinite;
}

.overlay .lower {
  transform-origin: 50% 50%;
  animation: lowerMove 2s ease-in-out infinite;
}

.overlay .loading-text {
  margin-top: 30px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
}

.overlay .dots {
  display: inline-block;
}

.overlay .dot1, .overlay .dot2, .overlay .dot3 {
  opacity: 0;
  animation: dotPulse 3s infinite;
}

.overlay .dot2 {
  animation-delay: 0.5s;
}

.overlay .dot3 {
  animation-delay: 1s;
}

@keyframes upperMove {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(50px, -50px);
  }
}

@keyframes lowerMove {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-50px, 50px);
  }
}

@keyframes dotPulse {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/*# sourceMappingURL=index.css.map */