.page-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.4s 0.2s ease-in-out;
  transition: all 0.4s 0.2s ease-in-out;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}
[data-bs-theme='dark'] .page-loading {
  background-color: #0b0f19;
}
.page-loading.active {
  opacity: 1;
  visibility: visible;
}
.page-loading-inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
.page-loading.active > .page-loading-inner {
  opacity: 1;
}
.page-loading-inner > span {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: #9397ad;
}
[data-bs-theme='dark'] .page-loading-inner > span {
  color: #fff;
  opacity: 0.6;
}
.page-spinner {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  vertical-align: text-bottom;
  border: 0.15em solid #b4b7c9;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner 0.75s linear infinite;
  animation: spinner 0.75s linear infinite;
}
[data-bs-theme='dark'] .page-spinner {
  border-color: rgba(255, 255, 255, 0.4);
  border-right-color: transparent;
}
@-webkit-keyframes spinner {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.example-tooltip .tooltip {
  display: inline-block;
  position: relative;
  margin: 0.625rem 1.25rem;
  opacity: 1;
  z-index: 1;
}
.example-tooltip .tooltip.bs-tooltip-top .tooltip-arrow,
.example-tooltip .tooltip.bs-tooltip-bottom .tooltip-arrow {
  position: absolute;
  left: 50%;
  margin-left: -0.375rem;
}
.example-tooltip .tooltip.bs-tooltip-end .tooltip-arrow,
.example-tooltip .tooltip.bs-tooltip-start .tooltip-arrow {
  position: absolute;
  top: 50%;
  margin-top: -0.375rem;
}

.example-popover .popover {
  display: block;
  position: relative;
  width: 16.25rem;
  margin: 1rem;
  float: left;
}
.bs-popover-bottom-demo .popover-arrow,
.bs-popover-top-demo .popover-arrow {
  position: absolute;
  left: 50%;
  margin-left: -0.6875rem;
}
.bs-popover-start-demo .popover-arrow,
.bs-popover-end-demo .popover-arrow {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
}

.example-modal .modal {
  display: block;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
}

/* Spin animation */
@-webkit-keyframes hero-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes hero-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.hero-animation-spin {
  -webkit-animation: hero-spin 35s linear infinite;
  animation: hero-spin 35s linear infinite;
}

/* Fade animation */
@-webkit-keyframes hero-fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes hero-fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.hero-animation-fade {
  -webkit-animation: hero-fade 4s ease-in infinite;
  animation: hero-fade 4s ease-in infinite;
}
.hero-animation-delay-1,
.hero-animation-delay-2,
.hero-animation-delay-3 {
  opacity: 0;
}
.hero-animation-delay-1 {
  animation-delay: 0.75s;
}
.hero-animation-delay-2 {
  animation-delay: 1.5s;
}
.hero-animation-delay-3 {
  animation-delay: 2s;
}

#reloj {
  font-size: 2em;
  margin-top: 20px;
  text-align: center;
}

/* Estilo para las barras de desplazamiento en WebKit (Chrome, Safari) */
::-webkit-scrollbar {
  width: 12px; /* Ancho de la scrollbar vertical */
  height: 12px; /* Altura de la scrollbar horizontal */
}

::-webkit-scrollbar-track {
  background: transparent; /* Fondo del track de la scrollbar */
  border-radius: 10px; /* Bordes redondeados del track */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* Color del thumb de la scrollbar */
  border-radius: 10px; /* Bordes redondeados del thumb */
  border: 3px solid transparent; /* Espacio alrededor del thumb para que no esté pegado al track */
  background-clip: padding-box; /* Para que el borde se vea correctamente */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(
    0,
    0,
    0,
    0.5
  ); /* Color del thumb cuando el usuario pasa el mouse sobre él */
}

/* Para Firefox (no hay soporte completo para personalización de scrollbars) */
scrollbar-width: thin; /* Estilo de scrollbar delgado en Firefox */
scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Color del thumb y del track */