@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");

:root {
  --bs-primary: #0353f0;
  --bs-btn-bg: #0353f0;
  --bs-purple-subtle: #d9a4fb;
  --bs-purple: #856aee;
  --bs-focus-input-border-color: #c3e0ff87;
  --bs-body-bg: #ffffff;
  --bs-button-line-height: 1.5px;
  --bs-light-subtle: #f5f6f9;
  --bs-gray-subtle: #f4f5f7;
  --bs-dark: #161826;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: hidden;
}
body {
  font-family: "Red Hat Display", sans-serif !important;
  background: radial-gradient(
    circle at 50% -20%,
    #1a00ff,
    #0057ff,
    #a6c0f4,
    #f4f5f7,
    #f4f5f7,
    #f4f5f7,
    #f4f5f7,
    #f4f5f7,
    #f4f5f7,
    #f4f5f7,
    #f4f5f7,
    #f4f5f7
  );
  background-size: 150%;
  background-position: center top;
  background-attachment: fixed;
  color: var(--bs-dark);
}
.vh-50 {
  height: 50vh;
}
.vh-75 {
  height: 75vh;
}
.vh-90 {
  height: 90vh;
}

.remove-bg {
  filter: brightness(1.1);
  mix-blend-mode: multiply;
}

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.display-1 {
  font-size: 7rem;
}

.bg-gradient-circle-primary {
  /* background: radial-gradient(circle at 50% -20%, #0055ff, #0055ff, #5b90fc, #bdd1f8, #e8edf7, #f4f5f7, #f4f5f7, #f4f5f7, #f4f5f7, #f4f5f7, #f4f5f7, #f4f5f7); made at https://learnui.design/tools/gradient-generator.html */
}
.custom-container {
  max-width: 1578px;
}
.card-img-top {
  height: 243px;
  object-fit: cover;
  object-position: center;
}

.bg-gradient-to-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 37, 255);
  background: linear-gradient(
    0deg,
    rgba(0, 37, 255, 1) 0%,
    rgba(255, 255, 255, 0) 33%,
    rgba(255, 255, 255, 0) 100%
  );
}

.card {
  box-shadow: none !important;
  border-radius: 1.5rem !important;
}

.video-container .thumbnail-container {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

.background-container {
  background-size: cover;
  background-position: center;
}

.video-container {
  height: 350px;
}
.video-container.lg {
  height: 500px;
}
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

.border-light {
  border-color: rgba(255, 255, 255, 0.44) !important;
}

.animation-fall-down {
  opacity: 0;
  animation: reveal 0.5s forwards var(--delay);
}

@keyframes reveal {
  from {
    translate: 0 20px;
  }
  to {
    translate: none;
    opacity: 1;
  }
}
.blur {
  background-color: rgba(255, 255, 255, 0.2); /* Color de fondo del elemento */
  backdrop-filter: blur(20px); /* Difumina el contenido detrás */
  -webkit-backdrop-filter: blur(20px); /* Para Safari */

  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.z-index-10 {
  z-index: 10;
}

.hero-bg-container {
  background-size: cover;
  background-position: center;
}

.left-sidebar {
  border: none !important;
  background-color: transparent !important;
}

.nav-with-icons .nav-link i {
  font-size: 1.75rem;
}
.nav-with-icons .nav-link {
  color: var(--bs-primary) !important;
  border-radius: 1.44rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 10px #065ffe2e;
}
.nav-with-icons .nav-link.active {
  background-color: var(--bs-primary);
  color: white;
}

.avatar-xl {
  width: 4rem;
  height: 4rem;
}
.avatar-xxl {
  width: 8rem;
  height: 8rem;
}

.bg-primary-gradient-horizontal {
  background: rgb(7, 87, 240);
  background: linear-gradient(
    90deg,
    rgba(7, 87, 240, 1) 60%,
    rgb(104 155 255) 100%
  );
}

.bg-blur {
  background-color: rgba(255, 255, 255, 0.5); /* Color de fondo del elemento */
  backdrop-filter: blur(20px); /* Difumina el contenido detrás */
  -webkit-backdrop-filter: blur(20px); /* Para Safari */
}
.bg-blur-light {
  background-color: rgba(255, 255, 255, 0.02); /* Color de fondo del elemento */
  backdrop-filter: blur(20px); /* Difumina el contenido detrás */
  -webkit-backdrop-filter: blur(20px); /* Para Safari */
}

.avatar-xs {
  width: 3rem;
  height: 3rem;
}

.number-rounded {
  border-radius: 50%;
  border: 2px solid #fff;
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  text-align: center;
  line-height: 2.5rem;
  font-size: 1.5rem;
}

.number-rounded-xl {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.5rem;
  font-size: 1rem;
}

.accordion-button {
  font-size: 1.66rem;
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: calc(1440px - 200px);
  }
  .w-xl-100 {
    width: 100% !important;
  }
}

.fw-bold {
  font-weight: 700 !important;
}
.bg-light-subtle {
  background-color: #e0e0e080 !important;
}

.btn-circle {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
}

.bg-gray {
  background-color: #1c366a !important;
}
.image-container {
  height: 28.5rem;
}
.bg-gradient-success {
  background: rgb(21, 110, 5);
  background: linear-gradient(
    90deg,
    rgba(21, 110, 5, 1) 0%,
    rgba(42, 219, 0, 1) 100%
  );
}
.dot {
  --size: 0.65rem;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  border-radius: 50%;
}
.shadow-primary {
  box-shadow: 0 0 12px var(--bs-primary);
}
.shadow-secondary {
  box-shadow: 0 0 12px var(--bs-secondary);
}

.header-fp,
.header-fp.header-sticky {
  transition: all 0ms ease-in-out;
}
.header-fp.header-sticky {
  padding: 0 4rem !important;
  max-width: 100% !important;
  background-color: rgba(255, 255, 255, 0.5); /* Color de fondo del elemento */
  backdrop-filter: blur(20px); /* Difumina el contenido detrás */
  -webkit-backdrop-filter: blur(20px); /* Para Safari */

}

.w-25 {
  width: 1.5rem;
}

.bg-image {
  background-size: cover;
  background-position: center;
}

.min-vh-75 {
  min-height: 75vh;
}

.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: 7px;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-inner-border-radius: calc(7px - 0);
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
    rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: #f6f9fc;
  --bs-dropdown-link-active-color: #2a3547;
  --bs-dropdown-link-active-bg: #f6f9fc;
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 10px;
  --bs-dropdown-header-color: #2a3547;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
  box-shadow: var(--bs-dropdown-box-shadow);
}
.badge-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  border-radius: 50%;
}

