/* =====================================================================
   EL OJITO DE LA CONTRASEÑA
   ---------------------------------------------------------------------
   Un archivo aparte porque los campos de contraseña están en cuatro
   páginas y esas cuatro usan tres hojas de estilo distintas. Escrito
   tres veces, un día uno de los tres quedaría distinto.

   No define ningún color ni borde del campo: eso lo sigue poniendo la
   hoja de cada página. Acá sólo se hace el lugar para el botón y se
   dibuja el botón.
   ===================================================================== */

.ver-clave{
  position:relative;
  display:block;
  width:100%;
}

/* El campo sigue siendo el de siempre. Lo único que cambia es que se
   le deja lugar a la derecha para que el texto no pase por debajo del
   ojito. */
.ver-clave input{
  width:100%;
  padding-right:44px !important;
}

/* ---------------------------------------------------------------------
   Por qué van con dos clases y no con una
   ---------------------------------------------------------------------
   Las cajas de entrada tienen la regla ".login-card button", que le
   pone a todo botón de ahí adentro ancho completo, fondo oscuro y
   padding: es el botón de "Entrar".

   Un ".ver-clave-btn" a secas NO le gana, aunque esta hoja se cargue
   después: ".login-card button" tiene una clase y un elemento, y eso
   pesa más que una clase sola. El ojito salía de 300 px de ancho,
   oscuro y corrido 7 px.

   Con ".ver-clave > .ver-clave-btn" hay dos clases, que sí le ganan.
   --------------------------------------------------------------------- */

.ver-clave > .ver-clave-btn{
  position:absolute;
  top:50%;
  right:6px;
  left:auto;
  transform:translateY(-50%);

  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  min-width:0;
  margin:0;

  padding:0;
  border:none;
  background:none;
  box-shadow:none;
  border-radius:8px;
  cursor:pointer;
  font-size:0;

  color:#8a8676;
  transition:color .18s ease, background .18s ease;
}

.ver-clave > .ver-clave-btn svg{
  width:19px;
  height:19px;
  display:block;
}

/* El hover de la caja de entrada levanta el botón dos píxeles. Acá eso
   descolocaría el ojito, así que se mantiene el centrado. */
.ver-clave > .ver-clave-btn:hover{
  color:#39443c;
  background:rgba(22,40,31,.07);
  transform:translateY(-50%);
}

.ver-clave > .ver-clave-btn:active{
  background:rgba(22,40,31,.12);
  transform:translateY(-50%);
}

.ver-clave > .ver-clave-btn:focus-visible{
  outline:2px solid var(--ambar, #d69e2e);
  outline-offset:1px;
}

/* Cuando la contraseña está a la vista, el ojito queda marcado: es la
   única señal de que lo que se ve en la pantalla se puede leer. */
.ver-clave > .ver-clave-btn[aria-pressed="true"]{
  color:#39443c;
  background:rgba(22,40,31,.08);
}

/* ---------------------------------------------------------------------
   La caja de entrada de los dos paneles
   ---------------------------------------------------------------------
   Ahí los campos llevan el texto centrado. Con lugar libre sólo a la
   derecha, el texto se corre 22 px a la izquierda y "Tu contraseña"
   queda descentrado justo abajo de "Tu correo", que sí está centrado.
   Se deja el mismo lugar de los dos lados y sigue centrado.

   El campo tiene su propio margen abajo; la caja que lo envuelve no
   lleva ninguno, así que la separación entre campos no cambia.
   --------------------------------------------------------------------- */
.login-card .ver-clave input{
  padding-left:44px !important;
}

/* En un teléfono el dedo necesita algo más de blanco alrededor */
@media (max-width:560px){
  .ver-clave input{ padding-right:46px !important }
  .ver-clave > .ver-clave-btn{ width:34px;height:34px }
  .ver-clave > .ver-clave-btn svg{ width:20px;height:20px }
}

/* Quien pidió menos movimiento, sin transiciones */
@media (prefers-reduced-motion: reduce){
  .ver-clave > .ver-clave-btn{ transition:none }
}