<style>
    @media (min-width: 700px) {
    .login-box {
      width: 650px;
   } 
   .login-box .card2 {
    display: flex;
    flex-direction: row;
    align-items: center;
   }
   .login-box .card2 img {
    width: 90%;
   }
   .login-box .card2 .card3 {
    width: 100%;
   }
    }

    #olvidar {
      display: block;
      text-align: center;
      margin-top: 10px;
    }

  </style>

<div class="login-page">
  <div class="back"></div>
  <div class="login-box">

    <!-- /.login-logo -->
    <div class="card card2" style="border-radius: 20px">

      <div class="card-body login-card-body card1"  style
      ="display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-content: center;border-radius: 20px;width: 100%;">
        <img src="vistas/dist/img/Logo.png" class="img-responsive" style="width:100%; border-radius: 10px">
      </div>

      <div class="card-body login-card-body card3" style="border-radius: 20px">
        

        <form method="post">

            <div id="signup">
              <p class="login-box-msg" style="font-weight: bold;">Sistema de Emergencia - Hospital de Quillabamba</p>
                <div class="row" >

                    <div class="input-group mb-3">
                      <input type="text" class="form-control" placeholder="Usuario" name="ingUsuario" required>
                      <div class="input-group-append">
                        <div class="input-group-text">
                          <span class="fas fa-user"></span>
                        </div>
                      </div>
                    </div>

                </div>
                
                <div class="row">
                  <div class="input-group mb-3">
                    <input type="password" class="form-control" placeholder="Contraseña" name="ingPassword" required>
                    <div class="input-group-append">

                      <div class="input-group-text">
                        <span class="fas fa-lock"></span>
                      </div>
                    </div>
                  </div>
                </div>

                
                  <div class="row">
                    <!-- /.col -->
                    <div class="input-group mb-3">
                      <button type="submit" class="btn btn-primary btn-block">Ingresar</button>
                    </div>

                  <div class="text-center w-100">
                      <a href="#" id="olvidar" title="Recuperar Clave">Olvide mi contraseña</a>
                    </div>

                    <!-- /.col -->
                  </div>

            
              <?php 
                $login = new ControladorUsuarios();
                $login -> ctrIngresoUsuario();
              
              ?>

            </div>
        </form>
        <!-- /.login-card-body -->
      

        <div id="recuperarclave">

            <form action="modulos/recuperarClaveConLink.php" method="post">

              <p class="login-box-msg recuperarPass">
                      Recuperar tu Clave
                  </p>
                  <div class="row" >
                      <div class="input-group mb-3">
                          <input type="email" class="form-control" name="email"  placeholder="ingrese Correo" required autocomplete="off" style="margin: 0px 20px">
                      </div>
                  </div>

                  <div class="row" >
                    <div class="input-group mb-3">
                      <input type="submit" class="btn btn-primary btn-block " value="RECUPERAR CLAVE" style="margin: 0px 20px" />
                    </div>
                  </div>

                      <a href="#" id="volver" class="mt-3 mb-4" title="Volver" style="margin: 0px 20px" >Volver</a>
                      <br>
                      <br>
            </form>

      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
 $('#recuperarclave').hide(); 

$('#olvidar').on('click', function() {
    $('#signup').hide(); //para ocultar
    $("#recuperarclave").fadeIn("slow"); //mostrar
});

$('#volver').on('click', function() {
    $('#recuperarclave').hide(); //para ocultar
    $("#signup").fadeIn("slow"); //mostrar
});
</script>
<!-- /.login-box -->