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

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

/* html,
body {
  margin: 0;
  padding: 0;
} */

/* ==========================================
  btn-custom
 -------------------------------------------*/
.btn-custom {
  background-color: #ef546f;
  color: #ffffff;
}

.btn-custom:hover {
  background-color: #ad243b;
  color: #ffffff;
}

/* ==========================================
  blur personalizado
 -------------------------------------------*/
.blur-custom {
  backdrop-filter: blur(8px);
  background-color: rgba(34, 37, 42, 0.5);
}

/* Variante con mayor opacidad */
.blur-custom-strong {
  backdrop-filter: blur(12px);
  background-color: rgba(34, 37, 42, 0.8);
}

/* Variante con menor opacidad */
.blur-custom-light {
  backdrop-filter: blur(5px);
  background-color: rgba(34, 37, 42, 0.3);
}

/* Para elementos que solo necesitan el color sin blur */
.bg-custom-blur {
  background-color: rgba(34, 37, 42, 0.5);
}


/* ========================================== 
  navbar
 -------------------------------------------*/
.navbar {
  backdrop-filter: blur(5px);
  /* position: sticky; */
  top: 0px;
  background: transparent;
  transition: background-color 0.3s ease;
  animation: adjust-navbar linear both;
  animation-timeline: scroll();
  animation-range: 0 100px;
}

@keyframes adjust-navbar {
  from {
    background: transparent;
  }

  to {
    backdrop-filter: blur(5px);
  }
}

/* ==========================================
  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;
}

/* ==========================================
  sidenav
 -------------------------------------------*/
