/* auth.css — landing pública + login/registro/recuperar/reclamar.

   FASE 1 (2026-08-01): las pantallas de entrada se rediseñaron según el prototipo
   `lidera-ingresar.html` de Majo. La estructura es portada (vino con grano + logo +
   filete + saludo) sobre hoja crema encuadernada.

   Requiere tokens.css y marca.css cargados antes. */

/* ============================================================
   PORTADA — pantalla de entrada (login, registro, recuperar, reclamar)
   ============================================================ */
.body-portada {
  min-height: 100dvh;
  background: var(--burgundy-dark);
  display: flex;
  justify-content: center;
  margin: 0;
}

.portada-pantalla {
  width: 100%;
  max-width: var(--max-width-phone);
  min-height: 100dvh;
  position: relative;
  /* Antes era `overflow: hidden` a secas, y eso RECORTABA el formulario.

     El de «Crear cuenta» es más alto que una pantalla de teléfono —más todavía con
     el teclado abierto, o si el navegador está a otra escala— así que lo que
     sobresalía se cortaba y no había forma de scrollear hasta el final. Lo último
     del formulario es «¿Ya tienes cuenta? Inicia sesión», que era exactamente lo
     que desaparecía: quien se equivocaba de pantalla quedaba sin salida.

     Se conserva el recorte horizontal, que es para lo que estaba: el grano de
     ::after y el filete no deben desbordar a los costados. Vertical queda libre.

     `clip` y no `hidden`: con `overflow-x: hidden` el navegador obliga al otro eje a
     `auto`, y entonces el que scrollea es esta caja y no la página — el gesto queda
     atrapado adentro y el scroll del documento no llega al final. `clip` recorta sin
     crear caja de scroll, así que la página scrollea como siempre. Donde no esté
     soportado, la declaración se ignora y no hay recorte lateral: se ve un poco de
     grano de más, que es infinitamente mejor que un formulario cortado. */
  overflow-x: clip;
  overflow-y: visible;
  background: var(--cover-gradient);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 46px) 0 0;
}

/* Grano finísimo: le saca el plano digital al vino. Es un SVG inline, no una imagen. */
.portada-pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.portada {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 28px 44px;
}

/* Logo provisional en PNG, extraído del prototipo. Reemplazar por
   /assets/img/logo-lidera-claro.svg cuando Majo mande el vectorial. */
.portada-logo {
  display: block;
  width: min(62%, 248px);
  height: auto;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(14px);
  animation: subir 0.9s cubic-bezier(0.22, 0.7, 0.3, 1) 0.1s forwards;
}

.anim-filete {
  opacity: 0;
  animation: aparecer 0.7s ease 0.62s forwards;
}
.anim-filete i {
  transform: scaleX(0);
  transform-origin: right center;
  animation: trazar 0.8s cubic-bezier(0.5, 0, 0.2, 1) 0.62s forwards;
}
.anim-filete i:last-child { transform-origin: left center; }

.portada-saludo {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-min-nav);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Accesibilidad: el prototipo usa .62 sobre vino; se sube al piso legible. */
  color: var(--on-wine-soft);
  opacity: 0;
  animation: aparecer 0.7s ease 0.78s forwards;
}

/* ---------- hoja de formulario ---------- */
.hoja {
  position: relative;
  z-index: 1;
  background: var(--cream);
  border-radius: 30px 30px 0 0;
  padding: 38px 28px calc(env(safe-area-inset-bottom) + 34px);
  box-shadow: 0 -26px 60px rgba(20, 3, 2, 0.5);
  opacity: 0;
  transform: translateY(26px);
  animation: subir 0.95s cubic-bezier(0.22, 0.7, 0.3, 1) 0.5s forwards;
}
/* Filo dorado superior: la hoja "encuadernada" a la portada. */
.hoja::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(161, 122, 60, 0.55), transparent);
}

.hoja h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.1;
  color: var(--burgundy);
  margin: 0;
}
.hoja-ayuda {
  margin: 8px 0 26px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--text-soft);
}

