/* ==========================================
  selección de texto
 -------------------------------------------*/
::selection {
  background-color: #0000ff !important;
  color: #ffffff !important;
}

/* Para navegadores Firefox */
::-moz-selection {
  background-color: #0000ff !important;
  color: #ffffff !important;
}

/* ==========================================
  modal
 -------------------------------------------*/
.modal-custom {
  z-index: 1060;
}

.modal-background {
  top: 0;
  right: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1049;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-background-ia {
  top: 0;
  right: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1055;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-background-loading {
  top: 0;
  right: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1056 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.toast-container {
  z-index: 1400 !important;
}

/* ==========================================
  efecto blob en el fondo 
 -------------------------------------------*/
.blob-outer-container {
  position: absolute;
  /* Cambiado a absolute para que sea parte del fondo */
  height: 100%;
  width: 100%;
  z-index: -1;
  /* Movido al fondo */
  inset: 0;
  margin: auto;
  filter: blur(100px);
  pointer-events: none;
  /* Evita que interfiera con elementos superiores */
}

.blob-inner-container {
  border-radius: 99999px;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  /* Cambiado para que sea transparente */
  transform: scale(0.8);
}

[data-bs-theme="dark"] .blob {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: auto;
  background: conic-gradient(from 0deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.8));
  animation: spinBlob 8s linear infinite;
}

[data-bs-theme="light"] .blob {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: auto;
  background: conic-gradient(from 0deg, rgba(0, 0, 255, 0.05), rgba(0, 0, 255, 0.05), rgba(0, 0, 255, 0.05), rgba(0, 0, 255, 0.05), rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.05));
  animation: spinBlob 8s linear infinite;
}

@keyframes spinBlob {
  0% {
    transform: rotate(0deg) scale(2);
  }

  100% {
    transform: rotate(1turn) scale(2);
  }
}

/* ==========================================
  sidenav
 -------------------------------------------*/
[data-bs-theme="light"] .navbar-logo {
  height: 40px;
  filter: brightness(0) invert(0);
  z-index: 1;
}

[data-bs-theme="dark"] .navbar-logo {
  height: 40px;
  filter: brightness(0) invert(1);
  z-index: 1;
}

[data-bs-theme="light"] .nav-pills .nav-link.active,
.nav-pills .nav-link.active {
  background-color: #dbdde1 !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active,
.nav-pills .nav-link.active {
  background-color: #393e46 !important;
}

.navbar .navbar-nav .nav-link[data-bs-toggle=collapse]::after {
  content: '';
  margin-left: 0px;
  transition: all .3s ease-in-out;
  transform-origin: center center
}

/* ==========================================
  image container
--------------------------------------------*/
.image-container {
  width: 100%;
  /* El ancho se ajustará al tamaño del contenedor padre */
  aspect-ratio: 16 / 9;
  /* Proporción 16:9 */
  overflow: hidden;
  /* Oculta cualquier contenido que sobresalga */
  position: relative;
}

.image-container img,
.image-container .video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mantiene la imagen sin deformarse */
  position: absolute;
}

/* ==========================================
  video player
 -------------------------------------------*/
.video-container {
  &:hover {
    .video-controls {
      opacity: 1;
    }
  }

  .video-controls {
    opacity: 0;
    transition: opacity 0.3s ease;

    .progress {
      cursor: pointer;

      &:hover {
        height: 8px !important;
      }
    }
  }
}

/* ================================================
  Variables para los loaders
================================================ */
:root {
  --mLoaderDefaultColor: #000;
  --mLoaderDefaultShadow: rgba(0, 0, 0, 0.75);

  --mLoaderIaGradient1: rgba(0, 0, 0, 1);
  --mLoaderIaGradient2: rgb(35, 35, 35);
  --mLoaderIaGradient3: rgb(85, 85, 85);
  --mLoaderIaGradient4: rgb(245, 245, 245);
  --mLoaderIaBorderColor: #00000005;
  --mLoaderIaShadow1: #00000040;
  --mLoaderIaShadow2: #00000050;
  --mLoaderIaShadow3: #00000080;
  --mLoaderIaShadow4: #000000bb;
  --mLoaderIaShadow5: #000000;
  --mLoaderIaShadow6: #00000090;
  --mLoaderIaShadow7: #00000060;
  --mLoaderIaShadow8: #00000040;
}

[data-bs-theme="dark"] {
  /* Variables base para el tema claro */
  --mLoaderDefaultColor: #fff;
  --mLoaderDefaultShadow: rgba(255, 255, 255, 0.75);

  /* Variables para el loader IA */
  --mLoaderIaGradient1: rgba(255, 255, 255, 1);
  --mLoaderIaGradient2: rgb(220, 220, 220);
  --mLoaderIaGradient3: rgb(170, 170, 170);
  --mLoaderIaGradient4: rgb(10, 10, 10);
  --mLoaderIaBorderColor: #ffffff05;
  --mLoaderIaShadow1: #ffffff40;
  --mLoaderIaShadow2: #ffffff50;
  --mLoaderIaShadow3: #ffffff80;
  --mLoaderIaShadow4: #ffffffbb;
  --mLoaderIaShadow5: #ffffff;
  --mLoaderIaShadow6: #ffffff90;
  --mLoaderIaShadow7: #ffffff60;
  --mLoaderIaShadow8: #ffffff40;
}

/* ================================================
  Loader default
================================================ */
.loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 5rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: pulsOut 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 1rem var(--mLoaderDefaultShadow));
}

.loader:before {
  width: 100%;
  padding-bottom: 100%;
  box-shadow: inset 0 0 0 1rem var(--mLoaderDefaultColor);
  animation-name: pulsIn;
}

.loader:after {
  width: calc(100% - 2rem);
  padding-bottom: calc(100% - 2rem);
  box-shadow: 0 0 0 0 var(--mLoaderDefaultColor);
}

@keyframes pulsIn {
  0% {
    box-shadow: inset 0 0 0 1rem var(--mLoaderDefaultColor);
    opacity: 1;
  }

  50%,
  100% {
    box-shadow: inset 0 0 0 0 var(--mLoaderDefaultColor);
    opacity: 0;
  }
}

@keyframes pulsOut {

  0%,
  50% {
    box-shadow: 0 0 0 0 var(--mLoaderDefaultColor);
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 1rem var(--mLoaderDefaultColor);
    opacity: 1;
  }
}


/* ================================================
  Loader IA
================================================ */
.loader_01 {
  width: 70px;
  height: 70px;
  background: linear-gradient(165deg,
      var(--mLoaderIaGradient1) 0%,
      var(--mLoaderIaGradient2) 40%,
      var(--mLoaderIaGradient3) 98%,
      var(--mLoaderIaGradient4) 100%);
  border-radius: 50%;
  position: relative;
}

.loader_01:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border-bottom: 0 solid var(--mLoaderIaBorderColor);
  box-shadow: 0 -10px 20px 20px var(--mLoaderIaShadow1) inset,
    0 -5px 15px 10px var(--mLoaderIaShadow2) inset,
    0 -2px 5px var(--mLoaderIaShadow3) inset,
    0 -3px 2px var(--mLoaderIaShadow4) inset,
    0 2px 0px var(--mLoaderIaShadow5),
    0 2px 3px var(--mLoaderIaShadow5),
    0 5px 5px var(--mLoaderIaShadow6),
    0 10px 15px var(--mLoaderIaShadow7),
    0 10px 20px 20px var(--mLoaderIaShadow8);
  filter: blur(3px);
  animation: 2s rotate linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg)
  }
}

/* ================================================
  buble chatbot IA
================================================ */
.text-chatbot {
  color: #fff !important;
}