.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.fade-out.hidden {
  opacity: 0;
}

#contenedor_carga {
  background-color: #0a0000; /* negro profundo */
  height: 100%;
  width: 100%;
  position: fixed;
  transition: all 1s ease;
  z-index: 10000;
}

#carga {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15vh;
  width: 15vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

  background: url("../../stuff/images/stocklogo.png") center/contain no-repeat;

  animation: rotarDemonio 1.5s ease-in-out infinite,
    pulsoInfernal 1s infinite alternate;
  filter: drop-shadow(0 0 20px #ff6600);
}

@keyframes rotarDemonio {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-20deg) scale(1.1);
  }
  50% {
    transform: rotate(30deg) scale(0.95);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes pulsoInfernal {
  0% {
    filter: drop-shadow(0 0 5px #7a0000) drop-shadow(0 0 10px #ff891a);
  }
  100% {
    filter: drop-shadow(0 0 25px #ff0000) drop-shadow(0 0 50px #b34800);
  }
}

/* 🔥 Llama Demoníaca */
#carga::after {
  content: "";
  position: absolute;
  width: 160%;
  height: 160%;
  background: radial-gradient(
    circle,
    rgba(255, 0, 0, 0.4) 10%,
    transparent 80%
  );
  border-radius: 50%;
  animation: llamaDemonio 0.5s infinite alternate;
  z-index: -1;
}

@keyframes llamaDemonio {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3) translateY(-15px);
    opacity: 0.2;
  }
}

#carga::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.3), transparent 70%);
  border-radius: 50%;
  animation: partFlame1 1s infinite alternate ease-in-out;
  z-index: -2;
  transform: scale(1.2);
  opacity: 0.7;
}

#carga::after {
  content: "";
  position: absolute;
  width: 160%;
  height: 160%;
  background: radial-gradient(
    circle,
    rgba(255, 0, 0, 0.4) 10%,
    transparent 80%
  );
  border-radius: 50%;
  animation: partFlame2 0.6s infinite alternate;
  z-index: -1;
}

@keyframes partFlame1 {
  0% {
    transform: scale(1.2) translateY(0px);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.4) translateY(-10px);
    opacity: 0.1;
  }
}

@keyframes partFlame2 {
  0% {
    transform: scale(1.3) translateY(0px);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.5) translateY(-15px);
    opacity: 0.05;
  }
}

.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}


.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-bottom-primary {
  border-bottom: 0.25rem solid #4e73df !important;
}

.border-left-secondary {
  border-left: 0.25rem solid #858796 !important;
}

.border-bottom-secondary {
  border-bottom: 0.25rem solid #858796 !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
  border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
  border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
  border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
  border-left: 0.25rem solid #5a5c69 !important;
}

.border-bottom-dark {
  border-bottom: 0.25rem solid #5a5c69 !important;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.align-items-center {
  align-items: center !important;
}

.text-xs {
  font-size: .7rem;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.img-avatar-perfil {
  border-radius: 50%;
  width: 180px;
  height: 180px;
  object-fit: cover;
}

.ts-dropdown,
.ts-dropdown .option {
  color: white !important;
  /* background-color: #333 !important; */
  /* opcional: fondo oscuro */
}

.ts-control {
  color: white !important;
  background-color: #222 !important;
  /* fondo del input */
}

.ts-control .item {
  color: white !important;
}

.ts-wrapper.multi .ts-control>div {
  background: #4b4b4b !important;
}