.avatar-sm {
  --size: 2.2rem;
  width: var(--size);
  height: var(--size);
}

.zoom-element {
  transition: transform 160ms ease-in-out;
}
.zoom-element:hover {
  transform: scale(1.05);
}

.video-box-container .opcity-full-on-hover {
  opacity: 0.1;
}

.video-box-container .opcity-full-on-hover,
.video-box-container .opcity-full-on-hover:hover {
  transition: all opacity 160ms ease-in-out;
}
.video-box-container .opcity-full-on-hover:hover {
  opacity: 1;
}

.z-index-n1 {
  z-index: -1;
}

#qrcode img {
  width: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.flashing-animation {
  animation: flashing 1000ms infinite ease-in-out;
}
@keyframes flashing {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.mask {
  position: absolute;
  background-size: cover;
  background-position: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.vimeo-player iframe {
  width: 100% !important;
  height: 100% !important;
}

.ms-n7 {
  margin-left: -7rem !important;
}

.active {
  background-color: var(--bs-primary) !important;
  color: white !important;
}
.active a,
.active i {
  color: white !important;
}

.item-circle {
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-purple-dark {
  background-color: #666c8a;
}

.logo-invert {
  filter: invert(1);
}
.btn-rounded {
  border-radius: 1.5rem;
}
html[data-boxed-layout="boxed"] .container-fluid,
html[data-boxed-layout="boxed"] .container-lg,
html[data-boxed-layout="boxed"] .container-md,
html[data-boxed-layout="boxed"] .container-sm,
html[data-boxed-layout="boxed"] .container-xl,
html[data-boxed-layout="boxed"] .container-xxl {
  max-width: 90%;
  margin: 0 auto;
}
.padding-aside {
  padding: 0rem 4rem 0rem 8rem;
}
.bg-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Para Safari */
  background-color: rgba(255, 255, 255, 0.7) !important;
}
.bg-dark-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Para Safari */
  background-color: rgba(19, 14, 49, 0.104) !important;
}
.bg-dark-glass-light {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Para Safari */
  background-color: rgba(255, 255, 255, 0.168) !important;
}
.bg-gray-light {
  background-color: #f4f5f7 !important;
}
.rounded-1 {
  border-radius: 0.5rem !important;
}
.messages {
  height: 250px;
}

@media screen and (max-width: 768px) {
  .card-img-top {
    height: auto !important;
  }
}
.svg-white {
  filter: brightness(100);
}
.logo-header {
  width: 60px;
  height: 60px;
}

.btn-info {
  color: white;
}
.btn-purple {
  background-color: #9203f0 !important;
  border-color: #9203f0 !important;
  color: white;
}
.text-primary {
  color: var(--bs-primary) !important;
}
.shadow-primary {
  box-shadow: 0px 6px 6px rgb(184 205 245 / 40%) !important;
}
.px-6 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}
.btn-primary.h5 {
  color: var(--bs-primary) !important;
}
.btn-primary:hover.h5 {
  color: white !important;
}