/* ---------- campos ---------- */
.campo { margin-bottom: 18px; }
.campo label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.campo label svg {
  width: 13px;
  height: 13px;
  stroke: var(--gold);
  fill: none;
}

.campo input,
.campo select {
  width: 100%;
  font-family: var(--font-body);
  /* 16px es deliberado: por debajo de eso iOS hace zoom al enfocar el campo. */
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(161, 122, 60, 0.28);
  border-radius: 13px;
  padding: 15px 16px;
  min-height: var(--touch-min);
  transition: border-color var(--transition-suave), box-shadow var(--transition-suave), background var(--transition-suave);
}
.campo input::placeholder { color: rgba(36, 17, 16, 0.42); font-weight: 300; }
.campo input:hover { border-color: rgba(161, 122, 60, 0.45); }
.campo input:focus,
.campo select:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(161, 122, 60, 0.16);
}
.campo input[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- botón principal ---------- */
.btn-entrar {
  width: 100%;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  background: var(--burgundy);
  border: 0;
  border-radius: 14px;
  padding: 17px;
  min-height: var(--touch-min);
  cursor: pointer;
  transition: background 0.22s ease, transform 0.12s ease, box-shadow 0.22s ease;
  box-shadow: 0 8px 20px rgba(64, 9, 6, 0.22);
}
.btn-entrar svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
.btn-entrar:hover { background: var(--burgundy-high); box-shadow: 0 10px 26px rgba(64, 9, 6, 0.3); }
.btn-entrar:active { transform: translateY(1px); }
.btn-entrar:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- enlaces del pie ---------- */
.enlace-olvido {
  display: block;
  text-align: center;
  margin: 22px auto 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--burgundy);
  text-decoration: none;
  border-bottom: 1px solid rgba(64, 9, 6, 0.3);
  padding-bottom: 2px;
  width: fit-content;
  transition: color var(--transition-suave), border-color var(--transition-suave);
}
.enlace-olvido:hover { color: var(--gold); border-color: var(--gold); }

.enlace-cuenta {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(161, 122, 60, 0.2);
  text-align: center;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-soft);
}
.enlace-cuenta a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(161, 122, 60, 0.5);
  padding-bottom: 1px;
  transition: color var(--transition-suave), border-color var(--transition-suave);
}
.enlace-cuenta a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- segundo camino: el código que pasa la coach ----------
   Va debajo del formulario de siempre y cerrado por defecto. La vía principal sigue
   siendo el correo; esto es la salida cuando el correo no llega. */
.otra-via { margin-top: 26px; }
.otra-via .filete { margin-bottom: 18px; }

.enlace-boton {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 4px 0;
  text-align: center;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--burgundy);
  cursor: pointer;
  transition: color var(--transition-suave);
}
.enlace-boton:hover { color: var(--gold); }
.otra-via form { margin-top: 16px; }

/* ---------- avisos dentro de la hoja ---------- */
.hoja .field-error {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 6px;
  display: none;
}
.hoja .field-error.visible { display: block; }

.hoja #connection-error,
.hoja #gate-message {
  display: none;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.hoja #connection-error {
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  color: var(--danger);
}
.hoja #gate-message {
  background: rgba(161, 122, 60, 0.1);
  border-left: 3px solid var(--gold);
  color: var(--text-body);
}

/* ---------- campo con error: se ve, se enfoca y pulsa ----------
   Antes el mensaje aparecía debajo del campo y nada más. En un formulario de 9
   campos, si el error quedaba arriba y la persona estaba abajo apretando el botón,
   parecía que el botón no hacía nada. */
.campo-resaltado {
  animation: pulso-error 0.75s cubic-bezier(0.22, 0.7, 0.3, 1);
  border-radius: 14px;
}
@keyframes pulso-error {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(121, 31, 31, 0); }
  35%  { transform: scale(1.03); box-shadow: 0 0 0 5px rgba(121, 31, 31, 0.16); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(121, 31, 31, 0); }
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.campo input[aria-invalid="true"]:focus,
.campo select[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(121, 31, 31, 0.16);
}
/* El label del campo con error también se tiñe, para ubicarlo de un vistazo. */
.campo:has(input[aria-invalid="true"]) label,
.campo:has(select[aria-invalid="true"]) label { color: var(--danger); }
.campo:has(input[aria-invalid="true"]) label svg,
.campo:has(select[aria-invalid="true"]) label svg { stroke: var(--danger); }

