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

/* ======================================================================
   Entrar al portal, y las cuatro pantallas de recuperar contraseña, que
   comparten esta hoja.

   Mismo fondo que el héroe de la portada —la foto de planta con su capa
   oscura— para que entrar no se sienta otro sitio. La tarjeta es blanca
   sobre ese fondo, que es lo que la hace destacar sin adornos.
   ====================================================================== */

:root{
  --tinta:#13203a;
  --azul:#2563eb;
  --azul-hover:#1d4fd8;
  --gris:#5b6472;
  --linea:#dfe4ec;
  --papel:#fff;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight:300;
  color:var(--tinta);
}

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:96px 20px 40px;
  /* El degradado azul va debajo de la foto: si la foto tarda en bajar, la
     pantalla nunca aparece en blanco con el formulario flotando. */
  background:
    linear-gradient(180deg, rgba(10,17,33,.93) 0%, rgba(12,21,40,.88) 50%,
                            rgba(14,25,48,.93) 100%),
    url("../images/heroe-planta.97832c940887.webp") center center / cover no-repeat,
    linear-gradient(118deg, #0d1628 0%, #13203a 46%, #1b2d50 100%);
  background-attachment:fixed, fixed, fixed;
}

/* ====== La marca, arriba a la izquierda ====== */
.main-header{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  padding:18px 32px;
}
.main-header .logo{ display:flex; align-items:center; }
.main-header .logo img{ height:46px; width:auto; display:block; }

/* ====== La tarjeta ====== */
.signin{
  width:min(100%, 400px);
  background:var(--papel);
  border-radius:18px;
  padding:34px 32px 28px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}

.signin .group{ margin-bottom:18px; }
.signin .group:last-child{ margin-bottom:0; }

.signin .group.head h2{
  margin:0 0 4px;
  text-align:center;
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:-.01em;
}

/* El párrafo explicativo de las pantallas de recuperar contraseña. */
.signin .group p{
  margin:0;
  color:var(--gris);
  font-size:.93rem;
  line-height:1.6;
  text-align:center;
}

.signin .group label{
  display:block;
  margin-bottom:7px;
  font-size:.88rem;
  font-weight:500;
  color:var(--gris);
}

.signin .group input{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--linea);
  border-radius:10px;
  font-family:inherit;
  font-size:16px;          /* 16 o menos y el teléfono hace zoom al tocar */
  font-weight:400;
  color:var(--tinta);
  background:var(--papel);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.signin .group input::placeholder{ color:#9aa2af; }
.signin .group input:hover{ border-color:#c3ccda; }
.signin .group input:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(37,99,235,.16);
}

.signin .group button{
  width:100%;
  margin-top:4px;
  padding:13px 16px;
  font-family:inherit;
  font-size:1rem;
  font-weight:500;
  border:0;
  border-radius:999px;
  background:var(--azul);
  color:#fff;
  cursor:pointer;
  transition:background .18s ease, transform .12s ease;
}
.signin .group button:hover{ background:var(--azul-hover); transform:translateY(-1px); }
.signin .group button:active{ transform:translateY(0); }
.signin .group button:focus-visible{ outline:3px solid #9aa0f2; outline-offset:2px; }

.forgot-pass-link{ text-align:center; margin-top:6px; }
.signin .forgot-pass-link a{
  color:var(--gris);
  font-size:.9rem;
  text-decoration:none;
}
.signin .forgot-pass-link a:hover{ color:var(--azul); text-decoration:underline; }

/* ====== El ojo de ver la contraseña ======
   Iba anclado al formulario entero, asi que con una pantalla mas alta o un
   campo de error de mas se despegaba del campo. Ahora va anclado a su
   propio grupo, que es donde vive el campo. */
.signin form{ position:static; }
.signin .group{ position:relative; }
.field-icon{
  position:absolute;
  right:12px;
  bottom:12px;
  width:22px;
  height:22px;
  cursor:pointer;
  color:var(--gris);
  display:flex;
  align-items:center;
  justify-content:center;
}
.field-icon:hover{ color:var(--tinta); }

/* ====== Pantallas chicas ====== */
@media screen and (max-width:768px){
  body{ padding:86px 16px 32px; background-attachment:scroll, scroll, scroll; }
  .main-header{ padding:14px 18px; }
  .main-header .logo img{ height:38px; }
  .signin{ padding:28px 20px 22px; border-radius:16px; }
  .signin .group.head h2{ font-size:1.32rem; }
}