:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-large: 18px;
  --background-gradient: linear-gradient(199deg, #324798 0%, #101732 65.93%);
}

/* ESTILOS GLOBALES */

html {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-family: Inter;
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
}

.btn-primary {
  display: flex;
  padding: 15px 10px;
  height: 54px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: #1b72ba;
  width: 100%;
  margin-top: 25px;
  border: none;
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

.btn-secondary {
  display: flex;
  width: 100%;
  padding: 15px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  color: #515151;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: none;
}

.h1 {
  color: #fff;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.h2 {
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.h3 {
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.h4 {
  color: var(--Neutral-10, #000);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.h5 {
  color: var(--Neutral-10, #000);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.hb {
  color: var(--Neutral-10, #000);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.text--plus {
  color: #1cb61c;
}

.text--minus {
  color: #c82828;
}

.text--blue {
  color: #1b72ba;
}

.text--darkblue {
  color: #172146;
}

.text--light {
  color: rgba(0, 0, 0, 0.5);
}

.text--black {
  color: var(--Neutral-10, #000);
}

input {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  height: 54px;
  padding: 15px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid #0f6eff;
  background: #fff;
  color: var(--Neutral-10, #000);
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  transition: all 0.3s ease;
}

input::placeholder {
  color: var(--Neutral-10, #000);
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  opacity: 0.5;
  flex-shrink: 0;
}

input:focus {
  border: 2px solid #0f6eff;
  background-color: transparent;
}

.submit--off {
  background-color: #9ebbd3;
  cursor: auto;
}

.submit--on {
  background-color: #1b72ba;
  cursor: pointer;
}

.componente--usuario {
  display: flex;
  width: 100%;
  padding: 10px 15px;
  flex-direction: row;
  align-items: flex-start;
  gap: 5px;
  border-radius: 5px;
  border: 2px solid rgba(28, 40, 86, 0.5);
  background: #fff;
  box-sizing: border-box;
  justify-content: space-between;
  /* margin-top: 20px; */
  cursor: pointer;
  min-height: 66px;
}

.componente--usuario .left {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  height: 100%;
}

.componente--usuario .right {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
}

.componente--movimiento {
  display: flex;
  padding: 5px 0px;
  align-items: center;
  align-self: stretch;
  background: #fff;
  justify-content: space-between;
  box-sizing: border-box;
  flex-direction: row;
}

.componente--movimiento .arriba {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.componente--movimiento .abajo {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.componente--movimiento .right {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}

.componente--movimiento .left img {
  width: 40px;
  height: 40px;
  margin: 3px 5px;
}

.componente--input--lupa {
  margin: 12px 0 0 0;
  background: url("img/search.svg") no-repeat 20px center;
  padding-left: 55px;
}

.main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 700px;
  position: relative;
  min-height: 100vh;
  margin: 0;
}

.main .background {
  z-index: -1;
  height: 87%;
  min-height: 100vh;
}

.main .container-white {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  max-width: 700px;
  box-sizing: border-box;
  position: relative;
  min-width: 250px;
  padding-top: 27px;
  border-radius: 20px 20px 0px 0px;
  padding: 35px 16px;
  min-height: 100%;
  flex-grow: 1;
}

.main .navbar {
  display: inline-flex;
  gap: 44px;
  align-items: center;
  min-height: 50px;
}

.main .navbar a {
  position: absolute;
  left: 16px;
  cursor: pointer;
}

.main .navbar .h2 {
  margin-top: 20px;
}

/* LOGIN */

.login {
  padding: 56px 16px;
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  background: #fff;
  max-width: 700px;
  width: 100%;
}

.section-form {
  width: 100%;
  max-width: 700px;
}

.section-form .form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  width: 100%;
}

.form-container {
  display: inline-block;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  position: relative;
}

.form-container label .description {
  color: var(--Neutral-10, #000);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  opacity: 0.5;
  flex: 1 0 0;
}

.form-container .error {
  color: #c82828;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  display: none;
}

.form-container .error--show {
  display: flex;
}

.form-container .show_password {
  position: absolute;
  margin-top: -35px;
  opacity: 0.5;
  display: flex;
  right: 20px;
}

/* HOME USER */

.home-user {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  max-width: 700px;
  box-sizing: border-box;
  position: relative;
  min-width: 280px;
}

.home-user .navbar {
  display: flex;
  height: 42px;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
  width: 100%;
}

.home-user .navbar .left {
  display: flex;
  gap: 5px;
}

.home-user .navbar .left .documento {
  color: #fff;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.home-user .navbar .left .nombre {
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.home-user .navbar .right .salir {
  cursor: pointer;
}

.home-user .dinero {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  /* padding: 25px 0 20px 0; */
  min-height: 50px;
  /* height: auto; */
  flex-grow: 1;
  justify-content: center;
  max-height: 400px;
}

.home-user .container-white {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  min-height: 500px;
}

.home-user .transacciones {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 26px 7px 0px rgba(41, 58, 125, 0),
    0px 17px 7px 0px rgba(41, 58, 125, 0.01),
    0px 10px 6px 0px rgba(41, 58, 125, 0.05),
    0px 4px 4px 0px rgba(41, 58, 125, 0.09),
    0px 1px 2px 0px rgba(41, 58, 125, 0.1);
  box-sizing: border-box;
  min-height: 83px;
  z-index: 10;
  margin: 30px 0 35px 0;
  max-height: 83px;
  flex-grow: 1;
}

.home-user .transacciones div {
  display: flex;
  width: 92px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  cursor: pointer;
}

.home-user .movimientos {
  height: 53%;
  display: flex;
  align-items: start;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 370px;
  flex-grow: 1;
}
.home-user .movimientos .h2 {
  z-index: 10;
  padding-bottom: 10px;
}

.home-user .movimientos .movimientos-container {
  width: 100%;
  display: inline-flex;
  padding: 15px 9px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 46px 13px 0px rgba(24, 34, 74, 0),
    0px 30px 12px 0px rgba(24, 34, 74, 0.01),
    0px 17px 10px 0px rgba(24, 34, 74, 0.05),
    0px 7px 7px 0px rgba(24, 34, 74, 0.09),
    0px 2px 4px 0px rgba(24, 34, 74, 0.1);
  z-index: 10;
  box-sizing: border-box;
}

.home-user .movimientos .movimientos-container .fecha {
  align-self: stretch;
  color: var(--Neutral-10, #000);
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

@media only screen and (max-height: 800px) {
  .home-user .background {
    border-radius: 20px 20px 0px 0px;
    background: #f5f5f5;
    position: absolute;
    width: 100%;
    bottom: 0px;
    min-height: 480px;
    height: 70%;
    max-height: 480px;
    display: flex;
    flex-grow: 1;
  }
}

@media only screen and (min-height: 800px) {
  .home-user .background {
    border-radius: 20px 20px 0px 0px;
    background: #f5f5f5;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 60%;
    display: flex;
    flex-grow: 1;
  }
}

.movimiento {
  display: flex;
  padding: 5px 0px;
  align-items: center;
  align-self: stretch;
  background: #fff;
  justify-content: space-between;
  box-sizing: border-box;
}

.movimiento .left {
  display: flex;
  height: 42px;
}

.movimiento .left div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}

.movimiento .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-sizing: border-box;
}

.movimiento .left img {
  width: 40px;
  height: 40px;
  margin: 3px 5px;
}

.home-user .movimientos .movimientos-container .container-btn {
  display: flex;
  width: 100%;
  justify-content: center;
}

.home-user .movimientos .movimientos-container .container-btn .btn-primary {
  display: inline-block;
  max-width: 270px;
}

/* BUSCAR USUARIO */

.main .container-white form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  box-sizing: border-box;
  max-height: 100%;
}

.main .container-white form .h2 {
  color: #172146;
}

.main .container-white form button {
  margin-top: 40px;
}

.main .container-white .container-anteriores {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  padding: 2rem 0;
  box-sizing: border-box;
  max-height: 100%;
  gap: 10px;
}

.main .container-white .container-anteriores .h2 {
  color: #172146;
}

.transferencia {
  display: flex;
  width: 100%;
  padding: 10px 15px;
  flex-direction: row;
  align-items: flex-start;
  gap: 5px;
  border-radius: 5px;
  border: 2px solid rgba(28, 40, 86, 0.5);
  background: #fff;
  box-sizing: border-box;
  justify-content: space-between;
  margin-top: 20px;
  cursor: pointer;
  min-height: 66px;
}

.transferencia .left {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  height: 100%;
}

.transferencia .right {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
}

/* SELECCIONAR MONTO */

.container-white .dinero-disponible {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container-white .dinero-disponible .h4 {
  margin-top: 17px;
  color: rgba(0, 0, 0, 0.5);
}

.container-white .dinero-disponible div {
  display: flex;
}

.container-white .dinero-disponible .h1 {
  margin-top: 9px;
  color: var(--Neutral-10, #000);
}

.container-white .teclado-numerico {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 100%;
  margin-bottom: 42px;
  margin-top: 30px;
  flex-grow: 1;
}

.container-white .teclado-numerico .row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 100%;
  flex-grow: 1;
}

.container-white .teclado-numerico .row .h2 {
  color: var(--Neutral-10, #000);
  opacity: 0.5;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  border: none;
  background-color: transparent;
  min-height: 45px;
}

.container-white .teclado-numerico .row .h2:active {
  background-color: #00000046;
}

/* CASOS DE EXITO */

.transferencia-exitosa {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  max-width: 700px;
  box-sizing: border-box;
  position: relative;
  min-width: 250px;
  padding-top: 27px;
  min-height: 240px;
}

.transferencia-exitosa .navbar {
  display: inline-flex;
  gap: 44px;
  align-items: center;
  margin: 16px 0 10px 0;
  min-height: 50px;
}

.transferencia-exitosa .navbar a {
  position: absolute;
  left: 16px;
  cursor: pointer;
}

.transferencia-exitosa .container-white {
  width: 100%;
  background: #f5f5f5;
  height: 100vh;
  border-radius: 20px 20px 0px 0px;
  padding: 35px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: scroll;
}

.container-exito-1 {
  min-width: 176px;
  display: flex;
  flex-direction: column;
  width: 60%;
  align-items: center;
  gap: 16px;
}

.container-exito-1 .h2 {
  color: var(--Neutral-10, #000);
}

.container-exito-1 .icono-exito {
  width: 100px;
  height: 100px;
}

.container-datos {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.container-datos .datos-transferencia {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container-datos div .left {
  color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}

.container-datos div .right {
  color: #172146;
  display: flex;
  align-items: center;
  gap: 10px;
}

.container-datos .transferencia {
  margin-top: -20px;
}

.container-exito-3 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
  max-width: 350px;
}

/* TU QR */

.main .container-tuqr {
  justify-content: space-evenly;
}

.container-tuqr-1 {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  background-color: #9b9b9b;
  display: flex;
  align-items: center;
}

/* MOVIMIENTOS */

.movimientos .container-white {
  padding: 24px 11px;
}

.movimientos .container-white .historial {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 15px 9px;
  box-sizing: border-box;
  gap: 10px;
}

.movimientos .container-white .historial hr {
  width: 100%;
  height: 3px;
  border: none;
  background-color: #37b4d9;
  flex-shrink: 0;
}

.movimientos .container-white .historial .total {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.movimientos .container-white .historial .hb {
  font-weight: 500;
}

.movimientos .container-white .historial .componente--movimiento {
  background-color: transparent;
  padding: 0;
}

.movimientos .container-white .historial .componente--movimiento .hb {
  font-weight: 400;
}

/* EMITIR DINERO */

.aviso-emitir-dinero {
  display: inline-flex;
  padding: 15px 9px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 46px 13px 0px rgba(24, 34, 74, 0),
    0px 30px 12px 0px rgba(24, 34, 74, 0.01),
    0px 17px 10px 0px rgba(24, 34, 74, 0.05),
    0px 7px 7px 0px rgba(24, 34, 74, 0.09),
    0px 2px 4px 0px rgba(24, 34, 74, 0.1);
  margin-top: 40px;
}

/* TIPO-EMISION */

.container-emitir-dinero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  width: 100%;
}

.container-emitir-dinero .container-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.container-emitir-dinero .container-3 .container-checkbox {
  display: flex;
  height: 50px;
  padding: 5px 20px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 2px;
  background: #fff;
}

.container-emitir-dinero .container-3 .container-checkbox input {
  width: 24px;
}

.container-emitir-dinero .container-4 {
  width: 100%;
}

.main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 700px;
  position: relative;
}

.main .navbar {
  height: 99px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.main .navbar a {
  left: 16px;
  position: absolute;
  top: 43px;
}

.main .background {
  border-radius: 20px 20px 0px 0px;
  background: #f5f5f5;
  flex-grow: 1;
  position: absolute;
  height: 63%;
  width: 100%;
  bottom: 0px;
  min-height: 100%;
}

/* BUSCAR-CUENTAS */

.main .container-input {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 15px 16px;
}

.main .container-input input {
  background: url("../img/search.svg") no-repeat 20px center;
  background-color: white;
  padding-left: 55px;
  width: 100%;
}

.container-buscar-cuentas {
  gap: 10px;
}

/* DETALLES-CUENTA */

.main .main .container-emitir-dinero {
  display: flex;
  width: 100%;
}

.main .main .container-emitir-dinero .container-1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.main .main .container-emitir-dinero .container-1 .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.main .main .container-emitir-dinero .container-2 {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 25px;
  margin-top: 44px;
}

.main .main .container-emitir-dinero .container-2 .atributo-usuario {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.main .main .container-emitir-dinero .container-2 .atributo-usuario div {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* CREAR-CUENTA */

.container-crear-cuenta {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.container-crear-cuenta .checkboxes {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: 5px;
}

.container-crear-cuenta .checkboxes div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  height: 40px;
  padding: 5px;
  width: 100%;
}

.container-crear-cuenta .checkboxes div input {
  width: 24px;
  height: 24px;
}

.container-crear-cuenta form {
  gap: 25px;
}

.container-crear-cuenta form div {
  width: 100%;
}

/* USUARIO-CREADO */

.main .container-usuario-creado {
  justify-content: space-around;
}

/* VENTANA MODAL */

.bg-ventana-modal {
  position: absolute;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5); 
  height: 100vh;
  z-index: 10;
  top: 0;
  display: none; /* ASHEEEEE */
}

.bg-ventana-modal .ventana-modal {
  position: absolute;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-ventana-modal .ventana-modal div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bg-ventana-modal .ventana-modal div .btn-modal-1 {
  display: flex;
  height: 54px;
  padding: 15px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  border: none;
  background: transparent;
}

.bg-ventana-modal .ventana-modal div .btn-modal-2 {
  display: flex;
  height: 54px;
  padding: 15px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: #1B72BA;
  border: none;
}

.ningun-movimiento {
  margin-top: 8px; 
  background-color: white; 
  padding: 15px 9px; 
  gap: 10px; 
  border-radius: 10px 10px 10px 10px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column; 
  opacity: 1;
  width: 95%;


}
.ningunsub-movimiento {
  text-align: center; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
  
}