.panel {
  max-width: 1900px;
  width: 90%;
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  padding: 2rem; 
  border-radius: 20px; 
  background-color: white; 
  margin-top: 50px;
  margin-bottom: 10px;
}
.panellogin {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  border-radius: 20px;
  background-color: white;
  margin-top: 50px;
  margin-bottom: 10px;
}
.required::after {
  content: " *";
  color: red;
}

/* Título de la tarjeta */
.title-container {
  text-align: center;
  margin-bottom: 10px;
  
}

.title-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #185F64;
  font-family: 'Poppins', sans-serif;
}

/* Estilo para las etiquetas y los iconos dentro de ellas */
.label-text {
  font-size: 1,25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem; 
  margin-bottom: 0.5rem;
  color: #185F64;
  font-family: 'Poppins', sans-serif;
}

/* Estilo para los inputs */
.form-control {
  border: 1px solid #185F64; 
  border-radius: 15px;
  padding: 0.5rem;
  font-size: 1rem;
  width: 100%;
  box-shadow: 0 2px 10px #1F7F87; /* Sombra ligera alrededor del input */
  
}

/* Estilo para el botón */
#login-button {
  background-color: #000000;
  color: white;
  padding: 0.75rem;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: background-color 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

/* Hover del botón */
#login-button:hover {
  background-color: #1F7F87;
  border-color: #004C49;
}

/* Estilo para los textos de error */
.text-danger {
  font-size: 0.9rem;
  color: red;
  margin-top: 0.5rem;
}

/* Estilo para el grupo de input y el icono de ojo para la contraseña */
.input-group {
  position: relative;
}

.input-group-text {
  cursor: pointer;
  font-size: 1.2rem;
}

/* Estilo para los enlaces debajo del campo de contraseña */
.mt-2 a {
  font-size: 0.9rem;
  color: #31C0CA;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

/* Hover para los enlaces */
.mt-2 a:hover {
  text-decoration: underline;
}

/* Estilo para que el formulario se vea bien en pantallas pequeñas */
@media (max-width: 768px) {
  .panel {
      width: 100%;
      padding: 1.5rem;
  }
}

/* Adaptación a diferentes resoluciones */
@media (min-width: 768px) {
  .panel {
      width: 50%;
  }
}

@media (min-width: 992px) {
  .panel {
      width: 33%;
  }
}
.logo-container {
  margin-bottom: 20px;
  text-align: center; /* Centra la imagen del logo */
}

.logo {
  max-width: 270px; /* Ajusta el tamaño del logo */
  height: auto;
}
.logo-container1 {
  margin-bottom: 20px;
  text-align: center; /* Centra la imagen del logo */
}

.logo1 {
  max-width: 230px; /* Ajusta el tamaño del logo */
  height: auto;
}
.boton1 {
  background-color: #000000; /* Color de fondo azul */
  color: white; 
  padding: 0.75rem; 
  border: none; 
  border-radius: 20px; 
  cursor: pointer; 
  font-size: 1rem; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  transition: background-color 0.3s ease; 
  width: 100%; 

}
.boton1:hover {
  background-color: #185F64; /* Color negro más claro para hover */
  
}