body {
   background-image: url('../imagenes/fondo.jpg');
   /* Cambia la ruta a tu imagen */
   background-size: cover;
   /* Ajusta la imagen para que cubra todo el contenedor */
   background-position: center;
   /* Centra la imagen */
   height: 100vh;
   /* Ocupa el 100% de la altura de la ventana */
   display: flex;
   /* Para centrar el contenido */
   flex-direction: column;
   /* Coloca los elementos en columna */
   justify-content: center;
   /* Centra verticalmente */
   align-items: center;
   /* Centra horizontalmente */
}

.card-register {
   width: 50%;
}

/*.card-register .card-body {
   height: 570px;
   max-height: 570px;
   overflow: auto;
}*/

.card-register .card-header h3 {
   font-size: 16px;
   line-height: 28px;
   text-align: center;
   padding: 10px;
}

.card-register .card-body p {
   font-size: 14px;
   letter-spacing: 1px;
   font-weight: bold;
}

.card-register .card-body .form-group input {
   letter-spacing: 1px;
   font-size: 14px;
   border: none;
   background: none;
   border-bottom: solid 1px lightgray;
   border-radius: 0;
}

.card-register .card-body .form-group input:focus {
   border-bottom: 1px solid #4CAF50;
   /* Cambiado a verde */
   outline: none;
   box-shadow: inset 0 -3px rgba(76, 175, 80, 0.5);
   /* Sombra en verde */
}


.card-register .card-body .form-group label,
.card-register .card-body .form-group input,
.card-register .card-body .form-group select {
   font-weight: normal !important;
   letter-spacing: 1px;
   font-size: 14px;
}


.card-register .card-body .input-group input {
   letter-spacing: 1px;
   font-size: 14px;
   border: none;
   background: none;
   border-bottom: solid 1px lightgray;
   border-radius: 0;
}

.card-register .card-body .input-group input:focus {
   border-bottom: 1px solid #4CAF50;
   /* Cambiado a verde */
   outline: none;
   box-shadow: inset 0 -3px 3px rgba(76, 175, 80, 0.5);
   /* Sombra en verde */
}


.card-register .card-body .input-group label,
.card-register .card-body .input-group input,
.card-register .card-body .input-group select {
   font-weight: normal !important;
   letter-spacing: 1px;
   font-size: 14px;
}

small {
   font-size: 14px;
   letter-spacing: 1px;
}

.form-content {
   padding-left: 0px;
   padding-right: 0px;
}

hr {
   margin: 0.5rem 0;
}


#firmaCanvas {
   width: 100%;
   height: 200px;
   border-radius: 10px;
}

@media only screen and (min-width: 320px) and (max-width: 850px) {
   body {
      background-image: url('../imagenes/fondologin.png');
      background-size: cover;
      /* Ajusta la imagen para cubrir todo el fondo */
      background-position: center;
      /* Centra la imagen */
      background-repeat: no-repeat;
      /* Evita que la imagen se repita */
      height: 100vh;
      padding: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .card-register {
      width: 100% !important;
   }

   .card-register .card-body h3 {
      font-size: 16px;
      letter-spacing: 1px;
      text-align: center;
   }

   .card-register .card-body p {
      font-size: 12px;
      letter-spacing: 1px;
      font-weight: bold;
   }

   .card-register .card-body .form-group input {
      letter-spacing: 1px;
      font-size: 12px;
      border: none;
      background: none;
      border-bottom: solid 1px lightgray;
      border-radius: 0;
   }

   .card-register .card-body .form-group input:focus {
      border-bottom: 1px solid #4CAF50;
      /* Cambiado a verde */
      outline: none;
      box-shadow: inset 0 -3px rgba(76, 175, 80, 0.5);
      /* Sombra en verde */
   }


   .card-register .card-body .form-group label,
   .card-register .card-body .form-group input,
   .card-register .card-body .form-group select {
      font-weight: normal !important;
      letter-spacing: 1px;
      font-size: 12px;
   }


   .card-register .card-body .input-group input {
      letter-spacing: 1px;
      font-size: 12px;
      border: none;
      background: none;
      border-bottom: solid 1px lightgray;
      border-radius: 0;
   }

   .card-register .card-body .input-group input:focus {
      border-bottom: 1px solid #4CAF50;
      /* Cambiado a verde */
      outline: none;
      box-shadow: inset 0 -3px 3px rgba(76, 175, 80, 0.5);
      /* Sombra en verde */
   }


   .card-register .card-body .input-group label,
   .card-register .card-body .input-group input,
   .card-register .card-body .input-group select {
      font-weight: normal !important;
      letter-spacing: 1px;
      font-size: 12px;
   }

   small {
      font-size: 12px;
      letter-spacing: 1px;
   }

   .form-content {
      padding-left: 0px;
      padding-right: 0px;
   }

   hr {
      margin: 0.5rem 0;
   }

   .form-content {
      height: auto;
      max-height: 350px;
      overflow: auto;
   }

   #firmaCanvas {
      width: 100%;
      height: 200px;
      border-radius: 10px;
      margin-top: 30px;
   }
}