/* Reusable password toggle styles
   To customize color globally, override --password-toggle-color in any stylesheet or inline <style>.
*/
:root {
  --password-toggle-color: #1779ba; /* default */
  --password-toggle-hover-opacity: .78; /* hover feedback */
}

.input-with-toggle { position: relative; }
.input-with-toggle input { padding-right: 2.5rem; }
.input-with-toggle .toggle-password {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--password-toggle-color); cursor: pointer;
  padding: .25rem; line-height: 0; display: inline-flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
  /* Fuerte reset contra estilos de frameworks/navegador */
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Refuerzo: eliminar cualquier recuadro residual del botón */
.input-with-toggle button.toggle-password {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Firefox: elimina borde interior de botones */
.input-with-toggle .toggle-password::-moz-focus-inner { border: 0; padding: 0; }
/* No border/outline on focus/hover/active (mouse or click) */
.input-with-toggle .toggle-password:focus,
.input-with-toggle .toggle-password:hover,
.input-with-toggle .toggle-password:active { outline: none; box-shadow: none; background: transparent !important; border: 0 !important; }
/* Hover feedback: same color, slightly more opaque */
.input-with-toggle .toggle-password:hover { opacity: var(--password-toggle-hover-opacity); }
/* Opcional: muestra anillo de enfoque solo con teclado */
.input-with-toggle .toggle-password:focus-visible { outline: 2px solid var(--password-toggle-color); outline-offset: 2px; }
/* No muestres el anillo al cargar o con mouse, hasta que el usuario use Tab */
body:not(.user-is-tabbing) .input-with-toggle .toggle-password:focus-visible { outline: none; }
.toggle-password svg { width: 1.1rem; height: 1.1rem; }
.toggle-password .icon-eye-off { display: none; }
.toggle-password[aria-pressed="true"] .icon-eye { display: none; }
.toggle-password[aria-pressed="true"] .icon-eye-off { display: inline; }
/* Hide native Edge/IE reveal icon */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; width: 0; height: 0; }