@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", system-ui, sans-serif;
  background-color: #F2F2F2;
}
* {
  box-sizing: border-box;
}


.login-form-wrap{
  background-color: #FFFFFF;
  font-family: "Poppins", system-ui, sans-serif;
  border-radius: 0px 15PX 15px 0px ;
}
/* Estilo para el contenedor de inicio de sesión */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height:75vh; /* Ocupa toda la altura de la ventana */
  background-color: #F2F2F2; /* Color de fondo */
}

/* Estilo para el contenedor principal que envuelve el formulario y el texto */
.login-box {
  display: flex;
  width: 80%; /* Ancho del contenedor, puedes ajustarlo */
  max-width: 910px; /* Ancho máximo */
  background-color: #e6e6e6; /* Fondo gris oscuro */
  border-radius: 14px; /* Bordes redondeados */
  border-radius: 15px;
  box-shadow: 12px 12px 0px rgba(146, 24, 57, 1);
  position: relative;
}

/* Estilo para el envoltorio del formulario */
.login-form-wrap {
  padding: 40px; /* Relleno interior */
  flex: 1; /* Toma el espacio restante */
}

/* Estilo para el envoltorio del texto */
.login-text-wrap {
  padding: 40px; /* Relleno interior */
  flex: 1; /* Toma el espacio restante */
  display: flex;
  flex-direction: column; /* Organiza elementos en columna */
  justify-content: center; /* Centra el contenido verticalmente */
  align-items: center; /* Centra el contenido horizontalmente */
}


.titulo{
  color: #815C28;
  font-weight: 800;
  font-size: 32px;
}

.txt-sub{
  color: #6D7075;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 30px;
}
.num-ver {
  position: absolute; /* Permite posicionar el elemento de forma absoluta dentro de su contenedor */
  top: 20px; /* Distancia desde la parte superior del contenedor */
  left: 20px; /* Distancia desde la izquierda del contenedor */
  background-color: #921839; /* Color de fondo (puedes cambiarlo) */
  color: white; /* Color del texto */
  padding: 8px 12px; /* Espaciado interno (padding) para hacerlo más grande */
  border-radius: 10px; /* Bordes redondeados para un efecto de botón */
  font-weight: 500; /* Negrita para el texto */
  box-shadow: 0 2px 10px rgba(151, 151, 151, 0.3); /* Sombra sutil para dar profundidad */
  z-index: 10; /* Asegura que el botón esté por encima de otros elementos */
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
}

.form-group {
  margin-bottom: .5rem; /* Espaciado entre los grupos de formulario */
}

.label {
  font-weight: bold; /* Negrita para las etiquetas */
  color: #333; /* Color del texto de las etiquetas */
  display: block; /* Asegura que el label ocupe toda la línea */
  margin-bottom: 0.5rem; /* Espacio entre el label y el input */
}

.form-control {
  width: 100%; /* Asegura que el input ocupe todo el ancho disponible */
  border: 1px solid #b3b3b3d0; /* Borde gris claro */
  border-radius: 8px; /* Bordes redondeados para los inputs */
  padding: 12px; /* Espacio interno */
  font-size: 1rem; /* Tamaño de fuente */
  transition: border-color 0.3s; /* Transición suave para el borde */
  color: #999DA4; /* color  de text*/
  font-family: "Poppins", system-ui, sans-serif;
}

.form-control:focus {
  border-color: #006E63; /* Color del borde en foco */
  box-shadow: 0 0 5px rgba(146, 101, 17, 0.1); /* Sombra de foco */
  outline: none; /* Sin contorno predeterminado */
}
/* Diseño de la casilla de verificación */
.checkbox-wrap {
  display: flex; /* Usa flexbox para alinear el ícono y el texto */
  align-items: center; /* Centra verticalmente */
  cursor: pointer; /* Cambia el cursor al pasar sobre el elemento */
}

.checkbox-wrap input[type="checkbox"] {
  display: none; /* Oculta el input de tipo checkbox */
}

.checkmark {
  width: 20px; /* Ancho del ícono */
  height: 20px; /* Alto del ícono */
  background-color: #f0f0f0; /* Fondo claro para el checkmark */
  border: 2px solid #A1845A; 
  border-radius: 4px; /* Bordes redondeados */
  display: inline-block; /* Asegura que el checkmark se comporta como un bloque */
  position: relative; /* Permite la posición absoluta de la marca de verificación */
  margin-right: 10px; /* Espacio entre el checkmark y el texto */
  transition: background-color 0.3s, border-color 0.3s; /* Suaviza el cambio de color */
}

/* Cambia el fondo y el borde cuando se selecciona */
.checkbox-wrap input[type="checkbox"]:checked + .checkmark {
  background-color: #006E63; /* Color de fondo  cuando está seleccionado */
  border-color: #055850; /* Cambia el borde a un  más oscuro */
}

/* Marca de verificación cuando se selecciona */
.checkbox-wrap input[type="checkbox"]:checked + .checkmark:after {
  content: ""; /* Crea un contenido vacío para la marca de verificación */
  position: absolute; /* Posiciona la marca de verificación dentro del checkmark */
  left: 7px; /* Ajusta la posición horizontal */
  top: 1px; /* Ajusta la posición vertical */
  width: 5px; /* Ancho de la marca de verificación */
  height: 10px; /* Alto de la marca de verificación */
  border: solid white; /* Color de la marca de verificación */
  border-width: 0 2px 2px 0; /* Crea un trazo de verificación */
  transform: rotate(45deg); /* Rota la marca de verificación */
}