/* La fila de términos no es un .campo: su mensaje de error vive suelto debajo.
   Se lo pega visualmente a la casilla para que se entienda a qué corresponde. */
.checkbox-row + .field-error { margin: -12px 0 18px; }
.checkbox-row:has(input[aria-invalid="true"]) { color: var(--danger); }
.checkbox-row:has(input[aria-invalid="true"]) input { outline: 2px solid var(--danger); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .campo-resaltado { animation: none; }
}

.aviso-exito {
  background: rgba(59, 109, 17, 0.09);
  border-left: 3px solid var(--success);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-body);
  margin-top: var(--space-4);
}

/* La checkbox de términos y la fuerza de contraseña viven en la hoja del registro. */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* La etiqueta tambien es tactil: en la practica se toca el texto, no el cuadradito. */
  min-height: var(--touch-min);
  cursor: pointer;
  font-size: var(--font-min-body);
  color: var(--text-soft);
  margin-bottom: 18px;
  line-height: 1.5;
}
.checkbox-row input {
  /* `width: auto` y `min-height: 0` estaban para que la casilla no heredara el ancho
     completo de los campos de texto. El efecto colateral era que quedaba en los 13px
     por defecto del navegador — el control obligatorio para crear cuenta, y el mas
     dificil de acertar con el dedo. Se le da tamaño propio en vez de dejarlo en auto. */
  width: 22px;
  height: 22px;
  margin-top: 1px;
  min-height: 22px;
  accent-color: var(--burgundy);
}
.password-strength { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.pwa-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--locked-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
  margin-top: var(--space-4);
}

/* Hoja más angosta para formularios largos en pantallas grandes. */
.hoja--ancha { padding-left: 24px; padding-right: 24px; }

@media (max-height: 700px) and (max-width: 899px) {
  .portada-pantalla { padding-top: calc(env(safe-area-inset-top) + 30px); }
  .portada-logo { width: min(52%, 200px); }
  .portada { padding-bottom: 22px; }
  .hoja { padding-top: 30px; }
}

/* ============================================================
   BIENVENIDA DE MAJO
   Va debajo del formulario, donde antes quedaba un vacío de vino. La foto entra
   con el mismo gesto de la marca: filete dorado, Playfair para el saludo y la
   firma, y un velo suave abajo para que el texto siempre se lea sobre la imagen.
   ============================================================ */
.bienvenida {
  position: relative;
  z-index: 1;
  background: var(--burgundy-dark);
  padding: 40px 28px calc(env(safe-area-inset-bottom) + 44px);
  text-align: center;
  color: var(--cream);
}
.bienvenida-foto {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  /* El encuadre original la deja a la izquierda del cuadro: se centra en su cara. */
  object-position: 32% 22%;
  border: 1px solid rgba(201, 164, 92, 0.5);
  box-shadow: 0 10px 30px rgba(20, 3, 2, 0.45);
}
.bienvenida .filete { margin: 22px auto 0; }
.bienvenida-saludo {
  margin: 16px 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: 26px;
  line-height: 1.15;
  color: var(--gold-light);
}
.bienvenida-texto {
  margin: 10px auto 0;
  max-width: 42ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--on-wine-soft);
}
.bienvenida-firma {
  margin: 18px 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  color: var(--cream);
}

/* ============================================================
   ESCRITORIO — dos columnas
   En móvil la pantalla es portada arriba + hoja abajo, como el prototipo. En
   escritorio, mantener ese mismo lienzo de 430px centrado dejaba una tira angosta
   con dos franjas de vino vacías a los lados. Acá la misma estructura se abre en
   dos columnas: la portada ocupa la mitad izquierda (el vino, el logo y el filete
   respiran) y la hoja crema se convierte en la columna derecha con el formulario
   centrado verticalmente. No cambia ni un color ni un componente: es el mismo
   diseño, distribuido para una pantalla ancha.
   ============================================================ */
