/* Toggle de exibir/ocultar senha — genérico para qualquer
   campo type=password, via templates/partials/_password_toggle_field.html */
.password-toggle-wrapper {
  position: relative;
}

.password-toggle-input {
  padding-right: 2.5rem !important;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 0.375rem;
  line-height: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease-in-out;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
  opacity: 0.9;
}

/* O anel de foco é `--focus-ring`, não a cor da ação (Componentes §1). Esta
   regra lia `--bs-primary`, um nome que o Bootstrap compilado nunca lê e que a
   ponte passou a redefinir: a linha antiga teria transformado este anel no verde
   da marca sem que nada dissesse, e o hex de fallback o deixava azul em todo
   lugar onde a variável não existia. */
.password-toggle-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.password-toggle-btn img {
  width: 1.1rem;
  height: 1.1rem;
}