@media (min-width: 768px) {
  .px-8 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .py-8 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .pe-8 {
    padding-right: 5rem !important;
  }
}

.bg-purple-stripe {
  background-color: #615bff;
}
.avatar-xl-special {
  width: 6rem;
  height: 6rem;
}

.number-rounded-xs {
  width: 2rem;
  height: 2rem;
  line-height: 1.75rem;
  font-size: 1rem;
}

@font-face {
  font-family: tabler-icons;
  font-style: normal;
  font-weight: 400;
  src: url(../../src/assets/fonts/tabler-icons/fonts/tabler-icons.eot);
  src: url(../../src/assets/fonts/tabler-icons/fonts/tabler-icons.eot?#iefix)
      format("embedded-opentype"),
    url(../../src/assets/fonts/tabler-icons/fonts/tabler-icons.woff2) format("woff2"),
    url(../../src/assets/fonts/tabler-icons/fonts/tabler-icons.woff) format("woff"),
    url(../../src/assets/fonts/tabler-icons/fonts/tabler-icons.ttf) format("truetype"),
    url(../../src/assets/fonts/tabler-icons/fonts/tabler-icons.svg#tabler-icons) format("svg");
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: tabler-icons;
    src: url(../fonts/tabler-icons/fonts/tabler-icons.svg#tabler-icons)
      format("svg");
  }
}
.ti {
  font-family: tabler-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ti-menu-2:before {
  content: "\ec42";
}


.text-white-childs h1,
.text-white-childs h2,
.text-white-childs h3,
.text-white-childs h4,
.text-white-childs h5,
.text-white-childs h6,
.text-white-childs a {
  color: white !important;
}

.header-sticky .custom-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.bg-gray-subtle {
  background-color: var(--bs-gray-subtle) !important;
}

.py-6 {
  padding-top: 3.2rem !important;
  padding-bottom: 3.2rem !important;
}
@media (min-width: 1280px) and (max-width: 1280px) and 
       (min-height: 800px) and (max-height: 800px) and 
       (-webkit-device-pixel-ratio: 2) {
  body {
    transform: scale(0.9); /* Escalar al 90% */
    transform-origin: top left; /* Fijar el punto de origen */
  }
}
@media (min-width: 1024) and (max-width: 1024) and 
       (min-height: 768px) and (max-height: 768px) {
  body {
    transform: scale(0.5); /* Escalar al 90% */
    transform-origin: top left; /* Fijar el punto de origen */
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .btn-custom {
    padding-left: 1rem !important; /* Cambia según tus necesidades */
    padding-right: 1rem !important; /* Cambia según tus necesidades */
  }
  .custom-fs {
    /* font-size: 0.5rem !important; */
  }
}
.nav-link {
  position: relative;
  z-index: 1;
  display: inline-block;
}


#aside-left .nav-link{
  background-color: white ;
}
.show-menu-on-hover {
  z-index: -1;
  font-size: 0.80rem;
  position: absolute;
  margin-left: 0;
  left: 0;
  background-color: var(--bs-primary);
  color: white;
  border-radius: 0.5rem;
  top: 15%;
  transform: scaleX(0);
  min-width: 140px;
  padding: 0;
}
.nav-link-wrapper .show-menu-on-hover {
  transition: all 120ms ease;
}
.nav-link-wrapper:hover .show-menu-on-hover {
  transform: translate(3.2rem,0);
  opacity: 1;
  transform: scaleX(1);
  left: 3.2rem;
  padding: 0.25rem 0.9rem 0.25rem 0.8rem;
}

.nav-link-wrapper {
  z-index: 10;
  position: relative;
}

.py-s2 {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.bg-gray {
  background-color: #e8e8e8 !important;
}

.btn-gray {
  background-color: #f4f5f6 !important;
  color: #63778b !important;
  border-color: #f4f5f6 !important;
}

table {
  table-layout: fixed; 
  width: 100%; 
}
/* Permite que el texto se parta y no se salga de la celda */
td, th {
  word-wrap: break-word; 
  white-space: normal; 
}