/* Custom background utilities: add more .bg-* classes */
.bg-cyan {
  background-color: #00BCD4 !important;
  color: #fff !important;
}

.bg-lilac {
  background-color: #B39DDB !important;
  color: #fff !important;
}

.bg-rose {
  background-color: #FF6B81 !important;
  color: #fff !important;
}

.bg-olive {
  background-color: #708238 !important;
  color: #fff !important;
}

.bg-indigo {
  background-color: #6610F2 !important;
  color: #fff !important;
}

/* Optional: subtle variants (lighter) */
.bg-cyan-subtle {
  background-color: #E0F7FA !important;
  color: #006064 !important;
}

.bg-lilac-subtle {
  background-color: #EDE7F6 !important;
  color: #4A148C !important;
}

/* Keep these utilities small and specific. Use !important to match Bootstrap utility precedence. */

/* Efecto "flotación" (scale + shadow) para cualquier contenedor */
.hover-lift {
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease;
  will-change: transform, box-shadow;
}

/* Aplicar efecto sólo en dispositivos que soportan hover (evita problemas en touch) */
@media (hover: hover) and (pointer: fine) {

  .hover-lift:hover,
  .hover-lift:focus {
    /* Valor de escala configurable: cambia --hover-scale para ajustar */
    transform: translateY(-2px) scale(var(--hover-scale, 1.02));
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    z-index: 2;
  }
}

.hover-lift:active {
  transform: translateY(-5px) scale(0.995);
}

/* Helper para contenido interno (mantener transiciones suaves) */
.hover-lift * {
  transition: inherit;
}

/* Text color utilities */
.text-cyan {
  color: #00BCD4 !important;
}

.text-lilac {
  color: #B39DDB !important;
}

.text-rose {
  color: #FF6B81 !important;
}

.text-olive {
  color: #708238 !important;
}

.text-indigo {
  color: #6610F2 !important;
}

/* Border color utilities */
.border-cyan {
  border-color: #00BCD4 !important;
}

.border-lilac {
  border-color: #B39DDB !important;
}

.border-rose {
  border-color: #FF6B81 !important;
}

.border-olive {
  border-color: #708238 !important;
}

.border-indigo {
  border-color: #6610F2 !important;
}

/* Button variants (basic, hover and focus) */
.btn-cyan,
.btn-cyan.disabled,
.btn-cyan:disabled {
  color: #fff;
  background-color: #00BCD4;
  border-color: #00BCD4;
}

.btn-cyan:hover {
  background-color: #00A3B0;
  border-color: #008B94;
}

.btn-lilac,
.btn-lilac.disabled,
.btn-lilac:disabled {
  color: #fff;
  background-color: #B39DDB;
  border-color: #B39DDB;
}

.btn-lilac:hover {
  background-color: #9575CD;
  border-color: #8560B8;
}

.btn-rose,
.btn-rose.disabled,
.btn-rose:disabled {
  color: #fff;
  background-color: #FF6B81;
  border-color: #FF6B81;
}

.btn-rose:hover {
  background-color: #FF4D6A;
  border-color: #E0435C;
}

.btn-olive,
.btn-olive.disabled,
.btn-olive:disabled {
  color: #fff;
  background-color: #708238;
  border-color: #708238;
}

.btn-olive:hover {
  background-color: #5B6B2B;
  border-color: #4F5C23;
}

.btn-indigo,
.btn-indigo.disabled,
.btn-indigo:disabled {
  color: #fff;
  background-color: #6610F2;
  border-color: #6610F2;
}

.btn-indigo:hover {
  background-color: #5200D6;
  border-color: #4800B8;
}

/* Make custom buttons behave like Bootstrap buttons (transitions + active state) */
.btn-cyan,
.btn-lilac,
.btn-rose,
.btn-olive,
.btn-indigo {
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .08s ease-in-out;
}

.btn-cyan:active {
  transform: translateY(0.6px);
  box-shadow: none;
  background-color: #008A96;
  border-color: #007A80;
}

.btn-lilac:active {
  transform: translateY(0.6px);
  box-shadow: none;
  background-color: #7E57C2;
  border-color: #6F47B3;
}

.btn-rose:active {
  transform: translateY(0.6px);
  box-shadow: none;
  background-color: #E0435C;
  border-color: #C63A50;
}

.btn-olive:active {
  transform: translateY(0.6px);
  box-shadow: none;
  background-color: #46521F;
  border-color: #3A451A;
}

.btn-indigo:active {
  transform: translateY(0.6px);
  box-shadow: none;
  background-color: #3F00B3;
  border-color: #35009A;
}

/* focus outlines removed per user request (no extra focus shadow) */



/* Skeleton */
.skeleton {
  background-color: #e9ecef;
  border-radius: 8px;
  height: 48px;
  margin-bottom: 12px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

/* Ocultar contenido mientras carga */
.loading .real-content {
  display: none;
}

.loading .skeleton-wrapper {
  display: block;
}

.skeleton-wrapper {
  display: none;
}


/* Estilos para la navegación lateral del perfil */
.profile-nav .item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  text-decoration: none;
  color: inherit;
}

.profile-nav .item .icon {
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.profile-nav .item .title {
  font-weight: 600;
}

.profile-nav .item .desc {
  display: block;
  color: #6c757d;
  font-size: 0.9rem;
}

.profile-nav .item.active {
  background-color: #eef6ff;
  border-left: 4px solid #0d6efd;
}

/* 1. Evita que el contenedor responsivo oculte el menú desplegable */
.table-responsive {
  /* Permitimos que el contenido "escape" del contenedor si es un dropdown */
  position: relative;
  overflow: visible !important;
}

/* 2. Forzamos a que el menú esté siempre al frente */
.dropdown-menu {
  z-index: 9999 !important;
}

/* 3. Si en móviles necesitas scroll horizontal, usa esto para que no se rompa el diseño */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
.bi-eye, .bi-pencil, .bi-trash {
    font-size: 1.2rem;
}