/* Esmalte · las pantallas de entrada: la portada de las tres puertas, los dos
   logins y la de seguridad. Es lo primero que ve cualquiera de los tres, así que
   tiene que verse como cualquier app que ya sabe usar. */

/* --- Las tres puertas de la portada --------------------------------------- */

.puerta {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.05rem 1.1rem;
  margin-bottom: .85rem;
  box-shadow: var(--sombra);
}

/* La primera es la de la manicurista: es de quien es el producto. */
.puerta:first-of-type {
  border-color: var(--marca-media);
  background: linear-gradient(180deg, var(--marca-suave), var(--tarjeta) 70%);
}

.puerta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--marca-suave);
  color: var(--marca);
}

.puerta:first-of-type .puerta-ico { background: var(--tarjeta); }
.puerta h2 { margin-bottom: .2rem; }
.puerta .acciones { margin-top: .8rem; }

/* --- Ver la contraseña ----------------------------------------------------- */
/* El campo y el botón comparten el mismo recuadro, así no parecen dos cosas. */

.campo-con-ojo { position: relative; display: block; }
.campo-con-ojo input { width: 100%; padding-right: 5.2rem; }

.campo-con-ojo .ojo {
  position: absolute;
  top: 50%;
  right: .45rem;
  transform: translateY(-50%);
  min-height: 38px;
  padding: 0 .75rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--papel);
  color: var(--marca);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.campo-con-ojo .ojo:hover { background: var(--marca-suave); border-color: var(--marca-media); }
.campo-con-ojo .ojo:active { transform: translateY(-50%) scale(.96); }

/* Que el ojo no tape el aspa que Chrome le pone a los campos de contraseña. */
.campo-con-ojo input::-ms-reveal,
.campo-con-ojo input::-ms-clear { display: none; }

/* --- El código de seis números -------------------------------------------- */

.codigo-grande {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: .35em;   /* compensa el espaciado del último número */
}

.codigo-grande::placeholder { letter-spacing: .35em; color: var(--borde-fuerte); }

/* --- "Me olvidé la contraseña", plegado ----------------------------------- */
/* Plegado porque el 99% de las veces no hace falta, y un comando negro suelto
   en la pantalla de entrada asusta a cualquiera. */

.ayuda-clave { margin-top: 1rem; border-top: 1px solid var(--borde); padding-top: .8rem; }

.ayuda-clave summary {
  cursor: pointer;
  color: var(--marca);
  font-size: .855rem;
  font-weight: 700;
  text-align: center;
  list-style: none;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ayuda-clave summary::-webkit-details-marker { display: none; }
.ayuda-clave summary:hover { text-decoration: underline; }
.ayuda-clave[open] summary { margin-bottom: .5rem; }

/* --- Un comando para copiar y pegar --------------------------------------- */

.comando {
  background: var(--tinta);
  color: #F6EEF1;
  border-radius: 10px;
  padding: .7rem .8rem;
  margin: .4rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}