/* css/ingresar.css — login */

body{
  background: radial-gradient(900px 500px at 20% 20%, rgba(18, 212, 214, .22), transparent 60%),
              radial-gradient(900px 500px at 80% 70%, rgba(15, 23, 42, .18), transparent 55%),
              linear-gradient(135deg, #060b14, #0b1220);
  color: #fff;
}

form{
  min-height: 100dvh;
  padding: 2rem 9%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
}

form .container{
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.5rem;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

form .container input{
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;

  font-weight: 900;
  font-size: 1.15rem;
}

form .container input::placeholder{
  font-weight: 700;
  color: rgba(255,255,255,.68);
  font-style: italic;
}

form .container input:focus{
  box-shadow: 0 0 0 .22rem rgba(18, 212, 214, .24);
  border-color: rgba(18, 212, 214, .55);
}

form button{
  width: min(520px, 100%);
  padding: .95rem 1rem;
  cursor: pointer;
  border-radius: 1.1rem;

  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: 1.2rem;
  font-weight: 1000;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 52px rgba(18, 212, 214, .22);
  transition: transform .12s ease, filter .12s ease;
}

form button:active{ transform: scale(.99); }

@media (hover:hover){
  form button:hover{ filter: brightness(.98); }
}