Error de autenticación.

<section class="ui-sample ui-feedback" data-auth-error="true" role="alert"><h3>No pudimos iniciar la sesión</h3><p>El proveedor canceló o venció la solicitud. No se creó una sesión.</p><code>AUT-408 · solicitud 7F2A</code><div class="ui-actions"><a class="btn btn--primary" href="/auth/login">Intentar otra vez</a><a class="btn btn--secondary" href="#soporte">Solicitar ayuda</a></div></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-auth-error="true" role="alert"><h3>No pudimos iniciar la sesión</h3><p>El proveedor canceló o venció la solicitud. No se creó una sesión.</p><code>AUT-408 · solicitud 7F2A</code><div class="ui-actions"><a class="btn btn--primary underline underline-offset-4" href="/auth/login">Intentar otra vez</a><a class="btn btn--secondary underline underline-offset-4" href="#soporte">Solicitar ayuda</a></div></section>

export interface AuthErrorProps {
  title?: string;
  /** Qué falló y si quedó o no una sesión creada. */
  description?: string;
  /** Dato técnico para soporte en monoespaciado: código de error e id de la solicitud. */
  detail?: string;
  retryLabel?: string;
  /** Destino del reintento; por defecto, la entrada de cis-auth. */
  retryHref?: string;
  supportLabel?: string;
  supportHref?: string;
  className?: string;
}

/**
 * Aviso de error al iniciar sesión, para cuando el proveedor rechaza, cancela o vence la solicitud de acceso.
 *
 * Usa `role="alert"`. Incluye un dato técnico que la persona puede citar al pedir ayuda.
 *
 * @example <AuthError description="El proveedor canceló o venció la solicitud. No se creó una sesión." detail="AUT-408 · solicitud 7F2A" />
 * @example <AuthError title="Tu cuenta no tiene acceso" description="Iniciaste sesión, pero esta cuenta no tiene permiso para entrar a este producto. Pide acceso a quien administra tu organización." detail="AUT-403 · solicitud 9C41" retryLabel="Usar otra cuenta" retryHref="/auth/login?prompt=select_account" supportLabel="Pedir acceso" />
 */
export function AuthError({
  title = "No pudimos iniciar la sesión",
  description = "El proveedor canceló o venció la solicitud. No se creó una sesión.",
  detail = "AUT-408 · solicitud 7F2A",
  retryLabel = "Intentar otra vez",
  retryHref = "/auth/login",
  supportLabel = "Solicitar ayuda",
  supportHref = "#soporte",
  className,
}: AuthErrorProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-auth-error role="alert">
      <h3>{title}</h3>
      {description ? <p>{description}</p> : null}
      {detail ? <code>{detail}</code> : null}
      {retryLabel || supportLabel ? (
        <div className="ui-actions">
          {retryLabel ? <a className="btn btn--primary" href={retryHref}>{retryLabel}</a> : null}
          {supportLabel ? <a className="btn btn--secondary" href={supportHref}>{supportLabel}</a> : null}
        </div>
      ) : null}
    </section>
  );
}