/* Ojo para mostrar/ocultar la contraseña. El envoltorio no cambia el ancho ni el flujo
   del campo: hereda su forma de mostrarse, así funciona igual dentro de una rejilla,
   de un flex o de un formulario normal. */
.pw-wrap {
    position: relative;
    display: block;
    width: 100%;
    /* Si el campo estaba dentro de una fila flexible, el envoltorio pasa a ser el
       elemento flexible: hereda el reparto de espacio que antes tenía el campo. */
    flex: 1 1 auto;
    min-width: 0;
}

/* El campo llena el envoltorio (antes podía ser él quien crecía dentro del flex)
   y deja hueco a la derecha para que el texto no pase por debajo del icono. */
.pw-wrap > input[type="password"],
.pw-wrap > input[type="text"] {
    width: 100%;
    padding-right: 2.6rem;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: .25rem;
    margin: 0;
    cursor: pointer;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pw-toggle:hover { color: #1e293b; }

.pw-toggle:focus-visible {
    outline: 2px solid var(--sys-accent, #3498db);
    outline-offset: 1px;
}

/* Sobre fondos oscuros (cabeceras, modales de tema oscuro) el gris se pierde. */
.pw-wrap.on-dark .pw-toggle { color: rgba(255,255,255,.7); }
.pw-wrap.on-dark .pw-toggle:hover { color: #fff; }