@media (min-width: 900px) {
  .body-portada {
    align-items: stretch;
    background: var(--burgundy-dark);
  }

  .portada-pantalla {
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr minmax(430px, 40%);
    /* Fila 1: logo. Fila 2: bienvenida. La hoja del formulario cruza las dos. */
    grid-template-rows: auto auto;
    align-content: center;
    padding-top: 0;
    overflow: visible;
  }
  /* El grano cubre solo la columna de la portada, no el formulario. */
  .portada-pantalla::after {
    right: min(40%, calc(100% - 430px));
  }

  .portada {
    grid-column: 1;
    grid-row: 1;
    padding: 56px 56px 24px;
    justify-content: flex-end;
  }

  /* En escritorio la bienvenida acompaña al logo en la columna del vino, en vez de
     empujar el formulario hacia abajo. Sin fondo propio: ya está sobre el vino. */
  .bienvenida {
    grid-column: 1;
    grid-row: 2;
    background: transparent;
    padding: 0 56px 56px;
  }
  .bienvenida-foto { width: 132px; height: 132px; }
  .bienvenida-texto { max-width: 46ch; }
  .portada-logo { width: min(58%, 300px); }
  .portada-saludo { font-size: 13px; margin-top: 22px; }
  .filete--centrado { width: 240px; }

  .hoja {
    grid-column: 2;
    grid-row: 1 / -1;
    border-radius: 0;
    box-shadow: -30px 0 70px rgba(20, 3, 2, 0.45);
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    /* `safe` es la parte importante. Con `center` a secas, un formulario más alto
       que la pantalla se recorta por ARRIBA y por abajo: en registro el título
       "Crea tu cuenta" quedaba en top:-61px, o sea fuera de la vista antes de que
       la persona tocara nada, y no había forma de subir hasta él. `safe center`
       centra solo mientras entre; cuando no entra, se comporta como flex-start y
       todo el contenido queda alcanzable. */
    justify-content: center;
    justify-content: safe center;
    overflow-y: auto;
    max-height: 100dvh;
    /* En escritorio la hoja entra desde la derecha, no desde abajo. */
    transform: translateX(26px);
    animation-name: entrar-lateral;
  }
  .hoja::before {
    top: 34px;
    bottom: 34px;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(161, 122, 60, 0.55), transparent);
  }
  .hoja h1 { font-size: 34px; }

  /* Los formularios largos (registro, reclamar) usan dos columnas de campos para
     no obligar a un scroll interminable en una pantalla que tiene espacio de sobra. */
  .hoja--ancha { padding: 48px 44px; }
  .hoja--ancha form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
  }
  .hoja--ancha form > .campo { margin-bottom: 16px; }
  .hoja--ancha form > .checkbox-row,
  .hoja--ancha form > .btn-entrar,
  .hoja--ancha form > .field-error,
  .hoja--ancha form > #terminos-error { grid-column: 1 / -1; }
}

/* Notebooks: escritorio en ancho, pero con poca altura real.
   Un portátil típico de 1366x768, o cualquier pantalla con la escala de Windows
   en 125% o 150%, deja menos de 800px de alto útil. Ahí el formulario de registro
   (829px) no entraba y obligaba a hacer scroll dentro del panel — que es lo que
   pasaba: había que alejar el zoom para poder usarlo.
   Se aprieta el espaciado, no se achica la letra: se sigue leyendo igual.

   `pointer: fine` limita esto al mouse. Los 56px de alto de los campos existen para
   que el dedo acierte en el teléfono; con mouse no hacen falta y son justamente lo
   que sobra. Una tablet con teclado sigue teniendo los campos grandes. */
