/* _bin/web/ojo_clave.css
   Cosmetica del ojo para ver la clave. La GEOMETRIA no esta aca: la escribe ojo_clave.js como
   estilo inline, a proposito, para que un sitio que se olvide de incluir esta hoja igual tenga
   el ojo en su lugar y funcionando, apenas sin hover ni anillo de foco. Al reves, un archivo
   olvidado dejaria el boton tirado debajo del campo. */

.ojo-clave { opacity: .6; transition: opacity .12s ease, color .12s ease; }
.ojo-clave:hover,
.ojo-clave[aria-pressed="true"] { opacity: 1; }

/* El anillo de foco va por dentro: el boton esta pegado al borde derecho del campo y un
   `outline-offset` positivo lo dibuja por arriba del borde del input. */
.ojo-clave:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; border-radius: 6px; }

/* EL ENVOLTORIO NO LLEVA `width`, Y ES LO QUE LO HACE SERVIR EN LOS DOS CASOS. Es un elemento
   de bloque: en un contexto de bloque un `width:auto` LLENA el ancho --los campos fluidos de
   eprom-- y como item de un contenedor flex se ENCOGE a su contenido --el campo de 200px fijos de
   las compuertas de consenso--. Declarar `width:100%` rompia el segundo caso: el envoltorio se
   estiraba a todo el ancho del grupo y el ojo quedaba a la derecha del campo, afuera.
   Los margenes los sigue poniendo el .css del sitio sobre el propio input. */