[data-bs-theme="light"] .navbar-logo {
  background-image: url('/assets/images/logohorizontalblanco.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 40px;
  z-index: 1;
}

[data-bs-theme="dark"] .navbar-logo {
  height: 40px;
  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;
}

/* ==========================================
  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;
}

.chatbot-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Botón flotante con transición mejorada */
.chatbot-toggle {
  background-color: #ef546f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.chatbot-toggle:hover {
  background-color: #0000cc;
  /* Color azul oscurecido */
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Ventana del chat con animaciones mejoradas - efecto de abajo hacia arriba con fade */
.chatbot-window {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 300px;
  max-height: 0;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(100%);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms ease-in-out,
    transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    max-height 200ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.expanded .chatbot-window {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  width: 350px;
  max-height: 500px;
  /* Transición para la apertura */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms ease-in-out,
    transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    max-height 200ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* Transición inversa para el cierre */
.chatbot-wrapper:not(.expanded) .chatbot-window {
  transition: all 200ms cubic-bezier(0.6, 0.8, 0.8, 0.9),
    opacity 200ms ease-out,
    transform 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
    max-height 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
}

.chatbot-body {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  transition: all 200ms ease-in-out;
}

/* Ajuste responsive con transiciones suaves */
@media (max-width: 480px) {
  .chatbot-window {
    width: 90vw;
    max-height: 0;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 200ms ease-in-out,
      transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
      max-height 200ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .expanded .chatbot-window {
    width: 95vw;
    max-height: 80vh;
  }

  /* Transición inversa para el cierre en móvil */
  .chatbot-wrapper:not(.expanded) .chatbot-window {
    transition: all 200ms cubic-bezier(0.6, 0.8, 0.8, 0.9),
      opacity 200ms ease-out,
      transform 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
      max-height 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }

  .chatbot-toggle {
    width: 50px;
    height: 50px;
    font-size: 20px;
    transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ================================================
  Texto
================================================ */
.message-content span {
  display: inline;
  white-space: pre-wrap;
}

/* ================================================
  Loader IA
================================================ */
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

.ball-pulse>div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.ball-pulse>div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.ball-pulse>div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.ball-pulse>div {
  background-color: #fff;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}

@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }

  66% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }

  66% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.ball-pulse-sync>div:nth-child(1) {
  -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
}

.ball-pulse-sync>div:nth-child(2) {
  -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
}

.ball-pulse-sync>div:nth-child(3) {
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
}

.ball-pulse-sync>div {
  background-color: #fff;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}

@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

/* ================================================
  slider
================================================ */
.slider-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

@media (max-width: 992px) {
  .slider {
    margin-top: 90px !important;
    aspect-ratio: 4/3;
  }
}

.slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 10px;
  z-index: 1;
}

.slider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(23, 25, 28, 1) 0%, rgba(23, 25, 28, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider-image.active {
  opacity: 1;
  z-index: 0;
}

.slider-content {
  z-index: 3;
}

.slider-nav {
  display: flex;
  column-gap: 16px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  translate: translateX(-50%);
  z-index: 10;
}

.slider-button {
  width: 10px;
  height: 10px;
  background-color: #fff;
  opacity: 0.75;
  transition: opacity ease 250ms, width 0.3s ease;
  border-radius: 100px;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.slider-button:hover {
  opacity: 1;
}

.slider-button.active {
  opacity: 1;
  width: 20px;
  transition: width 0.3s ease, opacity 0.25s ease;
}

/* ================================================
  expand cards
================================================ */
.card-expand {
  width: 80px;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
  margin: 0 10px;
  display: flex;
  align-items: flex-end;
  transition: 0.6s cubic-bezier(.28, -0.03, 0, .99);
}

.card-expand>.row,
.card-expand:hover>.row {
  color: #fff;
  display: flex !important;
  flex-wrap: nowrap !important;
}

.card-expand .row .card-description {
  opacity: 0;
  transition-delay: .3s !important;
  transition: all .3s ease !important;
  width: 350px;
  /* Ancho fijo para la descripción */
}

.card-expand:hover {
  width: 600px;
  transition: 0.6s cubic-bezier(.28, -0.03, 0, .99);
}

.card-expand.active {
  width: 600px;
  transition: 0.6s cubic-bezier(.28, -0.03, 0, .99);
}

.card-expand:hover .card-description,
.card-expand.active .card-description {
  opacity: 1 !important;
  background: linear-gradient(to top right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  padding: 15px;
  width: 350px;
  /* Mantener el mismo ancho cuando está activo */
}

@media (max-width: 992px) {
  .card-expand .row .card-description {
    width: 250px;
  }

  .card-expand:hover .card-description,
  .card-expand.active .card-description {
    width: 250px;
  }
}

/* ==========================================
  selección de texto
 -------------------------------------------*/
/* Estilos personalizados de la aplicación */
/* Corrección para el warning de prismjs */
.line-highlight {
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
}

/* ==========================================
  flatpickr
 -------------------------------------------*/
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  font-size: 1.5rem !important;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  font-size: 1.5rem !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #fff !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #fff !important;
}

.flatpickr-calendar .flatpickr-day.today {
  border-color: #ef546f !important;
  border-width: 2px solid !important;
}

/* ==========================================
  auth
 -------------------------------------------*/
/* Contenedor principal con imagen de fondo */
.auth-background {
  background-image: url('/assets/images/backgrounds/background_01.jpg');
  /* Cambia por tu imagen */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  position: relative;
}

/* Overlay opcional para mejorar la legibilidad */
.auth-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  /* Overlay oscuro semi-transparente */
  z-index: 1;
}

/* Asegurar que el contenido esté por encima del overlay */
.auth-content {
  position: relative;
  z-index: 2;
}

/* ==========================================
  movie cards
 -------------------------------------------*/
/* Estilos para las cards de películas estilo Angel Studios */
.movie-card {
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0px solid transparent;
  /* Añadimos borde transparente inicial para la transición */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border 0.3s ease;
}

.movie-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  border-radius: 8px;
}

.movie-card:hover {
  transform: scale(1.05);
  border: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

.movie-card:hover .movie-poster img {
  transform: scale(1.1);
}

/* ==========================================
  members only badge
 -------------------------------------------*/
.members-only-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* Añadimos una sombra debajo */
}