html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Elimina las barras de desplazamiento */
}

    .navbar {
      background: #fff;
    }

    .navbar-brand img {
      height: 40px;
    }

.btn-outline-primary {
    --bs-btn-color: #229dc9;
    --bs-btn-border-color: #229dc9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #de1645;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #940019;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #de1645;
    --bs-btn-active-border-color: none;
--bs-btn-active-shadow: 0;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ccc;
    --bs-btn-disabled-border-color: #eee;
	--bs-btn-border-color: none;
}

/* Estilo específico para los botones dentro del modal en la versión móvil */
@media (max-width: 768px) { /* Aplica solo en pantallas pequeñas (móviles) */
  #modalAdvertencia .modal-footer .btn {
    font-size: 14px; /* Tamaño de fuente a 14px para los botones */
  }
}


/* Eliminar el borde azul en los botones del menú móvil */
.nav-menu-inferior .btn:focus {
  outline: none;
  box-shadow: none;
}

/* Eliminar el borde azul en los iconos del menú móvil */
.nav-menu-inferior .btn i:focus {
  outline: none;
}

/* Opcional: Eliminar el borde azul en todos los elementos interactivos */
button:focus, a:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: none;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #de1645;
}


    #panorama-container {
      width: 100%;
	      background-color: white;
      height: calc(100vh - 56px); /* Ajuste para los dos nav-menus */
      margin-top: 56px;
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .hidden {
      display: none;.btn-primary
    }

    .selected-option {
      background-color: #007bff !important;
      color: white !important;
    }

    .option-image {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.3s ease;
    }

    .option-image.selected {
      border-color: #007bff;
    }

    .option-image:hover {
      border-color: #007bff;
    }

    /* Estilos para el nuevo nav-menu superior */
    .nav-menu-superior {
      position: fixed;
      bottom: 80px; /* Justo encima del nav-menu inferior */
      left: 0;
      width: 100%;
      background-color: #fff;
  z-index: 10001;  /* Establece un z-index más alto para asegurarse de que esté encima del pie de página */
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10px;
    }
	




    /* Estilos para el nav-menu inferior */
    .nav-menu-inferior {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #111; /* Color de fondo */
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
    }

    /* Estilos para los botones del nav-menu-inferior */
    .nav-menu-inferior .btn {
	  width: 100px;
	  white-space: nowrap; 
	  text-align: center;
      color: #a0a0a0; /* Color de los iconos */
      background-color: transparent; /* Fondo transparente */
      border: none; /* Sin bordes */
      padding: 10px; /* Espaciado interno */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Ocultar el texto dentro de los botones */
    .nav-menu-inferior .btn span {
      display: none; /* Oculta el texto */
    }

    /* Estilos para los iconos */
    .nav-menu-inferior .btn i {
      font-size: 35px !important; /* Tamaño de los iconos */
      color: #a0a0a0; /* Color de los iconos */
    }

	
	/* Ajuste para el menú desplegable hacia arriba */
.dropup .dropdown-menu {
  bottom: 100%; /* Despliega el menú hacia arriba */
  top: auto; /* Anula la posición por defecto */
  margin-bottom: 0.5rem; /* Ajusta el margen inferior si es necesario */
}

/* Estilo para los botones de Premium y Excellence cuando el cursor pasa por encima */
#btnExcellenceMobile:hover,
#btnPremiumMobile:hover,
#btnExcellenceDesktop:hover,
#btnPremiumDesktop:hover {
  background-color: #de1645 !important; /* Color de fondo amarillo */
  color: white !important; /* Color del texto blanco */
  border-color: #de1645 !important; /* Color del borde amarillo */
}


    /* Estilos para el menú de opciones dinámico */
    #mobileMenu {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 10px;
      padding: 10px;
    }

    #mobileMenu .btn {
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    #mobileMenu .btn i {
      margin-right: 5px;
    }

.footer-text {
  position: fixed;
  bottom: 10px; /* Distancia desde el borde inferior */
  left: 50%;    /* Centrado horizontalmente */
  transform: translateX(-50%); /* Ajusta el centro exacto */
  font-size: 12px;  /* Tamaño de texto pequeño */
  color: #ffffff;  /* Color blanco */
  text-align: center; /* Asegura que el texto esté centrado */
  z-index: 9999; /* Asegura que el texto esté por encima de otros elementos */
}

.footer-text a {
  color: #ffffff; /* Color del enlace */
  text-decoration: none; /* Quita el subrayado del enlace */
}

.footer-text a:hover {
  text-decoration: underline; /* Subraya el enlace cuando se pasa el ratón */
}

@media (max-width: 992px) {
  #footerText {
    position: absolute;
    bottom: 130px; /* Mueve el texto hacia arriba 140px */
    width: 100%;
    text-align: center;
    margin-bottom: 20px; /* Añade un pequeño margen en la parte inferior */
    font-size: 12px; /* Tamaño del texto en móvil */
  }
  



/* Evitar el desplazamiento general de la página */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;  /* Esto elimina las barras de desplazamiento */
}

/* Contenedor del spinner, centrado */
#loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  text-align: center;
  z-index: 10000; /* Asegura que esté por encima de otros elementos */
}

/* Aseguramos que el GIF se ajuste correctamente */
#loading-spinner img {
  max-width: 100%;
  height: auto;
}

#loading-text {
  display: block;
  font-size: 14px;
  color: #de1645; /* Puedes cambiar el color si lo deseas */
  margin-top: 10px; /* Espacio entre el GIF y el texto */
  animation: fadeInOut 2s infinite; /* Cambia la duración si lo deseas */
}

/* Animación de desvanecimiento */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loading-bar {
  width: 80%;  /* Ajuste para el ancho de la barra */
  height: 20px; /* Ajuste para la altura de la barra */
}

#loading-text {
  margin-bottom: 10px;
  font-size: 18px;
  color: #229dc9;
}




	