/* GENERADO por build.js desde ../../../../../interna/va-app-kit/kit/clave.css — NO EDITAR ACÁ.
   Fuente de verdad: interna/va-app-kit/. */
/* clave.css — El campo de contraseña de las apps de VA (PATRONES.md, patrón 8).
 *
 * Va aparte de kit.css a propósito: los portales con shell propio (Che, La Negra) no
 * pueden enlazar kit.css sin cambiar de aspecto, y el campo de contraseña sí tiene que
 * ser el mismo en todos. Este archivo se sincroniza a TODAS las apps, usen el kit o no.
 *
 * Por eso no depende de que existan los tokens del contrato: cada `var()` lleva su
 * fallback y el ícono hereda `currentColor`. Sobre un campo claro o uno oscuro, funciona.
 * Lo único que asume es que el input de adentro es hijo directo del envoltorio.
 */

/* ---------- El campo con su ojo ---------- */
.clave { position: relative; display: block; }
/* El padding le hace lugar al botón: sin esto el texto pasa por abajo del ojo. */
.clave > input { width: 100%; padding-right: 42px; }

.clave__ojo {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; background: none; line-height: 0;
  color: inherit; opacity: .55; cursor: pointer;
  border-radius: var(--radio-sm, 4px);
  transition: opacity .12s;
}
.clave__ojo:hover { opacity: 1; }
/* El anillo va por dentro (offset negativo): el botón está pegado al borde del input y
   por fuera quedaría tapado. No se saca el foco sin poner otra cosa en su lugar. */
.clave__ojo:focus-visible { opacity: 1; outline: 2px solid var(--foco, currentColor); outline-offset: -2px; }
.clave__ojo .ico { display: inline-flex; }
.clave__ojo svg { display: block; }

/* Un ojo por estado, y el que no corresponde se esconde. Alternar el `d` del path sería
   una sola etiqueta, pero deja el dibujo armado en JS en vez de en el markup. */
.clave__ojo [data-ojo-ver] { display: inline-flex; }
.clave__ojo [data-ojo-tapar] { display: none; }
.clave__ojo.is-on [data-ojo-ver] { display: none; }
.clave__ojo.is-on [data-ojo-tapar] { display: inline-flex; }

/* Edge y los IE dibujan su propio botón de revelar arriba del nuestro: dos ojos en el
   mismo campo, y el del sistema no respeta ningún estado nuestro. */
.clave > input::-ms-reveal,
.clave > input::-ms-clear { display: none; }

/* ---------- El aviso de las dos claves ---------- */
/* Vive abajo del par y ocupa su lugar aunque esté vacío: si apareciera y desapareciera,
   el botón de guardar se movería justo cuando la persona lo va a apretar. */
.clave-aviso {
  font-size: 12.5px; line-height: 1.35; min-height: 1.2em;
  margin-top: -10px; margin-bottom: 14px;
  color: var(--tinta-tenue, #6b7280);
}
.clave-aviso.is-error { color: var(--error, #b42318); font-weight: 600; }
.clave-aviso.is-ok { color: var(--ok, #14733c); font-weight: 600; }

/* El campo que no coincide se marca en el campo, no sólo en el texto de abajo
   (PATRONES.md, patrón 3). */
.clave.is-error > input { border-color: var(--error, #b42318); }