@media (min-width: 900px) and (max-height: 850px) and (pointer: fine) {
  .hoja { padding: 26px 48px; }
  .hoja h1 { font-size: 26px; margin-bottom: 4px; }
  .hoja-ayuda { margin-bottom: 14px; font-size: 13px; }

  .hoja--ancha { padding: 22px 44px; }
  .hoja--ancha form > .campo { margin-bottom: 8px; }
  .hoja--ancha .campo input,
  .hoja--ancha .campo select { height: 46px; min-height: 46px; }
  .hoja--ancha .campo label { margin-bottom: 3px; }
  .hoja--ancha .checkbox-row { margin: 4px 0; }
  .hoja--ancha .btn-entrar { margin-top: 4px; min-height: 50px; }
  .hoja--ancha .enlace-cuenta { margin-top: 10px; padding-top: 10px; }
}

/* Pantallas de escritorio realmente bajas (600px o menos de alto útil): ahí no hay
   apretado que alcance, el formulario no entra y punto. Lo que se cambia es QUIÉN
   hace el scroll: en vez de una barra interna dentro del panel — que mucha gente no
   ve y que ignora la rueda del mouse si el puntero está sobre la columna del logo —
   scrollea la página entera, con la barra de siempre del navegador. */
@media (min-width: 900px) and (max-height: 700px) and (pointer: fine) {
  .portada-pantalla { align-content: start; }
  .hoja {
    max-height: none;
    overflow: visible;
    justify-content: flex-start;
  }
}

@keyframes entrar-lateral {
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .portada-logo, .hoja, .anim-filete, .anim-filete i, .portada-saludo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Pantallas muy anchas: se limita el ancho total para que la portada no quede
   con el logo perdido en el medio de un océano de vino. */
@media (min-width: 1500px) {
  .portada-pantalla { grid-template-columns: 1fr minmax(480px, 620px); }
}

/* ============================================================
   LANDING PÚBLICA (index.html)
   ============================================================ */
.hero {
  text-align: center;
  padding: var(--space-7) var(--space-4) var(--space-6);
  background: var(--header-gradient);
  color: var(--cream);
}
.hero .eyebrow { font-size: var(--font-min-nav); letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-3); }
.hero h1 { color: var(--cream); font-size: 32px; max-width: 640px; margin: 0 auto var(--space-3); }
.hero .text-script { display: block; color: var(--gold-light); }
.hero p.lead { max-width: 480px; margin: 0 auto var(--space-5); color: var(--on-wine-soft); font-size: 15px; }
.hero .hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero .btn-accent { padding: 14px 22px; font-size: 15px; min-height: var(--touch-min); }
.hero .btn-outline { background: transparent; border-color: rgba(252, 243, 238, 0.5); color: var(--cream); padding: 14px 22px; font-size: 15px; min-height: var(--touch-min); }
.hero .btn-outline:hover { background: rgba(252, 243, 238, 0.12); }

.beneficios { padding: var(--space-6) var(--space-4); max-width: 960px; margin: 0 auto; }
.beneficios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.beneficio-card { text-align: center; padding: var(--space-5); }
.beneficio-card .ti { font-size: 28px; color: var(--gold); margin-bottom: var(--space-2); }
.beneficio-card h3 { margin-bottom: var(--space-2); }
.beneficio-card p { font-size: var(--font-min-body); color: var(--text-soft); margin: 0; }

.landing-footer { text-align: center; padding: var(--space-5); font-size: 12.5px; color: var(--text-muted); }

/* ---- Ayuda por campo y ojito de contraseña ---- */
.campo-ayuda {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  /* --text-soft es el piso legible fijado en tokens.css: esta pista se lee en un
     teléfono a la luz del día, que es donde se registran las clientas. */
  color: var(--text-soft);
}
.campo-clave { position: relative; display: block; }
.campo-clave input { width: 100%; padding-right: 50px; }
.ojito {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center;
  /* 44px, que es el minimo tactil del contrato visual. Con 40 el dedo erra y termina
     enfocando el campo en vez de mostrar la clave. */
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-soft); border-radius: 8px;
}
.ojito:hover { color: var(--ink); }
.ojito:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ojito svg { width: 20px; height: 20px; }
.campo-ayuda--ok { color: var(--success); }
.campo-ayuda--aviso { color: #89601F; }