/* Variables globales */

:root {
  --principal: #79142a;
  --principal2: #c5b099;
  --fontPrincipal: "Gotham Rounded";
  --fontPrincipal: "Sans-serif";
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Open Sans", serif !important;

}

.open{
  font-family: "Open Sans", serif !important;
}

.gris{
  color: #00000090 !important;
}

.cPrincipal{
  color: var(--principal) !important;
}

main {
  flex: 1;
}

.form-control::placeholder {
  color: rgba(0, 0, 0, 0.3) !important; 
  font-weight: 300 !important;
}

.swal-confirm-button {
  background-color: #79142A !important;
  color: #fff !important; 
}

/* Fondo del botón principal */
.btn-principal {
  background-color: var(--principal) !important;
  color: #fff !important;
}

/* Clase reutilizable para animación */
.btn-animacion {
  transition: all 0.3s ease-in-out; /* Animación suave */
}

.btn-animacion:hover {
  transform: translateY(-3px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-animacion:active {
  transform: translateY(0);
  box-shadow: none;
}



.custom-header {
  background-color: var(--principal2);
  padding: 8px 0;
}

/* Ajustar tamaño de los logos por defecto */
.custom-header .logo {
  height: 60px;
  margin-left: 20px;
}

/* Cuando la pantalla sea menor a 768px (móviles y tablets) */
@media (max-width: 768px) {
  .custom-header {
    padding: 5px 0;
  }

  .custom-header .logo {
    height: 50px;
  }
}

footer.footer {
  background-color: var(--principal2);
  padding: 10px 0; /* Aumenta el padding para mejor curvatura */
  color: #fff;
  text-align: center;
  font-size: .90rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  clip-path: ellipse(50% 90% at 50% 100%);
}


.footer_color{
    color: #fff;
}


/* Cambiar color del texto de las pestañas activas */
.nav-tabs .nav-link.active {
  color: #FFF !important;
  background-color: var(--principal2) !important;
  border-color: var(--principal2) !important;
}

/* Cambiar color del texto de las pestañas inactivas */
.nav-tabs .nav-link {
  color: var(--principal);
}

/* Cambiar color cuando se pasa el cursor sobre las pestañas */
.nav-tabs .nav-link:hover {
  color: var(--principal2);
}


.form-control:focus {
  border-color: var(--principal2) !important;
  box-shadow: 0 0 5px rgba(197, 176, 153, 0.75) !important; /* Sombra con el color #C5B099 */
  outline: none !important;
}


.contenedor_movil {
  padding-left: 1000px !important;
  padding-right: 100px; /* Valor por defecto */
}

/* Para pantallas móviles (por ejemplo, dispositivos con un ancho máximo de 768px) */
@media (max-width: 768px) {
  .contenedor_movil {
      padding-left: 0;
      padding-right: 0;
  }
}