/* Lonja · invitacion.css · pantallas de acceso SIN sesión que no son el login:
   /invitacion, /olvide, /2fa/verificar-login. Se cargan tras base.css y login.css
   (reutilizan .acceso-hero / .acceso-form / .lg-clave del login: mismo patrón, ver DESIGN.md). */
.acceso-form .card p { margin: 0 0 10px; color: var(--tinta-2); font-size: 14.5px; }
.acceso-form .card p.acceso-pie { margin: 14px 0 0; }
.acceso-form .estado-ok { display: flex; align-items: flex-start; gap: 10px; color: var(--tinta); font-size: 15px; margin-bottom: 8px; }
.acceso-form .estado-ok .ico { color: var(--vivo-tinta); width: 28px; height: 28px; flex: none; }
.acceso-form .estado-mal .ico { color: var(--rojo); }
.acceso-form input.codigo { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: .14em; text-align: center; min-height: 56px; }
.acceso-form .mini { display: block; margin-top: 6px; }
.acceso-form .ok-icono { width: 52px; height: 52px; border-radius: 50%; background: var(--vivo-suave); color: var(--vivo-tinta); display: flex;
                         align-items: center; justify-content: center; margin: 0 0 10px; }
.acceso-form .ok-icono .ico { width: 28px; height: 28px; }
.acceso-form .ok-icono.mal { background: var(--rojo-suave); color: var(--rojo-tinta); }