/* ============================================================================
   Botón de «ver la contraseña» — estilos.

   A propósito NO usa variables de color ni depende de ninguna otra hoja: este
   fichero y `ver-clave.js` se copian tal cual a cualquier app de la casa
   (Galería, Migrate, Control Horario, Nóminas…) y funcionan solos.

   El color se hereda del campo, así que se adapta al tema de cada app sin
   tocar nada.
   ========================================================================== */

.campo-clave {
  position: relative;
  display: block;
}

/* Hueco a la derecha para que el texto nunca pase por debajo del botón. */
.campo-clave > input {
  padding-right: 48px;
}

.ver-clave {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: .55;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  line-height: 0;
  transition: opacity .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}

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

.ver-clave:hover { opacity: 1; background: rgba(128, 128, 128, .14); }
.ver-clave:active { background: rgba(128, 128, 128, .22); }
.ver-clave:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Encendido: se ve la contraseña. En rojo Microzone para que quede claro. */
.ver-clave[aria-pressed="true"] { opacity: 1; color: #FF2D2D; }

@media (prefers-reduced-motion: reduce) {
  .ver-clave { transition: none; }
}