/* ===========================================================================
   GAIA Studio — auth.css
   Formulario de acceso. Se usa en la portada y en el registro, así que aquí
   solo va lo que es EXCLUSIVO del acceso.

   El campo con marco (`.input-group.-framed`), el botón pegado (`.input-addon`)
   y el icono guía (`.input-lead`) NO viven aquí: son componentes compartidos y
   están en components.css. Definirlos en este archivo los dejaba fuera de las
   pantallas de /super, que los usan sin cargar este CSS.
   =========================================================================== */

/* Los DOS ojos vienen en el HTML y aquí se enseña el que toca, según el
   aria-pressed que mueve auth.js. Así el JavaScript nunca escribe SVG.
   Ojo cerrado = "mostrar"; ojo abierto = "ocultar", que es lo que va a pasar
   si lo tocas — el icono anuncia la ACCIÓN, no el estado actual. */
.input-addon[data-toggle-password] .ic { display: none; }
.input-addon[data-toggle-password][aria-pressed="false"] svg:first-child,
.input-addon[data-toggle-password][aria-pressed="true"]  svg:last-child { display: block; }

/* El error del acceso aparece bajo el formulario, no en un toast: un aviso
   flotante desaparece antes de que la persona termine de leerlo. */
.field-error[data-login-error] {
  margin: 0;
  padding: .625rem .75rem;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-radius: var(--radius-sm);
  border: var(--bw) solid var(--danger);
}

/* .auth-shell / .auth-card NO se definen aquí a propósito: ya viven en
   layout.css con el centrado a prueba de pantallas chicas (flex + margin:auto,
   para que la tarjeta nunca se salga por la derecha ni deje su borde superior
   fuera de alcance). Redefinirlas aquí las pisaría, porque este archivo carga
   después. */