/* Estilo del botón */
.btn-primary {
  background-color: #006E63; /* Color de fondo del botón */
  color: #ffffff; /* Color del texto del botón */
  border: none; /* Sin borde */
  border-radius: 8px; /* Bordes redondeados para el botón */
  padding: 12px 20px; /* Espaciado interno del botón */
  font-size: 1rem; /* Tamaño de fuente */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves para el botón */
}

/* Efecto al pasar el ratón sobre el botón */
.btn-primary:hover {
  background-color: #006E63; /* Color de fondo del botón al pasar el ratón */
  box-shadow: 0 4px 20px rgba(0, 128, 0, 0.1); /* Sombra al pasar el ratón */
}


.txt-sesin{
  font-size: 14px;
}
.d-md-flex {
  display: flex; /* Asegura que el contenedor sea un flexbox */
  justify-content: space-between; /* Alinea los elementos en los extremos */
}

.custom-link {
  color: #8B4513; /* Color café */
  text-decoration: none; /* Elimina la línea subrayada */
  font-weight: 400; /* Estilo en negrita */
  transition: color 0.3s; /* Suaviza la transición del color */
}

.custom-link:hover {
  color: #A0522D; /* Color más claro al pasar el ratón */
}

/* Opcional: Espacio entre los enlaces */
.text-md-left, .text-md-right {
  margin-right: 10px; /* Espacio entre los elementos (ajustar según sea necesario) */
}
/* Estilo del header */
.navbar {
  width: 100%;
  background-color: #F8FAFC; /* Color de fondo verde */
  padding: 1px; /* Espaciado interno */
  display: flex;
  justify-content: space-between; /* Mantén los elementos separados */
  align-items: center; /* Centra verticalmente los elementos */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
}

.container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20px; /* Espaciado lateral */
}

.navbar-left {
  display: flex;
  align-items: center;
}

.navbar-left img.logo {
  width: 350px; /* Tamaño del logo ajustado */
  height: auto; /* Mantén las proporciones del logo */
}

.navbar-right {
  text-align: right; /* Alinea el texto a la derecha */
  color: #921839; /* Color blanco para el texto */
  font-size: 1.4rem; /* Tamaño de fuente */
  font-weight: bold; /* Texto en negrita */
}

/* Para pantallas pequeñas (resoluciones bajas) */
@media (max-width: 768px) {
  .navbar {
      flex-direction: column; /* Coloca los elementos uno debajo del otro */
  }

  .navbar-left,
  .navbar-right {
      margin-bottom: 10px;
      text-align: center;
  }

  .navbar-right {
      font-size: 1.2rem; /* Reduce el tamaño del texto en pantallas pequeñas */
  }
}
.footer {
  background-color: #F8FAFC; /* Fondo rojo */
  color: #000000; /* Texto blanco */
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
}

.location {
  font-size: 12px;
}

.links {
  font-size: 12px;
}

.footer-link {
  color: #000000;
  text-decoration: none;

}

.footer-link:hover {
  text-decoration: underline;
}

.footer-bottom {
  background-color: #721822; /* Color rojo más oscuro para la parte inferior */
  text-align: center;
  font-size: 12px;
  color: #ffffff;
}

.copyright {
  margin: 0;
  font-size: 10px;
}

.txt-froo{
  font-size: 20px;
}
/* Media Queries para Responsividad */
@media (max-width: 1424px) {
  .login-box {
    width: 90%; /* Reduce el ancho en pantallas más pequeñas */
  }
  .login-container{
    height:90vh; /* Ocupa toda la altura de la ventana */
  }
  .footer-content{
  display: none;
}
  .titulo {
    font-size: 28px; /* Ajusta el tamaño del título */
  }

  .txt-sub {
    font-size: 14px; /* Ajusta el tamaño del subtítulo */
  }

  .btn-primary {
    font-size: 0.9rem; /* Ajusta el tamaño del botón */
    padding: 10px 16px;
  }
}

@media (max-width: 768px) {
  .login-box {
    flex-direction: column; /* Cambia el diseño a columna en pantallas pequeñas */
    width: 80%;
  }

  .login-text-wrap, .login-form-wrap {
    padding: 10px; /* Reduce el padding en pantallas pequeñas */
  }
  .login-container{
    height:100vh; /* Ocupa toda la altura de la ventana */
  }

  .titulo {
    font-size: 24px; /* Reduce el tamaño del título en pantallas más pequeñas */
  }
img{
  width: 200px;
}
  .txt-sub {
    font-size: 12px; /* Reduce el subtítulo */
    margin-bottom: 20px;
  }

  .form-control {
    padding: 10px; /* Ajusta el padding del input */
  }

  .btn-primary {
    font-size: 0.8rem; /* Ajusta el tamaño del botón */
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .login-box {
    width: 100%; /* Usa el 100% del ancho en pantallas muy pequeñas */
    align-items: center;
    margin: 40px;
  }

  .titulo {
    font-size: 20px; /* Ajusta aún más el tamaño del título */
  }

  .txt-sub {
    font-size: 12px; /* Ajusta el tamaño del subtítulo */
  }

  .btn-primary {
    font-size: 0.7rem; /* Reduce el tamaño del botón */
    padding: 6px 10px;
  }
  
}